taegeukgi
Version:
for Taegeukgi
88 lines (55 loc) • 1.79 kB
Markdown
# Taegeukgi
`Taegeukgi`는 태극기를 웹 화면에 그리는 기능을 제공하는 JavaScript 라이브러리입니다.
## 사용방법
`{version}` 안에는 사용하고자 하는 버전을 입력하세요. (0.0.9↑의 버전 사용을 권장합니다.)
### 1. CDN
Html 파일을 하나 생성하고 `<head>`안에 아래 코드를 copy & paste
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/taegeukgi@{version}/tgg.css"
/>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/taegeukgi@{version}/tgg.js"
></script>
```
`<body>`안에서 아래와 같이 사용가능합니다.
```html
<korea-flag></korea-flag>
```
<br>
### 2. Vite <img src="https://ko.vitejs.dev/logo.svg" width="16" />
> 라이브러리를 설치하기 위해서는 Node.js가 설치되어 있어야 합니다. <br>
> 자세한 사항은 Node.js [공식 홈페이지](https://nodejs.org/)를 참고하시기 바랍니다.
<br>
먼저 Vite 환경을 세팅해주세요.
```bash
$ npm create vite@latest 폴더명
```
해당 라이브러리에서는 `VanillaJS` 템플릿을 권장합니다.
<br>
Vite 환경 세팅을 마쳤다면 라이브러리를 설치합니다.
```bash
$ npm i taegeukgi
```
<br>
`main.js` 파일에 아래 코드를 copy & paste
```js
import { tgg } from 'taegeukgi';
import 'taegeukgi/tgg.css';
customElement.define(...tgg);
```
<br>
`<body>`안에서 아래와 같이 사용가능합니다.
```html
<korea-flag></korea-flag>
```
<br>
모든 준비가 완료 되었다면 개발 서버를 실행 합니다.
```bash
$ npm run dev
```
<br>
완성된 화면은 [http://localhost:5173](http://localhost:5173)에서 확인할 수 있습니다.
[]()