본문 : 내용 편집(Edit) 요소 - CITE, Q, ABBR, SUB, SUP, DEL, INS, S, ADDRESS, SMALL, TIME, WBR, SPAN, BDO, BDI, RUBY, BR

웹문서의 콘텐츠를 꾸미거나 부가적인 내용을 추가하는 요소들을 살펴봅니다.

CITE 요소

cite 요소는 HTML5에서 재정의된 요소로서, 인용된 작품 제목(CITEd title of a work)을 표시한다.

<p>이 글은 <cite>UX DESIGN</cite>에 기초하여 작성되었다.</p>

• 책, 논문, 에세이, 노래, 영화, 게임등이 작품에 해당하며 내용 중에 다른 사람의 작품을 소개하는 내용이 있을 때 cite 요소를 사용한다.
• cite 요소는 인용을 위한 표준기술이지만 인용 여부와 상관없이 작품 제목을 표시하는 용도로 사용할 수도 있다.
• cite 요소는 참고 또는 출처에 관한 제목을 인용하는 것이고 q 요소는 참고 또는 출처에 있는 내용을 인용한다.
• cite 요소는 인라인 요소이며 브라우저 대부분은 cite 요소로 마크업된 글자를 이탤릭체로 표시하고 있다.
• cite 요소는 반드시 외부에 있는 내용을 인용한다.

Q 요소

q 요소는 인용된 내용(Quoted content)을 표시한다.

<p>철수는 <q>인생은 아름답다</q>라고 말했다.</p>

• 인용된 내용이라면 내부이든 외부이든 상관없이 사용할 수 있다.
• 인라인 요소이며 브라우저 대부분은 이탤릭체와 큰따옴표로 표현하고 있다.

ABBR 요소

abbr 요소는 약어(ABBReviation) 또는 두문자어(acronym)를 표시한다.

<abbr title="HyperText Markup Language">HTML</abbr>

HTML

• HTML5에서는 acronym 요소가 사라졌듯이 복잡하고 미묘한 언어적 이슈는 마크업 언어보다는 글쓰기 영역에서 해결하는 것이 더 낫다고 판단된다. WWW를 설명하기 위해 굳이 abbr 요소와 같은 html 규격을 사용할 필요 없이 글쓰기 영역에서 WWW(World Wide Web)라고 표현해 주면 되는 것이다.
• 약어나 두문자어에 관한 설명은 title 속성을 사용할 수도 있으나 이 역시 출력되지 않을 수 있기에 글 쓰기 영역에서 원천적으로 작성되는 것이 유효하다.

SUB 요소

sub 요소는 아래 첨자(SUBscript)를 표시한다.

<p>H<sub>2</sub>O</p>

H₂O

• 첨자는 문자나 기호로 이루어져 있으며 특별한 규칙에 따라 크기와 위치가 정해진다.

SUP 요소

sup 요소는 위 첨자(SUPerscript)를 표시한다.

<var>E</var>=<var>m</var><var>C</var><sup>2</sup>

E=mC²

• 첨자는 문자나 기호로 이루어져 있으며 특별한 규칙에 따라 크기와 위치가 정해진다.

DEL 요소

del 요소는 삭제된 글자(DELeted text)를 표시한다.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is blue red!

• 문서 대부분은 최종 상태로 제공되지만 규칙이나 지침처럼 개정 여부가 중요한 콘텐츠는 변경 전과 후의 내용을 비교 평가할 수 있게 구성하기도 하며, 이 럴때 del 요소를 사용한다.
• 삭제 여부는 중요한 정보이므로 브라우저 대부분은 del 요소가 적용된 글자를 취소선으로 표현한다.

cite 속성

cite 속성을 이용해서 삭제 이유가 기술된 문서를 지정한다. 경우에 따라서는 변경 이유를 자세하게 알려야 할 때가 있다.

<del cite="http://www.example.com/promotion.html/" datetime="2014-01-20T20:00:00">워크숍 개최</del>

워크숍 개최

datetime 속성

HTML5에 새롭게 추가된 속성으로서, datetime 속성은 변경 시점의 날짜와 시간 정보를 지정한다.

