div, span와 시멘틱 태그

전통적으로 화면 배치 또는 공간 분할을 위하여 div 와 span 을 많이 사용한다.

현재는 시멘틱 태그를 사용하기를 권장하지만 여전히 현장에서는 div 와 span 을 사용하고 있다.

div : 블록 형식으로 공간을 분할 => 세로로 배치, 크기를 설정할 수 있다.

span : 인라인 형식으로 공간을 분항 => 가로로 배치, 크기를 설정할 수 없다.

인라인 블록(inline-block ) : 인라인이면서 블록 성격을 가짐 => 가로로 배치 => 크기 설정 가능

span, div 둘 다 inline -block 으로 변경 가능

 

• 블록형식 태그 : div, h1~h2, p, li, table
• 인라인형식 태그 : span, a, input, select등등 입력양식 태그, b, i 등 글자 관련 태그

전통적으로 화면(공간)을 분할하기 위하여 위의 방식처럼 div 로 분할을 하고, id 식별자를 사용하였습니다. 그러나 사람들마다 저 식별자를 다르게 저장할 수 있고, 이것은 전체 코드를 읽고 분석하기에 어려움이 있다. 그래서 html5에서 시멘틱 태그(Semantic Tag) 를 도입하여 웹 구조와 의미를 명확하게 하기를 권장한다.

 

시멘틱 태그는 의미를 부여 하는 것이지 그 자체가 모양을 결정하지는 않는다. 모양을 지정하기 위해서는 별도의 css를 설정해야 한다.

 

시멘틱 태그의 종류

header : 머리말(페이지의 제목, 페이지 소개)

nav : 하이퍼 링크들을 모아 둔 네비게이션

aside : 본문의 흐름에서 벗어나는 노트나 팁

section : 문서의 장이나 절에 해당하는 내용

article : 본문과 독립적인 콘텐츠 영역

main : 문서의 주요 내용

figure : 이미지를 나타낼 때 사용

footer : 꼬리말 (저자나 저작권에 대한 정보)