HTML5 - 태그 설명
기본 구조부터 시작해서 여러가지 태그들을 알아봅니다.
<!DOCTYPE html> HTML5의 DOCTYPE (문서타입)
<html lang="ko"> 문자 인코딩 // 마크업 문서의 문자 인코딩을 명시할때 사용한다.
<meta charset="UTF-8"> 문자 인코딩
단순화
딱히 명시하지 않아도 브라우저는 스크립트가 웹에서 가장 인기있는 스크립트 언어인 자바스크립트로 작성되었을 것을 알기에 생략해도 된다(type="text/javascript").
<script src="file.js"></script>css 파일링크 또한 type="text/css"를 매번 명시하지 않아도 된다.
<link rel="stylesheet" href="file.css">아래는 위에서 배운 구조들을 종합한 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹페이지 제목</title>
<link rel="stylesheet" href="file.css">
<script src="file.js"></script>
</head>
<body>
</body>
</html>
사라진 태그
표현을 위해 필요했던 태그들이 대부분 사라졌다. <big>, <center>, <font>, <strike>등과 같이 CSS로 대체할 수 있는 태그들은 HTML5에서 제외되었고, <b>와 <i>는 의미가 재정의 되었다.
| 태그 | 설명 |
| <acronym> | 영문 축약형 사용시 예를 들어 NATO,NASA등 이는 로 대체되었다. |
| <applet> | 임베디드 애플릿 사용시 |
| <basefont> | 글꼴의 형태 정의 |
| <big> | 글꼴의 크기 지정 |
| <center> | 텍스트 위치 중앙 정렬 |
| <dir> | 디렉토리 리스트 |
| <font> | 글꼴 |
| <frame> | 프레임 |
| <frameset> | 프레임 부속 태그 |
| <noframe> | 프레임 부속 태그 |
| <strike> | 글꼴 효과 |
| <u> | 글꼴 효과 |
| <xmp> | pre 태그와 동일효과 |
재정의된 태그
몇몇의 태그들은 그 사용이 재정의됨으로써 새로운 생명력을 부여받았다.
<small>
small요소는 전면적으로 재정의 되었는데, 권리에 대한 정의, 절차에 대한 안내, 법적 제한 또는 copyright 내용이 들어있는 작은 글자 영역을 의미한다. 또 속성에 대한 설명이나 라이센스 충족에 대한 설명등으로 사용된다고 정의되었다.
<b>
별도로 추가적인 중요성을 부여하지 않으면서 다른 문장과 구별되는 문체를 갖는 텍스트에 이용된다. 예를 들어, 제품의 설명에서 제품의 이름에, 또는 전형적으로 볼드체를 사용해 표현하는 문구등에 사용한다.
<p>세상은 <b>코드</b>와 <b>암호</b>로 이루어져있지... - <b>셜록 홈즈</b> 미니시리즈 - </p><strong>
강하게 강조해야 콘텐츠를 위한 것이지만 <em>과 다르게 문장의 의미를 바꾸지는 않는다.
<em>
문장 내용의 의미를 약간 바꾸는 식의 강조를 위해 사용된다.
<i>
더 이상 이탤릭체를 의미하지 않으며, 어떤 중요성이나 강조의 의미를 갖지 않는다. 주변의 문장과 다른 의미나 느낌을 표현하기 위해 사용한다. 진행중이었던 내용에서 약간 벗어난 분류학적 정의, 기술용어, 다른 언어에서 사용하는 관용적 표현, 생각, 배이름 등에 사용한다.
<dl>
개념을 확장해 관계형 리스트로 0개 이상의 명칭과 값의 집합으로 구성된다. 명칭과 값의 집합은 용어와 그에 대한 정의, 메타데이터 속성과 그 값, 또는 어떤 형태이든 명칭과 값으로 구성할 수 있는 내용이면 된다'라고 정의되어 있다.
<dl>
<dt>웹 디자인</dt>
<dd>HTML5/CSS3</dd>
<dd>unclepapa</dd>
</dl><ol>
HTML4에서는 <ol>요소에 start 속성은 화면 표시를 위한 내용이라고 생각해 권장하지 않는 속성이였다. 다행히도 HTML5에서는 잘못된 결정을 다시 바로 잡았고 start 속성으로 원하는 항목부터 시작할 수 있게 되었다.
<ol start=5> <!-- 다섯번째 항목부터 -->
<ol reversed> <!-- 거꾸로 숫자를 센다 --><cite>
HTML4에서는 말한 사람을 표현할때도 사용할 수 있었다.
HTML5에서는 더 이상 위와 같이 사용할 수 없으며, 스펙에는 '사람의 이름은(사람이름과 작품제목이 같더라도) 작품의 제목이 될수 없다. 그러므로 이 요소는 사람의 이름에 사용할수 없다'고 정의되었다. 이로 인해, 기존 콘텐츠들이 HTML5에는 맞지 않게 되어 분란이 일어나고 있는 실정이다.
<address>
현재 노출된 글이나 문서의 작성자에 대한 연락처를 위한 것이지 단순한 물리적인 주소만을 표기하는 요소가 아니다. 연락처라 함은 이메일 주소일, 물리적인 주소등 여러가지가 될 수 있다. 이런 연락처 정보는 마이크로포맷, RDFa, 마이크로데이터등이 되게 마크업을 만들 수 있다. 기존과 다르게 <article>마다 각 주소를 가질수 있게 하나의 문서에 여러개의 연락처가 들어갈 수 있게 바뀌었다.
<hr>
이 요소는 미디어에 독립적이게 바뀌었고, 의미상으로는 '문단 레벨의 주제 구분'의 의미를 갖는다. 보통 브라우저에서 사이트를 노출할 때는 CSS를 사용해 숨기지만 섹셔닝 콘텐츠와 헤딩(<h1>~<h6>)으로 마크업을 하고 CSS 사용해 영역 구분을 하는 것이 좋다.
강화된 태그
<a>
이 요소는 항상 인라인 태그 였는데 이로 인해 제목이나 단락을 하이퍼링크로 바꾸고자 하는 경우에는 아래와 같이 여러 개의 <a>태그를 사용해야 했다.
<h1><a href="./index.html">logo</a></h1>
<p><a href="./index.html">사이트의 배너이다</a></p>HTML5에서는 <a>태그안에 여러 태그를 넣을 수 있게 되었다.
<a href="./index.html"> <h1>logo</h1> <p>사이트의 배너</p> </a>유일한 제약 상항은 <a>태그를 다른 <a>태그 안에 넣을 수 없다는 것이다.
의미를 부여받은 특별한 텍스트
조금 더 디테일하고 많이 사용될 일종의 템플릿과도 같은 의미있는 요소가 많이 추가되었다.
<dialog>
대화를 의미있는 콘텐츠로 만들고자 할때 사용하며 <dt>에 말하는 사람 <dd>에 내용을 작성한다.
<dialog>
<dt>나</dt>
<dd>아!, 이런 오늘 작업한 걸 저장하지 않고 종료했네~</dd>
<dt>수정</dt>
<dd>이런, stupid!</dd>
</dialog><figure>
이미지, 그래프, 사진, 예제 코드, 비디오, 일반 텍스트등을 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다. 반드시 메인이 되는 문서 안에 삽입될 필요는 없으며 페이지 옆이나 참조용 별도 페이지등에 넣어도 크게 상관없는 내용을 지정할 수 있다.
<figure>
<figcaption>HTML5 로고</figcaption>
<img src="logo.gif">
</figure><mark>
형광펜으로 특정단어들을 칠해서 강조하는 효과와 비슷하며 문장내의 중요한 부분에 강조효과를 넣는 <em>, <strong>과는 다른 개념이다. 시각적 주목효과 만을 노리며 스타일이 정의되어 있지 않으므로 직접 효과를 작성한다.
<p>지금 공부하고 있는 것은 <mark>HTML5</mark> 입니다.</p><time>
날짜와 시간을 기계가 이해할 수 있게 명확하게 인코딩하면서 사람도 이해할 수 있게 노출시킨다. YYYY-MM-DD(날짜) / HH:MM:SS(24시의 형태) 로 표기하고 동시에 나타낼 경우, 2013-01-30T12:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.
<p>도서관은 <time>22:00</time> 에 문을 닫습니다.</p>
<p>다음주 <time datetime="2013-01-30">수요일</time>은 쉽니다.</p>
<p>Published on <time datetime="2013-01-25" pubdate>2013년 1월 25일</time></p>datetime 속성은 기계가 이해하는 부분이고 pubdate 속성은 문서의 발행일을 표기할때 사용한다. 한 문단에 여러개의 날짜와 시간이 존재한다면 발행일을 구분하기 어려우므로 pubdate를 사용하자
time요소에 지정할 수 있는 일시의 문자열 형태는 ISO-86이라는 표준 규격에 정해져 있다.
<meter>
통화, 인구, 점수, 치수와 같은 숫자들과 같이 특정 범위내에 있는 숫자 값을 시스템에 인지시킬 필요가 있을때 사용할 수 있다.
| 속성명 | 속성의 기능 |
|
value |
실제로 측정된 진짜 데이터를 지정한다. |
|
title |
튤팁 입력을 할수 있다. |
| high |
입력된 데이터들 중의 사용자가 허용할 수 있는 최대값을 지정한다. |
| low | 입력된 데이터들 중의 사용자가 허용할 수 있는 최저값을 지정한다. |
| max | meter에서 인식할 수 있는 최고 값을 지정한다. |
|
min |
meter에서 인식할 수 있는 최저 값을 지정한다. |
| optimum | 최적의 측정값을 지정해 준다. min으로 설정된 최저값과 max로 설정된 최대값 사이에서 가능한 한 최고 적합한 값을 지정해준다. |
<p>수학 : <meter>80</meter> 점</p>
<p>수학 : <meter min="0" max="100">80</meter> 점</p>
<p>수학 : <meter min="0" max="100" value="80" optimum="95">80</meter> 점</p>'%'나 '분수'형태로도 사용할 수 있다.
<p>점유율 : <meter min="0" max="5000" value="1000">20%</meter></p>
<p>판매율 : <meter min="0" max="100" value="50">1/2</meter></p><progress>
다운로드 진척 상태를 알려줄때 유용하게 사용할수 있는 태그로 최대값 max 속성과 현재 다운로드한 값 value 속성을 가진다. 이는 자바스크립트와 연동하여 동적으로 다운로드 상태를 제공할 수 있다.
Downloading ...
<progress value="5000" max="10000">
<span id="status">50</span>%
</progress>
상호 작용을 위한 요소
사용자와 직접 상호작용을 위한 요소들로 WHATWG의 웹 애플리케이션1.0 스펙 안에 포함된 것들이다.
<details>
HTML 문서에서 추가적인 설명을 붙일때 사용하며 워드프로세서의 '각주' 역할과 비슷하다. <summary> 태그와 함께 사용되며 기본적으로 <details>는 '감춤'상태이다. summary 부분만 보이도록 되어있고 그 외 콘텐츠는 기본적으로 감추어져 있는 것이다. details 콘텐츠를 모두 펼쳐 놓기 위한 속성이 있는데 'open' 속성이다.
<details open="open">
<summary>HTML5 란?</summary>
<p>HTML5는 어쩌고 저쩌고</p>
</details>summary를 클릭해서 details 내용을 보였다 감췄다 토글하는 것은 자바스크립트를 이용해서 동작시켜야 한다.
<datagrid>
기초 자료를 HTML 태그로부터 가져와 자바스크립트 등을 이용해서 동적으로 정보를 갱신할 수 있다. multiple 속성을 사용하여 한번에 여러 행을 컨트롤할 수도 있다.
<menu>
폼 컨트롤 목록이나 명령어 목록을 만들때 사용, HTML5에서 재정의 되었음. <command> 태그는 라디오 버튼이나 체크박스, 버튼을 이용해서 명령어 박스를 만들수 있게 해주며 반드시 <menu> 태그안에 포함되어야 한다.
| 속성명 | 속성값 | 설명 |
|
type |
list(기본값) |
사용할 <menu>의 타입을 지정한다. 툴바 형태로 사용할 것인지 목록 형태로 사용할 것인지를 지정할 수 있다 |
|
label |
레이블 텍스트 |
메뉴에 대해서 알려줄 레이블이다 |
<menu type="toolbar">
<li>
<menu label="파일">
<button type="button" onclick="newfile()">새파일</button>
<button type="button" onclick="fileopen()">열기</button>
<button type="button" onclick="filesave()">저장</button>
</menu>
</li>
<li>
<menu label="편집">
<button type="button" onclick="btncopy()">복사</button> ...
</menu>
</li>
</menu><nav> 태그는 사이트의 글로벌 내비게이션에 사용할 수 있으며 URL링크를 사용할 수 있지만 <menu>와 <command> 태그는 클라이언트 측 애플리케이션 실행을 위한 것이므로 URL링크나 폼 액션은 처리하지 않는다. command를 이용하면 사용자가 요청하는 명령을 즉각적으로 실행할 수 있다.
속성값설명
| 속성명 | 속성값 | 설명 |
|
type |
command(기본값) checkbox radio |
사용할 명령어 형태의 타입을 지정 |
|
label |
명령어 설명, 이름 |
각 명령어 항목별 설명 텍스트 혹은 이름을 입력 |
|
disabled |
disabled |
|
|
icon |
아이콘 이미지 URL |
각 커맨드 항목에 아이콘을 만든다 |
|
radiogroup |
라디오 그룹 이름 |
타입을 라디오 버튼으로 지정했을 경우, |
|
checked |
checked |
타입을 라디오 버튼이나 체크박스로 지정했을 경우, 이들을 기본적으로 선택상태로 할 것인지를 설정할 수 있다. |
<menu type="toolbar">
<command type="command" icon="icon-lock.gif" label="잠금" onclick="elock()"></command>
...
</menu>
'IT > Web' 카테고리의 다른 글
| HTML5 - 폼 태그 및 GET 방식과 POST 방식 (0) | 2019.07.08 |
|---|---|
| HTML5 - 멀티미디어 태그 (0) | 2019.07.08 |
| HTML5 - 시작 및 HTML5 표준 코딩 규칙 (2) | 2019.07.08 |
| 아톰 편집 프로그램 Atom 패키지 (0) | 2019.07.05 |
| 아톰 에디터 설치 및 설정 (0) | 2019.07.05 |
댓글