2022. 12. 21. 18:43ㆍ웹 프로그래밍(Web Programming)/HTML
[HTML이란?]
-HyperText Markup Language
-웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
[태그]
1. 태그는 <와 >를 이용해 구분합니다
2. 태그는 소문자로 씁니다.
3. 여느 태그와 닫는 태그를 정확히 입력합니다.
4. 적당히 들여 씁니다.
5. 태그는 속성과 함께 사용할 수 있습니다.
6. 포함 관계를 명확히 합니다.
[간단한 HTML 문서 만들기]
- 1번째 줄에 '!'를 입력한 뒤 'tab'을 누르면 html의 기본구조를 알 수 있다.
- line1 : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻
- line2 : lang="ko" : 현재 문서가 한글로 작성된다는 뜻
- <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그이다.
- <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하기 위해 정보들을 입력하는 부분이다.
- <body> ~ </body> : 실제로 웹 브라우저 화면에 나타날 내용이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내가 처음 만드는 HTML 문서</title>
</head>
<body>
<h1>시간이란...</h1>
<p>내일 죽을 것처럼 오늘을 살고<br>
영원히 살 것처럼 내일을 꿈꾸어라</P>
<img src="images/first.jpg">
</body>
</html>결과화면>>
[!doctype]
: 문서 유형을 지정하는 선언문
<!DOCTYPE html>
[<html> 태그]
: 웹 문서 시작을 알리는 태그
+) <meta charset="UTF-8"> : lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다.
[ <head> 태그]
: 브라우저에게 정보를 주는 태그
1. <title> 태그 - 문서 제목
2. <meta> 태그 - 문자 세트를 비롯한 문서 정보
1) 문사 세트 지정하기
화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정한다
<meta charset="UTF-8">
2) 모바일 기기 고려하기
인터넷 익스플로러 사용자까지 고려해야 하는 웹 사이트를 제작할 경우 다음과 같은 <meta> 태그를
사용해서 현재 웹 문서를 최신 표준 모드로 해석하라고 알려준다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3) 인터넷 익스플로러 브라우저 고려하기
4) 검색 엔진 고려하기
<meta> 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 수 있다
<meta name="keywords" content="html5, 웹표준"> //해당 문서의 키워드
<meta name="description" content="html5를 통해 웹 표준 공부하기"> //해당 문서의 설명
<meta name="author" content="Kyunghee Ko"> //해당 문서의 소유자 또는 제작자
3. <body> 태그 - 실제 브라우저에 표시될 내용
1) <h1> : 제목을 표시하는 태그
2) <p> : 텍스트 단락을 표시
3) <br> : 줄바꿈
4. 웹 문서에서 특수 문자 및 특수 기호 사용하기
1) 엔티티 기호
HTML Standard
HTMLLiving Standard — Last Updated 21 December 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are su
html.spec.whatwg.org
단, 엔티티 이름이나 엔티티 코드 뒤에 오는 세미콜론(;)은 꼭 붙어야 한다.
2) 윈도우에서 특수 문자 입력하기
'웹 프로그래밍(Web Programming) > HTML' 카테고리의 다른 글
| airbnb 클론 코딩 (0) | 2023.01.29 |
|---|---|
| [수코딩] [HTML/CSS] 간단한 Card UI 만들기 / 폰트어썸 / 실습 / 웹 코딩 (0) | 2023.01.17 |
| [수코딩] [HTML/CSS] Full Screen Landing Page 만들기 (배경 이미지 본문 내용 참고) / 웹코딩 / 실습 (0) | 2023.01.16 |
| PHP란?(자바스크립트와 차이) (0) | 2022.12.30 |
| [비전공자를 위한 첫 코딩 챌린지 with HTML&CSS] 06 코딩 맛보기 (0) | 2022.12.30 |