[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>