댓글 검색 목록

[html] 재사용 가능한 HTML 템플릿 만들기

페이지 정보

작성자 운영자 작성일 20-04-24 10:24 조회 1,745 댓글 0

마지막 기사에서는 웹 구성 요소 사양 (사용자 지정 요소, 섀도 DOM 및 HTML 템플릿)에 대해 높은 수준으로 설명했습니다. 이 기사와 다음 세 가지 기사에서는 이러한 기술을 테스트하고 더 자세히 살펴보고 오늘날 프로덕션에서 어떻게 사용할 수 있는지 살펴볼 것입니다. 이를 위해, 우리는 다양한 기술이 어떻게 조화를 이루는 지 확인하기 위해 사용자 정의 모달 대화 상자를 처음부터 구축 할 것입니다.


https://css-tricks.com/crafting-reusable-html-templates/ 


HTML 템플릿 


웹 구성 요소 사양에서 가장 잘 알려져 있지만 가장 강력한 기능 중 하나는 <template> 요소입니다. 이 시리즈의 첫 번째 기사에서는 템플릿 요소를 "호출 할 때까지 렌더링 되지 않는 HTML의 사용자 정의 템플릿"으로 정의했습니다. 다시 말해서, 템플릿은 달리 지시가 있을 때까지 브라우저가 무시하는 HTML입니다.


그런 다음 이러한 템플릿을 전달하여 많은 흥미로운 방식으로 재사용 할 수 있습니다. 이 기사에서는 사용자 정의 요소에 사용될 대화 상자의 템플리트를 작성하는 방법을 살펴 본다.


템플릿 정의 


<template>은 간단하게 들리 겠지만 HTML 요소이므로 내용이 포함 된 템플릿의 가장 기본적인 형태는 다음과 같습니다.


<template> <h1>Hello world</h1> </template> 


브라우저가 템플릿 요소의 내용을 렌더링 하지 않기 때문에 브라우저에서 이것을 실행하면 빈 화면이 나타납니다. JavaScript로 HTML을 작성하는 대신 컨텐츠 (또는 컨텐츠 구조)를 정의하고 나중에 저장할 수 있기 때문에 매우 강력합니다.


템플릿을 사용하려면 JavaScript가 필요합니다


const template = document.querySelector('template'); const node = document.importNode(template.content, true); document.body.appendChild(node); 


실제 마술은 document.importNode 메소드에서 발생합니다. 이 기능을 사용하면 템플릿 내용의 복사본을 만들어 다른 문서 (또는 문서 조각)에 삽입 할 수 있습니다. 함수에 대한 첫 번째 인수는 템플릿의 내용을 가져오고 두 번째 인수는 브라우저에 요소의 DOM 하위 트리 (즉, 모든 하위 항목)의 딥 카피를 수행하도록 지시합니다.


template.content를 직접 사용할 수 있었지만, 그렇게 하면 요소에서 내용을 제거하고 나중에 문서 본문에 추가했을 것입니다. 모든 DOM 노드는 한 위치에만 연결할 수 있으므로 이후에 템플릿 컨텐츠를 사용하면 컨텐츠가 이전에 이동 되었기 때문에 빈 문서 조각 (기본적으로 null 값)이 발생합니다. document.importNode를 사용하면 동일한 템플릿 컨텐츠의 인스턴스를 여러 위치에서 재사용 할 수 있습니다.


그런 다음 해당 노드는 document.body에 추가되고 사용자를 위해 렌더링 됩니다. 이를 통해 첫 번째 기사에서 다룬 다음 데모와 유사한 콘텐츠 제작을 위한 사용자 (또는 프로그램 소비자) 템플릿을 제공하는 등 흥미로운 작업을 수행 할 수 있습니다.


https://codepen.io/calebdwilliams/pen/LqQmXN 


이 예에서는 저자와 작가가 작성한 동일한 콘텐츠를 렌더링 하기 위해 두 가지 템플릿을 제공했습니다. 양식이 변경되면 해당 값과 연결된 템플릿을 렌더링 하도록 선택합니다. 동일한 기술을 사용하면 나중에 정의 할 템플릿을 사용하는 사용자 지정 요소를 만들 수 있습니다.


