HTML은 컨텐츠를 담는 통이다. 그리고 통에는 파티션이 나눠져 있어야 내용물을 정리하기 좋다. HTML도 마찬가지다. 웹사이트의 내용은 종종 엄청 많고 복잡해지기도 한다. 그리고 혼자 작업하는 게 아니라 여러 사람들이 함께 작업하거나, 내 작업을 이후 후임자가 유지보수할 수도 있다. 그럴 때 <p>나 <hn> 같은 태그들이나 <body> 태그 안에 한 번에 담겨있으면, 웹사이트의 구조를 파악하기 어려울 것이다. 이걸 도와주는 게 <div> 태그다.
<div>는 별 내용이 없다. division의 약자인데, 말 그대로 구간을 나눈 것 뿐이다. 예를 들어 제목과 본문을 구분하고 싶다면 아래 표처럼 구간을 나눌 수 있다.
<div id = "header"> <h1>제목</h1> </div> <div id = "article"> <p>본문내용본문내용본문내용본문내용본문내용</p> </div> |
이렇게 파티션을 나눠두고, 각각 id를 지정해서 의미를 알 수 있게 하면 오랜 시간이 지난 후에 내가 작업한 코드를 다시 보거나, 다른 사람이 코드를 볼 때 이해하기 수월할 것이다. 지금이야 제목과 본문에 각각 <h1>과 <p>만 있기 때문에 수월하다. 하지만 만약 제목 구간에 이미지가 함꼐 들어가고, 본문에도 이미지로 시작한다면 어떨까? 아래와 같은 코드를 살펴보자.
<h1>제목</h1> <img src = "#"> <img src = "#"> <p>본문내용본문내용본문내용본문내용본문내용</p> |
이거 복잡하다. 우선 url 주소는 #으로 대체했다. 실제 url 주소를 넣으면 더 복잡해질 것이다. 물론 그 url 주소의 이미지를 보고 어디가 제목의 이미지고 어디가 본문의 이미지인지 확인할 수 있을 것이다. 하지만 한 눈에 들어오지 않는다. 코드는 가독성이 좋아야 한다. 위의 코드를 아래처럼 바꾸면 좀 더 읽기 좋을 것이다.
<div id = "header"> <h1>제목</h1> <img src = "#"> </div> <div id = "article"> <img src = "#"> <p>본문내용본문내용본문내용본문내용본문내용</p> </div> |
각각의 <img> 태그가 용도에 맞게 header라는 아이디를 가진 <div>와 article이라는 아이디를 가진 <div>에 들어감으로서 그 구분이 명확해졌다. HTML5 이전까지는 이러한 방식으로 웹페이지의 레이아웃을 구조화했다. 근데 여기에도 단점이 있었다. id는 코더의 임의대로 입력할 수 있다. 즉 id = "header", id = "hdr", id = "head" 등 어느 방식으로 표현해도 상관이 없었다. 어느 정도 암묵적인 약속이 있고 인수인계가 가능하면 큰 불편함은 없었지만, HTML5는 더 효율적인 방법을 만들어냈다.
바로 시맨틱 태그(Semantic Tag)다. 시맨틱을 사전에 치면 위와 같은 결과가 나온다. '의미의', '의미론적인'. <div>는 의미가 없는 단순한 통이라고 이야기했다. 그러니 별도로 id를 붙여서 의미를 부여하고 구별한다. 이 방법은 물론 좋은 방법이지만, 그 의미를 통일하면 더욱 좋을 것이다. 실제로 웹페이지를 만드는 과정에서 어느 정도 관습적인 패턴이 있기 때문에, 자주 쓰이는 것들은 표준에서 지정해 전세계적인 약속을 만드는 것이 더 효율적일 것이다. 그럼 대표적인 시맨틱 태그들을 살펴보자.
1. <header> 태그
<head> 태그와는 구분한다. <head> 태그는 <html> 태그 안에서 머리를 담당하고 그 문서의 정보를 담는 명확한 기능이 있다. 반면 <header> 태그는 <body> 내에서 머리와 같은 역할을 수행하는 내용 구간을 의미한다. 어디일까? 웹페이지의 맨 윗부분이다. 웹사이트에는 어떤 페이지에서든 일정하게 보이는 구간이 있다. 대개 로고나 이름 같은 정체성을 나타내고, 필요한 내용을 찾을 수 있도록 메뉴를 제공한다. 이건 대체로 다 비슷비슷하다. 이 블로그로 치면 맨 위의 검은 줄과 사진 슬라이드가 <header> 태그에 해당한다.
2. <footer> 태그
<body> 태그 안에서 발에 해당하는 부분이다. 맨 아래. 보면 대체로 페이지의 맨 아래에도 웹사이트의 모든 구간에서 동일한 내용을 담고 있다. 보통 주소나 전화번호 등의 연락처, 사업자등록번호나 이용약관, 개인정보처리방침, 저작권 등등 부수적인 내용이다. 이런 내용은 <footer> 태그에 담는다. 이 블로그에선 맨 아래 검은 부분에 해당한다. 내 닉네임과 사진, 최근 글과 댓글, 방문자 수, SNS 연결링크와 저작권이 표시되어있는 곳. 코드에서 <footer> 태그를 발견하면 바로 이러한 내용들이 담겨있음을 알 수 있다. 처음 보는 남의 코드, 남의 사이트를 봐도 이러한 내용이 담겨있음을 유추할 수 있을 것이다.
3. <nav> 태그
navigator의 줄임말이다. 메뉴다. 사이트의 다른 페이지를 찾아갈 수 있도록 해주는 곳. 이 블로그에서는 저 위의 Life, Learning, Trave의 메뉴와 데스크탑이면 오른쪽, 모바일이면 본문 아래의 카테고리가 <nav> 태그에 담겨있다. 별 기능은 없다. 그냥 처음 보는 코드라도 <nav>를 발견하면 페이지의 다른 구간으로 연결되는 링크가 들어있겠구나, 추론할 수 있게 해줄 뿐이다.
4. <aside> 태그
<nav> 태그와 비슷하다. 다만 사이드바임을 표시해준다. 데스크탑에서 오른쪽에 보이는 사이드바가 <aside>일 것이다. 확인은 안 해봤는데 아마 그렇게 되어있을 것이다. 웹페이지를 만든다면, 사이드바는 <aside>에 담는 게 규칙이다. 강제성은 없지만 표준에서 그렇게 정해져있다. 매너라고 보면 된다. 개인 작업물에는 아무도 신경 안 쓰겠지만 다른 사람과 함께 작업할 가능성이 조금이라도 있다면 그게 매너다. 개인 작업물도 나중을 대비해서 <aside>에 담는 게 편할 것이고. 사이드바 안에 카테고리가 있으니 <aside> 안에 <nav> 태그가 있을 것이다. 그리고 <nav> 태그와 같은 수준에서 검색, 공지사항, 달력, 태그목록 등이 있음을 이 블로그에서 확인할 수 있다.
5. <section> 태그와 <article> 태그
말 그대로 섹션을 나누고 본문을 담는 태그다. 이 블로그에서는 지금 이 글이 담긴 바로 이 페이지. 위의 헤더와 구분 되고, 옆의 사이드바와 구분되고, 아래 푸터와 구분되는 이 곳. 근데 이 두 개의 태그는 의미의 구분이 명확치가 않다. 일단 <header> 태그와 <footer> 태그 사이에 들어가는 건 확실하다. 근데 <section> 태그로 구간을 나누고 그 안에 <article>을 담아도 되고, <article> 태그로 여기가 <header> 태그랑 <footer> 태그와 구분되는 '본문'임을 알리고 그 안에서 내용에 따라 <section> 태그로 구분해도 된다. 각각 섹션과 본문을 의미한다는 것만 명확히 알고 각자의 판단에 맞게 활용하면 될 것 같다.
<header> <h1>제목</h1> <img src = "#"> </header> <article> <section> <img src = "#"> </section> <section> <p>본문내용본문내용본문내용본문내용본문내용</p> </section> </article> |
배운 시맨틱 태그들을 조금 이용해 위의 코드를 다시 구조화 시켰다. id 속성이 없어져서 코드가 더 간결해지고 읽기 좋아졌다. <article> 태그로 본문임을 표시해주고, 그 안에서 <section> 태그로 다시 이미지와 텍스트를 구분해줬다. 짧은 코드라서 오히려 더 복잡해보일 수 있다. 하지만 내용이 많아지고 페이지에 담기는 내용이 복잡할 수록 이렇게 구분을 해주는 게 훨씬 가독성이 좋다.
이 외에도 몇몇 태그들이 있는데 위의 5개가 제일 메인이다. 우선 이 정도만 알고 넘어가도 좋다. 기타 시맨틱 태그는 <figure>, <figcaption>, <caption> 등이 있다. 시맨틱 태그는 개발자 뿐만이 아니라 브라우저나 검색엔진이 페이지의 구조를 파악하는 데에도 도움을 준다. 표준을 지켜서 시맨틱 태그가 사용한 부분은 사용을 하면서 페이지를 만드는 것이 좋다.
'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 #9 :: HTML5 기본 템플릿 (0) | 2017.11.08 |
| [웹] 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 |
