HTML5 문서 구조화
용어 알기
표현적 마크업 : 콘텐츠의 레이아웃과 디자인을 정의하는 마크업
블렉 레벨 요소 : 줄밤꿈으로 분리되는 하나의 독립된 덩어리 요소
정의 목록 : 사전식 정의를 위해 사용되는 목록
구조적 마크업의 이해
마크업 언어
- 구조적 마크업
* 문서의 구조 정의
* 콘텐츠의 의미 또는 역할
* 콘텐츠의 종속 관계
- 표현적 마크업
* 문서의 외형 정의
* 문서 레이아웃
* 콘텐츠 디자인
구조적 마크업과 표현적 마크업의 혼용
- 웹 초창기 : 하나의 HTML 파일에 웹페이지의 모든 것 정의
→ HTML의 표현의 한계
구조적, 표현적 마크업 혼용 사용의 문제점
1. 웹 접근성 저해
2. 더 높은 유지 비용 발생
3. 문서 크기 비대화
블록 레벨 요소와 인라인 레벨 요소
블렉 레벨 요소
1. 줄 바꿈이 일어나는 단락 요소
2. 제목, 문단, 인용문
3. 블록 레벨 요소 안에 인라인 레벨 요소 또는 다른 블록 레벨 요소가 들어갈 수 있음
인라인 레벨 요소
1. 줄바꿈이 일어나지 않은 행의 일부 요소
2. 강조, 링크, 이미지
3. 인라인 레벨 요소 안에는 다른 인라인 레벨요소를 포함할 수 있으나 블록 레벨 요소는 포함 불가
섹션 요소
- 구역 또는 장
- 의미가 연결되는 콘텐츠의 집합
- 자체적으로 제목가 내용을 가질 수 있는 하나의 독립적인 콘텐츠 단위
HTML5의 섹션 요소
div 요소에 아이디, 클레스 속성 적용항여 섹션 분리 → HTML5 자주 사용하는 섹션을 추려 새로운 요소로 추가
추가된 섹션 요소
1. section : 범용 섹션 요소
* 일반적인 문서 또는 프로그램의 섹션
* 보통 제목을 시작하는 콘텐츠의 의미적 그룹
* 문서의 영역을 지정하는 레이아웃을 생성
* 의미 없이 프로그래밍을 위한 불리에는 사용하지 않음
section 태그의 예
<!DOCTYPEhtml>
<html>
<head>
<title>2022년 여름 졸업식순</title>
</head>
<body>
<h1>졸업</h1>
<section>
<h1>예식<h1>
<p>시장 행렬</p>
<p>교장 폐회사</p>
</section>
<section>
<h1>졸업생</h1>
<ul>
<li>Molly Carpenter</li>
<li>Susan Rodriguez</li>
</ul>
</section>
</body>
</html>
1. section : 예식순
2. section : 졸업생 목록
section 요소로 내용을 분리
→ 섹션 요소는 내용적으로 분리되어 있어 자체적인 타이틀 필요
ex) <h1>예식</h1>
<h1>졸업생</h1>
2. <nav> : 네비게이션 요소
* 네비게이션 링클 구성되는 섹션
* 하나의 페이지에 하나 이상의 nav 요소가 사용
* 블로그 등의 '페이지 삭제', '수정' 등은 네비게이션 요소가 아니라 기능임
* 목록으로 작성
목록으로 네비게이션을 만드는 예
<nav>
<ul>
<li><a href="1.html">홈</a><li>
<li><a href="2.html">회사소개</a><li>
<li><a href="3.html">제품</a><li>
<li><a href="4.html">고객센터</a><li>
</ul>
</nav>
CSS와 JavaScript 적용 시 다양한 동적 네비게이션 메뉴를 만들수 있다.
3. <article>
* 독립적으로 배포 혹은 재사용 가능한 섹션
* 독립적인 글
예) 신문, 잡지 기사, 블로그 글, 댓글 하나
아티클 요소 : 제목, header, footer, 그리고 섹션 요소까지 포함
4. <aside>
* 문서의 주요 콘텐츠와 별개의 영역 정의
* 일반적으로 사이드 바 형태로 표현
5. <header>
* 페이지 또는 센션의 머릿글 그룹
* 페이지의 제목, 소개, 네비게이션 등이 포함
* 섹션 요소가 안니므로 새로운 섹션을 의미 하지 않음
6. <footer>
* 가장 가까운 조상 요소의 footer
* 일반적으로 연관 문서에 대한 정보를 담음 ( 작성자, 링크, 저작권 정보 등등 )
* 섹션 요소가 아니므로 새로운 섹션이 아님
- 사용 예 : 헤더와 같은 방식으로 사용
"요소가 section 요소인지 아닌지에 따라 문서 구조가 달라짐"
7. 헤딩과 <hgroup>
- 헤딩
* 섹션의 제목
* h1~h6까지 존재 (h1 요소 : 가장 높은 등급, h6 요소: 가장 낮은 등급)
* HTML5에서는 헤딩을 순서대로 사용하지 않아도 됨
- <hgroup>
* 섹션의 제목 그룹 (h1~h6 요소들을 그룹 짓기 위해 사용)
* <hgroup>은 포함된 헤딩 요소의 가장 높은 등급
* 서브 타이틀의 범주의 생성을 감추기 위해 사용
사용 예
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup>
hgroup 등급 : h1 과 동일
h2 : 서브 타이틀 역할만 한다. 섹션 생성은 하지 않는다.
8. 제목에 따른 섹션 분리
- 섹션 요소의 구조 결정
* 요소를 겹쳐 상위 요소와 하위 요소를 생성
* 섹션 내부에서는 타이틀(헤딩)의 등급에 따른 구조화
* 헤딩 요소 : 섹션의시작은 표기 되지만 섹션의 끝은 표기 되지 않음
9. <address>
* 가장 가까운 조상 요소인 article 또는 body 요소의 연락처 정보 의미
* 영향력 : 가장 가까운 조상 요소에 한정
* 내용 : 연락처 정보의 형태라면 어떤 형태라도 허용
구 버전의 웹 브라우저에서 HTML5 요소 사용
- HTML의 모르는 요소 처리
* HTML은 모르는 요소는 무시하고 콘텐츠만 보여준다.
* 그러므로 블록 레벨 요소도 인라인 레벨 요소처럼 처리된다.
* 결과적으로 문서의 구조와 레이아웃이 심하게 회손된다.
* CSS에서 HTML5에서 새로 추가된 블록 레벨 요소의 디스플레이 속성을 '블록'으로 설정해 교정할 수 있다.
* address, article, aside, figure, footer, geader, hgroup, menu, nav, section { display; block; }
- 구 버전의 IE에서 HTML5 요소를 사용하기 위한 코드
* <!-[if IF]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] →
그룹 콘텐츠 요소
- 그룹으로 내용을 분리 하는 역할을 하는 요소
- 기존 HTML의 요소가 대부분
- 콘텐츠의 역할을 정의
문단과 인용
1. <P> : 콘텐츠 문단 의미
* 마지막에 P 요소 하나만 사용해 문단을 분리하는 방법으로 잘못 사용
* 정확한 사용 법 : 문단의 시작과 끝에 <P></P> 요소를 정확히 지정
* 콘텐츠 중 문단이긴 하나 더 적합한 요소가 존재하는 경우 : P요소보다 더 적합한 요소를 사용
예
"최종수정일" 같은 경우에는 <p></p> 보다는 <footer></footer>,
"이메일" 같은 경우는 <address></address>를 적용하는것이 좀 더 구조적이고 적합하다.
2. <blockquote> : 인용을 의미
* 인용된 소스의 cite 속성으로 URL 주소 표시
* blockquote 안에 p 요소를 넣어도 되고 넣지 않아도 됨
사용 예
<blockquote cite=http://www.w3.org/standards/">W3C 홈페이지에 있는 웹표준에 관한 단락을 인용</blockquote>
3. <pre> : 형식화된 텍스트 블록 표현
* 공백을 포하한 입력한 텍스트가 그대로 웹 브라우저에 출력
* pre 요소는 웹 브라우저에서 고정폭 서체로 표현
* 컴퓨터 코드나 문서 그림을 표현하는데 적합
4. <hr> : 문단 레벨에서 주제의 분리
* 문단 레벨에서 주제의 분리를 나타냄
* 씬 전환 또는 참고서의 섹션 냉에서 다른 화제로의 전환 등
* 시각적으로는 분리를 위한 선이 하나 보이지만 표현적 마크업으로 사용하면 안됨
* <ht>은 마침 요소 없이 단일 요소로 사용됨
목록
* 텍스트 콘텐츠를 설명학시 위해 자주 사용되는 구조
* 순서 있는 목록, 순서 없는 목록, 정의 목록
1. 순서가 있는 목록 : 순서가 바뀌면 의미가 바뀌는 목록
* <ol> 요소 : 순서가 있는 목록 정의
* <li> 요소 : <ol>의 자식 요소로 목록의 아이템 역할
사용 예
<ol>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ol>
"숫자 스타일 같은 경우는 CSS 로 정의 해주어야 한다."
2. 순서가 없는 목록
* <ul> 요소 : 순서가 없는 목록 정의
* <li> 요소 : 목록 아이템 표현
* 목록 앞에 숫자 대신 말머리 기호로 나타냄
사용 예
<ul>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
"말머리 기호의 스타일 역시 CSS로 정의해주어야 한다."
3. 정의 목록
* 사전식 정의를 위해 사용
* 하나 이상의 '정의 제목'과 '정의 내용'의 쌍으로 이루어짐
사용 예
<dl>
<dt>내용</dt>
<dd>내용</dd>
</dl>
<dl> : 정의 목록 요소
<dt> : 정의 목록 제목 요소
<dd> : 정의 목록 데이터(값) 요소
기타 그룹핑
1. <figure>, <figcaption>
- <figure> 요소
* 일반적으로 사진, 일러스트, 비디오 등을 표시하고 주석을 다는 용도
* 제거하거나 위치를 옮기더라도 문서의 주된 흐름에는 영향을 미치지 않음
* figcaption 요소를 포함
- figcaption 요소 : figure 요소 내용에 대한 캡션
2. <div>
* 구조적으로 특별한 의미가 전혀 없으
* 스타일 또는 스크립트 목적으로 콘텐츠를 분리하기 위해 사용
id, class, title
* 전역 속성으로 모든 요소에서 속성으로 사용 가능
1. id 속성
* HTML 코드 내 유일한 식별자
2. class 속성
* HTML 코드 내 같은 값을 다수 가질 수 있음
* CSS나 JavaScript에서 HTML 코드 내 여러 요소에 동일한 스타일, 작동 적용을 위해 사용
3. title 속성
* 요소의 조언 정보를 나타냄
* 웹 브라우저에서 툴팁으로 표시
텍스트 관련 요소
- 텍스트 구조를 나타내는 온라인 레벨 요소
1. <a>
* 하이퍼링크를 나타냄
* herf 속성으로 링크 경로를 지정
사용 예
<a href="www.naver.com" target="_blank">회사</a>
※ targer 속성 : 실행 될 윈도우 지정 ( _self, _parent, _top, _blank 값 중 하나를 속성으로 가짐 )
_self : 현재의 웹 브라우저 창에서 링크가 열림
_parent : 현재의 웹 브라우저 창의 부모 창이 있다면 그 부모 창에서 링크가 열림
_top : 최상위 웹 브라우저 창에서 링크가 열림
_blank : 새로운 웹 브라우저 창을 생성하고 링크가 열림
href 속성이 없다면 target 속성도 사용하면 안됨
2. <em>, <strong>
* <em> 요소 : 내용을 강조하기 위해 사용
* <strong> 요소 : 내용이 중요함을 표시
* 요소를 중첩해 강조와 중요함의 정도를 표현 가능
3. <q>, <cite>
* <q> 요소 : 인용을 나타내는 인라인 요소
* <blockquote>를 사용하여 인용된 단락 표현
* <q> 요소로 인용 구두점을 사용하면 안됨
* <cite> 요소 : 인용 문구의 원본 주소, 즉 작품의 제목 언급이나 참조 했을때 사용
4. <abbr>
* 약어 및 두문자어 나타냄
* title 속성 : <abbr>에서 사용할 때만 원형 표시 가능
* 특정 약어 스타일을 적용하고자 할 때 span 대신 사용 간능
5. <i>, <b>
* i와 b 요소를 예전 버전의 HTML에서 표현적 마크업 요소
* HTML5에서 자주 사용하는 표현적 마크업에 구종적 의미를 부여
* <i> 요소 : 가장 주된 사용은 다른 언어 표현 (영문에서 이텔릭체로 표현하는 숙어인용, 분류학 등에 사용)
* <b> 요소 : 의미 있는 중요성을 부가하지 않고 눈에 띄게 하기 위해 사용
6. <sup>, <sub>
* <sup> 요소 : 위첨자
* <sub> 요소 : 아래 첨자
7. <span>, <br>, <img>
- <span> 요소
* 아무 의미도 가지고 있지 않음
* 단지 인라인 레벨에서 스타일을 적용하거나 스크립트에서 사용하고자 콘텐츠를 분리하는 역할
- <br> 요소
* 마침 요소 없이 사용되며, 문단 분리가 아닌 다순 줄바꿈을 표시
* 단락 분리의 의미로 사용해서는 안되며 시 또는 주소 작성 등에 사용
- <img> 요소
* 이미지를 의미
* 마침 요소가 없이 단독으로 사용
* 디자인을 위한 이미지를 지정에 사용하면 안됨
* src 속성에 이미지의 경로를 지정
* alt 속성은 이미지를 대체하기 위한 텍스트
'매니저 > HTML5&CSS3&Javascript&PHP&드림위버' 카테고리의 다른 글
| PHP 소개 (임시저장) (0) | 2013.03.09 |
|---|---|
| HTML5 문서 구조화 (2) (0) | 2013.03.05 |
| HTML5의 이해 (0) | 2013.02.15 |
| JavaScript 기초 문법편 (0) | 2013.02.08 |
| 토글 스위치 (0) | 2013.01.02 |