[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 |
Brackets [1] - 코드 에디터(Code Editor)
코드 에디터(Code Editor) - Brackets : Adobe에서 무료로 배포하는 에디터
https://brackets.io
01. 위의 사이트에 접속해 Brackets을 다운로드한 후 설치합니다.
02. Brackets을 실행합니다. 메뉴중 파일 > 확장기능 관리자를 실행합니다. 플러그인을 설치합니다.
1) 실행한 "확장기능 관리자"의 검색창에서 "Smart Theme Dark"를 검색해 설치합니다.
2) CSS important property를 검색해 설치합니다.
'CMS > server' 카테고리의 다른 글
| XAMPP [3] - 로컬서버 설치 및 PHP 테스트 (0) | 2018.04.24 |
|---|---|
| Brackets [3] - 플러그인 : Emmet 사용법 (0) | 2018.04.24 |
| Brackets [2] - 플러그인 : Emmet (0) | 2018.04.24 |
| XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정 (0) | 2018.04.17 |
| XAMPP ( Apache + MariaDB + PHP + Perl ) 설치 (0) | 2018.04.16 |
Code Editors - 코딩을 위한 멋진 에디터 프로그램
Code Editors - 코딩을 위한 멋진 에디터 프로그램
01. Brackets (http://brackets.io/) [PC / Mac : 무료] ★★★★★
02. Sublime Text [PC / Mac : 무료] ( http://www.sublimetext.com/ ) ★★★★★
03. Dreamweaver [PC / Mac : 유료] ( https://www.adobe.com/products/dreamweaver.html ) ★★★★★
04. Atom [PC / Mac : 무료] ( https://atom.io ) ★★★★★
05. Bluefish [PC / Mac : 무료] ( https://sourceforge.net/projects/bluefish/ )
06. CoffeeCup [PC : 무료] ( https://www.coffeecup.com/free-editor/ )
07. Notepad++ [PC : 무료] ( https://notepad-plus-plus.org/ )
08. BBEdit [Mac : 유료] ( https://www.barebones.com/ )
08. Coda [Mac : 유료] ( https://panic.com/coda/ )
'Web Design > web design general' 카테고리의 다른 글
| Google Web Fonts [구글 웹폰트] (2) | 2018.04.18 |
|---|---|
| 웹폰트 (web font) 사용하기 (1) - CDN (0) | 2018.04.16 |
| 테이블을 간단하게 멋지게 ( datatables - Table Plug-in for jQuery ) (0) | 2018.04.10 |
| SVG 관련 유용한 사이트 (0) | 2018.04.10 |
| APNG (Animated Portable Network Graphics) & PNG (0) | 2017.07.16 |
