공간 분할 태그
공간 분할이 필요한 이유는 후에 공부할 css를 사용해 원하는 레이아웃을 구성 할수 있기 때문이다! 대표적인 공간 분할 태그에는 <div> 태그와 <span> 태그가 있다.
(<div> 태그와 <span> 태그는 둘 다 일반 태그에서도 사용 가능)
1. div 태그 🤗
<div> 태그는 block 형식으로 차곡차곡 쌓아 올려지는 형식을 가진다.
<body>
<div>
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
</div>
</body>
2. span 태그 😁
<span> 태그는 inline 형식으로 한 줄 안에 차례차례 순서대로 위치하는 형식을 가진다.
<body>
<span>A</span>
<span>B</span>
<span>C</span>
</body>
3. 시멘틱 구조 태그 🤯
<div> 태그와 <span> 태그만을 활용하여도 웹 문서 레이아웃을 만들 수 있다. 다만 <div> 태그와 <span> 태그만을 사용 할 경우 단순히 이름만 보고 어떤 내용이 들어가 있는지 전혀 알 수가 없다. 이런 문제점을 해결하기 위해 생긴 것이 시멘틱 태그 이다.
시멘틱 태그(Semantic Tag)란?
Semantic은 '의미의', '의미론적인'이라는 뜻으로 시멘틱 태그는 태그에 의미를 부여하여 사용하는 태그라고 정의 할 수 있다. 이러한 시멘틱 태그는 <div> 태그와 같은 기능을 수행하는 태그로 그 종류가 다양하다. 아래는 주요 몇 가지 시멘틱 태그를 정리한 표이다.
그림으로 시멘틱 태그로 웹 사이트 주요 구조를 표현하면 다음과 같다.
시멘틱 태그를 적절하게 이용하면 검색엔진이나 다른 기계적인 동작들이 웹페이지를 쉽게 이해하여 작동에 도움이 될뿐만 아니라 HTML 문서 자체의 가독성과 유지보수가 쉬워지므로 현재 웹 페이지 개발에서는 빠질 수 없는 부분이다.
개발자 꿈나무