전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>우리분식 메뉴</h2>
<select>
<option>떡볶이</option>
<option>순대</option>
<option selected="selected">라면</option>
<!-- selected : 먼저 보여주기 -->
<!-- 속성명과 속성값이 같은 경우는, 속성명만 적어도 된다. -->
<!-- <option selected>라면</option> -->
<option>튀김</option>
<option>쫄면</option>
</select>
<hr>
<select size = "2"> <!-- size : 처음 보여주는 속성 개수 -->
<option>떡볶이</option>
<option>순대</option>
<option selected="selected">라면</option>
<!-- selected : 먼저 보여주기 -->
<!-- 속성명과 속성값이 같은 경우는, 속성명만 적어도 된다. -->
<!-- <option selected>라면</option> -->
<option>튀김</option>
<option>쫄면</option>
</select>
<hr>
<select multiple = "multiple">
<!-- 속성명과 속성값이 같은 경우는, 속성명만 적어도 된다. -->
<!-- <select multiple> -->
<option>떡볶이</option>
<option>순대</option>
<option>라면</option>
<option>튀김</option>
<option>쫄면</option>
</select>
<hr>
<select>
<optgroup label="분식">
<option>떡볶이</option>
<option>순대</option>
<option>라면</option>
<option>튀김</option>
<option>쫄면</option>
</optgroup>
<optgroup label="식사">
<option>돈까스</option>
<option>김치볶음밥</option>
<option>비빔밥</option>
</optgroup>
</select>
<hr>
<input list="foods01"> <!-- list : id를 바꿔주면, 화면에 나타나는 리스트가 바뀐다. -->
<!-- 동적으로 보여주는 리스트를 바꿀 수 있겠네! -->
<datalist id = "foods01">
<option>떡볶이</option>
<option>순대</option>
<option>라면</option>
<option>튀김</option>
<option>쫄면</option>
</datalist>
<datalist id="foods02">
<option>돈까스</option>
<option>김치볶음밥</option>
<option>비빔밥</option>
</datalist>
</body>
</html>'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] 화면 구성 HTML4 VS HTML5 (0) | 2020.06.11 |
|---|---|
| [HTML] 정적인 웹사이트 구현하기 (0) | 2020.06.11 |
| [HTML] 이미지 띄우기(경로 지정 방법: 상대, 절대 / 경로 404 에러 주의) <img> 태그 (0) | 2020.06.11 |
| [HTML] 인용구 넣기 <blockquote> 태그 (0) | 2020.06.11 |
| [HTML] 코드 및 문장 그대로 나타내기 <pre> 태그 (0) | 2020.06.11 |