• YYYY : 년도
• MM : 월
• DD : 날짜
• T : 구분자
• hh : 시
• mm : 분
• ss : 초
• TZD : 시간대 지정(Time Zone Designator), 그리니치 표준시를 기준으로 계산한 시차

INS 요소

ins 요소는 삽입(추가)된 글자(INSerted text)를 표시한다.

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is blue red!

• 이전 내용과 다르게 어떤 내용을 추가하고 이를 알리고자 할 때 사용한다.
• del 요소와 짝을 이루어 사용하며 브라우저 대부분은 밑줄 있는 글자로 표시한다.
• del 요소와 마찬가지로 cite와 datetime 속성을 가진다.

S 요소

s 요소는 HTML5에 재정의된 요소로서, 더 이상 정확하지 않거나 적절하지 않다는 사실을 알리기 위해 사용한다.

<p><s>My car is blue.</s></p>
<p>My new car is silver.</p>

My car is blue.

My new car is silver.

• s 요소가 적용된 글자를 취소선으로 표현한다.

ADDRESS 요소

address 요소는 HTML5에서 재정의된 요소로서, 저작자 또는 문서에 관한 연락처 정보를 표시한다.

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

• 문서의 저작자(author), 제공자(owner), 연락 가능한 이메일 주소, 회사 주소, 전화번호 등을 나열한다.
• 현재 문서와 관련된 연락 정보에만 사용할 수 있다.
• 특정 섹션에서 사용되면 특정 섹션에 국한되고 푸터에서 사용되면 문서 전체에 대한 연락처 정보이다.
• 기존과 다르게 마다 각 주소를 가질수 있게 하나의 문서에 여러개의 연락처가 들어갈 수 있게 바뀌었다.
• 블록 레벨 요소를 포함할 수 없으며 인라인 요소와 텍스트만 포함할 수 있다.
• 브라우저 대부분이 address 요소로 마크업된 텍스트를 이탤릭체로 표시하는 동시에 줄 띄기(line spacing)나 줄바꿈(line breaks)을 통해 다른 정보와 구분되도록 한다.

이런 연락처 정보는 마이크로포맷, RDFa, 마이크로데이터등이 되게 마크업을 만들 수 있다.

SMALL 요소

small 요소는 전면적으로 재정의 되었는데, "권리에 대한 정의, 절차에 대한 안내, 법적 제한 또는 copyright 내용이 들어있는 작은 글자 영역을 의미한다. 또 속성에 대한 설명이나 라이센스 충족에 대한 설명등으로 사용된다"고 정의되었다. 기본 크기의 글자보다 더 작게 표현되는 이유는 메인 콘텐츠가 아니라 주석이라는 점을 밝히기 위해서다.

<p>W3Schools.com - the world's largest web development site.</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>

사용 범위

• 저작권(copyright)처럼 굳이 자세히 읽을 필요가 없거나 읽지 않아도 그 내용을 파악할 수 있는 콘텐츠를 표현할 때
• 법적 규제(legal restrictions)처럼 밝히고 싶지 않은 콘텐츠를 소극적으로 표현할 때
• 코멘트(comment)처럼 중요하지 않지만 본문 내용을 이해하는데 도움되는 콘텐츠를 표현할 때

TIME 요소

time 요소는 HTML5에 새롭게 추가된 요소로서, 날짜(date), 시간(time), 시간대 차이(time-zone offset), 기간(duration)을 표시한다.

<p>우리는 매일 아침 <time>10:00</time>부터 영업합니다.</p>
<p>나는 그녀와 <time datetime="2014-02-14">발렌타인 데이</time>에 데이트 약속이 있습니다.</p>

datetime 속성

HTML5에 새롭게 추가된 속성으로서, datetime 속성은 변경 시점의 날짜와 시간 정보를 지정한다.

• YYYY : 년도
• MM : 월
• DD : 날짜
• T : 구분자
• hh : 시
• mm : 분
• ss : 초
• TZD : 시간대 지정(Time Zone Designator), 그리니치 표준시를 기준으로 계산한 시차

WBR 요소

