Chapter02 시맨틱 웹을 위한 요소 HTML5 Programming
Contents Chapter02 1. 레이아웃을 위한 요소 2. 표현을 위한 요소 시맨틱 웹을 위한 요소
레이아웃을 위한 요소 Chapter02 시맨틱 웹 시맨틱(semantic)이란 ‘의미가 있는’, ‘의미의’라고 해석되는 단어로 HTML문서에 의미를 부여하겠다는 의도가 담겨져 있음 시맨틱 웹을 위한 요소
기존 HTML 요소를 사용한 레이아웃 Chapter02 시맨틱 웹을 위한 요소
div 요소 Chapter02 div 요소 영역을 지정할 때 사용하는 요소 시맨틱 웹을 위한 요소
ul요소와 li요소 ul요소와 li요소 ul 요소는 목록 전체를 나타내며 li 요소는 목록에 대한 각 항목을 나타냄 Chapter02 ul요소와 li요소 ul 요소는 목록 전체를 나타내며 li 요소는 목록에 대한 각 항목을 나타냄 시맨틱 웹을 위한 요소
레이아웃을 위해 추가된 요소 Chapter02 시맨틱 웹을 위한 요소
콘텐츠 표현 Chapter02 시맨틱 웹을 위한 요소
h 요소 h 요소 제목 등의 글자 속성을 지정할 때 사용하는 요소로 1~6까지 지정할 수 있으며, 숫자가 클수록 크기는 작아짐 Chapter02 h 요소 제목 등의 글자 속성을 지정할 때 사용하는 요소로 1~6까지 지정할 수 있으며, 숫자가 클수록 크기는 작아짐 시맨틱 웹을 위한 요소
section 요소 section 요소 문서의 내용 부분을 나타내는 요소 Chapter02 section 요소 문서의 내용 부분을 나타내는 요소 하나의 section은 하나의 주제를 가지고 있으며 h1~h6과 같이 제목을 표현하는 요소들과 함께 사용 하나의 section 요소에는 하나의 h1~h6 요소만을 사용해야 함 시맨틱 웹을 위한 요소
section 요소 section 요소 중첩 사용 Chapter02 section 요소 중첩 사용 만약 하나의 주제 안에 또 다른 세부 주제가 있다면 section 요소를 중첩하여 사용 시맨틱 웹을 위한 요소
section 요소 하나의 section 요소에 두 개 이상의 h 요소를 사용할 경우 Chapter02 하나의 section 요소에 두 개 이상의 h 요소를 사용할 경우 중복하여 사용한 h1~h6 요소의 레벨에 따라 결정 같은 레벨의 h1~h6 요소를 사용하게 되면 한 개의 section 요소는 두 개의 section 요소로 나뉘게 되고, 다른 레벨의 h1~h6 요소를 사용하게 되면 내부에 또 다른 section 요소가 생성됨 시맨틱 웹을 위한 요소
section 요소 Chapter02 시맨틱 웹을 위한 요소
hgroup 요소 Chapter02 hgroup 요소 제목과 부제목을 묶어 줌 시맨틱 웹을 위한 요소
article 요소 article 요소 개별 콘텐츠를 담는 요소 Chapter02 article 요소 개별 콘텐츠를 담는 요소 article 요소 안의 내용은 포함되어 있는 문서와 분리하여 개별적으로 사용이 가능하다는 것을 의미 시맨틱 웹을 위한 요소
article 요소 Chapter02 시맨틱 웹을 위한 요소
머리말과 꼬리말 머리말 꼬리말 해당 사이트의 로고나 메뉴, 소개 정보들이 포함 제작자의 정보나 저작권의 정보가 포함 Chapter02 머리말 해당 사이트의 로고나 메뉴, 소개 정보들이 포함 꼬리말 제작자의 정보나 저작권의 정보가 포함 시맨틱 웹을 위한 요소
header 요소와 footer 요소 header 요소 footer 요소 사이트의 로고나 메뉴 등을 담기 위한 머리말 부분 Chapter02 header 요소 사이트의 로고나 메뉴 등을 담기 위한 머리말 부분 footer 요소 제작자의 정보나 저작권 정보를 담기 위한 꼬리말 부분 시맨틱 웹을 위한 요소
nav 요소와 aside 요소 nav 요소 aside 요소 주로 전체 웹 페이지에 적용되는 상단의 메뉴를 나타냄 Chapter02 nav 요소 주로 전체 웹 페이지에 적용되는 상단의 메뉴를 나타냄 aside 요소 주요 콘텐츠 이외에 남아있는 콘텐츠 등을 나타냄 시맨틱 웹을 위한 요소
nav 요소와 aside 요소 Chapter02 시맨틱 웹을 위한 요소
레이아웃 예제 Chapter02 시맨틱 웹을 위한 요소
프로그램 2-1 Chapter02 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> 이한 서점 </title> 06: </head> 07: 08: <body> 09: <header> 10: <hgroup> 11: <h1> 베스트셀러 </h1> 12: <h4> 최근 7일간의 판매량을 기준으로 계산합니다. </h4> 13: </hgroup> 14: </header> 15: <nav> 16: <ul> 17: <li> 문학 </li> 18: <li> 사회 </li> 19: <li> 만화 </li> 20: </ul> 21: </nav> 22: 23: <section> 24: <header> 25: <h1> 문학 베스트셀러 </h1> 26: </header> 시맨틱 웹을 위한 요소
프로그램 2-1 Chapter02 27: <article> 28: <h2> 웃음 </h2> 29: 유머의 생산과 유통이라는 이색 소재로 그려 낸 미스터리 소설 30: </article> 31: <article> 32: <h2> 빅 픽처 </h2> 33: 진정 나를 위한 삶을 살고 싶었던 한 남자 이야기 34: </article> 35: <article> 36: <h2> 고구려 </h2> 37: 속도감 있는 전개와 치밀한 구성으로 빚어낸 또 하나의 고구려 38: </article> 39: </section> 40: 41: <aside> 42: 광고 : 올해의 서평 이벤트 43: </aside> 44: 45: <footer> 46: Copyright ⓒ 2012 ehan, All right reserved. 47: </footer> 48: 49: </body> 50: </html> 시맨틱 웹을 위한 요소
프로그램 2-1 Chapter02 시맨틱 웹을 위한 요소
표현을 위한 요소 Chapter02 시맨틱 웹을 위한 요소
특정 텍스트 강조 표현 mark 요소 시각적, 의미적으로 강조 mark 요소의 브라우저 지원 현황 Chapter02 시맨틱 웹을 위한 요소
프로그램 2-2 Chapter02 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> mark 요소 </title> 06: </head> 07: 08: <body> 09: <p> <mark>mark 요소</mark> 는 특정 문구나 단어를 강조하고자 할 때 사용한다. </p> 10: <p> 시각적 효과를 위해서 <mark>CSS</mark> 와 함께 사용해야 한다. </p> 11: </body> 12: </html> 시맨틱 웹을 위한 요소
시간 표현 Chapter02 time 요소 시간 표현에 대해서 의미를 부여 속성 브라우저 지원 현황 시맨틱 웹을 위한 요소
프로그램 2-3 Chapter02 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> time 요소 </title> 06: </head> 07: 08: <body> 09: <p> 현재 시간은 <time>14:00</time> 이다. </p> 10: <p> 이번 중간고사는 <time datetime="2011-04-16">다음주 월요일</time> 에 시작한다.</p> 11: </body> 12: </html> 시맨틱 웹을 위한 요소
범위나 비율 표현 meter 요소 일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용 속성 Chapter02 시맨틱 웹을 위한 요소
범위나 비율 표현 Chapter02 meter 요소 브라우저 지원 현황 시맨틱 웹을 위한 요소
프로그램 2-4 Chapter02 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> meter 요소 </title> 06: </head> 07: 08: <body> 09: <p> 현재 디스크 사용률은 <meter min="0" max="100" low="10" high="90“ value="95">95%</meter> 이다. </p> 10: <p> 이번 우리 지역 투표율은 <meter min="0" max="100" optimum="60“ value="47">47%</meter> 이다.</p> 11: </body> 12: </html> 시맨틱 웹을 위한 요소
현재 진행 중인 상태 표현 progress 요소 속성 브라우저 지원 현황 Chapter02 progress 요소 어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용 속성 브라우저 지원 현황 시맨틱 웹을 위한 요소
프로그램 2-5 Chapter02 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8" /> 05: <title> progress 요소 </title> 06: </head> 07: 08: <body> 09: <p> 현재 다운로드 상태 : 10: <progress min="0" max="100" value="72">72%</progress></p> 11: </body> 12: </html> 시맨틱 웹을 위한 요소
html5 콘텐츠 타입별 분류 Chapter02 시맨틱 웹을 위한 요소