[HTML] html 태그로 Toggle, Auto complete 구현
chanto11
·2022. 1. 20. 09:44
<details> - Toggle 기능
- 결과물 -
오늘의 메뉴 [클릭해보세요!]
- 김치찌개
- 배추김치
- 계란후라이
- 시금치무침
- 백미밥
- 코드 -
<details>
<summary>오늘의 메뉴</summary>
<ul>
<li>김치찌개</li>
<li>배추김치</li>
<li>계란후라이</li>
<li>시금치무침</li>
<li>백미밥</li>
</ul>
</details>
<input> & <datalist> - Auto complete 구현
- 결과물 -
- 코드 -
<label for="programming-language">좋아하는 프로그래밍 언어는?</label>
<input type="text" list="programming-language-options" />
<datalist id="programming-language-options">
<option value="C" />
<option value="C++" />
<option value="C#" />
<option value="Python" />
<option value="Ruby" />
<option value="Java" />
<option value="Kotlin" />
<option value="R" />
<option value="Javascript" />
<option value="Scala" />
<option value="Swift" />
</datalist>
'Web' 카테고리의 다른 글
[html] <img> 태그 이미지 로딩 지연 시키기 (0) | 2022.06.07 |
---|---|
브라우저(크롬) 단순 탐색(작동 원리) 살펴보기 (0) | 2021.07.08 |
[웹 보안] CSRF, CORS, XSS, CSP (2) | 2021.05.04 |
HTTP Code (1xx~5xx) 주요 코드 살펴보기 (0) | 2021.03.05 |
CSS - position: sticky [scroll 중 더 나은 경험을 주는 방법] (0) | 2021.02.18 |