[html] HTML5 커스텀 요소

22 Dec 2023

html

HTML5 커스텀 요소를 생성하려면 먼저 customElements.define 메서드를 사용하여 해당 요소의 이름과 클래스를 정의해야 합니다. 아래는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>커스텀 요소 예제</title>
</head>
<body>
  <my-custom-element></my-custom-element>

  <script>
    class MyCustomElement extends HTMLElement {
      constructor() {
        super();
        // 요소의 기능을 정의하는 코드 작성
      }
    }
    customElements.define('my-custom-element', MyCustomElement);
  </script>
</body>
</html>

위 예제에서 MyCustomElement 클래스는 HTMLElement를 확장하며, 새로운 커스텀 요소의 동작을 정의합니다. 이후 customElements.define 메서드를 사용하여 my-custom-element라는 이름의 커스텀 요소를 등록합니다.

커스텀 요소를 사용하면 확장 가능한 기능, 재사용성, 그리고 가독성을 개선할 수 있습니다. 또한 커뮤니티에서 개발한 다양한 커스텀 요소가 많이 공유되고 있으며, 필요한 경우 이러한 요소들을 찾아 사용할 수도 있습니다.