select
- 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴
- option 태그 ≫ 메뉴 안에 포함되는 옵션
- 드롭다운이 나타나 사용자 선택 가능
- 첫 번째 선택 항목이 선택된 상태에서 시작
<select>
<option>스타벅스</option>
<option>커피빈</option>
<option>이디야</option>
<option>탐앤탐스</option>
</select>
textarea
- 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소
- input 태그로는 한 줄만 입력할 수 있지만 textarea 태그는 여러 줄 가능
- name 속성 추가 가능
- 줄 수가 많아지면 자동으로 스크롤이 생김
- <textarea name="letter"></textarea>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다양한 입력 요소 만들기</title>
</head>
<body>
<h1>키우고 싶은 동물 고르기</h1>
<select name="pet" multiple>
<option value="dog">강아지</option>
<option value="cat" selected>고양이</option>
<option value="hamster">햄스터</option>
<option value="parrot">앵무새</option>
</select>
<br>
<br>
<textarea name="content" rows="10" cols="10">기본적으로 쓰여 있는 텍스트</textarea>
</body>
</html>
select
- multiple 속성 ≫ 여러 개를 선택할 수 있도록 펼쳐진 상태
- 여러 개를 선택하려면 ctrl 누르고 선택
- multiple 속성 추가 안 하면 기본 (드롭다운 박스)
- option 태그
- value 속성 추가 가능
- selected 속성 ≫ 기본적으로 선택되어 있는 상태에서 시작
textarea
- 여는 태그와 닫는 태그 사이에 콘텐츠 입력시 ≫ 기본적으로 쓰여있는 텍스트 추가됨
- 사용자는 이 내용을 지우고 입력하거나 추가로 입력
- rows / cols 속성 ≫ 행수, 열수 지정
- 문자가 ~개 정도 들어가도록 함
- 글꼴이나 문자 종류에 따라 다를 수 있음
- 빗금에 마우스 대고 드래그 시 크기 조절 가능
'front-end' 카테고리의 다른 글
| [HTML] 폼(FORM) (0) | 2024.12.01 |
|---|---|
| [HTML] 입력 요소 만들기 (0) | 2024.12.01 |
| [HTML] 목록 표시하기 (0) | 2024.12.01 |
| [HTML] 링크 만들기 (0) | 2024.12.01 |
| [HTML] 컨테이너와 전역 속성 (0) | 2024.12.01 |