From 4803b23bcea09a819cf84d8663683d8679407ae3 Mon Sep 17 00:00:00 2001
From: Jaemin Choi <1dotolee@gmail.com>
Date: Fri, 27 Oct 2023 00:25:43 +0900
Subject: [PATCH] feat: add images

---
 .../docs/scss/custom/structure/_content.scss  | 273 ++++++++++++++++++
 .../docs/scss/custom/structure/_general.scss  |   6 +-
 content/docs/backend/2. Node.js.md            |   2 +-
 content/docs/backend/4. TypeScript.md         |   2 +-
 content/docs/backend/_index.md                |   1 +
 content/docs/frontend/1. HTML, CSS.md         |  10 +-
 content/docs/frontend/2. JavaScript, DOM.md   |   6 +-
 content/docs/frontend/3. TypeScript.md        |   4 +-
 content/docs/frontend/4. React.md             |   2 +-
 content/docs/frontend/5. Data Fetching.md     |   2 +-
 content/docs/frontend/6. React Ecosystem.md   |   2 +-
 content/docs/frontend/7. Tailwind CSS.md      |   2 +-
 content/docs/frontend/8. Next.js.md           |   2 +-
 content/docs/frontend/9. Git, Github.md       |   4 +-
 .../{README.md => Getting Started.md}         |   9 +-
 content/docs/frontend/_index.md               |   1 +
 .../frontend/images}/frontend-roadmap.png     | Bin
 .../docs/frontend/images/git.png              | Bin
 .../docs/frontend/images/typescript.png       | Bin
 .../docs/frontend/images/week3-detail.png     | Bin
 .../docs/frontend/images/week3-devtool.png    | Bin
 .../docs/frontend/images/week3-main.png       | Bin
 .../docs/frontend/images/week4-detail.png     | Bin
 .../docs/frontend/images/week4-main.png       | Bin
 content/docs/infra/1. Node.js.md              |   2 +-
 reference/Install WSL.md                      |   2 +-
 26 files changed, 308 insertions(+), 24 deletions(-)
 create mode 100644 assets/docs/scss/custom/structure/_content.scss
 rename content/docs/frontend/{README.md => Getting Started.md} (92%)
 rename {images => content/docs/frontend/images}/frontend-roadmap.png (100%)
 rename images/fe-git.png => content/docs/frontend/images/git.png (100%)
 rename images/fe-typescript.png => content/docs/frontend/images/typescript.png (100%)
 rename images/fe-3weak-2.png => content/docs/frontend/images/week3-detail.png (100%)
 rename images/fe-3weak-3.png => content/docs/frontend/images/week3-devtool.png (100%)
 rename images/fe-3weak-1.png => content/docs/frontend/images/week3-main.png (100%)
 rename images/fe-4weak-2.png => content/docs/frontend/images/week4-detail.png (100%)
 rename images/fe-4weak-1.png => content/docs/frontend/images/week4-main.png (100%)

