ChainSmoker’s Block

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-3. 내비게이션 메뉴(nav)와 사이드바(side_b)에 이어 설명. [1-3 내비게이션 메뉴(nav)와 사이드바(side_b)] : 상단의 메뉴는 nav 요소로 나타내고, 프로필이나 카운터 등의 콘텐츠는 aside 요소로 나타낼 수 있다. 머리말과 꼬리말, 그리고 본문을 나타내는 요소들과 합쳐진다면 아래와 같이 표현할 수 있는 레이아웃을 볼 수 있을 것이다.

[01. 레이아웃을 위한 요소] [1-3 내비게이션 메뉴(nav)와 사이드바(side_b)] : 웹 페이지의 레이아웃을 구성함에 있어서 머리말과 꼬리말 그리고 본문인 콘텐츠를 구성하는 요소에 대하여 앞에서 알아보았는데, 레이아웃을 구성하는 모든 요소를 안내해준 것 같지만 그렇지 않아도 생각한다. 바로 내비게이션을 나타내는 nav요소와 side_b요소로 있기 때문. nav요소는 주로 전체 웹 페이지에 적용되는 상단의 메뉴를 나타내며, side_b(aside)요소는 주요 콘텐츠 이외에 남아있는 콘텐츠 등을 나타내기도 한다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-2. Header와 Footer에 이어 설명. [1-2 머리말(header)과 꼬리말(footer)] : 사이트의 로고나 메뉴 등을 담기 위해서는 header 요소를 사용하고 제작자의 정보나 저작권 등의 정보를 담기 위해서는 footer 요소를 사용한다. header 요소는 굳이 상단에 오진 않아도 된다. 사이트의 상단에 위치해있던, 중간에 위치해있던 section 요소의 사이에 있던 무관하기도 하다. footer 요소도 동일하지만 대부분 하단으로 위치 시킨다.

[01. 레이아웃을 위한 요소] [1-2 머리말(header)과 꼬리말(footer)] : 여러 웹사이트에는 앞에서 말한 콘텐츠/컨텐츠 이외에 사이트 로고, 메뉴, 제작자의 정보 등이 나타나 있다. 이용하는 사이트의 맨 위나 아래를 살펴보자. 상단에는 해당되는 사이트의 로고나 메뉴, 소개 등의 정보들이 담겨져 있으며, 하단에는 제작자의 정보나 저작권의 정보가 포함되어 있을 것이다. 정리하자면 상단엔 홈페이지와 관련한 로고나 메뉴가 있고, 하단에는 제작자의 정보 및 여러가지의 부가 정보들이 있다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소_4에 이어 설명. [1-1 콘텐츠 표현] : 콘텐츠를 표현하는 데는 section 요소뿐만 아니라 article 요소도 함께 사용한다. article 요소는 개별 콘텐츠를 담는 요소이다. 무엇보다 article 요소 안의 내용은 포함되어 있는 문서와 분리하여 개별적 사용이 가능하다는 것을 의미하기도 한다. section 요소와 article 요소의 정확한 사용부분을 구분짓기 어려운 때를 분명히 만날 것이다. 물론 article 요소 안에 section 요소도 포함 가능하다. 아래 소스코드를 참고 바란다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소_3에 이어 설명. [1-1 콘텐츠 표현] : 암묵적으로 section이 생성된다 하더라도, 정확한 의미 전달을 위해 하나의 section요소에는 하나의 h1~h6요소만을 사용하는 것이 좋다. 하지만 문서를 작성하다보면 대제목과 부제목의 표현과 같이 하나의 section요소 안에 다른 레벨의 h1~h6요소를 사용해야만 하는 경우가 있다. 이때에는 새로 추가된 hgroup요소를 사용하여 제목을 묶여주면 된다. 즉 hgroup 요소는 제목과 부제목을 묶어주는 역할을 한다.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소_2에 이어 설명. [1-1 콘텐츠 표현] : 만약 하나의 section요소에 두 개 이상의 h1~h6 요소를 가지고 사용한다면 어떻게 될까? 중복하게 사용할/사용될 경우 요소의 레벨에 따라서 결정된다. 같은 레벨의 h1~h6 요소를 사용하게 될 경우 한 개의 section요소는 두 개의 section요소로 나뉘게 되고, 다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 또 다른 section요소가 생성된다. 물론 이는 암묵적으로 나뉘게 되는 것임.

[01. 레이아웃을 위한 요소] [시맨틱 웹] 2_1-1. 시맨틱 웹 요소에 이어 설명. [1-1 콘텐츠 표현] : 콘텐츠 영역과 내부에 포함되어 있는 각각의 독립적인 콘텐츠와 제목은 HTML5에 새롭게 추가된 section요소, article요소, hgroup요소를 사용해서 나타내볼 수 있다. // section요소 : section요소는 문서의 내용 부분을 나타내는 요소이다. 하나의 section은 하나의 주제를 가지고 있으며 h1~h6태그와 같이 제목을 표현하는 요소들과 함께 사용된다. 주의해야 할 점으로는 하나의 section요소에는 하나의 h1~h6요소만을 사용해야 한다. // h요소 : 제목 등의 글자 속성을 지정할 때 사용되는 요소로, 1~6까지 지정할 수 있으며 숫자가 클수록 크기는 작아지..

[01. 레이아웃을 위한 요소] div 요소(div태그 사용) : 영역 지정을 할 때 사용하는 태그(요소)이다. ul 요소(ul태그 사용)와 li 요소(li태그 사용) : ul 요소는 목록 전체를 나타내며 li 요소는 목록에 대한 각 항목을 나타낸다. *header : 머리말을 나타내는 요소 *hgroup : 제목과 부제목을 묶는 요소 *nav : 메뉴 부분을 나타내는 요소 *article : 개별 컨텐츠를 나타내는 요소 *section : 제목별로 나눌 수 있는 요소 *aside : 좌우측의 사이드바를 나타내는 요소 *footer : 제작자의 정보나 저작권의 정보를 나타내는 요소 각 요소별 영역이 어떤 것을 의미하는 바를 이해하길 바란다. 각 요소에 대해 상세히 알아봐야 하며, HTML5의 기본구조와 ..

[01. 레이아웃을 위한 요소] : HTML5의 특징 가운데 하나는 바로 시맨틱 웹이라고 할 수 있다. 시맨틱(semantic)이란 '의미가 있는', '의미의'라고 해석되는 단어로 HTML문서에서 의미를 부여하겠다는 의도가 담여져 있다. 기존의 HTML문서는 단지 표현의 수단이었다. 그러므로 여러 요소를 사용하여 구조를 정의할 수 있지만 정확한 의미를 담고 있지는 않았다. 플랫폼 홈페이지 화면을 보면 헤더, 네비게이트 메뉴, 사이드바, 컨텐츠 등으로 나누어져 있는 곳이 많다. 사이트 맨아래에는 제작사의 정보나 저작권 정보등을 나타내는 풋터 영역이 존재할 수 있다.