HTML의 최근 동향
이 기사에서는 HTML의 최근 동향을 설명합니다.
이는 HTML5에 비교적 최근에 추가된 태그들에 대해 설명합니다.
YouTube Video
HTML의 최근 동향
<template>
태그
Hello, this is a reusable template!
1<template id="myTemplate">
2 <div>
3 <p>Hello, this is a reusable template!</p>
4 </div>
5</template>
6<button onclick="useTemplate()">Use Template</button>
7<div id="container"></div>
8<script>
9 function useTemplate() {
10 const template = document.getElementById('myTemplate');
11 const clone = template.content.cloneNode(true);
12 document.getElementById('container').appendChild(clone);
13 }
14</script>
-
<template>
태그는 JavaScript를 통해 활성화되기 전까지 숨겨진 상태로 유지되며 재사용 가능한 HTML 조각을 정의하는 데 사용됩니다. -
태그를 사용하면 카드나 목록 항목과 같은 재사용 가능한 UI 컴포넌트를 동적으로 생성할 수 있습니다. 또한, 코드 중복을 줄이고 대규모 애플리케이션의 유지 보수성을 향상시키는 데 도움을 줍니다.
이 예제에서는 '템플릿 사용' 버튼을 클릭하면
<template>
태그의 내용을 표시합니다.<slot>
태그Default Header Default Content Default Footer Header Content
Footer Content
1<template id="myElementTemplate"> 2 <slot name="header">Default Header</slot> 3 <main>Default Content</main> 4 <slot name="footer">Default Footer</slot> 5</template> 6<my-element> 7 <p slot="header">Header Content</p> 8 <p slot="footer">Footer Content</p> 9</my-element> 10<script> 11 class MyElement extends HTMLElement { 12 constructor() { 13 super(); 14 const shadow = this.attachShadow({ mode: 'open' }); 15 shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML; 16 } 17 } 18 customElements.define('my-element', MyElement); 19</script>
<slot>
태그는 부모 요소로부터 전달된 콘텐츠를 표시하는 웹 컴포넌트 내의 자리 표시자로 작동합니다.- 슬롯에 콘텐츠가 제공되지 않으면, 대체 콘텐츠(
<slot>
태그 내부에 직접 작성된 기본 콘텐츠)가 표시됩니다.
- 슬롯에 콘텐츠가 제공되지 않으면, 대체 콘텐츠(
- 이 예제에서는
<template>
요소 내에 이름이 지정된 슬롯(header
및footer
)이 정의되어 있습니다. <my-element>
는 사용자가 정의한 사용자 지정 HTML 요소입니다. 이 요소 내부<p>
태그의slot
속성은 슬롯 이름과 슬롯에 삽입될 콘텐츠를 지정합니다.
<dialog>
태그1<dialog id="exampleDialog"> 2 <p>This is a dialog box.</p> 3 <button id="closeButton">Close</button> 4</dialog> 5 6<button id="openButton">Open Dialog</button> 7 8<script> 9 const dialog = document.getElementById('exampleDialog'); 10 const openButton = document.getElementById('openButton'); 11 const closeButton = document.getElementById('closeButton'); 12 13 openButton.addEventListener('click', () => dialog.showModal()); 14 closeButton.addEventListener('click', () => dialog.close()); 15</script>
-
<dialog>
태그는 모달 또는 팝업과 같은 대화형 창을 정의하는 데 사용됩니다. JavaScript를 사용하여 열고 닫기를 제어할 수 있습니다. -
이 예제에서는 '대화 상자 열기' 버튼을 클릭하면 대화 상자가 표시됩니다.
<input>
태그의inputmode
속성1<label for="phone">Phone Number:</label> 2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">
<input>
태그의inputmode
속성은 터치 디바이스에서 표시되는 가상 키보드의 종류를 지정하여 사용자 경험을 향상시킵니다. 예를 들어,inputmode="tel"
은 전화번호 입력을 위한 숫자 키보드를 표시합니다.inputmode
속성은 가상 키보드 표시를 조정하기 위한 것이며 입력 콘텐츠를 검증하지는 않습니다. 입력 제한을 강제하려면type
속성을 사용하거나 JavaScript 검증을 사용해야 합니다.- 모든 브라우저와 디바이스가 이를 완전히 지원하지 않으므로 적절한 대체 방안을 준비하는 것이 가장 좋습니다.
inputmode
속성은 다음 값을 가질 수 있습니다. 각 값은 특정 입력 유형이나 가상 키보드를 표시하는 데 사용됩니다.
값 설명 none
none
가상 키보드를 숨깁니다.text
text
표준 텍스트 입력 가상 키보드를 표시합니다.tel
tel
전화번호 입력을 위한 숫자 키보드를 표시합니다.url
url
URL 입력을 위한 가상 키보드를 표시합니다.email
email
이메일 주소 입력을 위한 가상 키보드를 표시합니다.numeric
numeric
는 숫자 입력 전용 가상 키보드를 표시합니다.decimal
decimal
은 숫자 입력용 가상 키보드를 표시합니다.search
search
는 검색 입력용 가상 키보드를 표시합니다.<meta>
태그의theme-color
속성1<meta name="theme-color" content="#4CAF50"> 2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> 3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<meta>
태그의theme-color
속성은 호환 가능한 모바일 브라우저에서 주소 표시줄과 UI의 색상을 사용자 정의하는 데 사용됩니다.- 예를 들어,
media
속성을 사용하여 다크 모드와 라이트 모드 간 전환이 가능합니다.
이 태그와 속성들은 HTML5에서 발전된 것으로, 현대 웹 개발에서 필수 요소가 되었습니다. 사용 시 특정 브라우저 지원 및 호환성을 확인하는 것이 권장됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.
YouTube Video