[HTML5] 13. HTML에서의 색 표현 + 색 코드 + 컬러다이얼로그 + 시간 정보 입력 폼 요소 + 생일 날짜 입력 받기 + 스핀버튼과 슬라이드 + 입력할 정보의 힌트 보여주기와 placeholder + 폼 요소의 그룹핑

13. HTML에서의 색 표현 + 색 코드 + 컬러다이얼로그 + 시간 정보 입력 폼 요소 + 생일 날짜 입력 받기 + 스핀버튼과 슬라이드 + 입력할 정보의 힌트 보여주기와 placeholder + 폼 요소의 그룹핑

 

 

 

# 색 코드

- rr은 빨간색, gg는 초록색, bb는 파란색 농도

 

 

- 색 이름과 색 코드의 샘플

 

 

 

 

# 색 입력 폼 <input type="color">

: 컬러 다이얼로그 출력 -> 사용자로부터 색 선택

 

ex) <input type="color" value="#00FF00"> 

                                              <- value 는 초기 색

 

 

 

 

 

# 컬러 다이얼로그로 색 입력 응용

초기 화면

 

 

파란 부분 클릭

 

 

색 자유롭게 선택 가능

 

 

색 변경 완료

 

 

- onchange : 자바스크립트가 제어하는 부분 (특별한 이벤트 부분)으로, 변경된 부분을 감지

- this : 자기 자신의 페이지 (현재 보고있는 문서)

- document : 자기 자신의 페이지 (현재 보고있는 문서)

 

-> 라인 11 해석 : 현재 보고 있는 페이지의 body에 style 속성의 color 부분에 = 왼쪽에 있는 this.value 값을 대입하여라

 

 

 

 

# 시간 정보 입력 폼 요소

- <input type="month 또는 week 또는 date 또는 time 또는 datetime-local">

: 시간 정보만 입력 가능한 폼 요소임

 

 

ex) 

- 달 입력 : <input type="month" value="2016-09">

 

 

- 주 입력 : <input type="week" value="2016-w36">

2016년도의 36번째 주를 보여준다

 

 

 

 

# 시간 정보 입력 폼 요소의 활용

 

 

 

 

 

# 생일 날짜 입력 받기

 

 

 

 

# 스핀버튼과 슬라이드

- <input type="number">

: 스핀버튼으로 정교한 값 입력 가능

 

- <input type="range">

: 슬라이드로 대략적인 값 입력 가능

슬라이드 바를 움직여 0~100 사이의 값 입력

 

 

ex)

 

 

 

 

 

# 입력할 정보의 힌트 보여주기

- placeholder 속성에 사용자가 입력할 데이터에 대한 힌트를 줄 수 있다.

 

 

# 형식을 가진 텍스트 입력

잘못된 형식으로 입력했을 때

 

 

 

 

# 폼 요소의 그룹핑

<legend> 태그와 <fieldset> 태그 이용