All about {Web}

[HTML] Tag ; code, col, colgroup, command

Web Design/HTML & HTML 52018. 5. 29. 16:55

[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 ; b, base, bdi

Web Design/HTML & HTML 52018. 5. 8. 13:37

[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 ; address, area, article

Web Design/HTML & HTML 52018. 5. 7. 17:49

[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>  (1) 2018.04.28
HTML5 - New Structural Tags : <footer>  (0) 2018.04.28

티스토리툴바