<!DOCTYPE html> <html> <head> <title>Document</title> <style></style> </head> <body> <ul> <li class="class1" id="leader1>a</li> <li class="class1">b</li> <li class="class1">c</li> <li class="class2" id="leader2">d</li> <li class="class2">e</li> <li class="class2">f</li> </ul> </body> </html> |
지난 번에 설명 못한 부분이 있다. CSS 선택자 실습할 때 위와 같은 HTML 코드를 사용한 적이 있다. <ul>과 <li>는 순서 없는 리스트와 그 세부 항목을 만드는 태그라고 설명한 적이 있다. 그럼 그 나머지는 무엇일까. 지금부터 알아보겠다.
<!DOCTYPE HTML> <html> <head> <title>Document</title> <style></style> </head> <body>
</body> </html> |
<body> 태그 안의 내용은 삭제하면 위의 코드와 같다. 이게 바로 html의 기본 템플릿이다. 모든 html로 만들어진 웹페이지는 이러한 형식을 갖고 있어야 한다. 그래야 웹 브라우저가 멀쩡하게 html 파일을 읽고 해석할 수 있다. 그럼 각각의 의미를 살펴보자.
1. <!DOCTYPE html> 선언문
웹 브라우저의 입장이 되어보자. 가장 기본적인 웹페이지 파일은 html이지만 브라우저가 읽을 수 있는 파일 형식은 그보다 많다. 우선 html을 꾸미려면 css를 읽을 줄 알아야 한다. 그리고 동적인 페이지를 위한 javascript 문서도 읽을 줄 알아야 한다. 이게 가장 표준적이지만 그 외에도 xhtml 등 다양한 형식의 마크업 파일이 있다. 그럼 브라우저를 배려해서 제일 처음에 "자 이건 HTML 파일이야"라고 선언해주면, 브라우저는 헷갈리지 않고 html 파일을 읽는 방식을 떠올려서 적용할 것이다. 이게 그 선언문이다. html 버전마다 선언문이 좀 다르긴 한데, HTML5는 심플하게 이렇게만 적으면 된다.
2. <html> 태그
HTML 파일이기 때문에 <html>과 </html>로 감싸준다. 이렇게 해야 명확히 여기서부터 여기까지가 html이구나를 알 수 있다. 문서의 시작과 끝을 명시하는 태그라 할 수 있다. 여기에 <html lang="ko">와 같은 모양으로 언어를 지정해줄 수 있다. 특정 언어로 된 페이지 검색이라든가, 페이지를 읽어주는 등 웹 접근성을 위해서라든가 할 때를 위해서이다.
3. <head> 태그
사람의 머리는 그 사람에 대한 중요한 정보를 담고있다. 뇌에는 이름 등 그 사람을 구분지을 수 있는 기억이 담겨있다. 머리카락에는 그 사람 몸의 DNA 정보가 담겨있다. 사람의 특징은 그 얼굴 눈, 코, 입의 모양으로 구분되기도 한다. 마찬가지로 <head> 태그는 그 페이지를 규정할 수 있는 다양한 정보가 들어있다. 실제 본문에 보여지는 내용 외에는 다 여기 담는다고 할 수 있다.
우선 <head> 태그 안에 처음 나오는 <title> 태그를 살펴보자. 말 그대로 제목 태그다. 지금 열고있는 브라우저의 맨 위 탭을 살펴보자. 이 페이지가 열려있다면 Bortfolio라는 이 블로그의 제목이나 지금 읽고 있는 글의 제목이 나와있을 것이다. 네이버 메인 화면에 들어가면 NAVER라는 이름이 뜰 것이다. 이 제목이 <title> 태그에 담겨있다. 저 위의 코드를 브라우저로 실행하면 탭에는 Document라는 제목이 적혀있을 것이다.
그 다음 <style> 태그는 html 문서 내에서 css를 적용할 때 사용한다. 브라우저는 <style>이라는 태그를 만나면 "아 여기서부터는 CSS가 나오겠구나"라고 이해하고 </style> 태그에서 "아 여기서 CSS가 끝나는구나"라고 이해한다. 당연히 그 오프닝 태그와 클로징 태그 사이에 있는 CSS는 해당 페이지에서 적용된다.
이 외에도 <head> 태그에서 사용되는 많은 태그가 있다. 메타 정보를 담는 <meta> 태그나 스크립트 문서를 적는 <script> 태그 등은 자주 보게 될 것이다. CSS 스타일시트 등 외부 파일을 연결하는 <link> 태그도 있다. 하이퍼링크를 만드는 <a> 태그와 헷갈리면 안 된다.
4. <body> 태그
머리에 정보가 담겨있다면, 몸은 실제 만져지고 보여지는 형태를 이룬다. 페이지에서 보여져야 하는 내용은 <body> 태그 안에 담긴다. 여기서부턴 지금까지 배운 <ul>, <li>, <p>, <h1>~<h6>, <a>, <img> 태그 등을 다 사용하면 된다. 물론 여기에도 일종의 암묵적, 혹은 명시적인 규칙이 있고 더 많은 태그가 있다. 굳이 규칙은 아니라도 레이아웃을 짜기에 편한 팁 같은 것도 있다. 앞으로 쭉 배울 것이다.
살짝 언급을 하면 시맨틱 태그가 있다. 시맨틱 태그 별 기능은 없다. 우선 그 전에 <div> 태그를 알아야 한다. <div> 태그는 아무 의미가 없는 그냥 통이다. 빈 용기라고 보면 된다. <body> 태그가 서랍이라고 치자. 서랍에 담길 내용물을 한 번에 다 쏟아붇는 것보다는, 파티션을 나누는 것이 보기에도 정리하기에도 좋을 것이다. 양말은 양말대로, 팬티는 팬티대로, 티셔츠는 티셔츠대로 각각 구간을 나눠 정리하면 좋다. <div> 태그는 이 파티션을 만들어준다.
일반적인 사이트를 예로 들면 대개 맨 위에는 로고 등 웹사이트의 정체성을 알리는 그림이나 텍스트와 메뉴가 있다. 여기만 <div>에 담는다. 그리고 본문에 표시되는 내용은 또 다른 <div>에 담는다. 그리고 맨 아래 웹사이트의 정보는 다른 <div>에 담는다. 이러면 <body> 태그 안에 다시 머리 <div>, 몸 <div>, 발 <div>가 생기는 식이다. 이런 식으로 관습적으로 웹사이트를 만들다보니 사실상 레이아웃 패턴이 뻔해졌다. 그래서 각각 주로 사용되는 <div> 스타일을 이름만 바꿔 붙인 게 시맨틱 태그다. <header>, <section>, <article>, <footer>, <nav> 등이 있다. 자세한 내용은 또 포스팅 보다보면 나올 것이다. 위의 5개 태그 역시 <div>와 마찬가지로 빈 통이다. 다만 빈 통에 이름표를 붙여놨을 뿐이다. 이럼 브라우저도 해당 페이지의 구조를 이해할 수 있다. 물론 코드를 유지보수하는 사람도 훨씬 이해가 쉬워진다.
지금까지 HTML 문서의 기본 템플릿을 알아봤다. 그리고 추가적으로 쓰면서 생각나는 얘기 몇 가지. <div> 태그의 의미와 시맨틱 태그 등은 이후 실습을 통해서 배울 것이다. 어려운 내용은 아닌데 직접 만들어보지 않으면 잘 이해가 안 될 수도 있을 것 같단 생각이 들었다. 오늘은 여기서 마무리.
'DEVELOP > HTML&CSS' 카테고리의 다른 글
| [웹] HTML/CSS #13 :: 부트스트랩 (0) | 2017.12.25 |
|---|---|
| [웹] HTML/CSS #12 :: 미디어쿼리 (0) | 2017.12.01 |
| [웹] HTML/CSS #11 :: 반응형 vs 적응형 (0) | 2017.11.23 |
| [웹] HTML/CSS #10 :: <div> 태그와 시맨틱 태그 (0) | 2017.11.09 |
| [웹] HTML/CSS #8 :: CSS 선택자 (0) | 2017.11.07 |
| [웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성 (2) | 2017.11.06 |
| [웹] HTML/CSS #6 :: 속성이란? (0) | 2017.11.06 |
| [웹] HTML/CSS #5 :: HTML 기본 태그와 속성 (0) | 2017.10.31 |
