개발개발개발개발개발개발

오늘은 어제에 이어서 기초 태그들에 대해 알아보는 시간을 가졌습니다.

오늘도 태그를 알아보도록 가보겠습니다 :D

<input type="radio">

개요

- 단일 선택이 가능한 체크박스
- name을 통해 전체적은 분류를 해주고, value를 통해 해당 버튼의 의미를 나타냄
- 같은 radio끼리는 같은 name을 사용해주어야 함

사용방법

<input type="radio" name="__________" value="__________">

실제 사용

결과 값

<input type="checkbox">

개요

- 다중 선택이 가능한 체크박스
- 여러가지를 선택해야 할 경우에 많이 사용
- radio와 마찬가지로 name, value를 사용

사용 방법

<input type="checkbox" name="_________" value="________">

실제 사용

결과 값

<input type="number">

개요

- 숫자를 입력받아야 할 경우 사용
- 사람의 키, 몸무게 등을 입력받을 때 많이 사용
- name은 해당 객체를 나타내는 이름
- min과 max는 최소와 최대를 설정
- step은 up/down 버튼을 통해 클릭당 올릴 수 있는 수
- value는 초기 보여주는 값

사용 방법

<input type="number" name="_________" min="_____" max="_____" step="_____" value="____">

실제 사용

결과

<input type="date">

개요

- 날짜를 입력받는 태그
- 여러 속성값이 있으나 차후 배울 예정

사용방법

<input type="date" >

실제 사용

결과

<select> & <option>

개요

- 드롭다운 형식의 입력을 받을 때 사용
- 하나만 지정 가능
- value 속성을 option을 분류하여 사용가능

사용방법

<select>
       <option>목록1</option>
       <option>목록2</option>
       <option>목록3</option>
</select>

실제 사용

결과

<audio>

개요

- 웹페이지에 오디오를 넣고 싶을 때 사용
- .mp3, .wav 등의 확장자명의 파일을 src에 입력
- controls를 이용해 해당 오디오 조작 가능

사용방법

<audio src="____________________" controls="controls"></audio>

실제 사용

결과

<video>

개요

- 웹페이지에 영상을 넣고 싶을 때 사용
- .mp4 등의 확장자명의 파일을 src에 입력
- controls를 이용해 해당 오디오 조작 가능
- width와 height를 통해 영상크기 조절
- onmousehover/onmouseout을 통해 영상에 마우스가 위치할 경우 재생, 벗어날 경우 일시정지가 실행
- onmousehover/onmouseout 사용하기 위해선 한 번의 재생을 해줘야 함

사용방법

<video src="______" controls="controls" width="300" height="200" onmouseover="this.play()" onmouseout="this.pause()"></video>

실제 사용

결과

오늘 오전에 배운 내용은 여기까지 입니다.

다양한 태그를 배웠고 해당 태그들은 자주 사용될 태그이니 숙지하고

앞으로 필요에 따라 사용할 수 있게 하면 좋을 거 같습니다. 

오늘은 여기까지 :D

(해당 내용에 대한 자세한 코딩은 https://github.com/Choi-Jinhong/BlockchainEngineerCourse-fninedu에서 확인이 가능합니다.)