XHTML의 구문 요소

XHTML의 구문 요소

1. 강조 

1) em 요소 <em></em>

- 단어나 구를 강조

- 이택릭체로 화면에 표시

2) strong 요소 <strong></strong>

- 단어나 구를 <em> 보다 강하게 강조

- 일반적으로는 볼드체로 화면에 표시

- <em>과 중첩하여 아주 강한 강조 가능

<p>웹문서를 작성할 때 마크업 언어는 반드시 <strong><em>의미 있게</em></strong> 사용해야 합니다.</p>

2. 인용 

1) cite 요소 <cite></cite>

- 출처를 표시하거나 인용문을 쓸 때 사용

<p>아시아 경제 기사</p>

<blockquote cite="http://view.asiae.co.kr">

<p>직장인 마음 건강 되살리기를 시작으로 심리치유를 위한 사회적기업 재단법인을 설립하는 것을 최종 목표로한다</p>

<p><cite>김범수 카카오의장</cite></p>

</blockquote>

2) q 요소 <q></q>

- 짧은 인라인 이용문 정의

- 인용부호를 넣지 말고 브라우저의 문장부호를 그대로 사용

<p>

홍 감독은 <q cite=“http://sports.khan.co.kr”>선수들의 옷차림, 첫 걸음부터 변해야 한다</q>고 기자회견장에서 말했다.

</p>

3. 정의 

1) dfn 요소 <dfn></dfn>

- 페이지에서 반복되는 용어의 예를 정의

- 인접한 텍스트로 용어의 의미 정의하고 어려울 경우 title 속성을 이용

- 화면에 이텔릭체로 표시됨

<p>HTML5는 2004년 6월 <dfn title="Web Hypertext Application Technology Working Group">WHATWG</dfn>에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다.</p>

4. 약자 사용

1) abbr 요소 <abbr></abbr>

- 긴 용어를 여러 단어의 첫 글자를 따서 짧게 표현한 형태

- 더 일반적인 형태

2) acronym 요소 <acronym></acronym>

- 긴 단어의 음절에서 글자를 가져와 발음이 가능한 단어를 만든다.

<p>사용하신 카드 뒷면과 declined된 <abbr title="Automatic Teller Machine">ATM</abbr> 기계에 있는 기호가 맞다면 <acronym title="Personal Identification Number">PIN</acronym> 넘버가 잘못된 것 같습니다.</p>

5. 삽입/삭제

1) del 요소 <del></del>

- del 요소는 삭제한 텍스트를 표현한다.

2) ins 요소 <ins></ins>

- ins 요소는 삽입된 텍스트를 표현한다.

3) datime 요소 <datetime></datetime>

- datetime 속성은 변경한 날짜와 시간 표시할 때 사용된다.

<p>디자인그룹나인에서<del datetime="2013-06-23T10:49:15“ cite=“http://w3labs.kr”>7월1일</del>

<ins datetime="2013-06-23T10:49:15" title="일자가 7일 연기됨">7월8일</ins>에 HTML5 관련 세미나를 진행한다.</p>

del ins 삽입 삭제 요소 표기시 사용 del은 가운뎃줄 ins는 밑줄

6. 프로그래밍

- <code>요소는 컴퓨터 언어인 코드를 나타낼 때 사용

- <kbd>요소는 사용자가 입력해야 하는 텍스트나 명령 정의

- <samp>요소는 프로그램이나 스크립트의 결과를 견본으로 화면에 표시

- <var>요소는 프로그래밍 변수나 매개 변수를 나타냄

- <var>요소만 이탤릭 체로 표시되고 나머지는 고정 너비체로 표시

- <code>, <kbd>, <samp>요소들은 <pre>요소와 함께 사용

7. 이미지 

1) img 요소

- 요소 자체가 아닌 참조된 파일을 가져와서 렌더링하는 대체 요소

- 텍스트 콘텐츠가 없는 빈 요소

2)  alt 속성

- 대체 텍스트를 제공하는 필수 속성

3) longdesc 속성

- 이미지에 대한 상세한 설명이 있는 다른 페이지로 연결

<p><img src="piechart.gif" alt=“많이 찾는 토핑의 비율을 파이차트로 표현" longdesc=“toppings.html" /></p>

4) title 속성

- 툴팁 사용을 위해서는 title 속성 이용

5) width, height 속성

- 마크업 렌더링 시 이미지가 차지할 공간 정보 제공

- 이미지 실제 크기와 동일하게 지정

- 표현을 위한 속성이 아니란 점을 기억해야 한다.

8. 링크

1) a 요소

- 컨텐츠에 링크 설정

2) title 속성

- 대체 설명

<a href=“http://www.daum.net/”>다음</a>

<a href=“http://www.daum.net/” target=“_blank” >다음</a>

<a href=“http://www.daum.net/” target=“_blank” ><img src=“daum.net” alt=“다음 로고” /></a>

<a href=“~” ><span class=“blind”>포커스 분양정보</span>더보기</a>

<a href=“~” title=“포커스 분양정보 더보기”>더보기</a>

더보기 태그 예 (http://realestate.daum.net)

<span class="blind">포커스 분양정보</span>더보기