[HTML] Tag ; datalist, dd, del
[HTML] Tag ; datalist, dd, del
D01. datalist
☞ 정의 : datalist요소는 다른 컨트롤을 위해 미리 정의된 옵션의 집합을 나타냅니다.
☞ 설명 :
- datalist요소는 list속성을 사용하는 input요소와 함께 사용됩니다.
example :
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><strong>Note:</strong> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
D02. dd
☞ 정의 : dd요소는 dl요소의 용어-설명 그룹에서 설명, 정의, 값을 나타냅니다.
☞ 설명
- dl요소의 하부 요소입니다.
- 정의된 용어(dt요소)에 대한 설명을 지정합니다.
example :
<!DOCTYPE html> <html> <body> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> </html>
D03. del
☞ 정의 : del요소는 문서로부터 삭제되었음을 표현합니다.
☞ 속성 :
- cite : del요소의 변화에 대해 설명이 되어 있는 곳의 위치를 명시합니다.
- datetime : 삭제한 시간을 지정합니다.
example :
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; code, col, colgroup, command (0) | 2018.05.29 |
|---|---|
| [HTML] Tag ; canvas, caption, cite (0) | 2018.05.10 |
| [HTML] Tag ; body, br, button (0) | 2018.05.08 |
| [HTML] Tag ; bdo, big, blockquote (0) | 2018.05.08 |
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
[HTML] Tag ; code, col, colgroup, command
[HTML] Tag ; code, col, colgroup, command
[HTML] Tag ; code, col, colgroup, command
04. [ code ]
☞ 정의 : code요소는 컴퓨터 코드를 나타냅니다.
☞ 설명 : XML요소 이름, 파일 이름, 컴퓨터 프로그램등 컴퓨터가 인식할수 있는 일련의 컴퓨터 코드를 나타냅니다.
example:
<!DOCTYPE html> <html> <body> <em>Emphasized text</em><br> <strong>Strong text</strong><br> <code>A piece of computer code</code><br> <samp>Sample output from a computer program</samp><br> <kbd>Keyboard input</kbd><br> <var>Variable</var> </body> </html>
05. [ col ]
☞ 정의 : col요소는 하나 이상의 행을 나타냅니다.
☞ 속성 :
- span : 연관된 열의 갯수를 지정합니다.
☞ 설명 :
- 부모 요소는 colgroup요소이며, 그것의 부모 요소는 table요소입니다.
- 표의 열에 대해 속성값과 스타일 공유를 위한 요소입니다.
- caption요소 바로 뒤에 thead요소와 tfoot요소, tbody요소 이전에 기술합니다.
example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
06. [ colgroup ]
☞ 정의 : colgroup요소는 테이블에서 하나 이상의 행의 그룹을 나타냅니다.
☞ 속성 : span : 연관된 열의 갯수를 지정합니다.
☞ 설명 :
- 표의 열을 구조적인 그룹화를 위한 요소입니다.
- caption요소 바로 뒤에 thead요소와 tfoot요소, tbody요소 이전에 기술합니다.
- col요소를 포함할 수 있습니다.
example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
07. [ command ]
☞ 정의 : command요소는 사용자가 실행할 수 있는 명령을 나타냅니다.
☞ 속성 :
- type : 명령의 종류를 지정합니다. 다음 세걔의 키워드와 상태를 갖습니다 . ◦command : 연합된 액션을 갖는 일반적인 명령을 나타냅니다.
- checkbox : 토글이 되는 옵션이나 상태를 나타냅니다.
- radio : 목록중에서 하나의 아이템의 선택을 나타냅니다.
- label : 커맨드의 이름을 주어 사용자에게 보여줍니다. 이 속성은 반드시 명시되어야 합니다.
- icon : 커맨드를 나타낼 그림을 지정합니다.
- disabled : 불리언 속성으로 커맨드가 현재상태에서 사용할 수 없음을 나타냅니다.
- checked : 불리언 속성으로 커맨드가 선택되었음을 나타냅니다. type속성이 checkbox, radio상태가 아니면 생략되어야만 합니다.
- radiogroup : 커맨드 자신이 토글되었을 때 토글된 커맨드 그룹에 이름이 주어집니다. type속성이 radio일 때만 사용할 수 있습니다.
☞ 설명 :
- command요소는 menu요소를 사용하여 컨텍스트 메뉴나 툴바의 일부가 될 수 있습니다.
- 페이지 어디에서나 사용될 수 있으며, 키보드의 숏컷으로 정의할 수 있습니다.
example:
<!DOCTYPE html>
<html>
<head>
<script>
function save()
{
alert("Some javaScript....");
}
</script>
</head>
<body>
<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>
<p><b>Note:</b> The type attribute is currently only supported in IE9. However, IE only supports the "command" type.</p>
</body>
</html>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; datalist, dd, del (0) | 2018.05.29 |
|---|---|
| [HTML] Tag ; canvas, caption, cite (0) | 2018.05.10 |
| [HTML] Tag ; body, br, button (0) | 2018.05.08 |
| [HTML] Tag ; bdo, big, blockquote (0) | 2018.05.08 |
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
[HTML] Tag ; canvas, caption, cite
[HTML] Tag ; canvas, caption, cite
C01. [ canvas ]
☞ 정의 : canvas요소는 스크립트와 해상도에 의존하는 비트맵 캔버스를 제공합니다.
☞ 속성
- width : 요소의 너비를 지정합니다.
- height : 요소의 높이를 지정합니다.
☞ 설명
- 그래프, 게임 그래픽, 비주얼 이미지들을 바로바로 랜더링하는 용도로 사용됩니다.
example:
<canvas id="myCanvas" width="200" height="100"></canvas>
C02. [ caption ]
☞ 정의 : caption요소는 자신의 부모요소인 table요소의 제목을 지정합니다.
☞ 설명
- table요소의 바로 다음에 기술됩니다.
- caption요소는 테이블의 문맥을 소개하여 쉽게 이해할수 있도록 해줍니다.
example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
C03. [ cite ]
☞ 정의 : cite요소는 작품의 제목을 표시합니다.
☞ 설명 :
- 사람의 이름이 작품과 관련있다고 하더라도 cite로 마크업해서는 안됩니다. 가령 사람 이름은 b요소나 span요소를 사용하도록합니다.
- cite요소에 작품의 제목 이상의 것을 포함해서는 안됩니다.
- cite요소는 인용문과는 구별되므로 반드시 제목을 마크업하는 용도로만 사용해야 합니다.
example :
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; datalist, dd, del (0) | 2018.05.29 |
|---|---|
| [HTML] Tag ; code, col, colgroup, command (0) | 2018.05.29 |
| [HTML] Tag ; body, br, button (0) | 2018.05.08 |
| [HTML] Tag ; bdo, big, blockquote (0) | 2018.05.08 |
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
[HTML] Tag ; body, br, button
[HTML5] Tag ; body, br, button
B07. [ body ]
☞ 정의 : body요소는 문서의 메인 컨텐트를 나타냅니다.
☞ 설명
- HTML문서는 머리 부분(<head> ... </head>)과 본문 부분(<body> ... </body>)으로 나눌 수 있는데 본문 부분에 해당합니다.
- 올바른 문서에서는 하나의 body요소만이 존재해야 합니다.
example:
<html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
B08. [ br ]
☞ 정의 : br요소는 단락에서 텍스트를 강제로 줄바꿈 합니다.
☞ 설명
- br요소는 시나 주소같이 실제 내용의 일부인 경우에만 사용합니다.
- br을 표현적 요소를 사용해서는 안됩니다.
-문단을 구분하기 위해 <br />태그를 연속으로 사용하는 것은 바람직하지 않으며 <p>태그를 사용하도록 권장하고 있습니다.
example:
This text contains<br>a line break.
This text contains
a line break.
B09. [ button ]
☞ 정의 : button요소는 버튼을 생성합니다
☞ 속성
- autofocus : 페이지를 로드할때 해당 요소가 자동으로 포커스를 받도록 지정합니다.
- disabled : 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터도 서버에 전송하지 않는다. 불리언 속성입니다.
- name= "이름" : 버튼의 식별자를 지정합니다.
- type= 버튼의 종류를 지정합니다. ◦submit : 폼을 제출합니다. 기본값입니다.
- reset : 폼을 리셋합니다.
- button : 아무것도 하지 않습니다.
- value= "값" : 전송되는 데이터의 초기값 지정합니다.
☞ 설명
- input요소로 생성하는 버튼과 같지만, 이미지나 텍스트등을 포함하고 있어 유연한 디자인이 가능합니다.
example :
<!DOCTYPE html>
<html>
<body>
<h2>The Button Element</h2>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; code, col, colgroup, command (0) | 2018.05.29 |
|---|---|
| [HTML] Tag ; canvas, caption, cite (0) | 2018.05.10 |
| [HTML] Tag ; bdo, big, blockquote (0) | 2018.05.08 |
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
| [HTML] Tag ; aside, audio (0) | 2018.05.08 |
[HTML] Tag ; bdo, big, blockquote
[HTML/HTML5] Tag ; bdo, big, blockquote
B04. [ bdo ]
☞ 정의 : bdo요소는 텍스트의 방향을 명시적으로 지정합니다.
☞ 속성
- dir : 방향을 지정합니다.
- ltr : left to right 왼쪽에서 오른쪽으로 출력합니다.
- rtl : right to left 오른쪽에서 왼쪽으로 출력합니다.
☞ 설명
- dir 속성을 반드시 사용해야 합니다.
example:
<bdo dir="rtl">Welcome</bdo><br> <bdo dir="ltr">Welcome</bdo>
emocleW
Welcome
B05. [ big ]
☞ 정의 : big요소는 텍스트를 한단계 크게 만듭니다.
☞ 설명
- 텍스트를 크게 만드는 스타일 요소로 CSS로 대체하여 사용하는 것이 좋습니다.
(font-size:larger)
example :
<!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><big>This text is bigger.</big></p> <p><strong>Note:</strong> The big element is not supported in HTML5.</p> </body> </html>
result :
This text is normal.
This text is bigger.
Note: The big element is not supported in HTML5.
B06. [ blockquote ]
☞ 정의 : blockquote요소는 텍스트를 인용문으로 정의 합니다.
☞ 속성
- cite : 인용된 곳의 원천 소스를 표시합니다.
☞ 설명
- 텍스트를 블록레벨의 인용문으로 정의합니다.
- 시각적으로 들여쓰기로 표현됩니다.
example :
<!DOCTYPE html> <html> <body> <h1>About WWF</h1> <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> </body> </html>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; canvas, caption, cite (0) | 2018.05.10 |
|---|---|
| [HTML] Tag ; body, br, button (0) | 2018.05.08 |
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
| [HTML] Tag ; aside, audio (0) | 2018.05.08 |
| [HTML] Tag ; address, area, article (0) | 2018.05.07 |
[HTML] Tag ; b, base, bdi
[HTML] Tag ; b, base, bdi
B01. [ b ]
☞ 정의 : b요소는 텍스트를 굵게 장식하는 스타일 요소입니다
☞ 설명
◦ 키워드를 부각하기 위해 사용하기도 합니다.
◦ i요소와 마찬가지로 b요소를 사용한 의미를 class 속성을 이용하여 나타낼 수 있습니다.
◦ b 요소보다 더 적함한 요소가 있는지 고려해보길 권장합니다. 예를 들어 제목은 h1~h6요소를 사용해야 합니다. 강조를 하기위한 목적이라면 em을 사용하고, 중요성을 목적으로 하고 있다면 strong을 사용하고, 텍스트를 부각하려면 mark요소를 사용하길 권합니다.
예제 :
<p>This is normal text - <b>and this is bold text</b>.</p>
B02. [ base ]
☞ 정의
base요소는 HTML문서의 기준 URL을 명시합니다
☞ 속성
◦ href : 문서의 기준이 되는 URL을 지정합니다.
◦ target : 링크를 어떤 프레임에 열것인지를 결정합니다.
◦ _blank : 새창에 엽니다.
◦ _parent : 부모창에 엽니다.
◦ _self : 자신의 창에 엽니다.
◦ _top : 화면이 여러 프레임으로 이루어져있는 경우 모든 프레임을 지우고 전체 화면에 엽니다.
◦ [name] : 지정된 이름에 링크를 엽니다.
☞ 설명
◦ 문서의 head요소 안에서 사용됩니다.
◦ href 속성이나 target 속성중 반드시 하나 이상을 써야하며 둘 다 사용할 수도 있습니다.
예제 :
<head> <base href="https://www.w3schools.com/images/" target="_blank"> </head> <body> <img src="stickman.gif" width="24" height="39" alt="Stickman"> <a href="https://www.w3schools.com">W3Schools</a> </body>
B03. [ bdi ]
☞ 정의
bdi요소는 텍스트의 출력 방향을 브라우저가 판단해 표현합니다.
☞ 설명
◦텍스트의 방향성을 모를때 사용하면 유용합니다. 즉 브라우저가 bdi요소의 텍스트를 보고 방향성을 판단하여 화면에 출력합니다.
예제 :
<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>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; body, br, button (0) | 2018.05.08 |
|---|---|
| [HTML] Tag ; bdo, big, blockquote (0) | 2018.05.08 |
| [HTML] Tag ; aside, audio (0) | 2018.05.08 |
| [HTML] Tag ; address, area, article (0) | 2018.05.07 |
| [HTML] Tag ; a, abbr, acronym (0) | 2018.05.07 |
[HTML] Tag ; aside, audio
[HTML/HTML5] Tag ; aside, audio
07. [ aside ]
☞ 정의 :
aside요소는 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다.
☞ 설명 :
주로 사이드바의 형태로 나타냅니다.
aside요소는 문서의 주요 흐름의 일부이기 때문에 단순 삽입어구로 사용되는것은 적합하지 않습니다.
(단순 삽입어구로 사용된 경우는 어떤 경우 일까요?)
☞ 예제 :
<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
08. [ audio ]
☞ 정의
audio요소는 오디오 파일을 재생합니다.
☞ 속성
src : 재생할 오디오의 주소를 지정합니다.
preload : 다운로드 상태를 나타냅니다.
none
metadata
auto
autoplay : 자동 재생을 지정합니다.
loop : 반복 재생을 지정합니다.
controls : 브라우저의 기본 컨트롤러를 사용하도록 지정합니다.
☞ 설명
브라우저가 audio요소에서 제공하고 있는 오디오를 재생하지 못하는 경우 audio요소 내부에 있는 내용을 출력합니다.
※ 함께 알아두면 좋은 태그
source
<audio src="http://robtowns.com/music/wayfaring_stranger.mp3" controls="controls" autoplay="autoplay"></audio>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; bdo, big, blockquote (0) | 2018.05.08 |
|---|---|
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
| [HTML] Tag ; address, area, article (0) | 2018.05.07 |
| [HTML] Tag ; a, abbr, acronym (0) | 2018.05.07 |
| HTML5 - New Structural Tags : <nav> (0) | 2018.04.28 |
[HTML] Tag ; address, area, article
[HTML/HTML5] Tag ; address, area, article
04. [ address ]
☞ 정의 : address요소는 연락처 정보를 나타냅니다
☞ 설명 : 가장 가까운 상위의 <article>이나 <body>의 연락처 정보를 제공할 때 사용됩니다.
☞ 예제 :
<footer>
<address>
오시는 길 : 서울시 서울구 서울동 123-777 77호 <br />
이메일 : <a href="mailto:sample@example.com"> test@test.org</a><br />
<a href="http://www.facebook.com/test">Facebook</a> |
<a href="http://www.twitter.com/test">Twitter</a><br />
</address>
<p><small>©copyleft 2077 test.org</small></p>
</footer>
05. [ area ]
☞ 정의 : area요소는 이미지맵의 영역을 지정하기 위한 요소입니다.
☞ 속성
shape : 영역의 형태를 지정합니다.
default : 화면전체
rect : 사각형
circle : 원형
poly : 다각형
coords : 영역의 좌표를 지정합니다.
shape속성값이 rect일때 : 왼쪽위의 XY좌표와 오른쪽아래 XY좌표
shape속성값이 circle일때 : 중심의 XY좌표와 반경
shape속성값이 poly일때 : 첫번째 각의 XY좌표, 두번째각의 XY좌표, 세번째각의 XY좌표
href : 해당영역 클릭시 이동할 주소를 지정합니다.
alt : 영역을 설명할 대체 텍스트를 지정합니다.
☞ 설명
href속성을 갖는다면 alt 속성을 반드시 사용하는것이 좋습니다. 반대로 href속성을 갖지 않는다면 alt속성역시 반드시 생략되는것이 좋습니다.
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>
06. [ article ]
☞ 정의 : article요소는 문서내에서 독립적인 컨텐츠를 나타냅니다.
☞ 설명 :
article요소는 포럼의 글이 될수도 있고, 잡지나 신문의 기사일 수도 있으며, 블로그의 글이나 사용자가 올린 의견이나 상호작용적인 위젯이나 가젯 또는 다른 어떤 독립적인 아이템등이 될 수 있습니다.
하나의 문서 안에서 여러개의 article가 올 수 있습니다.
☞ 예제
<article> <h1>Google Chrome</h1> <p>Google Chrome is a free, open-source web browser developed by Google, released in 2008.</p> </article>
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; b, base, bdi (0) | 2018.05.08 |
|---|---|
| [HTML] Tag ; aside, audio (0) | 2018.05.08 |
| [HTML] Tag ; a, abbr, acronym (0) | 2018.05.07 |
| HTML5 - New Structural Tags : <nav> (0) | 2018.04.28 |
| HTML5 - New Structural Tags : <footer> (0) | 2018.04.28 |
[HTML] Tag ; a, abbr, acronym
[HTML/HTML5] Tag ; a, abbr, acronym
01. [ a ]
☞ 정의 : a요소는 텍스트에 링크를 설정합니다.
☞ 속성(Property) :
href : 링크 주소를 지정합니다.
target : 링크를 어떤 프레임에 열것인지를 결정합니다.
_blank : 새창에 엽니다.
_parent : 부모창에 엽니다.
_self : 자신의 창에 엽니다.
_top : 화면이 여러 프레임으로 이루어져있는 경우 모든 프레임을 지우고 전체 화면에 엽니다.
[name] : 지정된 이름에 링크를 엽니다.
☞ 설명 :
a 요소는 문단, 목록, 테이블뿐만 아니라 섹션 전체를 감쌀 수도 있습니다.
a 요소안에 버튼이나 링크등 인터렉티브한 요소가 포함되어 있으면 안됩니다.
☞ 링크의 상태 :
아래 상태들은 순서대로 정의 해야 의도한 대로 스타일을 적용할 수 있습니다. 만약 active를 hover보다 먼저 정의 했다면 hover가 active를 오버라이드 하여 active상태를 볼 수가 없게 됩니다.
link : 기본적인 링크 상태로 아직 방문한적이 없거나 아무런 행동도 하기전인 상태를 말합니다.
visited : 방문한 적이 있는 링크의 상태를 말합니다.
hover : 마우스 커서가 링크위에 올라가 있는 상태를 말합니다.
focus : 링크에 키보드등을 이용해서 포커스가 위치해있는 상태를 말합니다.
active : 마우스를 눌렀다가 놓는 동안의 상태를 말합니다.
☞ 예제 :
<nav>
<ul>
<li> <a href="/">Home</a> </li>
<li> <a href="/news">News</a> </li>
<li> <a href="/product">Product</a> </li>
<li> <a>Examples</a> </li>
<li> <a href="/legal">Legal</a> </li>
<li> <a href="/blog" target="_blank">Blog</a></li>
</ul>
</nav>
★
02. [ abbr ]
☞ 정의 : abbr요소는 텍스트를 생략어(abbreviated form)로 지정합니다.
☞ 속성
title : 약어 전체의 의미를 지정합니다.
☞ 설명 : 요소위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옵니다.
※ 생략어와 두문자어의 차이
생략어는 스펠링을 한자씩 발음하고, 두문자어는 한 단어처럼 발음한다는 차이가 있습니다.
<!-- 생략어 Abbreviated Form : 에이치 티 엠엘 이라고 한자씩 발음 --> <p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p> <!-- 두문자어 Acronym : 램이라고 한 단어처럼 발음 --> <acronym title="Random Access Memory">RAM</acronym>
<p>최근 <abbr title="Information Technology">IT</abbr> 의 진보에 의해 지금까지 "잠재적 노동력"이었던 주부 등이 <acronym title="Small Office/Home Office">SOHO</acronym>의 형태로 재택근무를 하는 것이 가능해 졌다</p>
03. [ acronym ]
☞ 정의
acronym요소는 텍스트를 두문자어(initial letter)로 지정합니다.
☞ 속성
title : 약어의 전체 의미를 지정합니다.
☞ 설명
요소위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옵니다.
※ 생략어와 두문자어의 차이
생략어는 스펠링을 한자씩 발음하고, 두문자어는 한 단어처럼 발음한다는 차이가 있습니다.
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; aside, audio (0) | 2018.05.08 |
|---|---|
| [HTML] Tag ; address, area, article (0) | 2018.05.07 |
| HTML5 - New Structural Tags : <nav> (0) | 2018.04.28 |
| HTML5 - New Structural Tags : <footer> (0) | 2018.04.28 |
| HTML5 - New Structural Tags : <header> (0) | 2018.04.28 |
HTML5 - New Structural Tags : <nav>
HTML5 - New Structural Tags ( 구조 태그 ) : <nav></nav>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>
07. <nav></nav>
nav 요소는 다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.
source )
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><strong>Note:</strong> The nav tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>
result )
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| [HTML] Tag ; address, area, article (0) | 2018.05.07 |
|---|---|
| [HTML] Tag ; a, abbr, acronym (0) | 2018.05.07 |
| HTML5 - New Structural Tags : <footer> (0) | 2018.04.28 |
| HTML5 - New Structural Tags : <header> (0) | 2018.04.28 |
| HTML5 - New Structural Tags : <hgroup> (0) | 2018.04.28 |
