[HTML5] 3. 텍스트 요소

텍스트 요소

• a : 링크
• em : 강조
• strong : 중요성
• small : 세목
• cite : 출저
• q : 인용문
• dfn : 정의어
• abbr : 약어
• time : 날짜와 시간
• code : 프로그램 언어
• sub : 아랫첨자
• sup : 윗첨자
• i : 이텔릭체
• b : 굵은 글씨
• ins : 밑줄
• del : 수정 텍스트 가운데 줄 
• mark : 하이라이트
• ruby : 루비 문자 선언
• rt : 루비 문자 텍스트
• rp : 루비 미지원 브라우저 출력 태그
• s : 관련이 없어짐 표현
• u : 고유명사 철자 표현

<em>

• 디자인 목적으로 강조, CSS 처리
• html4-강조, html5-중요성(strong)을 표현하지 않음

<p>나는<em>아침에</em>출근한다.</p>

<p>나는<em>저녁에</em>퇴근한다.</p>

<strong>

• 중요성 전달에 대한 범위 표현
• html5-중요성과 강조를 구분하여 표현
• strong 강조 시멘틱 의미 제거, 중요성 시멘틱 부여

<p><strong>주의:최근에 바이러스가 퍼져 환자가 급증하고 있습니다.</strong>반드시 마스크를 착용하세요</p>

<small>

• 작은 텍스트로 표현되는 주석
• 면책조항의 경고, 법령제약, 저작권 표시의 법률용어, 제약의 조건, 라이센스 요건

<footer>

<p><small>copyright&copy; 2015.</small></p>

</footer>

<article>

<hgroup>

<h1>개발자센터</h1>

<h2>개발자 웹퍼블리셔</h2>

</hgroup>

<p>개발자센터<small>(서울 강남구 강남대로)</small>에서는 CDN 서비스를 제공하고 있습니다.</p>

</article>

<p><strong><small>CDN 서버 불안정에 의한 홈페이지 연결 오류에 대하여 어떤 책임도 지지 않습니다.</small></strong></p>

<cite>

• 인용 내용의 제목 또는 출저
• 사람의 이름에는 사용하지 않음

<p>IT 서적<cite>반응형 웹을 위한 자바스크립트</cite></p>

<q>

• 인용 문
• 문단(구) 에서만 사용
• 여러 장을 표현하는 블록단위 사용 불가
• 블록 단위 사용시 - <blockquote> 사용

<p>프로이드는<q>구순기고착은 불신, 사랑 거부, 친근한 관계형성 하는데 대한 공포와 무능</q>이 라고 하였다.</p>

<dfn>

• 정의어
• 기술목록, 용어에 대한 설명

<section>

<h2>용어</h2>

<dl>

<dt><dfn>절대URL</dfn></dt>

<dd>web address사양에 정의된 절대 web address</dd>

<dt><dfn>웹표준</dfn></dt>

<dd>웹 사이트의 규격화<dd>

</dl>

</section>

<dfn>

• 약어
• 첫머리의 글자 표현

<p><abbr title="HyperText Markup Languang">html</abbr>은 홈페이지 제작시 사용 됩니다.</p>

<time>

• 날짜와 시간
• 브라우저, 로봇 등의 그 일시를 정확히 지정
• 연월일 구분 시, 붙임표 
• 연월일 시간 구분시, 대문자 T
• 시분초 구분시, 콜론 
• datetime : 컴퓨터가 읽을 수 있는 포맷으로 일시를 지정
• pubdate : 부모요소의 article요소의 컨텐츠 게시 일시임를 나타내는 논리 속성

<time>2015-06-05</time>

<time>2015-06-05T11:26</time>

<time>2015-06-05T11:26:31</time>

<time>11:26</time>

<header>

<h1>재미있는 코딩하기</h1>

<!--문서 전체의 발행 일시를 표현-->

<p><time datetime="2015-06-05" pubdate="pubdate">2015년 06월 05일</time></p>

</header>

<p>제가 코딩한 것을 정리 해 보았습니다</p>

<article>

<header>

<h2>코딩하기</h2>

<!--이포스트의 발행일시를표현-->

<p><time datetime="2015-06-05" pubdate="pubdate">2015년 06월 05일</time></p>

</header>

<!--이전체의발행일시를 표현-->

<p><time datetime="2015-06-05" pubdate="pubdate">어제</time>코딩 한 목록을 보여드리겠습니다</p>

</article>

<code>

• 프로그램 코드 
• 프로그램에서의 함수명, 변수명, 메소드명, 속성명, XML HTML 등의 이름 표현

<span>지역 변수의 선언<code>var test = 'Keep going'</code></span>
<span>아래의 이미지<code>'test.jpg'</code></span>

<kbd>

• 사용자가 입력한 텍스트

<var>

• 프로그램의 변수 또는 인수

 

<sub>

• 아랫첨자

<p>This text contains _subscript text.</p>

<sup>

• 윗첨자

<p>This text contains ^subscript text.</p>

<i>

• 이텔릭체
• 소리, 분위기를 나타내는  텍스트 범위
  
• 분류용어, 기술용어 외국견언 사고배의 이름 등의 표현

<p>너는<i>얼마나 멍청한가!</i>라고 생각했다.누구도 그가<i>바보</i>라고 생각했지만 그는 엄청난<i>천재</i>였다</p>

<b>

• 표현에 있어서 굵은 글씨 표현
• 다른 문장과 구분시 사용
• 강조나 중요성은 나타내지 않음

<p>별이<b>반짝반짝</b>빛이 납니다</p>

<mark>

• 하이라이트
• 대상을 다른 부분에 참조할 목적
• 특정 텍스트 범위 강조

<p>그는 말했습니다</p>

<blockquote>

<p>다른이에게 상처를 주면<mark>그상처는 다시 돌아온다</mark>라고 말했습니다.</p>

</blockquote>

<ruby>, <rt>, <rp>

• ruby : 루비를 표시한 텍스트 표현
• rt : 루비 텍스트 
• rp : 루비 ruby를 지원하지 않는 브라우저에 루비를 괄호에 넣어 표시

<p><ruby>禹민지<rt>우민지</rt></ruby>입니다</p>

<p>

<ruby>禹민지<rp><rt>우민지</rt></rp></ruby>

</p>

<s>

• 더이상의 정확하지 않은 의미 또는 관련이 없어짐을 나타냄
• 취소선으로 표현, 삭제 되었다는 del요소 사용

<h2>하드가격인하</h2>

<p><s>희망 소매가격 - 210000</s></p>

<p><strong>하루 세일로 150000</strong></p>

<u>

• 텍스트에 라벨을 달고 싶을 경우
• 중국어 고유명사 또는 단어의 철자 표현

<p>지도상<u>대천댐</u>라고 써있지만 사실은<em>대청댐</em>이었다</p>

<p><strong>하루 세일로 150000</strong></p>

<wbr>

• 줄바꿈 허용 시 적용