diff --git a/assets/docs/scss/custom/structure/_content.scss b/assets/docs/scss/custom/structure/_content.scss
new file mode 100644
index 0000000..af4d121
--- /dev/null
+++ b/assets/docs/scss/custom/structure/_content.scss
@@ -0,0 +1,273 @@
+// Docs main content
+//
+// _content.scss
+//
+
+:root {
+  --content-icon-color: var(--primary);
+  --content-icon-bg: var(--sidebar-icon-bg);
+  --content-icon-border: var(--sidebar-icon-bg);
+  --content-link-color: var(--primary);
+
+  --ordered-list-bg: var(--gray-300);
+  --ordered-list-color: var(--gray-800);
+  --blockquote-border-color: var(--gray-300);
+
+  --code-block-bg: #212d63;
+  --inline-code-bg: var(--gray-100);
+  --inline-code-border: 1px solid var(--gray-400);
+}
+
+[data-dark-mode] {
+  --content-icon-color: var(--primary-200);
+  --content-icon-bg: hsl(var(--primary-hsl), 0.15);
+  --content-icon-border: var(--primary-800);
+  --content-link-color: var(--primary-300);
+
+  --ordered-list-bg: var(--gray-700);
+  --ordered-list-color: var(--gray-200);
+  --blockquote-border-color: var(--primary-200);
+
+  --code-block-bg: var(--gray-900);
+  --inline-code-bg: var(--gray-800);
+  --inline-code-border: 1px solid var(--gray-600);
+}
+
+.docs-content {
+  order: 1;
+}
+
+// Links
+.docs-content .main-content a {
+  font-weight: 600;
+  color: var(--content-link-color);
+  &:hover {
+    text-decoration: underline 2px var(--primary-200);
+    text-underline-offset: 2.5px !important;
+    transition: 0s !important;
+  }
+  // &.anchor i {
+  //     transform: rotate(-45deg);
+  // }
+  code {
+    color: var(--content-link-color);
+  }
+}
+
+.docs-content .main-content {
+  #edit-this-page a,
+  #list-item a {
+    &:hover {
+      text-decoration: none !important;
+    }
+  }
+}
+
+.docs-content .main-content li {
+  color: var(--text-default);
+}
+
+.docs-content .main-content h1,
+.docs-content .main-content h2,
+.docs-content .main-content h3,
+.docs-content .main-content h4,
+.docs-content .main-content h5 {
+  font-weight: 700;
+  color: var(--body-color);
+}
+
+.docs-content .content-title {
+  font-weight: 700;
+  align-self: center;
+}
+
+i {
+  &.title-icon {
+    width: 44px;
+    height: 44px;
+    color: var(--content-icon-color);
+    background-color: var(--content-icon-bg);
+    display: inline-flex !important;
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    // border: solid 1px var(--content-icon-border);
+    border-radius: 5px;
+
+    @media (max-width: 768px) {
+      align-self: auto;
+    }
+  }
+}
+
+.docs-content p {
+  &.lead {
+    color: var(--text-muted);
+    font-weight: 400;
+  }
+}
+
+@media (max-width: 1199px) {
+  .docs-content {
+    padding-left: calc(var(--bs-gutter-x) * 1.05);
+    padding-right: calc(var(--bs-gutter-x) * 1.05);
+
+    h2 {
+      margin-bottom: 1rem;
+    }
+
+    p {
+      &.lead {
+        font-size: 1rem;
+      }
+    }
+  }
+}
+
+// Images
+.docs-content .main-content {
+  img,
+  svg {
+    max-width: 100%;
+    /* disabled by custom */
+    // height: auto;
+  }
+  // External link icon
+  a svg {
+    vertical-align: middle;
+    padding-bottom: 0.25rem;
+    margin-left: 3px;
+  }
+}
+
+// Unordered List Styling
+.docs-content .main-content ul {
+  padding-left: 0;
+
+  > li {
+    position: relative;
+    padding-left: 32px;
+    // margin-bottom: 5px;
+  }
+
+  > li::before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    left: 8px;
+    top: 10px;
+    border-radius: 30%;
+    background: var(--gray-500);
+  }
+}
+
+// Ordered List Styling
+.docs-content .main-content ol {
+  counter-reset: listitem;
+  > li {
+    counter-increment: listitem;
+    position: relative;
+    padding-left: 32px;
+  }
+
+  > li::before {
+    content: counter(listitem);
+    background: var(--ordered-list-bg);
+    color: var(--ordered-list-color);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 10px;
+    text-align: center;
+    padding: 5px 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
+    position: absolute;
+    left: 0;
+    top: 3px;
+  }
+}
+
+// Universal List Styling
+.docs-content .main-content ol,
+.docs-content .main-content ul {
+  list-style: none;
+  line-height: 26px;
+}
+
+// Blockquote
+.docs-content .main-content blockquote {
+  margin-bottom: 1rem;
+  /* disabled by custom */
+  // font-size: 1.25rem;
+  border-left: 3px solid var(--blockquote-border-color);
+  padding-left: 1rem;
+}
+
+// Code
+.docs-content .main-content div.highlight {
+  margin: 16px 0;
+  padding: $code-block-padding-top;
+  background: var(--code-block-bg);
+  border-radius: 4px;
+  pre {
+    padding: 0;
+  }
+}
+
+.docs-content .main-content code {
+  font-size: inherit;
+  // color: var(--text-default);
+  font-weight: 400;
+  padding: 1px 2px;
+  background: var(--inline-code-bg);
+  border: var(--inline-code-border);
+  border-radius: 4px;
+}
+
+.docs-content .main-content pre {
+  margin: 0;
+  // background-color: var(--code-block-bg) !important;
+  border-radius: 4px;
+  padding: $code-block-padding-top;
+
+  code {
+    // color: #f5fbff;
+    font-size: 0.8rem;
+    display: block;
+    // background: var(--code-block-bg);
+    border: none;
+    overflow-x: auto;
+    line-height: 1.5;
+    padding: 0 2.5rem 1.25rem 2.5rem;
+    tab-size: 4;
+    scrollbar-width: thin;
+    //scrollbar-color: transparent transparent;
+  }
+}
+
+// bold code
+.docs-content .main-content strong {
+  code {
+    font-weight: 700;
+  }
+}
+
+// Chroma Highlighter CSS
+.docs-content .main-content td pre {
+  code {
+    overflow-x: unset !important;
+  }
+}
+
+.docs-content .main-content .alert ul {
+  font-size: var(--font-size-sm);
+}
+
+// <figcaption>
+
+.docs-content figcaption {
+  font-size: small;
+}
diff --git a/assets/docs/scss/custom/structure/_general.scss b/assets/docs/scss/custom/structure/_general.scss
index 89ac9d1..efe2e3f 100644
--- a/assets/docs/scss/custom/structure/_general.scss
+++ b/assets/docs/scss/custom/structure/_general.scss
@@ -81,6 +81,8 @@ p {
   margin-top: 1.25rem; /* custom rule */
   margin-bottom: 1.25rem; /* custom rule */
 }
