3. 단의어 정의와 약어, 작품의 제목 표현.
- 인라인 태그 : 줄이 바뀜, p태그, div
- 블록태그 : 줄이 안 바뀜 span 태그 (내부 내용을 디자인 하기 위한 거)
dfn : 정의 definition
abbr : 축약 abbreviation
cite : 작품 제목 (html5에서 추가)
--------------------------------------------------------
http://html5.clearboth.org/text-level-semantics.html#the-dfn-element
http://html5.clearboth.org/text-level-semantics.html#the-abbr-element
http://html5.clearboth.org/text-level-semantics.html#the-cite-element
http://html5.clearboth.org/text-level-semantics.html#the-small-element
--------------------------------------------------------
cite는 html5에서 작품의 제목을 표현하는 요소로 추가되었고,
small요소는 html5에서 부정, 경고, 법적 제약, 저작권과 같은 것을 표현하는 사이드 커멘트를 나타내는 요소로 의미가 확장되었다.
--------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>abbr | inline elements</title>
<style>
body{
font: 12px arial,sans-serif;
}
abbr, dfn{
background-color: lime;
}
cite, small{
text-decoration: underline;
}
</style>
</head>
<body>
<h1>abbr element</h1>
<!-- abbr 요소는 약어, 혹은 두문자어를 나타내며, 선택적으로 그 확장을 나타냅니다. title 속성을 사용해서 약어의 원형(축약되지 않은)을 나타낼 수 있습니다. 속성을 사용하였을 경우 약어의 원형만을 포함하여야 하며 다른 것을 포함할 수 없습니다. -->
<p><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>은 웹 브라우저 제작자 및 관심있어하는 사람들로 구성된 비공식 협력단체입니다. WHATWG는 웹용애플리케이션을 만들고 배포하는 사람들을 도울 수 있도록 새 기술을 개발하길 원합니다.</p>
<p>HTML5 is a <abbr title="World Wide Web Consortium">W3C</abbr> Recommendation</p>
<hr>
<h1>dfn element</h1>
<!-- dfn 요소는 단어의 정의를 나타냅니다. dfn 요소의 가장 가까운 조상요소인 문단, 정의목록 그룹, 섹션은 dfn 요소에서 주어지는 단어에 대한 설명 역시 포함해야만 합니다. --> 그 글자의 작은 요소를 뜻을 좀더 명확하게 파악.
<p><abbr title="Hypertext Markup Language">html</abbr></p>
<p><dfn title="웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다.">html</dfn></p>
<hr>
<h1>cite element</h1>
작품 제목. 사람이름은 안됨. html5에서 추가됨.
dfn, abbr은 예전부터도 있었음. 두문자어 단어 축약을 하는 것도 있었는데 제거됨.
<!-- cite 요소는 어떤 작품의 제목을 나타냅니다. 작품이란, 예를 들어 책, 수필, 시, 악보, 노래, 대본, 필름, TV 쇼, 게임, 조각상, 그림, 영화, 연극, 오페라, 뮤지컬, 전시회 등입니다. 이러한 작품을 인용했거나 혹은 자세히 참조(citation)했을 수도 있고, 지나가면서 간략히 언급한 것일 수도 있습니다. -->
<ol>
<li><cite>내가 그리웠니 (Feat. 진실 of Mad Soul Child)</cite> MC몽</li>
<li><cite>내 생애 가장 행복한 시간 (Feat. 허각)</cite> MC몽</li>
<li><cite>마음 단단히 먹어 (Feat. 에일리)</cite> MC몽</li>
<li><cite>죽을만큼 아파서 Part 2 (Feat. 스웨덴세탁소)</cite> MC몽</li>
<li><cite>도망가자 (Feat. 린)</cite> MC몽</li>
<li><cite>고장난 선풍기 (Feat. 개리, 효린 of 씨스타)</cite> MC몽</li>
<li><cite>New York (Feat. 백지영)</cite> MC몽</li>
<li><cite>What could I do (Feat. 범키)</cite> MC몽</li>
<li><cite>Whatever (Feat. 민아 of 걸스데이)</cite> MC몽</li>
<li><cite>격정적인 열애설 (Feat. The Channels)</cite> MC몽</li>
</ol>
<hr>
저작권, 사이드 커멘드, 부가설명들을 쓸 때 좋음.
글자를한단계 작게보이게 함.
<h1>small element</h1>
<!-- small 요소는 스몰 프린트 같은 사이드 커멘트를 나타냅니다. -->
<p>사과 1박스의 값은 2만원<small>(vat별도)</small> 입니다.</p>
<p>Lorem ipsum dolor sit amet. <small>홍길동 기자</small></p>
</body>
</html>
'Front > Html' 카테고리의 다른 글
| [HTML] 3-7. 테이블 작성하기. table,tr,th,td (0) | 2020.11.05 |
|---|---|
| [HTML] 3-6. 목록 작성하기 (0) | 2020.11.05 |
| [HTML ]3-5. 제목, 문단, 연락처, 인용문 목록 작성하기 (0) | 2020.11.05 |
| [HTML] 3-4. 루비 주석과 시간의 표현 (0) | 2020.11.05 |
| [HTML] 3-2. 구문강조, 하이라이팅 (0) | 2020.11.05 |
| [HTML] 3-1. 문자 실체잠조와 수치 문자 참조 적용 (0) | 2020.11.05 |
| [HTML] 2-4. html템플릿 작성하기 (0) | 2020.11.05 |
| [HTML] 2-3. 메타요소 알아보기 (0) | 2020.11.05 |
