2025-02-09T19:02:05
This commit is contained in:
86
README.md
86
README.md
@@ -1 +1,87 @@
|
|||||||
# Html examples
|
# Html examples
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
# 목차
|
||||||
|
|
||||||
|
## 1. HTML5 개요
|
||||||
|
1.1 HTML의 역사
|
||||||
|
1.2 HTML5의 주요 특징
|
||||||
|
1.3 브라우저 지원 및 호환성
|
||||||
|
|
||||||
|
## 2. 기본 구조
|
||||||
|
2.1 HTML 문서의 기본 구조
|
||||||
|
2.2 `<html>` 태그
|
||||||
|
2.3 `<head>` 태그
|
||||||
|
2.4 `<body>` 태그
|
||||||
|
|
||||||
|
## 3. 콘텐츠 구조화
|
||||||
|
3.1 제목 태그: `<h1>` ~ `<h6>`
|
||||||
|
3.2 문단 태그: `<p>`
|
||||||
|
3.3 목록 태그: `<ul>`, `<ol>`, `<li>`
|
||||||
|
3.4 구분선: `<hr>`
|
||||||
|
3.5 블록 및 인라인 요소: `<div>`, `<span>`
|
||||||
|
|
||||||
|
## 4. 멀티미디어 요소
|
||||||
|
4.1 이미지 삽입: `<img>`
|
||||||
|
4.2 비디오 삽입: `<video>`
|
||||||
|
4.3 오디오 삽입: `<audio>`
|
||||||
|
4.4 미디어 컨트롤 속성
|
||||||
|
|
||||||
|
## 5. 링크와 내비게이션
|
||||||
|
5.1 하이퍼링크: `<a>`
|
||||||
|
5.2 네비게이션 태그: `<nav>`
|
||||||
|
5.3 앵커와 북마크
|
||||||
|
|
||||||
|
## 6. 폼과 사용자 입력
|
||||||
|
6.1 폼 기본 태그: `<form>`, `<input>`, `<textarea>`
|
||||||
|
6.2 폼 컨트롤: `<button>`, `<select>`, `<option>`
|
||||||
|
6.3 폼 속성과 검증: `required`, `pattern`, `novalidate`
|
||||||
|
6.4 데이터 전송 방식: GET과 POST
|
||||||
|
|
||||||
|
## 7. 표와 데이터 표현
|
||||||
|
7.1 표 태그: `<table>`, `<tr>`, `<td>`
|
||||||
|
7.2 제목과 요약: `<caption>`, `<thead>`, `<tfoot>`
|
||||||
|
7.3 병합 및 스타일링
|
||||||
|
|
||||||
|
## 8. 시맨틱 태그
|
||||||
|
8.1 의미론적 구조: `<header>`, `<footer>`, `<section>`, `<article>`
|
||||||
|
8.2 보조 구조 태그: `<aside>`, `<main>`
|
||||||
|
8.3 시맨틱 태그와 접근성
|
||||||
|
|
||||||
|
## 9. 스크립트와 데이터
|
||||||
|
9.1 스크립트 삽입: `<script>`
|
||||||
|
9.2 데이터 템플릿: `<template>`
|
||||||
|
9.3 JSON 데이터 삽입: `<script type="application/json">`
|
||||||
|
|
||||||
|
## 10. 스타일링과 디자인
|
||||||
|
10.1 내장 스타일: `<style>`
|
||||||
|
10.2 외부 CSS 연결: `<link>`
|
||||||
|
10.3 HTML5와 CSS3의 통합
|
||||||
|
|
||||||
|
## 11. Canvas와 그래픽
|
||||||
|
11.1 `<canvas>` 개요와 기본 사용법
|
||||||
|
11.2 2D 그리기 API
|
||||||
|
11.3 애니메이션 및 상호작용
|
||||||
|
|
||||||
|
## 12. SVG (Scalable Vector Graphics)
|
||||||
|
12.1 SVG 개요
|
||||||
|
12.2 SVG 태그: `<svg>`, `<circle>`, `<rect>`
|
||||||
|
12.3 SVG와 CSS/JavaScript의 통합
|
||||||
|
|
||||||
|
## 13. 웹스토리지와 데이터 관리
|
||||||
|
13.1 웹스토리지 API: `localStorage`, `sessionStorage`
|
||||||
|
13.2 `<meta>`를 활용한 데이터 정보
|
||||||
|
13.3 쿠키와 비교
|
||||||
|
|
||||||
|
## 14. HTML5와 웹 접근성
|
||||||
|
14.1 ARIA 속성
|
||||||
|
14.2 접근성 모범 사례
|
||||||
|
14.3 폼 및 시맨틱 태그의 활용
|
||||||
|
|
||||||
|
## 15. HTML5의 미래와 확장
|
||||||
|
15.1 최신 태그와 기능
|
||||||
|
15.2 웹 표준의 미래
|
||||||
|
15.3 HTML5와 다른 기술 (CSS3, JavaScript)와의 조화
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ HTTP는 지속적으로 발전하고 있으며, 현재 주로 사용되는 버
|
|||||||
* 헤더: 추가적인 정보를 제공합니다. (User-Agent, Accept 등)
|
* 헤더: 추가적인 정보를 제공합니다. (User-Agent, Accept 등)
|
||||||
* 본문: 서버로 전송할 데이터 (POST 메서드에서 주로 사용)
|
* 본문: 서버로 전송할 데이터 (POST 메서드에서 주로 사용)
|
||||||
|
|
||||||
```
|
```http
|
||||||
GET /products HTTP/1.1
|
GET /products HTTP/1.1
|
||||||
Host: www.example.com
|
Host: www.example.com
|
||||||
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
|
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
|
||||||
@@ -56,7 +56,7 @@ Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
|
|||||||
* 헤더: 추가적인 정보를 제공합니다. (Content-Type, Content-Length 등)
|
* 헤더: 추가적인 정보를 제공합니다. (Content-Type, Content-Length 등)
|
||||||
* 본문: 요청한 데이터
|
* 본문: 요청한 데이터
|
||||||
|
|
||||||
```
|
```http
|
||||||
HTTP/1.1 200 OK
|
HTTP/1.1 200 OK
|
||||||
Content-Type: text/html; charset=utf-8
|
Content-Type: text/html; charset=utf-8
|
||||||
Content-Length: 1234
|
Content-Length: 1234
|
||||||
|
|||||||
182
doc/http/02_url.md
Normal file
182
doc/http/02_url.md
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
# URL (Uniform Resource Locator, 통합 자원 식별자)
|
||||||
|
|
||||||
|
URL은 웹에서 **특정 자원의 위치를 식별**하고 접근할 수 있도록 하는 주소 체계입니다.
|
||||||
|
우리가 브라우저 주소창에 입력하는 **웹사이트 주소**가 바로 URL입니다.
|
||||||
|
|
||||||
|
예를 들어,
|
||||||
|
```
|
||||||
|
https://www.example.com:8080/path/to/page?query=hello#section
|
||||||
|
```
|
||||||
|
이 URL을 분석하면, 각 요소가 특정한 의미를 가집니다.
|
||||||
|
|
||||||
|
|
||||||
|
## URL의 구성 요소
|
||||||
|
|
||||||
|
URL은 다음과 같은 주요 구성 요소로 이루어집니다.
|
||||||
|
|
||||||
|
```
|
||||||
|
<프로토콜>://<호스트>:<포트>/<경로>?<쿼리>#<프래그먼트>
|
||||||
|
```
|
||||||
|
|
||||||
|
| 구성 요소 | 설명 | 예시 |
|
||||||
|
|-----------|--------|-------------------------|
|
||||||
|
| **프로토콜 (Scheme)** | 통신 방식 지정 | `http`, `https`, `ftp`, `file` |
|
||||||
|
| **호스트 (Host, 도메인 또는 IP)** | 서버 주소 | `www.example.com`, `192.168.1.1` |
|
||||||
|
| **포트 (Port, 선택사항)** | 서버 접속을 위한 포트 번호 | `80`, `443`, `21` |
|
||||||
|
| **경로 (Path)** | 서버 내 특정 리소스 위치 | `/products/item1` |
|
||||||
|
| **쿼리 스트링 (Query String)** | 추가 정보 전달 (Key-Value) | `?search=apple&page=2` |
|
||||||
|
| **프래그먼트 (Fragment, 해시)** | 문서 내 특정 위치 지정 | `#section1` |
|
||||||
|
|
||||||
|
|
||||||
|
### 프로토콜 (Scheme)
|
||||||
|
URL의 맨 앞 부분으로, **자원에 접근하는 방법(통신 방식)을 정의**합니다.
|
||||||
|
|
||||||
|
| 프로토콜 | 설명 |
|
||||||
|
|----------|----------------------------------|
|
||||||
|
| `http://` | 일반 웹사이트 접속 (보안 X) |
|
||||||
|
| `https://` | 보안 웹사이트 접속 (SSL/TLS 사용) |
|
||||||
|
| `ftp://` | 파일 전송 프로토콜 |
|
||||||
|
| `file://` | 로컬 파일 시스템 접근 |
|
||||||
|
| `mailto:` | 이메일 전송 |
|
||||||
|
| `tel:` | 전화 걸기 |
|
||||||
|
|
||||||
|
> **보안이 중요한 경우 HTTPS 사용이 필수** (HTTP는 데이터가 암호화되지 않음).
|
||||||
|
|
||||||
|
|
||||||
|
### 호스트 (Host)
|
||||||
|
서버의 주소를 나타내며, **도메인 이름 또는 IP 주소**를 사용할 수 있습니다.
|
||||||
|
|
||||||
|
도메인 예시:
|
||||||
|
```
|
||||||
|
https://www.google.com
|
||||||
|
```
|
||||||
|
- `www.google.com`은 호스트(도메인)입니다.
|
||||||
|
|
||||||
|
IP 주소 예시:
|
||||||
|
```
|
||||||
|
http://192.168.1.1
|
||||||
|
```
|
||||||
|
- `192.168.1.1`은 호스트(IP 주소)입니다.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 포트 (Port, 선택 사항)
|
||||||
|
서버에서 특정 서비스가 실행되는 네트워크 포트를 지정합니다.
|
||||||
|
포트를 생략하면 기본값이 사용됩니다.
|
||||||
|
|
||||||
|
| 프로토콜 | 기본 포트 |
|
||||||
|
|----------|----------|
|
||||||
|
| HTTP | `80` |
|
||||||
|
| HTTPS | `443` |
|
||||||
|
| FTP | `21` |
|
||||||
|
|
||||||
|
포트 지정 예시:
|
||||||
|
```
|
||||||
|
http://example.com:8080
|
||||||
|
```
|
||||||
|
➡️ `8080` 포트에서 실행 중인 웹 애플리케이션에 접근
|
||||||
|
|
||||||
|
> 일반적으로 80(HTTP)과 443(HTTPS)은 생략 가능
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 경로 (Path)
|
||||||
|
서버 내 특정 리소스의 위치를 나타냅니다.
|
||||||
|
|
||||||
|
예시
|
||||||
|
```
|
||||||
|
https://example.com/products/item1
|
||||||
|
```
|
||||||
|
* `products/item1`은 서버 내 특정 파일이나 페이지의 경로를 의미
|
||||||
|
|
||||||
|
> 웹사이트에서는 `/about` 같은 경로가 **파일 경로일 수도 있고, 동적 라우팅일 수도 있음**.
|
||||||
|
|
||||||
|
|
||||||
|
### 쿼리 스트링 (Query String)
|
||||||
|
`?key=value&key2=value2` 형식으로, **추가적인 데이터를 서버에 전달**하는 데 사용됩니다.
|
||||||
|
|
||||||
|
예시
|
||||||
|
```
|
||||||
|
https://example.com/search?query=phone&page=2
|
||||||
|
```
|
||||||
|
* `query=phone` → 검색어 "phone"
|
||||||
|
* `page=2` → 2페이지 요청
|
||||||
|
|
||||||
|
> 쿼리 스트링은 `&`로 여러 개의 값을 연결 가능
|
||||||
|
|
||||||
|
> RESTful API에서는 쿼리 스트링 대신 URL 경로를 활용하는 경우가 많음
|
||||||
|
> ```
|
||||||
|
> https://api.example.com/users/123
|
||||||
|
> ```
|
||||||
|
> * `123`은 특정 사용자의 ID
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 프래그먼트 (Fragment, 해시)
|
||||||
|
`#` 이후의 값으로, **웹페이지 내 특정 위치를 지정**합니다.
|
||||||
|
서버에는 전달되지 않으며, 브라우저에서만 사용됩니다.
|
||||||
|
|
||||||
|
예시:
|
||||||
|
```
|
||||||
|
https://example.com/docs#section3
|
||||||
|
```
|
||||||
|
* `#section3`은 문서 내 특정 섹션으로 이동
|
||||||
|
|
||||||
|
> 단일 페이지 애플리케이션(SPA)에서 해시 라우팅에 사용될 수 있음.
|
||||||
|
> 예: `https://myapp.com/#/dashboard`
|
||||||
|
|
||||||
|
|
||||||
|
## URL의 동작 과정
|
||||||
|
URL을 입력하면 다음 과정이 이루어집니다.
|
||||||
|
|
||||||
|
1️. **DNS 조회** : 도메인(`www.google.com`)을 IP 주소(`142.250.190.46`)로 변환
|
||||||
|
2️. **TCP/UDP 연결** : 클라이언트와 서버가 연결됨 (HTTPS의 경우 SSL/TLS 핸드셰이크 포함)
|
||||||
|
3️. **HTTP 요청 전송** : 브라우저가 서버에 HTTP 요청을 보냄 (`GET /index.html HTTP/1.1`)
|
||||||
|
4️. **서버 응답** : 서버가 HTML, JSON 등의 데이터를 반환
|
||||||
|
5️. **브라우저 렌더링** : HTML, CSS, JavaScript를 해석하여 화면에 표시
|
||||||
|
|
||||||
|
|
||||||
|
## URL과 URI의 차이
|
||||||
|
| 구분 | URL (Uniform Resource Locator) | URI (Uniform Resource Identifier) |
|
||||||
|
|------|-------------------------------|-------------------------------|
|
||||||
|
| 의미 | 리소스의 "위치"를 나타냄 | 리소스를 "식별"하는 모든 방식 포함 |
|
||||||
|
| 예시 | `https://example.com/page.html` | `mailto:user@example.com`, `isbn:978-3-16-148410-0` |
|
||||||
|
| 포함 관계 | URI의 한 종류 | URI의 더 넓은 개념 |
|
||||||
|
|
||||||
|
* 즉, 모든 URL은 URI이지만, 모든 URI가 URL은 아님.
|
||||||
|
|
||||||
|
|
||||||
|
## URL 인코딩 (Percent Encoding)
|
||||||
|
URL에는 **특수 문자(공백, &, ?, = 등)를 포함할 수 없음**.
|
||||||
|
따라서, 특정 문자를 **URL 인코딩(Percent Encoding)** 해야 합니다.
|
||||||
|
|
||||||
|
예시:
|
||||||
|
| 문자 | URL 인코딩 |
|
||||||
|
|------|-----------|
|
||||||
|
| 공백 (` `) | `%20` |
|
||||||
|
| `&` | `%26` |
|
||||||
|
| `?` | `%3F` |
|
||||||
|
| `=` | `%3D` |
|
||||||
|
|
||||||
|
인코딩 예제:
|
||||||
|
```
|
||||||
|
https://example.com/search?query=hello world
|
||||||
|
```
|
||||||
|
* URL 인코딩 후:
|
||||||
|
```
|
||||||
|
https://example.com/search?query=hello%20world
|
||||||
|
```
|
||||||
|
|
||||||
|
> 브라우저와 서버는 자동으로 URL 디코딩(복원)함.
|
||||||
|
|
||||||
|
|
||||||
|
## URL 단축 서비스
|
||||||
|
긴 URL을 짧게 줄여주는 서비스도 많이 사용됩니다.
|
||||||
|
예시:
|
||||||
|
```
|
||||||
|
https://bit.ly/3A4Bx5C
|
||||||
|
```
|
||||||
|
* 원래 긴 URL을 짧게 변환하여 사용
|
||||||
|
|
||||||
|
> Google의 `goo.gl`, Bitly, TinyURL 같은 서비스가 존재
|
||||||
|
|
||||||
163
doc/webcomponent/01_webcomponent.md
Normal file
163
doc/webcomponent/01_webcomponent.md
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
# 웹 컴포넌트(Web Components)
|
||||||
|
|
||||||
|
## 웹 컴포넌트(Web Components)란?
|
||||||
|
웹 컴포넌트(Web Components)는 **재사용 가능한 UI 요소를 캡슐화하여 웹 애플리케이션에서 독립적으로 사용할 수 있는 기술**입니다.
|
||||||
|
HTML, CSS, JavaScript를 **하나의 독립된 컴포넌트**로 묶어, 다른 프레임워크(React, Vue, Angular) 없이도 사용할 수 있습니다.
|
||||||
|
|
||||||
|
* 웹 컴포넌트의 핵심 목표
|
||||||
|
- **재사용성** : 여러 프로젝트에서 동일한 컴포넌트를 재사용
|
||||||
|
- **캡슐화** : 내부 스타일과 동작을 외부로부터 보호
|
||||||
|
- **프레임워크 독립적** : React, Vue, Angular 없이도 동작
|
||||||
|
- **모듈화** : HTML 요소를 조합하여 더 복잡한 UI 요소를 생성
|
||||||
|
|
||||||
|
|
||||||
|
## 웹 컴포넌트를 구성하는 3가지 핵심 기술
|
||||||
|
웹 컴포넌트는 다음 세 가지 핵심 기술을 기반으로 동작합니다.
|
||||||
|
|
||||||
|
### 1. Custom Elements (사용자 정의 요소)
|
||||||
|
HTML에서 `<my-button>` 같은 새로운 태그를 직접 정의하여 사용할 수 있게 해주는 기술입니다.
|
||||||
|
|
||||||
|
#### 새로운 HTML 요소 정의 예시
|
||||||
|
```javascript
|
||||||
|
class MyButton extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `<button>Click Me</button>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
customElements.define("my-button", MyButton);
|
||||||
|
```
|
||||||
|
사용 방법
|
||||||
|
```html
|
||||||
|
<my-button></my-button>
|
||||||
|
```
|
||||||
|
➡️ `my-button` 태그가 자동으로 버튼으로 렌더링됨.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2. Shadow DOM (캡슐화)
|
||||||
|
웹 컴포넌트 내부의 스타일과 구조를 **외부 영향 없이 독립적으로 유지하는 기능**입니다.
|
||||||
|
CSS 충돌을 방지하고, 외부에서 변경할 수 없도록 **컴포넌트 내부를 보호**합니다.
|
||||||
|
|
||||||
|
#### Shadow DOM 사용 예시
|
||||||
|
```javascript
|
||||||
|
class ShadowButton extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attachShadow({ mode: "open" }); // Shadow DOM 활성화
|
||||||
|
this.shadowRoot.innerHTML = `
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
background: blue;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<button>Shadow Button</button>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
customElements.define("shadow-button", ShadowButton);
|
||||||
|
```
|
||||||
|
사용 방법
|
||||||
|
```html
|
||||||
|
<shadow-button></shadow-button>
|
||||||
|
```
|
||||||
|
> Shadow DOM이 적용되면 외부 CSS가 이 버튼에 영향을 주지 않음.
|
||||||
|
|
||||||
|
|
||||||
|
### 3. HTML Templates (템플릿 & 슬롯)
|
||||||
|
컴포넌트에서 **반복해서 사용할 HTML 구조를 정의하고, 동적으로 채울 수 있도록 해주는 기능**입니다.
|
||||||
|
|
||||||
|
템플릿을 이용한 컴포넌트 예시
|
||||||
|
```html
|
||||||
|
<template id="card-template">
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="card">
|
||||||
|
<slot name="title"></slot>
|
||||||
|
<slot name="content"></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
class MyCard extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
const template = document.getElementById("card-template").content;
|
||||||
|
this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
customElements.define("my-card", MyCard);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<my-card>
|
||||||
|
<span slot="title"><h2>웹 컴포넌트</h2></span>
|
||||||
|
<span slot="content"><p>웹 컴포넌트 예제입니다.</p></span>
|
||||||
|
</my-card>
|
||||||
|
```
|
||||||
|
> `slot`을 사용하여 컴포넌트 내부에 동적으로 콘텐츠를 삽입 가능.
|
||||||
|
|
||||||
|
|
||||||
|
## 3. 웹 컴포넌트의 장점 & 단점
|
||||||
|
* 장점
|
||||||
|
- **프레임워크 독립적** : 모든 브라우저에서 동작
|
||||||
|
- **재사용성** : 한 번 만든 컴포넌트를 여러 프로젝트에서 활용 가능
|
||||||
|
- **스타일 격리** : Shadow DOM을 이용해 CSS 충돌 방지
|
||||||
|
- **성능 향상** : 네이티브 브라우저 지원으로 최적화됨
|
||||||
|
|
||||||
|
* 단점
|
||||||
|
- **구형 브라우저 지원 부족** : IE11 등에서는 폴리필 필요
|
||||||
|
- **데이터 바인딩 부족** : React/Vue처럼 상태 관리 기능이 없음 (별도로 구현 필요)
|
||||||
|
- **초기 학습 비용** : 기존 프레임워크 사용자에게는 생소할 수 있음
|
||||||
|
|
||||||
|
|
||||||
|
## 4. 웹 컴포넌트 vs 프레임워크 비교
|
||||||
|
| 비교 항목 | 웹 컴포넌트 | React/Vue/Angular |
|
||||||
|
|-----------|------------|-------------------|
|
||||||
|
| **기술 종속성** | 없음 | 특정 프레임워크 필요 |
|
||||||
|
| **재사용성** | 네이티브 지원 | 같은 프레임워크 내에서만 가능 |
|
||||||
|
| **렌더링 성능** | 브라우저 최적화 | 가상 DOM 사용 (추가 오버헤드) |
|
||||||
|
| **스타일 격리** | Shadow DOM 사용 | 기본적으로 없음 (Scoped CSS 사용 가능) |
|
||||||
|
| **데이터 바인딩** | 직접 구현해야 함 | 내장 기능 제공 |
|
||||||
|
|
||||||
|
➡️ 웹 컴포넌트는 특정 프레임워크에 종속되지 않는 강력한 기능을 제공하지만, 상태 관리 및 데이터 바인딩이 부족하므로 필요에 따라 프레임워크와 함께 사용할 수도 있음.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 웹 컴포넌트 활용 사례
|
||||||
|
* 디자인 시스템 (Design System) 구축
|
||||||
|
* 대규모 프로젝트의 UI 모듈화
|
||||||
|
* 프레임워크 간 호환이 필요한 경우
|
||||||
|
|
||||||
|
|
||||||
|
## 6. 웹 컴포넌트 배포 및 사용
|
||||||
|
웹 컴포넌트는 **NPM 패키지**로 배포하거나, **CDN을 통해 웹사이트에서 직접 사용**할 수 있습니다.
|
||||||
|
|
||||||
|
### CDN을 활용한 웹 컴포넌트 로드
|
||||||
|
```html
|
||||||
|
<script type="module" src="https://your-cdn.com/my-component.js"></script>
|
||||||
|
<my-component></my-component>
|
||||||
|
```
|
||||||
|
|
||||||
|
### NPM으로 배포 후 사용
|
||||||
|
```bash
|
||||||
|
npm install my-web-component
|
||||||
|
```
|
||||||
|
```javascript
|
||||||
|
import "my-web-component";
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## 7. 결론
|
||||||
|
웹 컴포넌트는 모든 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다.
|
||||||
|
* 프레임워크 독립적이며, 캡슐화된 UI 컴포넌트를 쉽게 만들고 재사용할 수 있음.
|
||||||
|
* Shadow DOM을 활용하여 스타일 충돌을 방지하고, HTML 템플릿으로 동적 콘텐츠를 관리 가능.
|
||||||
|
* 프레임워크 없이도 UI 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.
|
||||||
|
|
||||||
|
웹 컴포넌트를 활용하면 프로젝트의 유지보수성과 확장성을 크게 높일 수 있습니다!
|
||||||
Reference in New Issue
Block a user