jhhan의 블로그

이번 포스트에서는 shadow DOM과 template에 대해서 알아보겠습니다. 지난 포스트와 이어지는 내용이 있으니 참고하셔도 좋습니다. https://jhhan009.tistory.com/130 Web Components 이번 시간에는 Web Components에 대해서 알아보겠습니다. html 코드를 작성하다 보면, 혹은 살펴본다면 div 태그들을 많이 쓰는 것을 볼 수 있습니다. 근데 실제로 이 div 태그들을 계속해서 쓰는 것이 jhhan009.tistory.com 1. 화면 상에서는 나름 복잡하게 보이는데 코드 상으로는 간단한 그런 것들이 있습니다. input 이 아마도 그런 예시가 될 것 같습니다. 코드 한 줄로 표현이 되지만, 과연 코드 한 줄로 저런 화면이 나오는 것이 되는 걸까요... ..

이번 시간에는 Web Components에 대해서 알아보겠습니다. html 코드를 작성하다 보면, 혹은 살펴본다면 div 태그들을 많이 쓰는 것을 볼 수 있습니다. 근데 실제로 이 div 태그들을 계속해서 쓰는 것이 귀찮을 수 있습니다. 그런 것들을 모아서 하나의 새로운 태그로 만드는 것도 괜찮지 않을까요? 바로 Web Components라는 문법을 사용하면 가능하다고 합니다. 참고로 이것은 브라우저에서 지원해주는 기능입니다. 그리고 js 문법으로 구현할 수 있어서 js를 사용해서 진행합니다. 1. 커스텀 태그 만들어보기 만들어보고자 하는 커스텀 태그가 없다면 다음의 커스텀 태그 예시를 살펴보겠습니다. label 과 input 태그가 같이 나오는 그런 태그를 만들어보겠습니다. class LabelAndI..