삶 가운데 남긴 기록 AACII.TISTORY.COM
HTML5 에서 달라진 점들 본문
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/stylesheet.css"/>
<script src="../js/script.js">
</script>
</head>
<body>
</body>
</HTML>
기본 구조
1. DOCTYPE 에 DTD 문서를 명시하지 않아도 됩니다.
2. 인코딩을 명시하는 것이 간결해졌습니다.
3. link type은 매번 text/css 로 명시하지 않아도 됩니다.
4. script type도 매번 text/javascript를 명시하지 않아도 됩니다.
Semantic/Structual 요소(element)
컨텐츠의 목적이나 구조에 맞게 태그를 사용하여 빅데이터에서의 검색이 수월하게 하기 위해 도입되었습니다.
1. 레이아웃
header(머리말), footer(제작자, 저작권 정보), hgroup(제목과 부제목)
nav(메뉴), section(문서영역 구분), article(개별 컨텐츠 즉, 뉴스기사, 블로그 내용 등)
aside(좌우측 컨텐츠)
2. 그룹핑
main(주요 컨텐츠 블록을 그룹화)
figure(멀티미디어 요소), figcaption(figure요소에 대한 개략적인 설명)
ol( reverse속성 li요소들의 순서를 바꾸도록 함)
3. 텍스트
a(href속성에 지정한 파일을 다운로드)
strong(중요한 내용), small(코멘트)
time(날짜와 시간)
mark(형광펜으로 칠한 것 같은 강조 효과)
ruby, rt, rp, rb, rtc(ruby언어 표시, 중국어, 일본어등 한자 근처에 발음이나 주석을 표시하기 위한 텍스트)
bdi(텍스트의 방향을 격리)
wbr(줄바꿈 지점)
4. 상호작용
details(사용자 요청에 따라 얻은 컨트롤이나 추가적인 정보)
summary(details 요소의 하위 요소이며 머리글을 나타냄)
menu(명령들의 목록을 정의하고 명령들의 단축메뉴 같은 것들을 목록화한다)
command(사용자가 호출할 수 있는 명령어)
dialog(대화 상자)
Canvas 요소
javascript API를 이용하여 비트맵 타입의 그래픽을 그리기 위함
Media 요소
audio, video
source(video 와 audio의 하위요소로, 미디어의 리소스를 정의한다)
embed(플러그인 같은 외부 어플리케이션을 정의)
track(텍스트 트랙을 정의하며, video나 audio에서 사용된다.
Form 요소
datalist(자동완성기능, comboBox)
keygen(키 쌍을 생성할 때 사용, 암호 키를 생성해 줌)
output(스크립트의 계산 결과 같은 실행 결과를 나타낸다.)
meter(현재 상태)
progress(진행 상황)
- form 요소(element)에 추가된 속성(attribute): autocomplete, noValidate
- input 요소에 추가된 속성: autocomplete, noValidate, form, formaction, formenctype, formmethod, formnovalidate, formtarget, minlength, height, width, min, max, placeholder, required, list, multiple, step, pattern, dirname
- input 요소에 추가된 type: month, week, date, datetime, datetime-local, time, color, email, number, range, search, tel, url
그 외에도 새롭게 추가된 속성들이 있으며, 중단된 요소와 속성들은 주로 css등으로 대체될 수 있는 속성들이 중단되었습니다.
다음글: https://aacii.tistory.com/56
CSS selector (선택자)
html은 <>태그들의 tree 구조로 되어 있는 데 이 것을 DOM tree 라고 부릅니다. 이러한 DOM 트리를 검색하면서 특정 태그(element)를 선택하여 CSS를 적용할 수 있습니다. 이렇게 html 의 요소(element)를 특정
blog.aacii.net
728x90
'DEV&OPS > Javascript' 카테고리의 다른 글
| javascript Expression (0) | 2022.02.21 |
|---|---|
| javascript object (0) | 2022.02.21 |
| javascript ECMAScript 6에 추가된 데이터 타입 (0) | 2022.02.21 |
| html xml 특수기호 (0) | 2022.02.21 |
| CSS selector (선택자) (0) | 2022.02.21 |
'DEV&OPS/Javascript' Related Articles
more