-img {
+
+/* disabled by custom */
+/* img {
   height: auto;
-}
+} */
diff --git a/content/docs/backend/2. Node.js.md b/content/docs/backend/2. Node.js.md
index 6795acd..7c48cdf 100644
--- a/content/docs/backend/2. Node.js.md	
+++ b/content/docs/backend/2. Node.js.md	
@@ -111,7 +111,7 @@ WSL(Window Subsystem for Linux)은 윈도우에서 리눅스를 실행할 수 
 Visual Studio Code는 Microsoft에서 만든 텍스트 편집기입니다. 스꾸딩의 개발 환경은 주로 Visual Studio Code를 사용합니다. 아래 링크를 통해 Visual Studio Code를 설치해주세요.
 https://code.visualstudio.com/
 
-![Visual Studio Code](https://code.visualstudio.com/assets/docs/languages/typescript/overview.png)
+{{< figure src="https://code.visualstudio.com/assets/docs/languages/typescript/overview.png" alt="Visual Studio Code" >}}
 
 ### Node.js 설치
 
diff --git a/content/docs/backend/4. TypeScript.md b/content/docs/backend/4. TypeScript.md
index 8b61827..d85fae9 100644
--- a/content/docs/backend/4. TypeScript.md	
+++ b/content/docs/backend/4. TypeScript.md	
@@ -9,7 +9,7 @@ weight = 140
 
 <!-- TODO: update `date` and `lastmod` -->
 
-![typescript](../images/fe-typescript.png)
+{{< figure src="../../frontend/images/typescript.png" alt="TypeScript" >}}
 
 > ref. [Learn Typescript from Scratch - Jatin Sharma](https://j471n.in/blogs/ts)
 
diff --git a/content/docs/backend/_index.md b/content/docs/backend/_index.md
index 82455c3..2bfb698 100644
--- a/content/docs/backend/_index.md
+++ b/content/docs/backend/_index.md
@@ -1,5 +1,6 @@
 ---
 weight: 100
 title: "Backend"
+description: "백엔드 팀은 API와 서버 개발, 데이터베이스 관리 등을 담당해요. " 
 icon: "folder"
 ---
diff --git a/content/docs/frontend/1. HTML, CSS.md b/content/docs/frontend/1. HTML, CSS.md
index 458a995..827f103 100644
--- a/content/docs/frontend/1. HTML, CSS.md	
+++ b/content/docs/frontend/1. HTML, CSS.md	
@@ -4,10 +4,10 @@ description = "HTML, CSS에 대해 알아봅시다."
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 10
+weight = 210
 +++
 
-![로드맵](../images/frontend-roadmap.png)
+{{< figure src="../images/frontend-roadmap.png" alt="로드맵" >}}
 
 > ref. [frontend roadmap (beginner version) - roadmap.sh](https://roadmap.sh/frontend?r=frontend-beginner)
 
@@ -54,8 +54,8 @@ HTML에서 구조화를 잘했지만 아직은 단순히 문서일 뿐이에요.
 
 매주 배운 내용을 복습 및 활용하기 위해 프로젝트를 진행해요. 저희가 준비한 프로젝트는 아래와 같아요.
 
-![메인 페이지](../images/fe-3weak-1.png)
-![디테일 페이지](../images/fe-3weak-2.png)
+{{< figure src="../images/week3-main.png" alt="메인 페이지" >}}
+{{< figure src="../images/week3-detail.png" alt="디테일 페이지" >}}
 
 위와 같이 **포켓몬 도감(?) 사이트**를 만드는 것이 이번 스터디 프로젝트에요.
 
@@ -101,7 +101,7 @@ VSCode는 HTML, CSS를 작성하기에 정말 좋은 에디터예요. [VSCode 
 
 매주 [데모 사이트](https://dayongkr.github.io/skkuding-fe-study/3w/)를 제공할 거예요. 데모 사이트를 분석해서 어떻게 만들어야 할지 참고해 보세요!
 
-![데모 사이트 분석](../images/fe-3weak-3.png)
+{{< figure src="../images/week3-devtool.png" alt="데모 사이트 분석" >}}
 
 처음에는 그냥 외관만 보고 따라 만들다가 막히는 경우 위 사진과 같이 개발자 도구를 통해 분석하면서 만들어 보세요!
 
diff --git a/content/docs/frontend/2. JavaScript, DOM.md b/content/docs/frontend/2. JavaScript, DOM.md
index 26172d3..9c598b9 100644
--- a/content/docs/frontend/2. JavaScript, DOM.md	
+++ b/content/docs/frontend/2. JavaScript, DOM.md	
@@ -4,7 +4,7 @@ description = "JavaScript로 웹의 동적인 부분을 다뤄봅니다."
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 20
+weight = 220
 +++
 
 저번 시간에는 HTML, CSS를 통해 웹의 구조와 디자인와 같은 정적인 부분을 다뤄봤어요. 이번 시간에는 JavaScript를 통해 웹의 동적인 부분을 다뤄볼 거예요!
@@ -50,7 +50,7 @@ DOM(Document Object Model)은 HTML 문서의 구조를 트리 형태로 다루
 
 ### 1. 포켓몬 데이터를 사용해서 메인페이지 리스트 만들기
 
-![메인 페이지](../images/fe-4weak-1.png)
+{{< figure src="../images/week4-main.png" alt="메인 페이지" >}}
 
 위와 같이 디자인은 똑같지만 기존 방법과 달리 javascript 파일에서 포켓몬 데이터 배열을 **매핑**하여 리스트를 만들어요.
 
@@ -60,7 +60,7 @@ DOM(Document Object Model)은 HTML 문서의 구조를 트리 형태로 다루
 
 ### 2. 하나의 html 파일로 디테일 페이지 만들기
 
-![디테일 페이지](../images/fe-4weak-2.png)
+{{< figure src="../images/week4-detail.png" alt="디테일 페이지" >}}
 
 디테일 페이지도 디자인은 변함없어요! 다만 기존에는 포켓몬별로 디테일 페이지(html)를 만들었다면 이번에는 하나의 html 파일이 여러 포켓몬의 디테일 페이지를 보여줘야 해요!
 
diff --git a/content/docs/frontend/3. TypeScript.md b/content/docs/frontend/3. TypeScript.md
index 6b61a5d..f8c8c4a 100644
--- a/content/docs/frontend/3. TypeScript.md	
+++ b/content/docs/frontend/3. TypeScript.md	
@@ -4,10 +4,10 @@ description = "JavaScript의 확장판인 TypeScript에 대해 알아봅니다."
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 30
+weight = 230
 +++
 
-![typescript](../images/fe-typescript.png)
+{{< figure src="../images/typescript.png" alt="TypeScript" height=320 >}}
 
 > ref. [Learn Typescript from Scratch - Jatin Sharma](https://j471n.in/blogs/ts)
 
diff --git a/content/docs/frontend/4. React.md b/content/docs/frontend/4. React.md
index 73cace8..f1fc827 100644
--- a/content/docs/frontend/4. React.md	
+++ b/content/docs/frontend/4. React.md	
@@ -4,7 +4,7 @@ description = "웹 라이브러리인 React에 대해 알아니다."
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 40
+weight = 240
 +++
 
 지금까지는 웹의 기본 원소인 HTML, CSS, JavaScript를 이용하여 웹 페이지를 만들어 보았고 그 과정 속에서 직접 DOM을 조작하고 이벤트를 다뤄보았어요. 이번 시간에는 이런 과정을 더욱 쉽게 할 수 있도록 도와주는 라이브러리인 React에 대해 알아보아요!
diff --git a/content/docs/frontend/5. Data Fetching.md b/content/docs/frontend/5. Data Fetching.md
index d255851..fffa847 100644
--- a/content/docs/frontend/5. Data Fetching.md	
+++ b/content/docs/frontend/5. Data Fetching.md	
@@ -4,7 +4,7 @@ description = "REST API와 GraphQL을 이용해 외부 데이터를 받아봅니
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 50
+weight = 250
 +++
 
 > korea-webtoon-api
diff --git a/content/docs/frontend/6. React Ecosystem.md b/content/docs/frontend/6. React Ecosystem.md
index 5c4d0db..a82f65d 100644
--- a/content/docs/frontend/6. React Ecosystem.md	
+++ b/content/docs/frontend/6. React Ecosystem.md	
@@ -4,5 +4,5 @@ description = "React와 관련된 third-party 라이브러리들을 알아봅니
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 60
+weight = 260
 +++
diff --git a/content/docs/frontend/7. Tailwind CSS.md b/content/docs/frontend/7. Tailwind CSS.md
index 4b171f7..51d8522 100644
--- a/content/docs/frontend/7. Tailwind CSS.md	
+++ b/content/docs/frontend/7. Tailwind CSS.md	
@@ -4,5 +4,5 @@ description = "CSS 유틸리티 라이브러리인 Tailwind CSS를 알아봅니
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 70
+weight = 270
 +++
diff --git a/content/docs/frontend/8. Next.js.md b/content/docs/frontend/8. Next.js.md
index 7c44170..3267e9e 100644
--- a/content/docs/frontend/8. Next.js.md	
+++ b/content/docs/frontend/8. Next.js.md	
@@ -4,5 +4,5 @@ description = "Next.js를 이용해 SSR을 구현해봅니다."
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 80
+weight = 280
 +++
diff --git a/content/docs/frontend/9. Git, Github.md b/content/docs/frontend/9. Git, Github.md
index 1c8b3bf..1b7216f 100644
--- a/content/docs/frontend/9. Git, Github.md	
+++ b/content/docs/frontend/9. Git, Github.md	
@@ -4,7 +4,7 @@ description = "코드의 버전 관리를 위해 Git과 Github를 사용해봅
 icon = "article"
 date = "2023-09-11"
 lastmod = "2023-10-05"
-weight = 90
+weight = 290
 +++
 
 스꾸딩은 프로젝트 관리를 위해 깃과 깃헙을 사용해요! 개인적으로 프로젝트를 관리할 때도 깃과 깃헙을 사용하면 정말 편하답니다. 이번 주차에는 깃과 깃헙을 사용하는 방법을 배워보아요!
@@ -36,6 +36,6 @@ Github은 이름 그대로 git repository를 호스팅해 주는 서비스예요
 3. Github Repository > Settings > Pages > Branch main으로 설정하기
    1. 조금 기다리면 `https://<username>.github.io/<repository-name>`으로 배포가 되어요.
 
-![git](../images/fe-git.png)
+{{< figure src="../images/git.png" alt="Git" >}}
 
 repository 폴더 구조를 위와 같이 주차 별로 나누어서 관리하면 `https://<username>.github.io/<repository-name>/<week>`으로 배포가 되기 때문에 주차 별로 배포가 가능해서 나중에 주차 별로 성장하는 모습을 볼 수 있어요!
diff --git a/content/docs/frontend/README.md b/content/docs/frontend/Getting Started.md
similarity index 92%
rename from content/docs/frontend/README.md
rename to content/docs/frontend/Getting Started.md
index 81ee754..d362482 100644
--- a/content/docs/frontend/README.md
+++ b/content/docs/frontend/Getting Started.md	
@@ -1,4 +1,11 @@
-# 프론트엔드 팀 스터디 😄
++++
+title = "Getting Started"
+description = "프론트엔트 팀 스터디를 시작해봅시다!"
+icon = "article"
+date = "2023-09-11"
+lastmod = "2023-10-05"
+weight = 200
++++
 
 프론트엔드 팀은 사용자에게 보이는 화면을 개발하는 팀이예요! 사용자의 경험이 발생하는 부분을 담당하기 때문에 정말 중요하겠죠? 한 학기 동안 같이 열심히 스터디 해보아요 🔥
 
diff --git a/content/docs/frontend/_index.md b/content/docs/frontend/_index.md
index d648a3d..5f1e21d 100644
--- a/content/docs/frontend/_index.md
+++ b/content/docs/frontend/_index.md
@@ -1,5 +1,6 @@
 ---
 weight: 200
 title: "Frontend"
+description: "프론트엔드 팀은 사용자에게 보이는 화면을 개발하고 사용자의 경험을 개선해요. "
 icon: "folder"
 ---
diff --git a/images/frontend-roadmap.png b/content/docs/frontend/images/frontend-roadmap.png
similarity index 100%
rename from images/frontend-roadmap.png
rename to content/docs/frontend/images/frontend-roadmap.png
diff --git a/images/fe-git.png b/content/docs/frontend/images/git.png
similarity index 100%
rename from images/fe-git.png
rename to content/docs/frontend/images/git.png
diff --git a/images/fe-typescript.png b/content/docs/frontend/images/typescript.png
similarity index 100%
rename from images/fe-typescript.png
rename to content/docs/frontend/images/typescript.png
diff --git a/images/fe-3weak-2.png b/content/docs/frontend/images/week3-detail.png
similarity index 100%
rename from images/fe-3weak-2.png
rename to content/docs/frontend/images/week3-detail.png
diff --git a/images/fe-3weak-3.png b/content/docs/frontend/images/week3-devtool.png
similarity index 100%
rename from images/fe-3weak-3.png
rename to content/docs/frontend/images/week3-devtool.png
diff --git a/images/fe-3weak-1.png b/content/docs/frontend/images/week3-main.png
similarity index 100%
rename from images/fe-3weak-1.png
rename to content/docs/frontend/images/week3-main.png
diff --git a/images/fe-4weak-2.png b/content/docs/frontend/images/week4-detail.png
similarity index 100%
rename from images/fe-4weak-2.png
rename to content/docs/frontend/images/week4-detail.png
diff --git a/images/fe-4weak-1.png b/content/docs/frontend/images/week4-main.png
similarity index 100%
rename from images/fe-4weak-1.png
rename to content/docs/frontend/images/week4-main.png
diff --git a/content/docs/infra/1. Node.js.md b/content/docs/infra/1. Node.js.md
index 688d6ec..5df1234 100644
--- a/content/docs/infra/1. Node.js.md	
+++ b/content/docs/infra/1. Node.js.md	
@@ -86,7 +86,7 @@ WSL(Window Subsystem for Linux)은 윈도우에서 리눅스를 실행할 수 
 Visual Studio Code는 Microsoft에서 만든 텍스트 편집기입니다. 스꾸딩의 개발 환경은 주로 Visual Studio Code를 사용합니다. 아래 링크를 통해 Visual Studio Code를 설치해주세요.
 https://code.visualstudio.com/
 
-![Visual Studio Code](https://code.visualstudio.com/assets/docs/languages/typescript/overview.png)
+{{< figure src="https://code.visualstudio.com/assets/docs/languages/typescript/overview.png" alt="Visual Studio Code" >}}
 
 ### Node.js 설치
 
diff --git a/reference/Install WSL.md b/reference/Install WSL.md
index 802b588..4fb1afc 100644
--- a/reference/Install WSL.md	
+++ b/reference/Install WSL.md	
@@ -47,7 +47,7 @@ wsl --install -d <배포판 이름>
 
 Windows Terminal은 Windows에서 여러 개의 터미널을 편리하게 사용할 수 있게 해주는 앱입니다. WSL을 사용할 때 함께 쓰는 것을 추천합니다. 스토어에서 Windows Terminal을 검색하여 설치할 수 있습니다.
 
-![Windows Terminal](../images/Windows%20Terminal.jpeg)
+{{< figure src="https://store-images.s-microsoft.com/image/apps.28865.13926773940052066.16e93a5b-b25f-4aaf-8a38-77375e237879.78e2aeac-6ede-4855-acb1-79a854b5556d?h=1080" alt="Windows Terminal" >}}
 
 ### File System