wbr 요소는 HTML5에 새롭게 추가된 요소로서, 단어 줄바꿈(Word BReak)을 표시한다. 행의 끝 지점에 긴 단어가 올 경우 브라우저가 단어를 마음대로 끊어서 보여줄 수 없으므로 단어 전체가 다음 행으로 넘어가며 불가피하게 행의 끝 지점에 공간이 생긴다. 이럴 때 wbr 요소를 사용하면 단어를 끊어서 보여줄 수 있으며 br 요소와 달리 강제적으로 줄바꿈을 하는 것이 아니라 단어가 행의 끝 지점에 와서 단어를 끊어서 보여주어야 할 때만 줄바꿈이 이루어진다.

<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>

SPAN 요소

span 요소는 인라인 범위(inline SPAN)을 표시한다. 이 요소는 텍스트를 묶기 위한 범용적인 텍스트 컨테이너로써 텍스트의 시작과 종료 지점을 표시하여 인라인 텍스트를 묶어준다.

<p>그녀의 눈은 깊은<span style="color:blue">파란색</span>이였지.</p>

BDO 요소

bdo 요소는 양방향 오버라이드(Bi-Directional Override)여부를 표시한다. 이 요소는 텍스트 방향을 임의로 바꿀때 사용한다. 텍스트 방향은 관습적으로 정해진다.

<bdo dir="rtl">This text will go right-to-left.</bdo>

This text will go right-to-left.

dir 속성

dir 속성은 텍스트 방향을 지정하는 속성이다. 텍스트는 두가지 방향으로 진행될 수 있다.

• dir="ltr" : 텍스트를 좌에서 우로 표현한다.
• dir="rtl" : 텍스트를 우에서 좌로 표현한다.

BDI 요소

bdi 요소는 양방향 분리(Bi-Directional Isolation) 여부를 표시한다. 이 요소가 적용된 텍스트는 주변 텍스트와 다른 방향을 가질 수 있다. 저작자가 텍스트 방향을 알고 있다면 bdo 요소와 dir 속성으로 텍스트 방향을 설정하면 되지만 아예 모르고 있다면 저작자가 임의로 텍스트 방향을 설정할 수 없다.

<ul>
    <li>User <bdi>hrefs</bdi>: 60 points</li>
    <li>User <bdi>jdoe</bdi>: 80 points</li>
    <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

RUBY 요소

ruby 요소는 HTML5에 새롭게 추가된 요소로서, 루비 주석(RUBY annotation)의 기준 텍스트를 표시한다. 루비는 한자 옆에 붙이는 글이며 주석은 단어를 쉽게 풀이하기 위한 글이다. 루비 주석을 제공하려면 ruby와 rt 요소가 필요한데 ruby 요소는 주석을 필요로 하는 기준 텍스트 , rt 요소는 주석으로 제공되는 루비 텍스트를 표현한다.

<ruby>
    漢<rp>(</rp> <rt>한</rt> <rp>)</rp> 子<rp>(</rp> <rt>자</rt> <rp>)</rp>
</ruby>

漢( 한 ) 子( 자 )

• 한자, 일어등의 발음등을 표기하기위해 사용
• 5.5pt의 작은 글씨를 사용해 첨언을 넣는 영국 출판문화에서 기원한 단어

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE7	FF4	SF5	CH8	O11

RT 요소

rt 요소는 HTML5에 새롭게 추가된 요소로서, 루비 텍스트(RUBY Text)를 표시한다. 루비 텍스트는 주석으로 제공되는 글자를 말하며 주로 기준 텍스트에 대한 설명이나 음을 붙이는데 사용한다.

RP 요소

rp 요소는 루비 괄호(Ruby Parenthesis)를 표시한다. 이 요소는 브라우저가 rt 요소를 지원하지 않을 때 주석을 괄호로 표현하기 위해 사용한다.

BR 요소

br 요소는 행 바꿈(line BReak)을 표시한다.

• br 요소는 문단 내에서 행 바꿈을 통해 읽기 흐름을 가볍게 바꿀때 사용한다.
• 시처럼 읽기 시작점이 새로운 행에서 시작되는 경우에 많이 사용한다.
• 시각적 구분만을 제공하므로 의미적 구분을 주고 싶을때는 p 요소를 사용해야 한다.
• user interface처럼 user와 interface가 다른 행으로 나뉘지 않도록 하려면 두 단어 사이에 여백 문자를 넣어 user interface 라고 작성하면 된다. 이렇게 되면 user interface라는 단어는 항상 같은 행에 있게 된다.