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> 태그
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를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.