템플릿의 다양성 


템플릿에서 흥미로운 점 중 하나는 HTML을 포함 할 수 있다는 것입니다. 여기에는 스크립트 및 스타일 요소가 포함됩니다. 매우 간단한 예는 클릭 할 때 경고하는 버튼을 추가하는 템플릿입니다.


<button id="click-me">Log click event</button> 


스타일을 만들어 봅시다 :


button { all: unset; background: tomato; border: 0; border-radius: 4px; color: white; font-family: Helvetica; font-size: 1.5rem; padding: .5rem 1rem; } 


… 정말 간단한 스크립트로 호출하십시오.


const button = document.getElementById('click-me'); button.addEventListener('click', event => alert(event)); 


물론 HTML의 <style> 및 <script> 태그를 사용하여 이 모든 것을 개별 파일이 아닌 템플릿에 직접 넣을 수 있습니다.


<template id="template"> <script> const button = document.getElementById('click-me'); button.addEventListener('click', event => alert(event)); </script> <style> #click-me { all: unset; background: tomato; border: 0; border-radius: 4px; color: white; font-family: Helvetica; font-size: 1.5rem; padding: .5rem 1rem; } </style> <button id="click-me">Log click event</button> </template> 


이 요소가 DOM에 추가되면 ID # click-me, 단추의 ID를 대상으로 하는 전역 CSS 선택기 및 요소의 클릭 이벤트를 알리는 간단한 이벤트 리스너가 있는 새 버튼이 생깁니다.


스크립트의 경우 document.importNode를 사용하여 내용을 추가하기 만하면 페이지에서 다른 페이지로 이동할 수 있는 HTML 템플릿이 대부분 포함됩니다.


https://codepen.io/calebdwilliams/pen/modxXr 


대화 상자를 위한 템플릿 만들기 


대화 상자 요소를 만드는 작업으로 돌아가 템플릿의 내용과 스타일을 정의하려고 합니다.


<template id="one-dialog"> <script> document.getElementById('launch-dialog').addEventListener('click', () => { const wrapper = document.querySelector('.wrapper'); const closeButton = document.querySelector('button.close'); const wasFocused = document.activeElement; wrapper.classList.add('open'); closeButton.focus(); closeButton.addEventListener('click', () => { wrapper.classList.remove('open'); wasFocused.focus(); }); }); </script> <style> .wrapper { opacity: 0; transition: visibility 0s, opacity 0.25s ease-in; } .wrapper:not(.open) { visibility: hidden; } .wrapper.open { align-items: center; display: flex; justify-content: center; height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 1; visibility: visible; } .overlay { background: rgba(0, 0, 0, 0.8); height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; } .dialog { background: #ffffff; max-width: 600px; padding: 1rem; position: fixed; } button { all: unset; cursor: pointer; font-size: 1.25rem; position: absolute; top: 1rem; right: 1rem; } button:focus { border: 2px solid blue; } </style> <div class="wrapper"> <div class="overlay"></div> <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="content"> <button class="close" aria-label="Close">&#x2716;&#xfe0f;</button> <h1 id="title">Hello world</h1> <div id="content" class="content"> <p>This is content in the body of our modal</p> </div> </div> </div> </template> 


이 코드는 대화의 기초가 됩니다. 간단히 말하면 전역 닫기 버튼, 제목 및 일부 내용이 있습니다. 대화 상자를 시각적으로 전환 할 수 있는 동작도 추가했습니다 (아직 액세스 할 수는 없지만). 불행히도 스타일과 스크립트 내용은 템플릿에 적용되지 않으며 전체 문서에 적용되므로 템플릿 인스턴스가 둘 이상 DOM에 추가 될 때 이상적이지 않은 동작이 발생합니다. 다음 기사에서는 이 템플릿을 실시간으로 사용하고 요소의 동작을 캡슐화 하는 사용자 지정 요소를 사용하고 자체 요소 중 하나를 만들어 보겠습니다.


https://codepen.io/calebdwilliams/pen/JzjLyQ 



댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.