템플릿 사용 가이드
빠르게 템플릿을 사용해서 블로그 글을 작성해 봅시다! 바로 템플릿 쓰러 가기
글 최상단에 블로깅 정보 적기
---
date: 2024-03-09 // 쓴 날짜
authors: d0dam // 내 권한 - author.yml 에 기재되어 있습니다.
title: "템플릿 사용 가이드" // 제목
description: "빠르게 템플릿을 사용해서 블로그 글을 작성해 봅시다!" // 설명
keywords: ["가이드", "템플릿"] // 키워드
tags: // 사용할 태그
- 가이드
- 템플릿
---
블로그 미리보기 글 적기
{/* truncate */} // 이 이후에는 본문을 적습니다.
본문 적기
간단한 마크다운 사용해보기
간단한 마크다운을 알아봅시다.
# 제목1
## 제목2
### 제목3
// 코드 박스
`간단한 마크다운 사용해보기`
// 굵게
**간단한 마크다운 사용해보기**
// 기울이기
_간단한 마크다운 사용해보기_
// 링크
[간단한 마크다운 사용해보기](여기에 링크)
// 리스팅
- 간단한 마크다운 사용해보기
- 2
- 3
// 개행
1.
안녕하세요.
안녕하세요.
2.
안녕하세요. <br /> 안녕하세요.
아래와 같이 나옵니다.
제목1
제목2
제목3
- 코드 박스
간단한 마크다운 사용해보기
- 굵게
간단한 마크다운 사용해보기
- 기울이기
간단한 마크다운 사용해보기
- 링크
-
리스팅
-
간단한 마크다운 사용해보기
- 2
- 3
- 2
- 개행 첫번째
안녕하세요.
안녕하세요.
- 개행 두번째
안녕하세요.
안녕하세요.
코드블럭 사용하기
```언어명(ts, js, java, etc) title="제목"
const example = '예시';
// highlight-start
const highlight = '진하게!';
// highlight-end
```
이 코드 블럭은 아래와 같이 표현됩니다.
const example = "예시";
const highlight = "진하게!";
Admonitions 박스 사용하기
총 4가지의 Admonitions 박스를 사용할수 있습니다.
:::note[여기에도 제목을 줄 수 있어요!]
여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.
:::
:::tip
여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.
:::
:::info
여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.
:::
:::warning
여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.
:::
:::danger
여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.
:::
여기에도 동일한 마크다운 문법을 적으면 됩니다. 이렇게 링크로 가기 click 도 할 수 있어요.
여기에도 동일한 마크다운 문법을 적으면 됩니다. 이렇게 링크로 가기 click 도 할 수 있어요.
여기에도 동일한 마크다운 문법을 적으면 됩니다. 이렇게 링크로 가기 click 도 할 수 있어요.
여기에도 동일한 마크다운 문법을 적으면 됩니다. 이렇게 링크로 가기 click 도 할 수 있어요.
여기에도 동일한 마크다운 문법을 적으면 됩니다. 이렇게 링크로 가기 click 도 할 수 있어요.
사진 사용 예시
사진을 사용하기 위해 root의 /static 경로에 사진을 넣어야 합니다.
넣은 후 아래와 같이 사용합니다.
<img
src="/img/@frontEnd/example.png" // static 하위의 경로
style={{ marginBottom: "20px" }} // 다음 문장과 사진과의 간격을 줍니다.
/>
아래와 같이 사진이 나옵니다.
비디오 사용 예시
비디오를 사용하기 위해서는 {/* truncate */} 앞에 사용할 비디오를 명시해 주어야 합니다.
맨 윗글을 보시면 {/* truncate */} 을 확인 할 수 있습니다.
비디오는 원하는 경로에 저장합니다. 되도록이면 쓰는 글에 가깝게 두거나 각 트랙 폴더에 만들어져 있는 video 폴더를 사용하는 것을 추천합니다.
import 비디오이름 from "상대경로" 로 불러올 수 있습니다. ReactPlayer도 같이 불러옵니다.
아래 예시를 참고해 주세요.
import videoUrl from "./videos/example.mp4";
import ReactPlayer from "react-player"; // 이 문장은 어느 파일에서나 동일하게 사용합니다.
이제 가져와 봅시다!
<ReactPlayer
controls // 컨트롤 바의 표시 유무입니다.
playing // 자동 재생 여부입니다.
loop // 동영상이 끝나도 다시 처음부터 계속 재 생할지를 결정합니다.
url={videoUrl} // 위에서 작성한 "비디오이름"을 넣습니다.
style={{ marginBottom: "20px" }} // 다음 문장과 동영상 간 간격을 줍니다.
/>
아래와 같이 동영상이 나옵니다.