'Doit! HTML5 + CSS3 웹 표준의 정석'을 참고로
공부하며 정리하는 내용입니다!
1. 기본 구조
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>1) <!doctype>
문서의 유형을 지정하는 선언문
웹 브라우저가 이 웹 문서를 한 줄씩 읽으면서 해석할 때
<!doctype html>이면, 이 선언문을 보고 이 문서는 'HTML5'로 이해하여 해석을 한다.
2) <html> </html>
웹 문서 시작과 끝을 알려주는 태그
문서의 유형이 아닌 실제 문서의 정보와 내용이 시작과 끝을 알려주는 태그이다.
끝나는 태그와 다르게 시작 태그에는 lang="ko"라는 게 있다.
lang라는 속성을 통해 이 문서가 무슨 언어인지 지정하는 것이다.
하지만 요즘 어떤 웹 사이트이든 다양한 언어가 사용되기도 한다.
이 속성을 지정하지 않고 그냥 <html></html>이라고만 해도 문제는 없다.
그렇다면 이 속성을 왜 굳이 지정할까?
- 웹 사이트에서 검색을 할 때 특정 언어로 지정하여 검색을 할 때 사용된다.
한국어로 된 문서를 찾으면 <html lang="ko">라고 된 문서를 우선적으로 검색한다.
- 화면 낭독기에서 웹 문서를 소리 내서 읽어줄 때 사용된다.
언어가 지정되어 있으면 그 언어에 맞춰 발음이나 억양, 목소리 등에 맞춰 읽어 줄 수 있다.
3) <head> </head>
브라우저에게 정보를 알려주는 태그
웹 브라우저 화면에 보이지는 않지만 웹 브라우저가 알아야 하는 정보들 있다.
이 태그 안에서 사용되는 주요 태그는 <title></title>과 <meta>이다.
4) <title> </title>
태그 이름대로 타이틀, 제목을 나타내는 태그
ex) <title>NAVER</title>
5) <meta>
문자 인코딩 및 문서 키워드, 요약 정보 등
- 문자 인코딩
<meta>를 사용할 때 가장 중요한 부분
분명 '안녕하세요'라고 입력했음에도 불구하고
이런 식을 한글이 깨지는 일이 발생한다.
웹 서버는 영어를 기본으로 하기 때문에 문자 인코딩으로 'utf-8'로 지정하는 것이다.
- 문서 정보(키워드, 요약 정보)
<meta name="description" contents="사이트 설명">
이런 식으로 사이트에 대해 짧게 설명을 입력한다.
이 설명도 <html></html>의 lang="ko"처럼 입력을 안 해도 문제는 없다.
하지만 이것도 lang="ko"와 비슷한 이유로 웹 사이트에서 검색을 하고 검색 결과에 사이트 설명을 표시가 된다.
이 두 가지 이외에도 <meta> 태그로 지정할 수 있는 것이 있다.
<head></head> 태그 안에도 <title>과 <meta>이외에 <style> 또는 <link> 등을 사용할 수 있다.
5) <body> </body>
실제 브라우저에 보이는 부분
지금까지 문서를 설정하고 정보를 입력했다면
<body>에서는 실제 우리가 웹 사이트에 보여지는 부분이 입력되는 곳이다.
이 안에서 사용되는 태그들은 앞으로 다음 글에서 알아보자.
2. HTML의 구성요소
1) Tag(태그)
위에서 계속 언급했지만
<와 >으로 묶여있는 것을 태그라고 한다. ex) <a>
태그는 3가지 종류가 있다.
- 시작 태그: <a>
- 종료 태그: </a>
- 빈 태그: <br />
예시와 언급으로 보여줬듯이 시작 태그와 종료 태그 사이에
내용이나 또 다른 태그를 입력하여 웹 사이트를 만드는 것이다.
빈 태그는 시작 태그와 종료 태그 사이에 입력할 내용이 없을 때 사용된다.
빈 태그를 <br> </br>로 사용할 수는 있다.
또 시작 태그에는 Attribute(속성)와 Value(값)을 넣을 수 있다.
<html lang="ko">를 예로 들면
lang가 속성이고
ko가 값이다.
2) Elements(요소)
엘리먼트, 요소는 시작 태그와 종료 태그까지
태그 사이의 내용까지 포함한 것을 요소라고 한다.
댓글