시맨틱(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 | 페이지 몸통 옆에 붙는 레이아웃을 구성할 때 사용된다. 메인 컨텐츠와는 관련 없지만 참조되는 페이지나 태그 목록, 검색 화면 등 다양한 방법으로 사용될 수 있다. |

가장 기본이 되는 시맨틱 웹에 대해 간략하게 정리해보았다. 앞으로 시맨틱 웹을 잘 준수해서 웹개발을 하도록 하자. 아자아자 화이팅!