[Project H4C] 8. HTML5 요소 (1)

[Project H4C] 8. HTML5 요소 (1)

 

• sementic element(의미 요소)

의미요소란, 그 자체로 의미를 가지고 있는 요소이다.

즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소이다.

 

• HTML5에서 추가된 의미 요소들

1. header: HTML 문서나 섹션 부분에 대한 헤더(도입부)를 정의. 한 문서 내에 여러개의 header 존재 가능.

2. nav: HTML 문서 사이를 탐색할 수 있는 링크의 집합

3. main

4. section: HTML 문서에서 섹션 부분을 정의. (섹션이란? 제목을 가지며 문서의 전체적인 내용과 관련된 콘텐츠 집합)

5. atricle: HTML 문서에서 독립적인 하나의 기사부분을 정의. 별도로 읽을 수 있어야 한다.

6. figure & figcaption: 이미지 바로 아래에 캡션을 다는 기능

7. footer: 문서 하단 내용 정의. 여러개의 footer 요소 존재 가능. 

사진 출처: TCP School

 

• HTML5에서 추가된 의미 요소들

1. datalist 요소

input 요소에 대해 미리 정의된 옵션 리스트를 명시해주는 요소

이런거...

2. keygen 요소

사용자가 인증할 수 있는 안전한 방법을 제공하는 것이 목적.

사용자가 입력한 데이터를 암호화하여 서버로 전송함.

이때 생성된 key를 가지고 서버는 해당 사용자의 인증을 수행함. 

e.g.)

<form action="/examples/media/request.php">

    사용자 : <br>

    <input type="text" name="usename"><br>

    암호화방법 : <br>

    <keygen name="secutiry"><br>

</form> 

 

* keygen 요소는 익스에서 지원하지 않는다. 

 

3. output 요소

script 등으로 실행된 계산의 결과를 바로 표시해주는 요소

* output 요소는 익스에서 지원하지 않는다. 

 

 

• HTML5에서 추가된 input 요소의 타입

 

1. number(숫자 입력)

 

input type="number"를 사용하여 사용자가 숫자를 입력할 수 있게 한다. 

e.g.) <input type="number" name="favnum" min="1" max="9">

 

2. range(입력 범위 지정)

input type="range"를 이용하여 사용자가 범위 안의 값만 입력할 수 있게 한다.

e.g.) 0<input tyep="range" name="favnum" min="1" max"9">9

 

3. color(색상 입력)

input type="color"를 사용하여 색상입력을 가능케한다. 

e.g.) <input type="color" name="favcolor" value="#AA6600">

 

4. date(날짜 입력)

input type="date"로 날짜 입력 가능함.

e.g.) <input type="date" name="startday">

 

또한 min과 max속성을 사용하여 날짜 선택의 제한값을 둘 수 있다.

e.g.) <input type="date" name="theday" min="1977-01-01" max="2020-12-31">

 

5. time(시간 입력)

e.g.) <input type="time" name="birthtime">

 

6. datetime-local(날짜와 시간 입력)

e.g.) <input type="datetime-local" name="starttime">

 

7. month(연도와 월 입력)

e.g.) <input type="month" name="birthmonth">

 

8. email(이메일 입력)

e.g.) <input type="email" name="email"> 

 

9. URL 주소 입력

e.g.) <input type="url" name="url">

 

10. tel(전화번호 입력)

e.g.) <input type="tel" name="tel>

 

11. search(검색어 입력)

e.g.) <input type="search" name="keyword">