○ <datalist>, <option> : 텍스트 필드용 데이터 리스트
앞서서 dropdown 형태를 통해서 미리 만들어 둔 값들을 선택하는 포맷을 사용해 보았습니다. 이번에도 다루어볼 데이터 리스트 형태의 태그 역시 비슷합니다. 하지만 데이터 리스트 타입의 태그는 텍스트 필드에 연계하여 사용하는 리스트라는 점에 차이가 있습니다. 아마 지금은 바로 와닿지 않는 기능일 것입니다. 한번 예제를 만들어보면서 확인해 보겠습니다.
<input type="text" list="데이터리스트 id">
<datalist id="데이터리스트 id">
<option value="vlaue1">옵션 텍스트1</option>
<option value="vlaue2">옵션 텍스트2</option>
</datalist>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for="reward">리워드 종류 선택</label>
<input type="text" id="reward" list="product_list">
<datalist id="product_list">
<option value="product_a">리워드 A세트</option>
<option value="product_b">리워드 B세트</option>
<option value="product_c">리워드 C세트</option>
</datalist>
</body>
</html>
dropdown 태그와의 차이점은, 일단 입력란 자체는 '텍스트'입력 폼이라는 점입니다. 그리고 그 텍스트 입력 폼에서 사용할 수 있는 데이터 리스트 보기가 마련되어 있다는 점이죠. 그래서 해당 타입에 키보드로 직접 텍스트 값을 입력하고 나면 해당 데이터 리스트는 활성화되지 않습니다. 그리고 데이터 리스트를 클릭하게 되면, value 속성에 할당된 값들이 텍스트 폼에 입력되는 것을 확인할 수 있습니다.
○ <button> : 버튼 생성용 태그
기존에 input type 태그의 속성에 submit, reset을 입력해 버튼을 생성하는 기능을 살펴본 적이 있습니다. 그런데 이러한 방식으로만 버튼을 구현한다면, 본인이 원하는 별도의 버튼을 생성하는 것은 이미지 버튼 이외에는 방법이 없는 것처럼 느껴집니다. 이럴 때 사용하는 버튼을 위한 생성 태그가 <button>입니다. <button type ="..."> 형태로 버튼 태그에 속성을 통해 버튼의 기능을 지정할 수 있게 되지요.
<button type="submit">제출</button>
<button type="reset">취소</button>
<button type="button">일반 버튼</button>
위와 같은 형태로 태그를 사용할 수 있으며, button 태그를 이용한 경우 콘텐츠를 포함하기 용이해 이미지 추가, CSS적용이 가능합니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 1. CSS의 기본 개념(2) - 스타일 시트란? (0) | 2023.03.20 |
|---|---|
| [CSS] 1. CSS의 기본 개념(1) - CSS란? (0) | 2023.03.19 |
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 (1) | 2023.03.14 |
| 3. 입력 양식 작성(2) - input 태그 7 (0) | 2023.03.12 |
| 3. 입력 양식 작성(2) - input 태그 6 (0) | 2023.03.12 |
