XHTML의 기본 요소
1. 블록 요소, 인라인 요소
1) 블록 요소 (Block Level Element)
- 별도의 줄에 표시되는 독립된 덩어리 요소
- <div>, <p>, <ul> 등등
2) 인라인 요소 (Inline Level Element)
- 블록 요소 행 안의 일부
- <span>, <a>, <img> 등등
- 하나의 단락에는 블록 요소 포함될 수 없다.
<p><div>인라인 요소</div>블록 요소 안의 일부</p> (X)
<h2><div class=“subtitle”>블록 요소란</div></h2> (X)
- 블록 요소만 포함하는 블록 요소도 불가
<body>웹 표준에서 <strong>구조와 표현을 분리</strong>한다.</body> (X)
2. 시멘틱 요소 (Semantic: 의미있는)
(1) 헤딩(heading) : <h1>~<h6>
- 새로운 섹션을 소개하기 위한 타이틀 역할
- 중요도 순으로 h1, h2, h3, h4, h5, h6의 6개 요소 사용 가능
- 계층 구조 준수로 정보 인식성을 높일 수 있음
- 텍스트와 인라인 요소만 자식으로 가지는 블록 요소
<h1>Sencha Touch 공인 교육</h1>
<h2>Fast Track to Sencha Touch</h2>
<p>HTML5 모바일 프레임워크인 센차 터치 2를 사용하여, 앱을 만들어 보자!</p>
<h2><img src=“subtitle.gif” alt=“웹표준의 정의” /></h2>
- 헤딩은 네비게이션 기능을 가진다.
- 한국정보화진흥원 사이트 참조
검색엔진 최적화
1) SEO (Search Engine Optimization) : 검색로봇이 잘 검색하고 노출되는 순위 평가에 유리한 방식으로 사이트를 구성하여 검색결과를 상위에 노출시키는 마케팅 수단 (ex) 구글)
- SEM(Search Engine Marketing) : 검색 포털에 주요 노출 위치를 구매 (ex) 네이버 키워드 광고)
(2) 문단 : <p></p>
- 파라미터(parameter)의 경계를 표시
- 텍스트와 인라인 요소만 자식으로 가지는 블록 요소
<p>미래웹기술연구소 출판사업부에서는 순수 HTML5 기반으로 제작된 아이패드용 앱북인 로봇러스티를 출간하였습니다.</p>
<p>웹기술기반의 장점을 이용하여 아이패드, 안드로이드 패드용으로 동시에 제작되었으며 현재 아이패드 앱스토어에 등록되어 있습니다.</p>
(3) 주소 : <address></address>
- 특정 문서를 책임지고 있는 사람이나 기관에 관한 연락정보를 제공
- 텍스트와 인라인 요소만 자식으로 가지는 블록 요소
- adress는 현재 페이지 담당자만 표시해야 한다.
<address>홍길동<br />honggildong@gmail.com</address> (O)
<h3>협력업체</h3>
<address>업체명 : 삼성멀티캠퍼스 tel : 3429 5114</address> (X)
(4) 목록 : <li></li>, <ul></ul>, <ol></ol>, <li></li>
※ li 요소만 자식으로 가지는 블록 요소들 ul, ol
1) ul 요소
아이템의 순서가 중요하지 않은 단순 목록
2) ol 요소
순차 목록 정의
3) li 요소
텍스트와 모든 인라인, 블록 요소를 자식으로 가지는 블록 요소
<ol>
...
<li>술이주식팀
<ul>
<li>소주 20병</li>
<li>맥주 20병</li>
</ul>
</li>
</ol>
(5) 정의 : <dl></dl>, <dt></dt>, <dd></dd>
1) dl 요소
- 아이템과 정의를 모아놓은 정의 목록 생성
- dt와 dd 요소만 자식으로 가지는 블록 요소
2) dt 요소
- 설명하는 용어나 아이템 정의
- 텍스트와 인라인 요소만 자식으로 가지는 블록 요소
3) dd 요소
- 바로 앞의 dt에 대한 설명
- 텍스트와 인라인 요소, 블록 요소들을 자식으로 가지는 블록 요소
<dl>
<dt>W3C</dt>
<dd>WWW을 위한 표준 개발 장려하는 조직</dd>
</dl>
(6) 논리적 구분 : <hr />
1) hr 요소
- 콘텐츠의 논리적인 구역을 선으로 구분하는 수평선을 표시
- 빈 요소인 블록 요소
(7) 그룹화 : <div></div>, <span></span>
1) div 요소
- 관련 콘텐츠와 요소를 묶어줌
- 텍스트, 인라인, 블록 요소를 자식으로 가지는 블록 요소
- div를 남용하는 것을 divitis라고 함
2) span 요소
- 텍스트 영역을 구분하거나 속성으로 추가 정보 전달
- 인라인 요소
(8) 인용 : <blockquote></blockquote>
1) blockquote 요소
- 긴 인용문을 나타낼 때 사용 (ex. 책의 한 구절)
- xhtml에서는 블록 요소만 자식으로 가지는 블록 요소
<p>아시아 경제 기사</p>
<blockquote cite="http://view.asiae.co.kr">
<p>직장인 마음 건강 되살리기를 시작으로 심리치유를 위한 사회적기업 재단법인을 설립하는 것을 최종 목표로 한다</p>
</blockquote>
(9) pre 요소 <pre></pre>
- 빈 칸과 줄 바꿈을 그대로 표시 (고정 너비체)
- 텍스트와 인라인 요소만 자식으로 가지는 블록 요소
<p>1일자 소스</p>
<pre>
public class helloworld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</pre>
'웹접근성과 웹표준' 카테고리의 다른 글
| 웹표준: 건너뛰기 링크 제공, 접근성 대체 텍스트 표현방법 (0) | 2013.07.19 |
|---|---|
| XHTML의 구문 요소 (0) | 2013.07.18 |
| XHTML의 기본 규칙: 마크업, DTP, 코딩 규칙, 기본 구조, title, meta 태그, 유효성 검사 (0) | 2013.07.16 |
| 웹표준 실습 환경 설정 (0) | 2013.07.15 |
| 웹 접근성 향상을 위한 전략 : 웹표준 (0) | 2013.07.14 |
