과거의 웹 페이즈는 공간 분할을 하지 않았습니다. 하지만 연대 웹 페이지는 공간 분할 태그를 사용하여 웹 페이지를 분할합니다. 가장 대표적인 공간 분할 태그는 div 태그이며, 공간 분할이 되어야 레이아웃을 구상 할 수 있기 때문입니다.
div 태그 & span 태그
| 태그 이름 | 설명 |
| div | block 형식으로 공간을 분할합니다. |
| span | inline 형식으로 공간을 분할합니다. |
div 태그는 block 형식으로 차곡차곡 쌓아 올려지는 형식을 말합니다. 아래 예시1을 보면 알 수 있습니다.
반면 span 태그는 inline 형식으로 공간을 분할합니다. 예시2를 보면 알 수 있습니다.
스타일시트에서 중요한 부분을 차지하니 div 태그와 span 태그의 차이를 알고 block 형식과 inline 형식의 차이를 알아야 합니다.
| block 형식 태그 | inline 형식 태그 | inline-block 형식 태그 |
| div 태그 | span 태그 | image 태그 |
| h1 태그 ~ h6 태그 | a 태그 | audio 태그 |
| p 태그 | input 태그 | video 태그 |
| 목록 태그 | 글자 형식 태그 | |
| 테이블 태그 | ||
| form 태그 |
HTML5 시멘틱 구조 태그
보통의 웹 페이지는 div 태그를 사용하여 레이아웃을 구성하지만 컴퓨터가 좀 더 빠르고 효율적이게 데이터를 추출할 수 있도록 특정한 태그에 의미를 부여하는 것을 시멘틱 웹이라고 표현합니다. 아래의 표는 HTML5의 시멘틱 구조 태그입니다.
| 태그 이름 | 설명 |
| Header | 헤더를 의미 |
| nav | 네이게이션(navigation)을 의미 |
| aside | 사이드에 위치하는 공간을 의미 |
| section | 여러 중심 내용을 감싸는 공간을 의미 |
| article | 글자가 많이 들어가는 부분을 의미 |
| footer | 푸터를 의미 |
시멘틱 태그는 모두 div 태그와 같은 기능을 수행하는 태그입니다. 이전에 언급했던 것처럼 태그는 검색 엔진이나 그 이외의 기계적인 동작들이 웹 페이지를 쉽게 이해할 수 있게 하는 데 의미가 있습니다.
예시3과 예시4는 각각 div 태그와 시멘틱 태그를 이용해서 만들었습니다. 두 코드 모두를 실행하면 모두 같은 그림으로 출력이 되는 것을 알 수 있습니다.
시멘틱 태그를 구지 사용하지 않아도 됩니다. HTML5가 나오고 시멘틱 웹이 되어도 div 태그는 지금도 꾸준히 사용됩니다.
HTML5 Header
Lorem ipsum
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
Lorem ipsum
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
'프로그래밍 공부 > HTML5' 카테고리의 다른 글
| HTML5 - 입력 양식 태그 (0) | 2019.11.12 |
|---|---|
| HTML5 - 비디오 태그 (0) | 2019.11.12 |
| HTML5 - 오디오 태그 (0) | 2019.11.12 |
| HTML5 - 이미지 태그 (0) | 2019.11.12 |
| HTML5 - 테이블 태그 (0) | 2019.11.11 |
