용도에 따라 사용 가능한 "<Semantic> 태그"
의미와 목적을 가진 시멘틱 태그
붓을 사용하는 방법
여기 붓이 하나 있습니다. 이 도구의 모양은 대략 이렇습니다. 아래에는 호(毫)라고 부르는 털이 존재하고, 위쪽은 손잡이로 사용 가능한 봉(鋒)이 있습니다. 사람이 물구나무를 서면 이 붓 모양과 비슷해집니다. 머리 부분은 털이 있는 호가되고, 몸통은 봉이 됩니다. 그런데 붓은 크기와 제조 방법에 따라 사용 용도가 완벽히 달라집니다. '붓' 하면 가장 많이 떠오르는 것은 다름 아닌 그림을 그릴 때 사용하는 물감을 머금는 수채화 붓과 먹물을 머금는 동양화 붓이 있습니다. 그리고 음식점에 가보면 요리에 소스를 적당량 발라줄 수 있는 주방용 붓도 있습니다. 공사 현장에서는 도장 공사를 할 수 있는 페인트 붓이 있습니다. 그리고 수제화 신발을 만들 때 밑창을 단단하게 붙일 수 있는 본드 붓도 있습니다. 키보드 사이에 먼지를 청소하는 붓도 있고, 메이크업 화장 붓까지 셀 수 없을 만큼 붓은 다양한 환경에서 사용하고 있습니다.
이렇게 같은 모양을 하고 있지만 사용하는 용도에 따라 붓은 이름도 변하고 모양새도 조금씩 변합니다. 이유는 의미와 구조를 나누었기 때문입니다. 사실 하나의 붓을 가지고 위에서 열거한 모든 일을 할 수 있습니다. 그림을 그리고 털을 씻어 말린 다음, 위생적으로는 말도 안 되지만 요리에서 사용도 가능하고, 본드를 붙이는 데 사용해도 됩니다. 하지만 우리는 분류한 따라 붓을 용도에 맞게 정확히 사용합니다. 하나를 가지고 여러 용도를 쓰는 건 비효율적입니다. 목적대로 사용해야 하는 올바른 붓의 사용법을 알아보았습니다.
div 태그는 그만
<div id="nav">
메뉴 영역
</div>
<div id="footer">
하단 영역
</div>
그런데 HTML 5 버전 이전까지는 하나의 요소를 가지고 모든 곳에 사용되던 때가 있었습니다. 하나의 붓으로 화장을 하고, 키보드를 청소하는 것처럼 말입니다. 그 범인은 바로 dv 태그입니다. 이것은 여전히 만능 태그입니다. 콘텐츠를 분할할 수 있게 도와주고 레이아웃의 틀을 만들 수 있게 해 주었습니다. 덕분에 div는 id를 사용해 개발자 직접 목적을 만들어 주었습니다. 같은 태그이지만 개발자가 사용하고 싶을 때 div는 언제든지 용도 변경이 가능했습니다. 하지만 이런 불편한 구조를 컴퓨터는 쉽게 이해하기 어려웠습니다. 특정한 태그를 만들어 의미를 부여해서 웹페이지를 만드는 시도를 하였고, 이를 시멘틱 태그라고 이름 붙여졌습니다.
시멘틱 태그
<header>
<nav>
<section>
<article>
<aside>
<footer>
시멘틱 태그의 종류는 크게 6가지로 나눌 수 있습니다. 태그의 이름만 들어봐도 하나의 홈페이지 모양이 생성되는 걸 상상할 수 있습니다. 시맨틱 요소는 자신의 의미를 직접 확인시켜줍니다. 그래서 브라우저와 개발자 모두에게 명확하게 목적을 알 수 있게 되어 혼란을 방지할 수 있게 되었습니다.
...
출간되었습니다.
해당 매거진은 종이책으로 출간되었습니다.!!!
전체 내용을 보고 싶으시다면 서점에서 책을 구매해보세요!!
또 개발자가 되고 싶은 친구에게 선물해보세요!
http://www.yes24.com/Product/Goods/105772405
