HTML 1st
머리글(H1~ H6)
- 계층 구조를 지킨다. > 단계적 계층이 깊어지는 섹션
- WCAG1.0에서는 '우선도'를 계층구조 순서로 정의
- 도중 레벨의 제목을 건너뛰는 것 피할 것
markup
<h1> 제목1 </h1> <h2> 제목2 </h2> <h3> 제목3 </h3> <h4> 제목4 </h4> <h5> 제목5 </h5> <h6> 제목6 </h6>
예제
제목1
제목2
제목3
제목4
제목5
제목6
그룹화 요소 div와 span
id, class속성으로 식별자 지정
div
블럭 레벨 요소
span
인라인 요소
블록레벨요소와 인라인요소
- 블록레벨요소
- 한개의 독립된 덩어리, 인라인요소와 텍스트 포함 가능, 일부는 다른 블록 레벨 요소도 포함 가능 - h1~h6, p, address
- 인라인요소
- 행 안의 일부, 텍스트와 동격의 요소, 블록 레벨을 포함할 수 없다. body요소 직접적 하위 내용으로 하는 것은 피한다.- a, img, em, strong
p : paragraph , <br />
'단락', '문장의 한 덩어리'
블록레벨요소를 포함할 수 없다.
line break
종료태그 불필요
markup
<p>수업은 할만한가요?<br /> 재밌었으면 좋겠어요.<br /> 열공하세요.</p>
예제
수업은 할만한가요?
재밌었으면 좋겠어요.
열공하세요.
a
a 요소안에 a는 포함 할 수 없다.
title로 링크의 보충정보를 표시한다.
markup
<a href="mailto:smart0971@nate.com">smart0971@nate.com</a> <a href="http://www.idowww.com" target="_blank" title="새창으로">idowww.com</a>
img
인라인 요소이지만 빈요소이므로 종료태그가 불필요
src속성와 alt속성이 필수
longdesc속성으로 alt속성 보완
width, height 속성
markup
<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/370464_1791095554_252091650_q.jpg" alt="쭈" />
예제
강조 em : emphasis
이택릭로 표현됨
markup
<p><em>강조</em>는 이렇게~</p>
예제
강조는 이렇게~
더 강한 강조 strong : strong emphasis
볼드체로 표현됨
markup
<p><strong>더한 강조</strong>는 이렇게~</p>
예제
더한 강조는 이렇게~
생략어(abbr : abbreviated) & 두문자어(acronym: acronym)
abbr은 한문자씩 발음하는 단어, acronym은 한단어로 발음하는 단어, 헷갈리면 abbr로
title속성으로 전체 철자를 지정
markup
<abbr title="Social Networking Services">SNS</abbr>의 <acronym title="National Association of Securities Dealers Automated Quotations">NASDAQ</acronym> 상장
예제
추가글 ins(insert text) 과 삭제글 del(deleted text)
문서안에서 어떤 텍스트가 변경되었는지를 사용자에게 전달
datetime, cite, title 속성을 가짐
markup
<del> 삭제한 내용 </del> <ins> 덧붙이는 내용 </ins>
예제
위첨자 sup(superscript) 와 아래첨자 sub(subscript)
markup
<p>2<sup>2</sup></p> <p>H<sub>2</sub>O</p>
예제
22
H2O
구분선 hr : horizontal rule
블록 레벨 요소이지만 빈 요소. 종료태그 없음
전후의 내용을 명확히 구분짓는 의미
markup
<div class="header"> <h1>아는 디자이너</h1> </div> <hr /> <div class="content"> <p>대체 뭘 알아야하지</p> </div>
예제
아는 디자이너
대체 뭘 알아야하지
인용문 blockquote
블록 레벨 요소이지만 직접 인라인 요소와 텍스트를 포함하는 것은 불가능
인라인에서의 인용에는 <q>요소를 쓰기도 한다.
markup
<blockquote>꿈이야 말로 진정 자연스러운 것이다.<br /> 자연의 손 길 앞에서도 쇠퇴하지 않으니.</blockquote> <p>영국 일간 텔레그래프는 <q>오바마가 펜실베니아와 오하이오, 위스콘신주 등 주요 접전 지역에서 승기를 잡았다</q>며 <q>재선에 성공할 것으로 보인다</q>고 전했다.</p>
예제
꿈이야 말로 진정 자연스러운 것이다.
자연의 손 길 앞에서도 쇠퇴하지 않으니.
영국 일간 텔레그래프는 오바마가 펜실베니아와 오하이오, 위스콘신주 등 주요 접전 지역에서 승기를 잡았다
며 재선에 성공할 것으로 보인다
고 전했다.
정형화된 텍스트 pre
줄바꿈과 스페이스가 그대로 브라우저에 표시되는 텍스트
보통 code요소, 스크립트언어등 소스코드를 표시하거나, 정형시를 표현하는데 사용된다.
img, big, small, sub, sup, ins, del, label, input, select, textarea, button, noscript는 포함할 수 없다.
markup
<pre> 내 마음의 어딘듯 한편에 끝없는 강물이 흐르네 돋쳐오르는 아침 날빛이 빤질한 은결을 돋우네 </pre>
예제
내 마음의 어딘듯 한편에 끝없는 강물이 흐르네 돋쳐오르는 아침 날빛이 빤질한 은결을 돋우네
목록(UL, OL, DL)
ol : ordered list
- 블록레벨요소이지만 li(list item)이외의 요소를 포함할 수 없다.
- 번호가 부여된다.
- li는 블록 레벨 요소를 포함할 수 있으며, ul요소와 ol요소를 중첩하여 사용할 수 있다.
markup
<ol> <li>순서가 있는 리스트 </li> <li>순서가 있는 리스트 </li> <li>순서가 있는 리스트 </li> </ol>
예제
- 순서가 있는 리스트
- 순서가 있는 리스트
- 순서가 있는 리스트
ul : unordered list
- 블록레벨요소이지만 li이외의 요소를 포함할 수 없다.
markup
<ul> <li>순서가 없는 리스트 </li> <li>순서가 없는 리스트 </li> <li>순서가 없는 리스트 </li> </ul>
예제
- 순서가 없는 리스트
- 순서가 없는 리스트
- 순서가 없는 리스트
dl : definition list
- dt(definition term)과 dd(definition description)요소를 포함한다.
- dt는 인라인 요소.
- dd는 블럭 레벨 요소이며 인라인요소와 텍스트를 포함할 수 있고, 블록 레벨 요소도 포함할 수 있다.
markup
<dl> <dt>의미가 있는 리스트 타이틀 </dt> <dd>의미가 있는 리스트 타이틀의 의미나 내용 </dd> </dl>
예제
- 의미가 있는 리스트 타이틀
- 의미가 있는 리스트 타이틀의 의미나 내용
address
페이지 끝부분의 푸터 정보로서 공개일과 갱신일, 연락처(이메일)등을 포함한다.
블럭 레벨 요소 포함할수 없다.
body, blockquote, div, form, fieldset, object의 자식요소로 존재하되 img, object, map등의 인라인 요소는 포함해서는 안된다.
markup
<address>smart0971@nate.com</address>
예제
표 table
- 행 <tr>,열 <th>, 데이터 셀 <td>
- 행 그룹화<thead>,<tbody>,<tfoot>, 열 그룹화<colgroup>,col>
- 셀 병합 colspan, rowspan
- 좀더 높은 레벨의 셀 관련 scope
markup
<table summary="이 표는 보스턴 레드삭스 월드시리즈 성적 차트입니다."> <caption>테이블 캡션</caption> <colgroup><col width="20%" /><col width="30%" /><col width="40%" /></colgroup> <thead> <tr> <th scope="col">연도</th> <th scope="col">상대팀</th> <th scope="col">시즌성적(승-패)</th> </tr> </thead> <tfoot> <tr> <td colspan="3">단위 등 테이블 하단 tfoot영역</td> </tr> </tfoot> <tbody> <tr> <th scope="row">1918</th> <td colspan="2">가로병합</td> </tr> <tr> <th scope="row">1916</th> <td>브룩클린 로빈스</td> <td>91-63</td> </tr> <tr> <th scope="row" rowspan="2">1914</th> <td>필라델피아 필리스</td> <td>101-50</td> </tr> <tr> <td scope="row">뉴욕 자이언츠</td> <td>105-47</td> </tr> </tbody> </table>
예제
연도 | 상대팀 | 시즌성적(승-패) |
---|---|---|
단위 등 테이블 하단 tfoot영역 | ||
1918 | 가로병합 | |
1916 | 브룩클린 로빈스 | 91-63 |
1914 | 필라델피아 필리스 | 101-50 |
뉴욕 자이언츠 | 105-47 |
주석
이중하이픈(--)사용 금지
markup
주석사이