시맨틱(Semantic) 태그
웹개발 중 기초적인 파트중에 하나이다. 하지만, 개발을 하면서 시맨틱 규칙을 간과하고 지키지 않게 되었다. 굳이 지키지 않아도 개발은 잘 되었기 때문이다. 하지만, 문제는 유지보수하거나 코드를 다시 보게되면 더럽다는 생각이 들었다. 그런 내 자신을 보며 개념을 다시 되새기려 정리한다.
시맨틱은 html5로 넘어오면서(이것조차 오래됨) 생겼다. <span>
, <div>
, <section>
등 과 같은 태그들을 구분지어 개발과 유지보수 면에서 생산성을 향상시키기 위해 사용된다.
태그 사용할 때, 좋지않은 예
<div id="main"> <div id="container"> <div id="wrapper"> </div> </div> </div>
동일한 태그를 여러번 사용하게 되면 눈으로 보기에 몹시 좋지 않다. 이것은 class
나 id
로 구분지을 수 있지만, html 태그만으로 이러한 것들을 구분짓는 것이 훨씬 보기 좋다.
id, class같은 속성들은 CSS 스타일
, jQuery
를 사용할 때 사용이 되므로 이런 속성같고 구분짓는 것은 적합하지 않다.
공간 태그
태그들을 구분지어 사용해야되는 이유를 간략히 언급했다. 이제 태그들 중 어떤 종류가 있는지 살펴보자.
먼저 공간 태그
가 있다. 공간태그는 대표적으로 block, inline 2개만 살펴보겠다.
| | |
|---|---|
| block
| 한 줄을 통채로 차지한다. 기본적으로 width가 100% 이기 때문에 특별한 css style을 적용하지 않는다면 가로 100%가 할당된다. width가 100%이기 때문에 연달아 사용하면 띄어쓰기처럼 된다. |
| inline
| inline은 라인이다. width와 height을 설정할 수 없다. 따라서 글자처럼 사용된다. inline을 연달아 사용하면 바로 옆에 붙게된다. |
block vs inline
아래는 Block의 사용 예제이다. width가 100%이기 때문에 연달아 사용하면 띄어쓰기가 된다.
<div> Block </div> <div> Block </div>
아래든 inline의 사용 예제이다. width, height의 설정이 불가능하기 때문에 아래처럼 나타난다.
<span>inline</span> <span>inline</span>
시맨틱 도입 계기
위에서 잠깐 언급했지만, 시맨틱 태그의 도입 계기는 무분별한 <div>
, <span>
의 사용때문이다. 물론 style을 설정해서 display 속성을 변경할 수 있지만 그렇게 되면 헷갈린다. 보다 깔끔하고 읽기 쉬운 코드를 도입되었다고 할 수 있겠다.
시맨틱 태그 종류
시맨틱 태그의 종류에 대해 알아보자.
| | |
|---|---|
| header
| 페이지의 소개나 상단, 제목을 구성할 때 사용된다. |
| footer
| 페이지의 하단을 구성할 때 사용된다. |
| main
| 컨텐츠의 메인을 구성할 때 사용된다. 한 페이지에 단 한 개만 사용되어야한다. |
| nav
| 네비게이션, gnb를 구성할 때 사용된다. |
| section
| 페이지의 컨텐츠에 해당한다. 블로그 게시글, 기사 등 몸통 부분의 레이아웃을 구성한다. |
| article
| section은 페이지의 레이아웃을 담당하면, article은 그 속에 구성될 몸통부분을 만들어야한다. 한개의 section 안에는
여러 개의 article
이 들어갈 수 있다. |
| aside
| 페이지 몸통 옆에 붙는 레이아웃을 구성할 때 사용된다. 메인 컨텐츠와는 관련 없지만 참조되는 페이지나 태그 목록, 검색 화면 등 다양한 방법으로 사용될 수 있다. |
가장 기본이 되는 시맨틱 웹에 대해 간략하게 정리해보았다. 앞으로 시맨틱 웹을 잘 준수해서 웹개발을 하도록 하자. 아자아자 화이팅!