시맨틱 요소란?
HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가
새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를
사용하는 방식을 추구하기 시작했습니다. 시맨틱 요소 중 하나인 h1 요소를 예로 들어 보겠습니다.
최상위 제목(top level heading)을 표현할 때 사용하는 요소인 h1 요소를 사용할 경우, 브라우저가 큰 폰트 사이즈를
적용할 뿐 아니라, 위아래로 간격을 주어 제목처럼 보이도록 합니다.
이와 같은 효과는 div 요소, span 요소에 CSS 속성을 추가하여 h1 요소와 똑같이 보이도록 할 수 있습니다.
그러나 h1 요소를 사용할 때처럼 의미적 가치는 없다고 할 수 있습니다.
시맨틱 요소가 사용되기 이전에는 각 영역을 지정하기 위해 div요소를 주로 사용했습니다.
그러다 보니 웹 페이지 하나에 div 요소 수십 개가 중첩된 이른바 div 지옥이 되는 경우가 많았습니다.
시맨틱 요소의 종류
시맨틱 요소의 종류는 굉장히 다양하지만 주로 쓰이는 몇 가지를 알아보겠습니다.
article : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
footer : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
nav : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 ul을 넣어 목록 형태로 사용합니다.
main : 문서의 주된 콘텐츠를 표시합니다.
- input 요소, button 요소 등의 자식 요소를 감싸는 용도로 form 요소를 사용했을 때
form 요소는 사용자가 입력한 값을 제출하는 데 사용된다.
주로 input 요소, button 요소를 포함한다.
사용 시 화면을 전환하는 액션이 있으므로 주의가 필요하다.
id 와 class의 쓰는 용도의 차이
id = 고유한 하나의 유형에 적용(중복이 안됨)
class = 고유하지 않은 중복된 유형에 적용(동일한 유형)
