본문 바로가기

Web standard

텍스트 정의를 위한 인라인 요소들

반응형
강조(em 요소, strong 요소)
특정 텍스트를 일반적으로 강조할 때 em(emphasis)요소를 사용하고 더욱 강한 강조를 하려면 strong(strong emphasis)요소를 사용한다. em요소는 이택릭체로 strong요소는 볼드체로 표현되며 CSS로 모양을 바꾸어 표현할 수 있다.
예제) <p>대세는 <strong>웹표준</strong>이다.</p>
 

생략어와 두문자어(abbr요소, acronym 요소)

일 부의 텍스트를 생략어(abbreviated form)로 정의하는 데는 abbr요소를, 두문자어(acronym)로 정의하는 데는 acronym요소를 사용한다. abbr요소는 'WWW','HTML','IT' 등 한 문자씩 발음하는 단어를, acronym 요소는 'NATO', 'UNESCO' 등 한 단어로 발음하는 단어를 지정하는 점이 다르다.

예제) <p>최근 <abbr title="Information Technology">IT</abbr>의 진보에 의해 지금까지 "잠재적노동력"이었던 주부등이 <acronym title="Small Office Home Office">SOHO</acronym>의 형태로 재택근무하는 것이 가능해 졌다.</p>

 

추가글과 삭제글(ins 요소, del 요소)

추가글 ins 요소(insert text)는 밑줄, 삭제글 del 요소(deleted text)는 취소선이 자동으로 그어진다. 두 요소는 상황에 따라 블록 레벨 요소도 인라인 요소도 될 수 있는 특수요소이다. datetime 속성으로 추가, 삭제한 날짜와 시간을 표시할 수 있다. cite속성으로 근거가 되는 사이트 주소를 작성할 수 있고, title 속성으로 보충정보를 기술할 수 있다. 

예제) - 블록 레벨로 쓰일 때

<del>
 <p>XHTML은 eXtsnsible Hyper Text Markup Language 이다.</p>
</del>
<ins>
 <p>XHTML은 eXtsnsible Hyper Text Markup Language 이다.</p>
</ins>

예제) - 인라인 요소로 쓰일 때

<p>XHTML은 <ins datetime="2008-11-11T11:00:00+09:00">eXtsnsible Hyper Text Markup Language</ins> 이다.</p>

 

위첨자와 아래첨자(sup 요소, sub 요소)

위첨자(superscript)로 정의하기 위해서는 sup 요소를, 아래첨자(subscript)를 정의할 때는 sub 요소를 사용한다.

예제) 2의 3제곱은 : 2<sup>5</sup>

 

정의어(dfn 요소)

일부 텍스트를 정의어(instance definition)로 지정하는 데 사용한다. 정의어는 문서 안에서 구체적인 의미가 부여된 전문용어나 관용구 등의 어구이다. dfn 요소는 인라인 요소이며 브라우저에서는 이탤릭체로 표현된다.

예제)

웹표준을 준수하기 위해서 <dfn title="xhtml은 extensible Markup Language의 약어이다.">xHTML</dfn>을 알아야만 한다.
<dl>
 <dt>xHTML의 의미</dt>
 <dd><p>xhtml은 extensible Markup Language의 약어이다.</p></dd>
</dl>

 

컴퓨터 특유의 텍스트(code 요소, var 요소, samp 요소, kbd 요소)

code 요소 : 프로그램이나 스크립트의 소스코드 표시

var 요소 : 프로그램이나 스크립트의 변수와 인수 표시

samp 요소 : 프로그램이나 스크립트의 출력예 표시

kbd 요소 : 사용자가 입력하는 텍스트 표시

 

이 요소들은 인라인 요소이며 code, samp, kbd 요소는 고정폭 폰트로 표시되고, var 요소는 이탤릭체로 표시된다.

 

 

텍스트 스타일 요소

b요소 : 텍스트를 굵게

i요소 : 텍스트를 이탤릭체로

big요소 : 텍스트를 한단계 크게

small요소 : 텍스트를 한단계 작게

tt요소 : 텍스트를 고정폭 폰트로

 

이들은 인라인 요소이며 CSS로 지정할 수 없는 상황에서 하위호환성을 확보하기 위한 요소들이다. XHTML2.0에서 폐지될 예정이다. CSS로 표현하면 다음과 같다.

.bb {font-weight: bold;}

.ii {font-style: italic;}

.big {font-size: large;}

.small {font-size: small;}

.tt {font-family: monospace;}

반응형