빠르게 템플릿을 사용해서 블로그 글을 작성해 봅시다! 바로 템플릿 쓰러 가기

글 최상단에 블로깅 정보 적기

---
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

1. 개행 첫번째

안녕하세요.

안녕하세요.

2. 개행 두번째

안녕하세요.
안녕하세요.

코드블럭 사용하기

```언어명(ts, js, java, etc) title="제목"

const example = '예시';

// highlight-start
const highlight = '진하게!';
// highlight-end

```

이 코드 블럭은 아래와 같이 표현됩니다.

const example = "예시";

// highlight-start
const highlight = "진하게!";
// highlight-end

Admonitions 박스 사용하기

총 4가지의 Admonitions 박스를 사용할수 있습니다.

:::note 여기에도 제목을 줄 수 있어요!

여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.

:::

:::tip

여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.

:::

:::info

여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.

:::

:::warning

여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.

:::

:::danger

여기에도 `동일한` **마크다운** 문법을 _적으면_ 됩니다. 이렇게 [링크로 가기 `click`](#) 도 할 수 있어요.

:::

사진 사용 예시

이미지는 static/img/에 저장하고 import 없이 @images 경로로 작성합니다. Astro가 원본 크기를 읽고 이미지 최적화와 로딩 전 공간 확보를 처리합니다.

![예시 이미지](@images/@frontEnd/example.png)

파일명에 공백이 있으면 경로를 < >로 감쌉니다.

![설명](<@images/분야/글 이름/이미지 1.png>)

크기나 스타일을 따로 지정할 때만 Image 컴포넌트를 사용합니다.

import { Image } from 'astro:assets';
import exampleImage from '@images/@frontEnd/example.png';

<Image src={exampleImage} alt="예시 이미지" width={400} />

이미지 설명은 대체 텍스트로 사용됩니다. GIF도 Markdown 문법으로 작성할 수 있습니다.

비디오 사용 예시

비디오를 사용하기 위해서는 {/* truncate */} 앞에 사용할 비디오를 명시해 주어야 합니다. 맨 윗글을 보시면 {/* truncate */} 을 확인 할 수 있습니다. 비디오는 원하는 경로에 저장합니다. 되도록이면 쓰는 글에 가깝게 두거나 각 트랙 폴더에 만들어져 있는 video 폴더를 사용하는 것을 추천합니다. import 비디오이름 from "상대경로" 로 불러올 수 있습니다. Video도 같이 불러옵니다.

아래 예시를 참고해 주세요.

import videoUrl from "./videos/example.mp4";
import Video from "@components/Video.astro"; // 글 위치와 무관하게 같은 경로를 사용합니다.

이제 가져와 봅시다!

<Video
  controls // 컨트롤 바의 표시 유무입니다.
  playing // 음소거 상태로 자동 재생합니다.
  loop // 동영상이 끝나도 다시 처음부터 계속 재생할지를 결정합니다.
  url={videoUrl} // 위에서 작성한 "비디오이름"을 넣습니다.
  style={{ marginBottom: "20px" }} // 다음 문장과 동영상 간 간격을 줍니다.
/>

아래와 같이 동영상이 나옵니다.