태그 해석을 통해 구문 이해 가능 -시맨틱(semantic, 의미가 통하는) 태그 HTML5와 시맨틱 구조 02 태그 해석을 통해 구문 이해 가능 -시맨틱(semantic, 의미가 통하는) 태그
02-1 HTML 문서 구조 02-2 레이아웃을 위한 HTML5 시맨틱 태그 02-3 인터넷 익스플로러 버전 고려하기
HTML4의 문서 구조 화면을 구성하는 역할은 대부분 <div> 태그에게 맡겨 놓았고, 수많은 <div> 태그들을 구분하는 것은 id 속성을 이용했다. <div> 태그로 묶기만 하면 되었고 그 이름에는 제약이 없었기 때문에 홈페이지 제작자 자신이 나중에 보더라도 이해하기 어려웠을 뿐 아니라, 담당자가 바뀌게 되면 홈페이지 구조를 이해하는 데 많은 시간이 걸리곤 했다. <div id="header"> Header </div> <div id="content"> Content <div id="footer"> Footer 실제로 웹사이트를 만들 때는 수천 줄의 소스를 일일이 살펴보면서 헤더 부분이 어디인지, 메뉴는 어디에 있는지, 사이드 바 내용이 있는 부분은 어디인지 등 찾는 것이 쉽지 않다. <div> 태그: 이미지나 텍스트를 담는 html 문서의 독립된 한 영역을 지정함
HTML4 문서 구조
시맨틱 태그가 사용된 HTML5의 문서 구조 WHATWG에서는 웹 문서의 레이아웃을 어느 정도 표준화할 수 있겠다고 생각하고, 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해 놓고 해당 태그만 보면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다. 헤더: 사이트의 제목과 로고, 검색 창 들 콘텐츠: 본문 사이드바: 광고등 내비게이션: 사이트 메뉴 푸터: 저작권정보, 제작자 정보
시맨틱 태그가 사용된 HTML5의 문서 구조 헤더(header) 콘텐츠(contents) 사이드바(aside) 푸터(footer)
HTML5 문서 예시 헤더 네비게이션 콘텐츠 푸터
<header> 태그 – 머리말(제목) 사이트 전체의 제목 부분이 될 수도 있고, <article>의 제목 부분이 될 수도 있다. 형식 : <header> 내용 </header> 사이트 맨 위쪽이나 왼쪽에 주로 삽입하며, 헤더 안에 <form> 태그를 사용해서 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다.
<header> 태그 – 머리말(제목) 3) <head> vs. <header> -<head> 는 문서에서 단 한번 쓰이고 <title>, <meta> 와 같은 웹 문서 정보가 들어감. -<header>는 <body> 안에서 여러 번 사용될 수 있음.
<nav> 태그 – 문서를 연결하는 내비게이션 링크 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타낸다 형식 : <nav> 내용 </nav> HTML5 이전: <div> 태그를 이용해 ‘nav’나 ‘menu’등 특별한 ID 지정 다른 태그와 상관없이 독립해서 사용한 <nav> 태그 <head> 태그 안에 사용한 <nav> 태그, 헤더와 위치이동을 함께함
<hn> 태그 – 제목 표시하기 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그처럼 여섯 단계로 나누어져 있고, 숫자가 클수록 그 크기가 작아진다. 형식 : <hn> 텍스트 </hn> <hn> 태그는 문서 안에서 여러 번 사용할 수 있으며, 같은 <hn> 태그라도 스타일을 사용해서 서로 다른 형태로 표시할 수 있다. <p> 태그를 사용한 후 글자 크기를 크게 하거나 진하게 하는 식으로 스타일을 적용해 제목 텍스트를 만들기도 하는데, 이것은 웹 표준에 맞지 않는다
<section> 태그 – 콘텐츠 영역 나타내기 <header> 태그나 <footer> 태그와 비교해서 콘텐츠 영역을 구분짓는 용도 <section> 태그 안에 또 다른 <section> 태그를 넣을 수도 있고, 실제 콘텐츠가 들어 있는 <article> 태그를 넣을 수도 있다. 형식 : <section> 내용 </section>
<article> 태그 – 실제 콘텐츠 내용 넣기 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 여기에 해당된다. 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓴다. 형식 : <article> 내용 </article> Id 속성 이용하여 다수의 article 구분
<aside> 태그 – 본문 이외의 내용 표시하기 본문 내용 외에 주변에 표시되는 기타 내용들을 나타낸다. 블로그 등에서 왼쪽이나 오른쪽, 혹은 하단에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용한다. 사이드 바는 필수 요소가 아니기 때문에 필요할 경우에만 사용한다. 형식 : <aside> 내용 </aside>
<footer> 태그 – 제작 정보와 저작권 정보 표시 사이트 제작자의 연락처 정보를 표시 <footer> 태그 안에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 레이아웃 태그 들을 모두 사용할 수 있고, 이런 태그를 이용해 푸터 안에 다양한 정보를 포함할 수 있다. 형식 : <footer> 내용 </footer>
<address> 태그 – 제작자 정보, 연락처 정보 <footer> 태그 안에서 웹 페이지 제작자의 이름이나 제작자의 웹 페이지, 또는 피드백을 위한 이메일 주소 같은 연락처 정보를 넣는 데 사용된다. 실제 우편 주소를 넣기 위한 태그는 아니다. 실제 우편물 주소는 <p> 태그 사용 최근 업데이트 날짜 같은 정보를 입력할 때도 사용해서는 안된다. 형식 : <address> 내용 </address>
소스분석
실습하기 ftp 접속 후 실습자료를 자신의 workspace에 저장 Header ftp 접속 후 실습자료를 자신의 workspace에 저장 -윈도우 탐색창에 ftp://220.81.94.80:12345입력 -Home/html2/실습1 폴더 안의 모든 파일을 자신의 프로젝트 폴더(문서/Aptana Studio 3 Workspace/~) 에 저장 실습내용: 시맨틱 태그 적용 및 CSS 맛보기 article id=“pet1” article id=“pet2” Section article id=“pet3” aside Footer
목록을 만드는 태그들 <ul>, <li> 태그 – 순서 없는 목록 각 항목 앞에 불릿이 붙여진다. </ul> <li> </li> <ol>, <li> 태그 – 순서 목록 각 항목 앞에 숫자가 붙여진다. </ul> <dl> 정의 목록 – 사전식 목록 ‘제목’과 그에 대한 ‘설명’으로 이루어진 목록 <dl>과 <dt>, <dd> 태그 사용 하나의 <dt>에 여러 개의 <dd> 값을 가질 수 있다 <dt> </dt> <dd> </dd> </dl>
실습하기 CSS 맛보기 1. Copy&paste layout.css 2. Insert height:650px; article h3{ background:url(bg.png) no-repeat left center; padding-left:30px; }
실습하기 ftp 접속 후 실습자료를 자신의 workspace에 저장 -Home/html2/실습2 폴더 안의 모든 파일을 자신의 프로젝트 폴더(문서/Aptana Studio 3 Workspace/~) 에 저장 실습내용: 시맨틱 태그 적용 -<section> 태그 안 내용을 4개의 article로 구분 -각 article의 제목은 <h3> 태그 사용 -각 article의 내용은 <p> 태그 사용