오늘은 어제에 이어서 기초 태그들에 대해 알아보는 시간을 가졌습니다.
오늘도 태그를 알아보도록 가보겠습니다 :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에서 확인이 가능합니다.)
'[혁신성장_청년인재_집중양성_사업] > [HTML]' 카테고리의 다른 글
HTML 태그 #1 (0) | 2020.06.10 |
---|