HTML5 - 아직 이거 몰라?

일하면서 많다면 많은 코옵(Co-op) 학생들을 만나봤고 인터뷰도 해본 결과 HTML의 기초를 잘 모르는 상태로 React, Angular, 또는 Vue를 시작하는 사람들이 많다는 걸 느꼈습니다.

 

그래서 오늘은, 개인적인 경험을 바탕으로, 알아두면 좋은 HTML 몇 개를 가져와 봤습니다.

 

어코디언 (Accordion)

어코디언, 혹시 생소하신가요?

사이트의 Q&A 페이지에 보면 질문을 클릭하면 아래로 열리면서 답변이 나오는 걸 보신 적 있을까요?

이런 요소를 어코디언이라고 합니다.

전에는 어코디언을 만들려면 <div> 여러 개와 <button>을 사용해서 UI를 만들고 자바스크립트를 버튼에 연결해서 상호작용할 수 있는 함수도 만들어야 했습니다.

하지만 이제는 단 2개의 HTML요소로 쉽게 만들 수 있습니다.

바로 <details>과 <summary>입니다.

<!-- 닫혀있는 상태 -->
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

<!-- 열려있는 상태 -->
<details open>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

<details>는 open/close 스테이터스를 가지고 있습니다.

디폴트로 열려있는 아코디언을 만들려면 <details>에 open 속성을 사용하면 됩니다. 이 속성은 값이 없는 속성입니다.

기본 스타일은 왼쪽에 까만 세모 마커 말고는 없습니다. CSS를 사용해서 멋지게 스타일링해보세요.

 

<input> 타입

인풋 타입은 이미 몇 가지 알고 계실 겁니다.

많이 사용하는 타입으로 text, number, checkbox, radio, file 이 있는데요.

이 외에도 더 많은 타입이 있는 거 아셨나요?

color로 색상을 고를 수 있는 컬러픽커를 사용할 수 있습니다.

날짜와 시간에 관련된 타입이 여러 개인 거 아셨나요?

date로 년, 월, 일을 선택할 수 있는 달력을

datetime-local로 년, 월, 일, 시, 분을 선택할 수 있고

month로 월, 년을 선택

time으로 시, 분을 선택

week로 한 주를 선택할 수 있습니다.

전에 사용된 datetime 타입은 더 이상 사용되지 않습니다.

다른 타입들은 쇼츠에서 확인하세요.

 

<datalist>

데이터리스트는 다른 선택할 수 있는 옵션들을 나타낼 때 사용하는 요소입니다.

보통 <input>과 같이 사용되고 옵션들은 <input> 아래에 나타납니다.

사용자가 값을 입력하면 그 값에 맞춰 옵션들이 자동 필터링 됩니다.

<datalist>는 <option>과 같이 사용되고 <input>과 는 id와 list 속성을 사용해서 연결합니다.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="딸기"></option>
  <option value="바나나"></option>
  <option value="민트"></option>
  <option value="초코"></option>
  <option value="바닐라"></option>
</datalist>

 

<dialog>

<dialog> 요소는 모달을 만들 때 사용할 수 있는 요소입니다.

모달이라고 하면 좀 생소하신 가요? 혹시 팝업이라고 하면 상상이 가실까요?

 

여기서 중요한 건 팝업 창/팝업 윈도와는 전혀 다른 요소입니다.

주로 팝업 창/팝업 윈도라고 하면 자바스크립트로 새로운 브라우저를 여는 걸 말합니다.

 

모달은 페이지에서 무언가를 클릭했을 때 열리는 작은 박스를 말합니다.

사용자가 중요한 경고 메시지를 꼭 보게 하기 위해서나, 어떤 상호작용의 결과를 알려줄 때, 그럴 때 사용됩니다.

GitHub에서 repository를 지우려고 할 때 나타나는 확인 절차가 모달입니다.

 

<dialog>는 자바스크립트로 열고 닫을 수 있는데, 여는 방식은 두 가지가 있습니다.

하나는 showModal()이고 다른 하나는 show()입니다.

이 두 개의 차이점은 모달이 열려있는 동안 페이지의 다른 요소들과의 상호작용입니다.

show()는 페이지의 다른 요소들과 상호작용 할 수 있고 showModal()은 할 수 없습니다.

<!-- show() -->
<button type="button" id="showBtn">Show()</button>
<dialog id="show">
  <p>Hello World!</p>
  <button type="button" id="closeBtn">Close</button>
</dialog>
<script>
  const button = document.querySelector("#showBtn")
  const closeBtn = document.querySelector("#closeBtn")
  const showDialog = document.querySelector("#show")
  button.addEventListener("click", (event) => {
    showDialog.show();
  });
  closeBtn.addEventListener("click", (event) => {
    showDialog.close();
  });
</script>

<!-- showModal() -->
<button type="button" id="showModalBtn">ShowModal()</button>
<dialog id="showModal">
  <p>Hello World!</p>
  <button type="button" id="closeModalBtn">Close</button>
</dialog>
<script>
  const buttonModal = document.querySelector("#showModalBtn")
  const closeModalBtn = document.querySelector("#closeModalBtn")
  const showModalDialog = document.querySelector("#showModal")
  buttonModal.addEventListener("click", (event) => {
    showModalDialog.showModal();
  });
  closeModalBtn.addEventListener("click", (event) => {
    showModalDialog.close();
  });
</script>

 

 

오늘은 제 개인적인 경험을 바탕으로 초보 개발자들이 아직 잘 모르는 HTML 요소들 몇 개를 가져와 봤습니다.

여러분이 생각하는 사람들이 아직 잘 모르는 HTML 요소들은 뭐가 있나요?

궁금한 점이나 추가로 알고 싶은 내용이 있다면 댓글로 남겨주세요.