diff --git a/files/ko/learn/html/tables/index.md b/files/ko/learn/html/tables/index.md
index 90a7b9f325b8d5..af2dd44871eb07 100644
--- a/files/ko/learn/html/tables/index.md
+++ b/files/ko/learn/html/tables/index.md
@@ -11,7 +11,8 @@ HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화
 
 이 모듈을 시작하기 전에, 당신은 이미 HTML의 기본 지식을 가지고 있어야 합니다. — [Introduction to HTML](/ko/docs/Learn/HTML/Introduction_to_HTML).
 
-> **참고:** 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.
+> [!NOTE]
+> 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.
 
 ## 가이드
 
diff --git a/files/ko/learn/html/tables/structuring_planet_data/index.md b/files/ko/learn/html/tables/structuring_planet_data/index.md
index 5aaad6d6f686c2..11bc35713ef025 100644
--- a/files/ko/learn/html/tables/structuring_planet_data/index.md
+++ b/files/ko/learn/html/tables/structuring_planet_data/index.md
@@ -30,7 +30,8 @@ l10n:
 
 또는 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/)와 같은 사이트를 사용하여 HTML, CSS 및 JavaScript를 붙여넣어 평가를 수행할 수 있습니다. 별도의 JavaScript/CSS 패널이 없는 온라인 편집기를 사용하는 경우, HTML 문서 내에 인라인 `<script>` 또는 `<style>` 요소로 넣을 수 있습니다.
 
-> **참고:** 궁금한 점이 있거나 도움이 필요하면 문의하세요. 이 페이지 하단의 [평가 또는 추가 도움](#평가_또는_추가_도움) 섹션을 참조하세요.
+> [!NOTE]
+> 궁금한 점이 있거나 도움이 필요하면 문의하세요. 이 페이지 하단의 [평가 또는 추가 도움](#평가_또는_추가_도움) 섹션을 참조하세요.
 
 ## 프로젝트 개요
 
diff --git a/files/ko/learn/index.md b/files/ko/learn/index.md
index e42f7688197ec5..15ddba4244971d 100644
--- a/files/ko/learn/index.md
+++ b/files/ko/learn/index.md
@@ -11,7 +11,7 @@ MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니
 
 웹 개발이 완전 처음이시라면 시작이 다소 어려우실 수 있습니다. 저희가 이끌어드리면서 주제와 충분히 친숙해지고, 제대로 익히실 수 있도록 상세하게 알려드리겠습니다. 독학이나 강의로 웹 개발을 배우는 학생, 교육 자료를 찾고 계시는 선생님, 취미로 웹 개발을 알아보시는 분, 그저 웹 기술의 동작 원리를 알아보고 싶으신 분 모두 편하게 보실 수 있을거예요.
 
-> **알림:**
+> [!CALLOUT]
 >
 > #### 프런트엔드 웹 개발자가 되고자 하시나요?
 >
@@ -40,7 +40,8 @@ MDN 학습지의 목표는 여러분을 "전문가"로 만드는 것이 아니
     읽어보세요. 그 후에는
     [클라이언트 사이드 JavaScript 프레임워크](/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks)와 [서버 사이드 웹 사이트 프로그래밍](/ko/docs/Learn/Server-side)도 한 번 고려해보세요.
 
-> **참고:** MDN [용어집](/ko/docs/Glossary)에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹 개발에 관한 질문이 있으시면 [자주 하는 질문](/ko/docs/Learn/Common_questions) 문서도 확인해보세요.
+> [!NOTE]
+> MDN [용어집](/ko/docs/Glossary)에서 각종 용어의 정의를 찾아보실 수 있습니다. 웹 개발에 관한 질문이 있으시면 [자주 하는 질문](/ko/docs/Learn/Common_questions) 문서도 확인해보세요.
 
 ## 다루는 주제
 
diff --git a/files/ko/learn/javascript/asynchronous/index.md b/files/ko/learn/javascript/asynchronous/index.md
index 8a46be24201ea8..a64cf4ca1384fe 100644
--- a/files/ko/learn/javascript/asynchronous/index.md
+++ b/files/ko/learn/javascript/asynchronous/index.md
@@ -9,7 +9,7 @@ l10n:
 
 이 과정에서 우리는 {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}와 이것이 중요한 이유, 서버에서 리소스를 가져오는 것과 같은 잠재적 블로킹 연산을 어떻게 효과적으로 다룰 수 있을지에 대해 살펴봅니다.
 
-> **Callout:**
+> [!CALLOUT]
 >
 > #### 프론트엔드 웹 개발자가 되고싶으신가요?
 >
@@ -21,7 +21,8 @@ l10n:
 
 Asynchronous Javascript는 상당히 고급 주제에 속하고, 시도해보기 전에 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)과 [JavaScript 구성요소](/ko/docs/Learn/JavaScript/Building_blocks) 과정을 거치는것이 좋습니다.
 
-> **참고:** 만약 파일을 만들 수 없는 컴퓨터/테블릿/기타 장치를 사용하고 있다면, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)와 같은 온라인 코딩 프로그램에서 (대부분의) 예제 코드를 사용해볼 수 있습니다.
+> [!NOTE]
+> 만약 파일을 만들 수 없는 컴퓨터/테블릿/기타 장치를 사용하고 있다면, [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)와 같은 온라인 코딩 프로그램에서 (대부분의) 예제 코드를 사용해볼 수 있습니다.
 
 ## 가이드
 
diff --git a/files/ko/learn/javascript/asynchronous/introducing_workers/index.md b/files/ko/learn/javascript/asynchronous/introducing_workers/index.md
index c9b1e44ca599d0..3d78de1d1ec9d5 100644
--- a/files/ko/learn/javascript/asynchronous/introducing_workers/index.md
+++ b/files/ko/learn/javascript/asynchronous/introducing_workers/index.md
@@ -220,7 +220,8 @@ function generatePrimes(quota) {
 
 `generatePrimes()` 함수는 동기 버전과 비슷하지만, 값을 반환하는 대신 작업이 끝나면 메인 스크립트로 메시지를 보냅니다. 이를 위해 {{domxref("DedicatedWorkerGlobalScope/postMessage", "postMessage()")}} 함수를 사용합니다. 이는 `addEventListener()`와 같이 워커의 전역 함수입니다. 이미 살펴본 바와 같이, 메인 스크립트는 이 메시지를 수신하고 있으며 메시지가 수신되면 DOM을 업데이트합니다.
 
-> **참고:** 이 사이트를 실행하려면 로컬 웹 서버를 실행해야 합니다. file:// URL로는 워커를 로드할 수 없기 때문입니다. [테스트 로컬 서버 설정](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server) 가이드를 참조하시기 바랍니다. 이렇게 하면 "Generate primes"를 눌러 기본 페이지를 응답할 수 있는 상태로 유지할 수 있습니다.
+> [!NOTE]
+> 이 사이트를 실행하려면 로컬 웹 서버를 실행해야 합니다. file:// URL로는 워커를 로드할 수 없기 때문입니다. [테스트 로컬 서버 설정](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server) 가이드를 참조하시기 바랍니다. 이렇게 하면 "Generate primes"를 눌러 기본 페이지를 응답할 수 있는 상태로 유지할 수 있습니다.
 >
 > 예제를 만들거나 실행하는 데 문제가 있는 경우 <https://github.com/mdn/learning-area/blob/main/javascript/asynchronous/workers/finished>에서 완성된 버전을 확인하고 <https://mdn.github.io/learning-area/javascript/asynchronous/workers/finished> 에서 라이브로 사용해 볼 수 있습니다.
 
diff --git a/files/ko/learn/javascript/asynchronous/promises/index.md b/files/ko/learn/javascript/asynchronous/promises/index.md
index f9c2ccb8ad2452..94019d5794c163 100644
--- a/files/ko/learn/javascript/asynchronous/promises/index.md
+++ b/files/ko/learn/javascript/asynchronous/promises/index.md
@@ -63,7 +63,8 @@ function handleCallButton(evt) {
 
 여기서 중요한건 `getUserMedia()`는 카메라 스트림이 아직 확보되지 않았음에도 거의 즉시 반환을 해줬다는 것 입니다. `handleCallButton()` 함수가 자신을 호출한 코드로 결과를 이미 반환을 했더라도 `getUserMedia()`의 작업이 종료되면 프로그래머가 작성한 다음 핸들러를 호출할 것 입니다. 앱이 스트리밍을 했다고 가정하지 않는 한 계속 실행될 수 있습니다.
 
-> **참고:** You can learn more about this somewhat advanced topic, if you're interested, in the article [Signaling and video calling](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling). Code similar to this, but much more complete, is used in that example.
+> [!NOTE]
+> You can learn more about this somewhat advanced topic, if you're interested, in the article [Signaling and video calling](/ko/docs/Web/API/WebRTC_API/Signaling_and_video_calling). Code similar to this, but much more complete, is used in that example.
 
 ## The trouble with callbacks
 
@@ -151,7 +152,8 @@ chooseToppings()
 
 그런데 이렇게 작성하면 읽기가 쉽지 않습니다. 사용자의 코드가 지금의 예제보다 더 복잡하다면 위의 방법은 사용하기 힘듭니다.
 
-> **참고:** 다음 장에서 배울 `async`/`await` 문법으로 좀 더 간결화 할 수 있습니다.
+> [!NOTE]
+> 다음 장에서 배울 `async`/`await` 문법으로 좀 더 간결화 할 수 있습니다.
 
 Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습니다. :
 
@@ -164,7 +166,8 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습
 
 첫 번째로, 웹에서 이미지를 가져오기 위하여 [`fetch()`](/ko/docs/Web/API/fetch) 메서드를 사용할 때 입니다.{{domxref("Body.blob", "blob()")}} 메서드는 fetch가 응답한 원시 body컨텐츠를 {{domxref("Blob")}} 오브젝트로 변환시켜주고{{htmlelement("img")}} 엘리먼트에 표현합니다. 이예제는 [first article of the series](/ko/docs/Learn/JavaScript/Asynchronous/Introducing#Asynchronous_JavaScript)유사합니다. 다만 Promise를 사용하기 위해 약간의 변경을 하겠습니다.
 
-> **참고:** The following example will not work if you just run it directly from the file (i.e. via a `file://` URL). You need to run it through a [local testing server](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server), or use an online solution such as [Glitch](https://glitch.com/) or [GitHub pages](/ko/docs/Learn/Common_questions/Using_Github_pages).
+> [!NOTE]
+> The following example will not work if you just run it directly from the file (i.e. via a `file://` URL). You need to run it through a [local testing server](/ko/docs/Learn/Common_questions/set_up_a_local_testing_server), or use an online solution such as [Glitch](https://glitch.com/) or [GitHub pages](/ko/docs/Learn/Common_questions/Using_Github_pages).
 
 1. 먼저 [simple HTML template](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) 와 fetch할 이미지인 [sample image file](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/coffee.jpg) 을 다운받습니다.
 2. HTML {{htmlelement("body")}} 하단에 {{htmlelement("script")}} 엘리먼트를 삽입합니다.
@@ -178,7 +181,8 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습
 
 4. 작업이 성공적으로 진행될 때를 대응하기 위해 (이번 예제에선 {{domxref("Response")}} 가 반환될 때 입니다. ), 우리는 Promise 오브젝트의 [`.then()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) 메서드를 호출합니다. `.then()` 블럭 안의 callback은 (**executor** 라고 부름) Promise가 성공적으로 완료되고{{domxref("Response")}} 오브젝트를 반환할 때만 실행합니다. — 이렇게 성공한 Promise의 상태를 **fulfilled**라고 부릅니다. 그리고 반환된 {{domxref("Response")}} 오브젝트를 매개변수로 전달합니다.
 
-   > **참고:** The way that a `.then()` block works is similar to when you add an event listener to an object using `AddEventListener()`. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.
+   > [!NOTE]
+   > The way that a `.then()` block works is similar to when you add an event listener to an object using `AddEventListener()`. It doesn't run until an event occurs (when the promise fulfills). The most notable difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times.
 
    그리고 즉시 `blob()` 메서드를 실행하여 Response Body가 완전히 다운로드 됐는지 확인합니다. 그리고 Response Body가 이용 가능할 때 추가 작업을 할 수 있는 `Blob` 오브젝트로 변환시킵니다. 해당 코드는 아래와 같이 작성할 수 있습니다. :
 
@@ -221,7 +225,8 @@ Promise는 이벤트 리스너와 유사하지만 몇 가지 다른점이 있습
 
 If you save the HTML file you've just created and load it in your browser, you'll see that the image is displayed in the page as expected. Good work!
 
-> **참고:** You will probably notice that these examples are somewhat contrived. You could just do away with the whole `fetch()` and `blob()` chain, and just create an `<img>` element and set its `src` attribute value to the URL of the image file, `coffee.jpg`. We did, however, pick this example because it demonstrates promises in a nice simple fashion, rather than for its real-world appropriateness.
+> [!NOTE]
+> You will probably notice that these examples are somewhat contrived. You could just do away with the whole `fetch()` and `blob()` chain, and just create an `<img>` element and set its `src` attribute value to the URL of the image file, `coffee.jpg`. We did, however, pick this example because it demonstrates promises in a nice simple fashion, rather than for its real-world appropriateness.
 
 ### Responding to failure
 
@@ -239,7 +244,8 @@ let errorCase = promise3.catch((e) => {
 
 물론 `.catch()` 블록 없이 코드를 작동시킬 수 있습니다. 하지만 좀 더 깊게 생각해보면 `.catch()` 블록이 없으면 어떤 에러가 발생했는지, 어떻게 해결해야 하는지 디버깅이 어렵습니다. 실제 앱에서 `.catch()` 을 사용하여 이미지 가져오기를 다시 실행하거나, 기본 이미지를 표시하는 등 작업을 지시할 수 있습니다.
 
-> **참고:** You can see [our version of the example live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html) (see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html) also).
+> [!NOTE]
+> You can see [our version of the example live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch.html) (see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch.html) also).
 
 ### Chaining the blocks together
 
@@ -385,9 +391,11 @@ Promise.all([a, b, c]).then(values => {
 
 여기서 제공한 코드는 매우 기초적이지만, 내용을 전달하기에는 아주 좋습니다..
 
-> **참고:** If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — [see it live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), and see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html).
+> [!NOTE]
+> If you get stuck, you can compare your version of the code to ours, to see what it is meant to look like — [see it live](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), and see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html).
 
-> **참고:** If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside `Promise.all()`, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.
+> [!NOTE]
+> If you were improving this code, you might want to loop through a list of items to display, fetching and decoding each one, and then loop through the results inside `Promise.all()`, running a different function to display each one depending on what the type of code was. This would make it work for any number of items, not just three.
 >
 > Also, you could determine what the type of file is being fetched without needing an explicit `type` property. You could, for example, check the {{HTTPHeader("Content-Type")}} HTTP header of the response in each case using [`response.headers.get("content-type")`](/ko/docs/Web/API/Headers/get), and then react accordingly.
 
@@ -490,7 +498,8 @@ Try [running this live](https://mdn.github.io/learning-area/javascript/asynchron
 
 위의 예시는 유연하게 적용된 예시가 아닙니다. — Promise는 항산 하나의 문자열로만 fulfil됩니다. 그리고 [`reject()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) 조건도 정의되어있지 않습니다. (사실, `setTimeout()` 은 실패 조건이 필요없습니다, 그러니 이 예제에서는 없어도 됩니다.).
 
-> **참고:** Why `resolve()`, and not `fulfill()`? The answer we'll give you, for now, is _it's complicated_.
+> [!NOTE]
+> Why `resolve()`, and not `fulfill()`? The answer we'll give you, for now, is _it's complicated_.
 
 ### Rejecting a custom promise
 
@@ -538,7 +547,8 @@ timeoutPromise("Hello there!", 1000)
 
 이 코드를 저장하고 브라우저를 새로 고침하면 1초 후에 'Hello there!' alert가 출력될 것 입니다. 이제 메시지 내용을 비우거나 interval을 음수로 지정해보세요 그렇게 하면 Promise가 reject되며 에러 메시지를 콘솔에 출력해 줄 것입니다. 또한 resolved 메시지를 다르게 만들어 줄 수도 있습니다.
 
-> **참고:** You can find our version of this example on GitHub as [custom-promise2.html](https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html) (see also the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html)).
+> [!NOTE]
+> You can find our version of this example on GitHub as [custom-promise2.html](https://mdn.github.io/learning-area/javascript/asynchronous/promises/custom-promise2.html) (see also the [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/custom-promise2.html)).
 
 ### A more real-world example
 
diff --git a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md
index 701b27ecd49e8f..b7d93632c75cdf 100644
--- a/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/ko/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -41,13 +41,15 @@ alert("This is a message");
 
 `alert` 함수는 제한적입니다: 메시지를 바꿀 수는 있지만, 색상, 아이콘 등 그 밖에 다른 것에는 쉽게 변화를 줄 수 없습니다. 우리는 더 재미있는 것을 만들 것입니다.
 
-> **참고:** 이 예제는 모든 현대적인 브라우저에서 잘 동작할 것이지만, 약간 오래된 브라우저에서는 스타일이 조금 이상하게 적용될지도 모릅니다. Firefox, Opera, 또는 Chrome같은 브라우저에서 이 연습을 진행하기를 추천합니다.
+> [!NOTE]
+> 이 예제는 모든 현대적인 브라우저에서 잘 동작할 것이지만, 약간 오래된 브라우저에서는 스타일이 조금 이상하게 적용될지도 모릅니다. Firefox, Opera, 또는 Chrome같은 브라우저에서 이 연습을 진행하기를 추천합니다.
 
 ## 기본적인 함수
 
 기본적인 함수를 만들면서 시작해 봅시다.
 
-> **참고:** 함수에 이름을 붙일 때 [변수 명명 규칙](/ko/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules)과 같은 규칙을 따라야 합니다. 함수와 변수를 떼어놓고 이야기할 수 있으므로, 이렇게 하는 것은 괜찮습니다 — 함수명은 뒤에 괄호가 나타나지만 변수는 그렇지 않습니다.
+> [!NOTE]
+> 함수에 이름을 붙일 때 [변수 명명 규칙](/ko/docs/Learn/JavaScript/First_steps/Variables#an_aside_on_variable_naming_rules)과 같은 규칙을 따라야 합니다. 함수와 변수를 떼어놓고 이야기할 수 있으므로, 이렇게 하는 것은 괜찮습니다 — 함수명은 뒤에 괄호가 나타나지만 변수는 그렇지 않습니다.
 
 1. [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html) 파일을 다운로드한 후 시작해 봅시다. HTML은 간단합니다 — body는 버튼 하나만을 포함하고 있습니다. 또한 커스텀 메시지 박스를 꾸밀 기본적인 CSS와, JavaScript를 넣을 빈 {{htmlelement("script")}} 요소가 제공됩니다.
 2. 다음으로, 다음을 `<script>` 요소 내부에 추가해 보세요:
@@ -232,7 +234,8 @@ btn.onclick = displayMessage();
 
 1. 우선, 이 예제를 위해 필요한 아이콘들을 GitHub에서 다운로드하세요 ([경고](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) 그리고 [채팅](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)). 이것들을 HTML파일과 같은 위치에 있는 `icons` 라는 새로운 폴더에 저장하세요.
 
-   > **참고:** 경고와 채팅 아이콘은 원래 [iconfinder.com](https://www.iconfinder.com/)에서 찾아졌고, [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr)가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)
+   > [!NOTE]
+   > 경고와 채팅 아이콘은 원래 [iconfinder.com](https://www.iconfinder.com/)에서 찾아졌고, [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr)가 디자인했습니다 — 감사합니다! (실제 아이콘 페이지는 이전에 이동되거나 삭제되었습니다.)
 
 2. 다음으로, HTML 파일 내부에서 CSS를 찾으세요. 우리는 아이콘이 들어갈 자리를 만들기 위해 약간의 변경을 가할 것입니다. 우선, `.msgBox` 폭을
 
@@ -285,7 +288,8 @@ btn.onclick = displayMessage();
 
    우리의 작은 (이제 그렇게 작지는 않은) 함수가 얼마나 유용해졌는지 볼 수 있습니다.
 
-> **참고:** 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 [GitHub에 있는 완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html)과 비교해 보거나 ([실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)도 보세요), 우리에게 도움을 요청해 보세요.
+> [!NOTE]
+> 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 [GitHub에 있는 완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html)과 비교해 보거나 ([실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)도 보세요), 우리에게 도움을 요청해 보세요.
 
 ## 실력을 평가해 보세요!
 
diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.md b/files/ko/learn/javascript/building_blocks/conditionals/index.md
index cb74aa35156c15..50de8b5b515706 100644
--- a/files/ko/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/ko/learn/javascript/building_blocks/conditionals/index.md
@@ -95,7 +95,8 @@ if (shoppingDone === true) {
 
 위 코드는 항상 `false`를 리턴하는 `shoppingDone`변수를 결과로 낳는데, 이는 우리의 불쌍한 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 부모님이 `shoppingDone`변수를 `true`로 설정하는 메커니즘을 제공하는 것은 우리에게 달렸습니다.
 
-> **참고:** GitHub에서 예시를 더 볼 수 있습니다. [이 예제의 완성 버전 on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (also see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
+> [!NOTE]
+> GitHub에서 예시를 더 볼 수 있습니다. [이 예제의 완성 버전 on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (also see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
 
 ### else if
 
@@ -150,7 +151,8 @@ function setWeather() {
 3. 함수가 동작했을 때, 현재 `<select>` 요소에서 선택된 현재 값을 `choice`라는 변수에 먼저 설정합니다. 그런 다음 `choice`값에 따라 문단 안에 다른 텍스트를 표시하기 위해 조건문을 사용합니다. `if() {...} block`에서 테스트된 첫 번째를 제외하고, `else if() {...}`에서 모든 조건들이 어떻게 테스트되는지에 유의하세요.
 4. `else {...}`안의, 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다 — `true`인 조건이 없으면 그 안의 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면, 예를 들어, 사용자가 처음에 표시한 "--Make a choice--" 플레이스홀더(placeholder) 옵션을 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.
 
-> **참고:** 또한 [이 예제를 GitHub에서 찾을 수 있습니다](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html). ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) on there also.)
+> [!NOTE]
+> 또한 [이 예제를 GitHub에서 찾을 수 있습니다](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html). ([see it running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) on there also.)
 
 ### 비교 연산자에 대한 메모
 
@@ -160,7 +162,8 @@ function setWeather() {
 - `<` 와 `>` — 한 값이 다른 값보다 작은지 큰지 테스트한다.
 - `<=` 와 `>=` — 한 값이 다른 값보다 작거나 같은지, 크거나 같은지 테스트한다
 
-> **참고:** 이것들에 대한 기억을 되살리기를 원하신다면 저 링크에 있는 것들을 다시 보세요.
+> [!NOTE]
+> 이것들에 대한 기억을 되살리기를 원하신다면 저 링크에 있는 것들을 다시 보세요.
 
 몇 번이고 다시 만날 boolean(`true`/`false`)값을 테스트하는 것과 일반적인 패턴에 대한 특별한 언급을 하고 싶었습니다. 어떠한 값들이든 `false`, `undefined`, `null`, `0`, `NaN`이나 빈 문자열(`''`)이 아닌 값은 조건문으로 테스트되었을 때, 실제로는 `true`를 리턴하므로, 변수가 참인지 혹은 값이 존재하는지를 테스트하기 위해 변수 이름 그 자체를 사용할 수 있습니다. 예를 들어:
 
@@ -367,7 +370,8 @@ function setWeather() {
 
 {{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}
 
-> **참고:** 또한 [이 예제를 GitHub에서 찾을 수 있습니다](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html). (see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) on there also.)
+> [!NOTE]
+> 또한 [이 예제를 GitHub에서 찾을 수 있습니다](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html). (see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) on there also.)
 
 ## 삼항연산자
 
@@ -424,7 +428,8 @@ select.onchange = function () {
 
 끝으로, 우리는 또한 삼항연산자를 포함하고 있는 함수의 실행을 제공하는 '[onchange](/ko/docs/Web/API/GlobalEventHandlers/onchange)' 이벤트 리스너를 가지고 있습니다. 이것은 테스트 조건으로 시작합니다 — `select.value === 'black'`. 만약 이것이 `true`를 리턴하면, 우리는 검정과 하양의 매개변수를 지니고 있는 `update()`함수를 실행하는데, 이는 배경색은 검정으로 텍스트 색은 하양으로 되는 결과를 의미합니다. 만약 이것이 `false`를 리턴하면, 우리는 하양과 검정의 매개변수를 지니고 있는 `update()`함수를 실행하는데, 이는 사이트의 색상이 반전됐다는 것을 의미합니다.
 
-> **참고:** 또한 [이 예제를 GitHub에서 찾을 수 있습니다](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html). (see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) on there also.)
+> [!NOTE]
+> 또한 [이 예제를 GitHub에서 찾을 수 있습니다](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html). (see it [running live](https://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) on there also.)
 
 ## 직접 해보기: 간단한 달력 만들기
 
diff --git a/files/ko/learn/javascript/building_blocks/events/index.md b/files/ko/learn/javascript/building_blocks/events/index.md
index 4a02379291623d..741c884409718a 100644
--- a/files/ko/learn/javascript/building_blocks/events/index.md
+++ b/files/ko/learn/javascript/building_blocks/events/index.md
@@ -47,7 +47,9 @@ slug: Learn/JavaScript/Building_blocks/Events
 
 각각의 이용가능한 이벤트들은 **이벤트 핸들러**(event handler)를 가지고 있는데, 이는 이벤트가 발생되면 실행되는 코드 블럭 (보통 여러분과 같은 프로그래머가 만드는 JavaScript 함수)입니다. 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 **이벤트 핸들러를 등록**(register)했다고 말합니다. 알림: 이벤트 핸들러는 때때로 **이벤트 리스너**(event listener)라고 불립니다 — 이것들은 우리의 목적을 위해 꽤 교체할수 있지만, 그러나 엄밀히 말하자면, 그들은 같이 동작합니다. 리스너는 발생되는 이벤트에 대해 듣고, 핸들러는 발생되는 이벤트에 응답해서 실행되는 코드입니다.
 
-> **참고:** #### 참고웹 이벤트는 코어 JavaScript 언어의 일부가 아닙니다 — 이것들은 브라우저에 내장된 API의 일부로서 정의됩니다.
+> [!NOTE]
+>
+> #### 참고웹 이벤트는 코어 JavaScript 언어의 일부가 아닙니다 — 이것들은 브라우저에 내장된 API의 일부로서 정의됩니다
 
 ### 간단한 예제
 
@@ -158,7 +160,9 @@ function bgChange() {
 }
 ```
 
-> **참고:** #### 참고여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)도 보세요).
+> [!NOTE]
+>
+> #### 참고여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)도 보세요)
 
 웹에서 찾아지는 가장 이른 이벤트 핸들러의 등록 방법은 위에서 보이는 것처럼 **이벤트 핸들러 HTML 어트리뷰트** (또는 **인라인 이벤트 핸들러**)을 포함합니다. — 어트리뷰트 값은 말 그대로 이벤트가 발생되었을 때 여러분이 실행하기를 원하는 JavaScript 코드입니다. 위의 예시는 같은 페이지의 {{htmlelement("script")}} 요소 안에서 정의된 함수를 호출하지만, 여러분은 또한 어트리뷰트 안에 직접적으로 JavaScript을 삽입할 수 있습니다. 예를 들자면:
 
@@ -190,7 +194,9 @@ buttons.forEach(function (button) {
 });
 ```
 
-> **참고:** #### 참고프로그래밍 로직을 콘텐츠로부터 분리하는 것은 또한 여러분의 사이트를 검색 엔진에 더욱 친화적으로 만듭니다.
+> [!NOTE]
+>
+> #### 참고프로그래밍 로직을 콘텐츠로부터 분리하는 것은 또한 여러분의 사이트를 검색 엔진에 더욱 친화적으로 만듭니다
 
 ### 이벤트 핸들러를 추가하고 제거하기
 
@@ -208,7 +214,8 @@ function bgChange() {
 btn.addEventListener("click", bgChange);
 ```
 
-> **참고:** 여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)도 보세요).
+> [!NOTE]
+> 여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)도 보세요).
 
 `addEventListener()` 함수 안에, 우리는 두 매개변수(parameter)를 명시합니다: 우리가 이 핸들러에 등록하고자 하는 이벤트의 이름과, 그것에 응답하여 우리가 실행하기를 원하는 핸들러 함수를 구성하는 코드입니다. 알림: `addEventListener()` 내부에, 다음과 같이, 익명 함수 안에 모든 코드를 넣는 것은 완벽히 괜찮습니다:
 
@@ -284,7 +291,9 @@ element.onclick = function2;
 등등.
 ```
 
-> **참고:** #### 참고만약 여러분이 Internet Explorer 8보다 오래된 브라우저를 지원하라고 요청받았다면, 그러한 아주 오래된 브라우저들은 새로운 브라우저들과는 다른 이벤트 모델을 사용하므로, 여러분은 어려움을 만날 지도 모릅니다. 하지만 걱정하지 마세요, 대부분의 JavaScript 라이브러리들은 (예를 들자면 `jQuery`) 크로스 브라우저 차이를 분리하는 내장 함수들을 가지고 있습니다. 이 배움의 단계에서 이것을 너무 많이는 걱정하지 마세요.
+> [!NOTE]
+>
+> #### 참고만약 여러분이 Internet Explorer 8보다 오래된 브라우저를 지원하라고 요청받았다면, 그러한 아주 오래된 브라우저들은 새로운 브라우저들과는 다른 이벤트 모델을 사용하므로, 여러분은 어려움을 만날 지도 모릅니다. 하지만 걱정하지 마세요, 대부분의 JavaScript 라이브러리들은 (예를 들자면 `jQuery`) 크로스 브라우저 차이를 분리하는 내장 함수들을 가지고 있습니다. 이 배움의 단계에서 이것을 너무 많이는 걱정하지 마세요
 
 ## 다른 이벤트 개념들
 
@@ -305,11 +314,15 @@ function bgChange(e) {
 btn.addEventListener("click", bgChange);
 ```
 
-> **참고:** #### 참고여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)도 보세요).
+> [!NOTE]
+>
+> #### 참고여러분은 이 예제에 대한 [전체 소스 코드를](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) Github에서 찾을 수 있습니다 (또한 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)도 보세요)
 
 여기서 여러분은 우리가 이벤트 객체, **e**를, 함수에 포함하고, 함수에서 배경 색상 스타일을 — 버튼 그 자체인 — `e.target`에서 설정한 것을 볼 수 있습니다. 이벤트 객체의 `target` 프로퍼티는 항상 이벤트가 발생된 요소에 대한 참조입니다. 그래서, 이 예제에서, 우리는 무작위의 배경색을 페이지가 아니라, 버튼에 설정했습니다.
 
-> **참고:** #### 참고여러분은 이벤트 객체에 대해 여러분이 좋아하는 어떠한 이름이든 사용할 수 있습니다 — 여러분은 단지 이벤트 핸들러 함수 내에서 그것을 참조하기 위해 사용할 수 있는 이름을 선택할 필요가 있습니다. `e`/`evt`/`event`가 가장 일반적으로 개발자들에 의해 사용됩니다. 왜냐하면 짧고 기억하기 쉽기 때문입니다. 일관적인 것은 항상 좋습니다 — 여러분 자신과, 그리고 만약 가능하다면 타인과.
+> [!NOTE]
+>
+> #### 참고여러분은 이벤트 객체에 대해 여러분이 좋아하는 어떠한 이름이든 사용할 수 있습니다 — 여러분은 단지 이벤트 핸들러 함수 내에서 그것을 참조하기 위해 사용할 수 있는 이름을 선택할 필요가 있습니다. `e`/`evt`/`event`가 가장 일반적으로 개발자들에 의해 사용됩니다. 왜냐하면 짧고 기억하기 쉽기 때문입니다. 일관적인 것은 항상 좋습니다 — 여러분 자신과, 그리고 만약 가능하다면 타인과
 
 여러분이 같은 이벤트 핸들러를 다수의 요소에 설정하고 그것들에 이벤트가 발생되었을 때 그것들 모두에 뭔가를 하기를 원할 때 `e.target`은 엄청나게 유용합니다. 예를 들자면, 여러분에게 선택되었을 때 사라지는 16개의 타일 세트가 있다고 합시다. 타일을 몇몇 더욱 어려운 방법으로 선택해야만 하는 것 대신에, `e.target`으로서 단지 타일을 사라지게 항상 설정할 수 있는 것은 유용합니다. 다음의 예제에서 (전체 소스 코드는 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html)에서 찾을 수 있습니다; [또한 실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)도 보세요), 우리는 16개의 {{htmlelement("div")}} 요소를 JavaScript를 통해 생성했습니다. 우리는 그리고서 {{domxref("document.querySelectorAll()")}}을 사용해 그것들 모두를 선택했고, 그리고서 선택되었을 때 무작위 색상이 적용되도록 만드는 `onclick` 핸들러를 각각에 추가하며 요소들을 순회했습니다:
 
@@ -424,7 +437,9 @@ form.onsubmit = function (e) {
 
 {{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}
 
-> **참고:** #### 참고전체 코드 소스는 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html)에서 확인하실 수 있습니다 (또한 여기서 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)도 보세요).
+> [!NOTE]
+>
+> #### 참고전체 코드 소스는 [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html)에서 확인하실 수 있습니다 (또한 여기서 [실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html)도 보세요)
 
 ### 이벤트 버블링과 캡처
 
@@ -576,7 +591,9 @@ video.onclick = function () {
 - `video.onclick...` 핸들러를 발견하고 실행하므로, 비디오가 먼저 재생을 시작합니다.
 - 그리고서 `videoBox.onclick...` 핸들러를 발견하고 실행하므로, 비디오는 또한 숨겨집니다.
 
-> **참고:** #### 참고버블링과 캡처링, 두 타입의 이벤트 핸들러가 모두 존재하는 경우에, 캡처링 단계가 먼저 실행되고, 이어서 버블링 단계가 실행됩니다.
+> [!NOTE]
+>
+> #### 참고버블링과 캡처링, 두 타입의 이벤트 핸들러가 모두 존재하는 경우에, 캡처링 단계가 먼저 실행되고, 이어서 버블링 단계가 실행됩니다
 
 #### stopPropagation()으로 문제 고치기
 
@@ -593,9 +610,13 @@ video.onclick = function (e) {
 
 [show-video-box.html 소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)를 다운받아 직접 고쳐볼 수도 있고, [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html)에서 고쳐진 결과를 볼 수도 있습니다 (또한 여기서 [소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)를 보세요).
 
-> **참고:** #### 참고왜 캡처링과 버블링으로 애를 쓰냐구요? 글쎄요, 브라우저들이 지금보다 훨씬 덜 호환되던 옛날의 좋지 못하던 시절에, Netscape는 오직 이벤트 캡처링만을 사용했고, Internet Explorer는 오직 이벤트 버블링만을 사용했습니다. W3C가 이 움직임을 표준화하고 합의에 이르기를 시도하기로 결정했을 때, 그들은 양 쪽을 다 포함하는 이 시스템을 채용하게 되었는데, 이것이 현대 브라우저들이 구현한 것입니다.
+> [!NOTE]
+>
+> #### 참고왜 캡처링과 버블링으로 애를 쓰냐구요? 글쎄요, 브라우저들이 지금보다 훨씬 덜 호환되던 옛날의 좋지 못하던 시절에, Netscape는 오직 이벤트 캡처링만을 사용했고, Internet Explorer는 오직 이벤트 버블링만을 사용했습니다. W3C가 이 움직임을 표준화하고 합의에 이르기를 시도하기로 결정했을 때, 그들은 양 쪽을 다 포함하는 이 시스템을 채용하게 되었는데, 이것이 현대 브라우저들이 구현한 것입니다
 
-> **참고:** #### 참고위에서 언급했다시피, 기본적으로 모든 이벤트 핸들러는 버블링 단계에 등록되어 있고, 이것은 대부분의 경우 더 타당합니다. 만약 정말로 이벤트를 캡처링 단계에 대신 등록하기를 원한다면, [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)를 사용하고, 옵션인 세 번째 프로퍼티를 `true`로 설정하여 핸들러를 등록함으로써 그렇게 할 수 있습니다.
+> [!NOTE]
+>
+> #### 참고위에서 언급했다시피, 기본적으로 모든 이벤트 핸들러는 버블링 단계에 등록되어 있고, 이것은 대부분의 경우 더 타당합니다. 만약 정말로 이벤트를 캡처링 단계에 대신 등록하기를 원한다면, [`addEventListener()`](/ko/docs/Web/API/EventTarget/addEventListener)를 사용하고, 옵션인 세 번째 프로퍼티를 `true`로 설정하여 핸들러를 등록함으로써 그렇게 할 수 있습니다
 
 #### 이벤트 위임(Event delegation)
 
diff --git a/files/ko/learn/javascript/building_blocks/functions/index.md b/files/ko/learn/javascript/building_blocks/functions/index.md
index 14cf54c022754d..850395bfb11eea 100644
--- a/files/ko/learn/javascript/building_blocks/functions/index.md
+++ b/files/ko/learn/javascript/building_blocks/functions/index.md
@@ -65,7 +65,8 @@ var myNumber = Math.random();
 
 ...우리는 함수를 사용하고 있었어요!
 
-> **참고:** 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 여러분의 브라우저 JavaScript 콘솔에 자유롭게 이 코드들을 입력해 보세요.
+> [!NOTE]
+> 만약 필요하다면, 이 기능들에 다시 익숙해지기 위해 여러분의 브라우저 JavaScript 콘솔에 자유롭게 이 코드들을 입력해 보세요.
 
 JavaScript 언어는 여러분 스스로 코드 전체를 적을 필요 없이, 유용한 것들을 할 수 있게 해주는 많은 내장 함수를 가지고 있습니다. 사실, 브라우저 내장 함수를 **호출**("함수를 실행하다(run 또는 execute)"는 말을 멋있게 "호출하다(invoke)"라고 하기도 합니다)할 때 호출하는 일부 코드는 JavaScript로 작성될 수 없었습니다 — 이러한 함수 중 상당수는 백그라운드 브라우저 코드의 일부를 호출하고 있으며, 이는 JavaScript와 같은 웹 언어가 아니라 대체로 C++와 같은 저수준 시스템 언어로 작성됩니다.
 
@@ -120,7 +121,8 @@ myFunction();
 // calls the function once
 ```
 
-> **참고:** 이 형태의 함수 생성은 또한 _함수 선언_(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 여러분은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.
+> [!NOTE]
+> 이 형태의 함수 생성은 또한 _함수 선언_(function declaration)으로도 알려져 있습니다. 이것은 언제나 호이스팅(hoisting)되어서, 여러분은 함수를 함수 정의 위에서 호출할 수 있고 이것은 잘 작동할 것입니다.
 
 ## 익명 함수
 
@@ -160,7 +162,8 @@ var myGreeting = function () {
 };
 ```
 
-> **참고:** 이 형태의 함수 생성은 또한 _함수 표현식_(function expression)으로도 알려져 있습니다. 함수 선언과는 다르게, 함수 표현식은 호이스팅되지 않습니다.
+> [!NOTE]
+> 이 형태의 함수 생성은 또한 _함수 표현식_(function expression)으로도 알려져 있습니다. 함수 선언과는 다르게, 함수 표현식은 호이스팅되지 않습니다.
 
 이 함수는 이런 식으로 호출되죠:
 
@@ -205,7 +208,8 @@ myButton.onclick = function () {
 
 몇몇 함수는 호출을 위해 매개변수를 필요로 하는 경우가 있습니다. 이것들은 함수 괄호 안에 포함될 필요가 있는 값들인데, 올바르게 동작하기 위해 필요합니다.
 
-> **참고:** 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.
+> [!NOTE]
+> 매개변수는 종종 arguments, properties, 심지어 attributes 라고도 불려요.
 
 예를 들어, 브라우저의 내장 함수인 [Math.random()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random)은 어떤 매개변수도 필요로 하지 않습니다. 이 함수는 호출되면 늘 0과 1사이의 무작위 수를 반환해 주죠.
 
@@ -220,7 +224,8 @@ var myText = "I am a string";
 var newString = myText.replace("string", "sausage");
 ```
 
-> **참고:** 여러 개의 매개변수는 콤마에 의해 구분되어집니다.
+> [!NOTE]
+> 여러 개의 매개변수는 콤마에 의해 구분되어집니다.
 
 매개변수는 이따금 선택 사항이기도 합니다. 여러분이 명시해 줄 필요가 없다는 뜻이죠. 그런 경우, 일반적으로 함수는 기본 기능을 수행합니다. 예를 들어, 배열과 관련된 [join()](/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 함수의 매개변수가 그렇죠.
 
@@ -271,7 +276,8 @@ function greeting() {
 
 여러분이 호출하고 싶은 두 함수 모두 `greeting()` 이지만, 여러분은 오직 `first.js` 파일의 `greeting()` 함수에만 접근할 수 있을 뿐입니다 (두번째 것은 무시됩니다). 추가적으로, `second.js` 파일에서 `let` 키워드로 `name` 변수를 두 번째로 선언하려고 시도하는 것은 오류를 낳습니다.
 
-> **참고:** 예제를 [GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html)에서 볼 수 있습니다. ([소스 코드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions) 또한 볼 수 있습니다).
+> [!NOTE]
+> 예제를 [GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html)에서 볼 수 있습니다. ([소스 코드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions) 또한 볼 수 있습니다).
 
 함수의 일부를 코드 안에 가두는 것은 이러한 문제를 피할 수 있고, 가장 좋은 방법이라 여겨집니다.
 
@@ -372,7 +378,8 @@ function greeting() {
 
     이번에는 `a()` 와 `b()` 호출이 둘 다 이 짜증나는 "[ReferenceError: z is not defined](/ko/docs/Web/JavaScript/Reference/Errors/Not_defined)" 오류를 리턴할 것입니다. — 이것은 왜냐하면 `output()` 호출과 그들이 출력하기를 시도하는 변수들이 같은 함수 스코프 내부에 정의되어 있지 않기 때문입니다. — 변수들은 효과적으로 이 함수 호출에 보이지 않습니다.
 
-> **참고:** 같은 스코프 규칙은 반복문 (예: `for() { ... }`)과 조건문(conditional blocks) (예: `if() { ... }`)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.
+> [!NOTE]
+> 같은 스코프 규칙은 반복문 (예: `for() { ... }`)과 조건문(conditional blocks) (예: `if() { ... }`)에 적용되지 않습니다. — 이것들은 아주 비슷하게 생겼지만, 같은 것이 아닙니다! 헷갈리지 않도록 조심하세요.
 
 > **참고:** [ReferenceError: "x" is not defined](/ko/docs/Web/JavaScript/Reference/Errors/Not_defined) 오류는 여러분이 마주칠 가장 일반적인 것들 중 하나입니다. 만약 여러분이 이 오류를 얻었고 여러분이 문제의 변수를 정의했다는 것이 확실하다면, 그것이 어떤 스코프 안에 들어있는지 확인해 보세요.
 
diff --git a/files/ko/learn/javascript/building_blocks/image_gallery/index.md b/files/ko/learn/javascript/building_blocks/image_gallery/index.md
index 78c25fc86a5fa2..0e078f2902fd5d 100644
--- a/files/ko/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/ko/learn/javascript/building_blocks/image_gallery/index.md
@@ -31,7 +31,8 @@ slug: Learn/JavaScript/Building_blocks/Image_gallery
 
 그 대신에, [JSBin](https://jsbin.com/) 나 [Glitch](https://glitch.com/) 같은 사이트를 이용할 수 있습니다. HTML, CSS 그리고 JavaScript를 이 온라인 에디터 중 하나에 붙여넣기할 수 있습니다. 만약 온라인 에디터가 분리된 JavaScript/CSS 패널을 가지고 있지 않다면, 자유롭게 HTML 페이지 내부의 인라인 `<script>`/`<style>` 요소에 넣으세요.
 
-> **참고:** 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 [Assessment or further help](#assessment_or_further_help) 섹션을 보세요.
+> [!NOTE]
+> 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 [Assessment or further help](#assessment_or_further_help) 섹션을 보세요.
 
 ## 프로젝트 개요
 
diff --git a/files/ko/learn/javascript/building_blocks/index.md b/files/ko/learn/javascript/building_blocks/index.md
index a29ff6db7e6464..072a06149ff024 100644
--- a/files/ko/learn/javascript/building_blocks/index.md
+++ b/files/ko/learn/javascript/building_blocks/index.md
@@ -7,13 +7,16 @@ slug: Learn/JavaScript/Building_blocks
 
 이번 과정에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다룰 것입니다.
 
-> **알림:** #### 프론트엔드 웹 개발자가 되기를 생각해보고 계신가요?저희는 여러분의 목표를 향해 공부할 필요가 있는 모든 필수적인 정보를 담고 있는 코스를 준비해 놓았습니다.[**시작하기**](/ko/docs/Learn/Front-end_web_developer)
+> [!CALLOUT]
+>
+> #### 프론트엔드 웹 개발자가 되기를 생각해보고 계신가요?저희는 여러분의 목표를 향해 공부할 필요가 있는 모든 필수적인 정보를 담고 있는 코스를 준비해 놓았습니다.[**시작하기**](/ko/docs/Learn/Front-end_web_developer)
 
 ## 필요한 사전 지식
 
 시작하기 전에, 기본적인 [HTML](/ko/docs/Learn/HTML/Introduction_to_HTML)과 [CSS](/ko/docs/Learn/CSS/First_steps) 지식을 알고 계셔야 하고, 또한 지난 모듈인 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)을 학습하셔야 합니다.
 
-> **참고:** 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)에서 대부분의 예제를 시험해 볼 수 있습니다.
+> [!NOTE]
+> 여기 나온 코드를 작성하고 실행해 볼 수 없는 환경이라면 (태블릿, 스마트폰, 기타 장치), [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com)에서 대부분의 예제를 시험해 볼 수 있습니다.
 
 ## 가이드
 
diff --git a/files/ko/learn/javascript/building_blocks/looping_code/index.md b/files/ko/learn/javascript/building_blocks/looping_code/index.md
index 206f3ba437b7b6..e151c4f88facf9 100644
--- a/files/ko/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/ko/learn/javascript/building_blocks/looping_code/index.md
@@ -219,7 +219,8 @@ para.textContent = info;
 
 {{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}
 
-> **참고:** 여러분은 이 [예제를 GitHub에서](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) 또한 찾을 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
+> [!NOTE]
+> 여러분은 이 [예제를 GitHub에서](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) 또한 찾을 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
 이것은 반복문이 배열 안의 요소들에 대해 반복하고 그 각각의 요소들과 무언가를 하기 위해 쓰였다는 것을 보여줍니다 — 이것은 JavaScript에서 아주 일반적인 패턴입니다. 여기서:
 
@@ -233,9 +234,11 @@ para.textContent = info;
 
 4. `i`가 `cats.length`와 같아질 때 (이 경우, 5), 반복문은 멈출 것이고, 브라우저는 반복문 아래에 있는 다음 코드로 이동할 것입니다.
 
-> **참고:** 우리는 조건을 `i <= cats.length`이 아니라 `i < cats.length`로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 `i`를 0에서 시작했고, `i = 4`까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, `cats.length`는 5를 반환하지만, 우리는 `i = 5`까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 `undefined`를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 `cats.length`과 같은 데까지가 아니라 (`i <=`), `cats.length`보다 1 작은 데까지 가기를 원합니다 (`i <`).
+> [!NOTE]
+> 우리는 조건을 `i <= cats.length`이 아니라 `i < cats.length`로 만들었는데, 이는 컴퓨터는 카운트를 1부터가 아니라 0부터 세기 때문입니다 — 우리는 `i`를 0에서 시작했고, `i = 4`까지 갔습니다 (마지막 배열 원소의 인덱스). 배열에 5개의 원소가 있으므로, `cats.length`는 5를 반환하지만, 우리는 `i = 5`까지 가고 싶지는 않습니다. 왜냐하면 이는 마지막 원소에 대해 `undefined`를 반환할 것이기 때문입니다 (5의 인덱스를 가진 배열 원소는 없습니다). 그래서, 그러므로, 우리는 `cats.length`과 같은 데까지가 아니라 (`i <=`), `cats.length`보다 1 작은 데까지 가기를 원합니다 (`i <`).
 
-> **참고:** 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (`<=`)가 아니라 "동등(equal to)" (`===`)을 사용하는 것입니다. 만약 우리가 반복문을 `i = 5`까지 실행하기를 원했다면, 종료 조건은 `i <= cats.length`일 필요가 있었을 것입니다. 만약 우리가 그것을 `i === cats.length`에 설정했다면, 첫 반복문 반복에서 `i`는 `5`와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.
+> [!NOTE]
+> 조건에 관련된 일반적인 실수는 "보다 작거나 같다(less than or equal to)" (`<=`)가 아니라 "동등(equal to)" (`===`)을 사용하는 것입니다. 만약 우리가 반복문을 `i = 5`까지 실행하기를 원했다면, 종료 조건은 `i <= cats.length`일 필요가 있었을 것입니다. 만약 우리가 그것을 `i === cats.length`에 설정했다면, 첫 반복문 반복에서 `i`는 `5`와 같지 않아서, 반복문은 즉시 멈췄을 것이기 때문에 반복문은 전혀 실행되지 않을 것입니다.
 
 우리는 마지막으로 출력되는 문장이 잘 만들어지지 않았다는 작은 문제를 가지고 있습니다:
 
@@ -253,7 +256,8 @@ for (let i = 0; i < cats.length; i++) {
 }
 ```
 
-> **참고:** 여러분은 이 [예제 코드를 Github](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html)에서 또한 찾아볼 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)).
+> [!NOTE]
+> 여러분은 이 [예제 코드를 Github](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html)에서 또한 찾아볼 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)).
 
 > **경고:** **중요**: 모든 반복문과 마찬가지로 — for 문에서, 초기화식(initializer)이 결국 조건이 true가 아닌 지점에 닿도록, 경우에 따라, 증가되거나 혹은 감소되게 해야만 합니다. 만약 그렇지 않다면, 반복문은 영원히 계속될 것이고, 브라우저가 강제로 멈추게 하거나, 브라우저가 멈출(crash) 것입니다. 이것은 **무한 루프**(infinite loop)라고 불립니다.
 
@@ -363,7 +367,8 @@ btn.addEventListener("click", function () {
 
 5. `(contacts.length-1)` 반복 후에, 만약 연락처 이름이 입력된 검색과 일치하지 않으면 문단 텍스트는 "Contact not found."로 설정되고, 반복문은 조건이 더 이상 true가 아닐 때까지 반복을 계속합니다.
 
-> **참고:** 참고: 여러분은 [전체 소스 코드를 GitHub에서](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) 또한 볼 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
+> [!NOTE]
+> 참고: 여러분은 [전체 소스 코드를 GitHub에서](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) 또한 볼 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
 
 ## Continue로 반복 건너뛰기
 
@@ -432,7 +437,8 @@ for (let i = 1; i <= num; i++) {
 3. 만약 제곱근과 내림된 제곱근이 서로 같지 않다면 (`!==`), 이것은 제곱근이 정수가 아니라는 것을 의미하므로, 우리는 이것에 관심이 없습니다. 그러한 경우에, 우리는 숫자를 어디에도 기록하는 일 없이 다음 반복문 반복으로 건너뛰기 위해 `continue`문을 사용합니다.
 4. 만약 제곱근이 정수라면, 우리는 `continue`문이 실행되지 않도록 지난 `if`블록을 완전히 건너뜁니다; 대신, 우리는 현재 `i`값 + 공백을 단락 콘텐츠의 끝에 연결합니다.
 
-> **참고:** 여러분은 [전체 소스 코드를 GitHub에서](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) 또한 볼 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
+> [!NOTE]
+> 여러분은 [전체 소스 코드를 GitHub에서](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) 또한 볼 수 있습니다 (또한 [실제로 작동하는 모습도 볼 수 있습니다](https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
 ## while 그리고 do ... while
 
@@ -469,7 +475,8 @@ while (i < cats.length) {
 }
 ```
 
-> **참고:** 예상한 대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (또한 [전체 소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html)도 보세요).
+> [!NOTE]
+> 예상한 대로 이것은 여전히 똑같이 동작합니다 — 여기서 한 번 봐 보세요 [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (또한 [전체 소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html)도 보세요).
 
 [do...while](/ko/docs/Web/JavaScript/Reference/Statements/do...while) 반복문은 많이 비슷하지만 while 구조에 변형을 제공합니다:
 
@@ -502,7 +509,8 @@ do {
 } while (i < cats.length);
 ```
 
-> **참고:** 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (또한 [전체 소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html)도 보세요).
+> [!NOTE]
+> 다시 말하지만, 이것은 예상한 바와 같이 똑같이 동작합니다 — 한 번 봐 보세요 [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (또한 [전체 소스 코드](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html)도 보세요).
 
 > **경고:** **중요**: 모든 반복문과 마찬가지로 — while과 do...while문에서, 조건이 결국 false가 되도록, 경우에 따라, 초기화식이 증가되거나 감소되게 해야만 합니다.만약 그렇지 않다면, 반복문은 영원히 계속될 것이고, 브라우저가 강제로 멈추게 하거나, 브라우저가 멈출(crash) 것입니다. 이것은 **무한 루프**(infinite loop)라고 불립니다.
 
@@ -525,7 +533,8 @@ do {
 
 - 반복자를 포함하는 것을 잊지 마세요! 그러나, 이 예제에서는 우리는 각 반복마다 카운트를 위가 아니라 아래로 셉니다. 그러니 여러분은 `i++`를 원하지 **않을** 것입니다 — 어떻게 아래로 반복하실 건가요?
 
-> **참고:** 만약 여러분이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i>=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.
+> [!NOTE]
+> 만약 여러분이 반복문을 타이핑하기 시작했다면 (예를 들어 (while(i>=0)), 아직 종료 조건을 입력하지 않았기 때문에 브라우저는 멈출(stuck) 지도 모릅니다. 그러니 조심하세요. 이 문제에 대처하기 위해 코드를 주석에 작성하고, 완성한 이후에 주석을 제거할 수 있습니다.
 
 만약 실수했다면, 언제나 예제를 "Reset" 버튼으로 리셋할 수 있습니다. 만약 정말로 막혔다면, 답을 보기 위해 "Show solution"을 누르세요.
 
@@ -860,7 +869,8 @@ do {
 
 우리는, 적어도 시작하는 데, `for`를 추천합니다. 왜냐하면 이것은 아마도 모든 것을 기억하기 가장 쉽기 때문입니다 — 초기화식, 조건, 증감식 모두가 괄호 안에 깔끔하게 들어가야만 하므로, 이것들이 어디 있는지 보고 여러분이 이것들을 놓치지 않았다는 것을 확인하기 쉽습니다.
 
-> **참고:** 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 [반복문과 반복 가이드](/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)를 읽어 보세요.
+> [!NOTE]
+> 다른 반복문 형태/기능 또한 있는데, 이는 고급/특수한 상황에서 유용하고 이 글의 범위 너머에 있습니다. 만약 반복문을 더 많이 배우고 싶다면, 고급 [반복문과 반복 가이드](/ko/docs/Web/JavaScript/Guide/Loops_and_iteration)를 읽어 보세요.
 
 ## 실력을 평가해 보세요!
 
diff --git a/files/ko/learn/javascript/building_blocks/return_values/index.md b/files/ko/learn/javascript/building_blocks/return_values/index.md
index 596f33c5a4ef8a..e534bf8c92c68e 100644
--- a/files/ko/learn/javascript/building_blocks/return_values/index.md
+++ b/files/ko/learn/javascript/building_blocks/return_values/index.md
@@ -169,7 +169,8 @@ ctx.arc(500, 200, 35, 0, 2 * Math.PI);
 
 4. 코드를 저장하고, 브라우저에서 로드한 후, 시도해 보세요.
 
-> **참고:** 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 [GitHub에 있는 완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html)과 비교해 보거나 ([실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)도 보세요), 우리에게 도움을 요청해 보세요.
+> [!NOTE]
+> 만약 이 예제를 작업하는 데 어려움이 있다면, 자유롭게 [GitHub에 있는 완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html)과 비교해 보거나 ([실제로 작동하는 모습](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)도 보세요), 우리에게 도움을 요청해 보세요.
 
 ## 이제 여러분의 차례입니다!
 
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
index d7fafa1190b78a..fda2f0e2eeac36 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md
@@ -9,11 +9,13 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 
 .
 
-> **참고:** 여러분은 정답을 아래의 인터랙티브 에디터에서 시도해 볼 수 있지만, 과제를 수행하기 위해 코드를 다운로드해서 다음과 같은 온라인 툴을 이용하는 것 또한 도움이 될 지도 모릅니다: [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/)
+> [!NOTE]
+> 여러분은 정답을 아래의 인터랙티브 에디터에서 시도해 볼 수 있지만, 과제를 수행하기 위해 코드를 다운로드해서 다음과 같은 온라인 툴을 이용하는 것 또한 도움이 될 지도 모릅니다: [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/)
 >
 > 정말로 막히면, 도움을 요청해 보세요 — 이 페이지 아래의 [Assessment or further help](#assessment_or_further_help) 섹션을 확인해 보세요.
 
-> **참고:** 아래의 예제들에서, 만약 여러분의 코드에 오류가 있다면, 답을 알아내려고 시도하는 것을 돕기 위해 페이지의 결과 패널에 (혹은 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
+> [!NOTE]
+> 아래의 예제들에서, 만약 여러분의 코드에 오류가 있다면, 답을 알아내려고 시도하는 것을 돕기 위해 페이지의 결과 패널에 (혹은 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
 
 ## 조건문 1
 
@@ -30,7 +32,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals1.html", '100%', 400)}}
 
-> **참고:** 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals1-download.html)
+> [!NOTE]
+> 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals1-download.html)
 
 ## 조건문 2
 
@@ -55,7 +58,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals2.html", '100%', 400)}}
 
-> **참고:** 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals2-download.html)
+> [!NOTE]
+> 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals2-download.html)
 
 ## 조건문 3
 
@@ -65,7 +69,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals3.html", '100%', 400)}}
 
-> **참고:** 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals3-download.html)
+> [!NOTE]
+> 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals3-download.html)
 
 ## 조건문 4
 
@@ -84,7 +89,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals4.html", '100%', 400)}}
 
-> **참고:** 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals4-download.html)
+> [!NOTE]
+> 다른 (온라인) 에디터에서 작업하기 위해 [이 과제에 대한 시작점을 다운로드하세요.](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/conditionals/conditionals4-download.html)
 
 ## 평가 혹은 추가적인 도움
 
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
index 626b2e9517c2de..c8b57497d3d38e 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__events/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Events
 
 이 실력 테스트의 목적은 여러분이 우리의 [이벤트 입문](/ko/docs/Learn/JavaScript/Building_blocks/Events) 문서를 이해했는지 평가하기 위함입니다.
 
-> **참고:** 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.
+> [!NOTE]
+> 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.
 >
 > 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 [Assessment or further help](#assessment_or_further_help) 섹션을 보세요.
 
-> **참고:** 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
+> [!NOTE]
+> 아래의 예제들에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
 
 ## DOM 조작: 유용하다고 생각됨
 
@@ -29,7 +31,8 @@ HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events1.html", '100%', 400)}}
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events1-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events1-download.html)하세요.
 
 ## 이벤트 2
 
@@ -43,7 +46,8 @@ HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events2.html", '100%', 400)}}
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events2-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events2-download.html)하세요.
 
 ## 이벤트 3
 
@@ -55,7 +59,8 @@ HTML은 변경되어서는 안 됩니다; JavaScript만 변경되어야 합니
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/events/events3.html", '100%', 400)}}
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events3-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/events/events3-download.html)하세요.
 
 ## 평가 혹은 추가적인 도움
 
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
index 7eae1048a55a9f..2e9509cc815df0 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 
 이 실력 테스트의 목적은 여러분이 우리의 [함수 — 코드 재사용](/ko/docs/Learn/JavaScript/Building_blocks/Functions), [함수 만들기](/ko/docs/Learn/JavaScript/Building_blocks/Build_your_own_function), 그리고 [함수 반환 값](/ko/docs/Learn/JavaScript/Building_blocks/Return_values) 문서를 이해했는지 평가하기 위함입니다.
 
-> **참고:** 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.
+> [!NOTE]
+> 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.
 >
 > 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 [Assessment or further help](#assessment_or_further_help) 섹션을 보세요.
 
-> **참고:** 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
+> [!NOTE]
+> 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
 
 ## DOM 조작: 유용하다고 생각됨
 
@@ -27,7 +29,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions1-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions1-download.html)하세요.
 
 ## 함수 2
 
@@ -45,7 +48,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 400)}}
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions2-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions2-download.html)하세요.
 
 ## 함수 3
 
@@ -59,7 +63,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 
 {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions3-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions3-download.html)하세요.
 
 ## 평가 혹은 추가적인 도움
 
diff --git a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
index 97c445e05a7da4..b6b60e9efa153a 100644
--- a/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
+++ b/files/ko/learn/javascript/building_blocks/test_your_skills_colon__loops/index.md
@@ -7,7 +7,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
 
 이 실력 테스트의 목적은 여러분이 우리의 [반복문](/ko/docs/Learn/JavaScript/Building_blocks/Looping_code) 문서를 이해했는지를 평가하기 위함입니다.
 
-> **참고:** 여러분은 코드를 다운로드하고, [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!
+> [!NOTE]
+> 여러분은 코드를 다운로드하고, [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/)와 같은 온라인 툴(tool)에 넣고, 그리고서 과제에 도전해 봄으로써 아래의 과제들에 대한 해답을 시도해볼 수 있습니다. 무한 루프를 만들고 평가 페이지를 멈추게 하는 위험 때문에 우리는 이 과제들에 대해 실시간으로 수정 가능한 에디터를 제공하지 않았습니다!
 >
 > 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 [Assessment or further help](#assessment_or_further_help) 섹션을 보세요.
 
@@ -21,7 +22,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
 
 우리의 첫 반복문 과제에서 우리는 여러분이 제공된 `myArray` 내의 모든 요소를 순회하고, 제공된 `list`에 추가될 리스트 아이템 (예: [`<li>`](/ko/docs/Web/HTML/Element/li) 요소) 내에서 화면에 그것들을 출력하는 간단한 반복문을 만듦으로써 시작하기를 원합니다.
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops1-download.html)하세요.
 
 ## 반복문 2
 
@@ -35,7 +37,7 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
 
 여러분은 전 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.
 
-> **참고:**
+> [!NOTE]
 >
 > 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops2-download.html)하세요.
 
@@ -51,7 +53,8 @@ slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
 
 여러분은 이전의 두 과제에서 사용하지 않은 유형의 반복문을 사용해야 합니다.
 
-> **참고:** 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html)하세요.
+> [!NOTE]
+> 여러분의 에디터나 온라인 에디터에서 작업하기 위해서 [이 과제의 시작점을 다운로드](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/loops/loops3-download.html)하세요.
 
 ## 평가 혹은 추가적인 도움
 
diff --git a/files/ko/learn/javascript/client-side_web_apis/index.md b/files/ko/learn/javascript/client-side_web_apis/index.md
index 2e0676e76d13a3..69ef8c81252ff2 100644
--- a/files/ko/learn/javascript/client-side_web_apis/index.md
+++ b/files/ko/learn/javascript/client-side_web_apis/index.md
@@ -13,7 +13,8 @@ slug: Learn/JavaScript/Client-side_web_APIs
 
 [HTM](/ko/docs/Learn/HTML)과[CSS](/ko/docs/Learn/CSS)에 관한 기본지식이 있으면 좋습니다!
 
-> **참고:** 코드를 작성 할 수 없는 디바이스에서 작업하는 경우 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/).과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
+> [!NOTE]
+> 코드를 작성 할 수 없는 디바이스에서 작업하는 경우 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/).과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.
 
 ## Guides
 
diff --git a/files/ko/learn/javascript/first_steps/a_first_splash/index.md b/files/ko/learn/javascript/first_steps/a_first_splash/index.md
index 5209db72374c91..1616f8a092f66f 100644
--- a/files/ko/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/ko/learn/javascript/first_steps/a_first_splash/index.md
@@ -28,7 +28,8 @@ JavaScript에 관한 약간의 이론과, JavaScript가 할 수 있는 일을 
 
 시작하기 전에, 우리의 기대 목표를 먼저 확실하게 짚고 넘어가겠습니다. 이 글을 끝낸 뒤에도, 함께 따라서 작성한 코드를 이해하지 못할 수 있습니다. 그래도 괜찮습니다. 이 시간은 JavaScript의 기능들이 함께 어떻게 동작하는지, JavaScript 코드를 작성하는 게 어떤 느낌인지 알려드리기 위한 시간일 뿐입니다. 여기에서 사용한 기능들은 이후의 다른 여러 글에서 자세하게 짚어볼 테니, 지금 당장은 굳이 모두 이해하려고 애쓰지 마세요.
 
-> **참고:** 함수와 반복문처럼 JavaScript의 많은 코드 기능은 다른 프로그래밍 언어에도 존재합니다. 코드 구문은 다르더라도, 그 개념은 많은 부분 동일합니다.
+> [!NOTE]
+> 함수와 반복문처럼 JavaScript의 많은 코드 기능은 다른 프로그래밍 언어에도 존재합니다. 코드 구문은 다르더라도, 그 개념은 많은 부분 동일합니다.
 
 ## 프로그래머처럼 사고하기
 
diff --git a/files/ko/learn/javascript/first_steps/arrays/index.md b/files/ko/learn/javascript/first_steps/arrays/index.md
index 60f37661622a55..4680d867457018 100644
--- a/files/ko/learn/javascript/first_steps/arrays/index.md
+++ b/files/ko/learn/javascript/first_steps/arrays/index.md
@@ -216,7 +216,8 @@ for (var i = 0; i < sequence.length; i++) {
 
 프로그램을 만들다보면 종종 긴 문자열로 이루어진 원시 데이터를 제공받게 될 것이고, 원시 데이터를 정제하여 더 유용한 데이터를 추출해 테이블 형태로 표시하는 등 작업을 수행해야 합니다. 이러한 작업을 위해 {{jsxref("String.prototype.split()","split()")}} 메서드를 사용할 수 있습니다. {{jsxref("String.prototype.split()","split()")}} 메서드는 사용자가 원하는 매개변수로 문자열을 분리하여 배열로 표현해줍니다.
 
-> **참고:** 사실 엄밀히 따지면 문자열 메서드지만, 배열과 함께 사용하기 때문에 여기에 넣었습니다.
+> [!NOTE]
+> 사실 엄밀히 따지면 문자열 메서드지만, 배열과 함께 사용하기 때문에 여기에 넣었습니다.
 
 1. {{jsxref("String.prototype.split()","split()")}} 메서드가 어떻게 작동하는지 살펴봅시다. 우선 콘솔에서 아래와 같은 문자열을 만듭니다:
 
@@ -493,7 +494,8 @@ body {
 
 이 예제에서 우리는 더욱 단순한 사용을 보일 것입니다. 여기서 우리는 당신에게 검색 상자가 있는 가짜 검색 사이트를 제공합니다. 개념은 용어가 검색 상자에 입력되었을 때, 상위 5개의 이전 검색 용어들이 목록에 보이는 것입니다. 용어의 수가 5를 넘어갈 때, 마지막 용어는 새로운 용어가 위에 추가될 때마다 지워지기 시작해서, 5개의 이전 용어가 계속 보입니다.
 
-> **참고:** 실제 검색 앱에서는, 당신은 아마도 이전 검색으로 돌아가기 위해 이전 검색 용어를 클릭할 수 있고, 이것은 실제 검색 결과를 보여줄 것입니다! 우리는 단지 우선은 단순하게 하고 있습니다.
+> [!NOTE]
+> 실제 검색 앱에서는, 당신은 아마도 이전 검색으로 돌아가기 위해 이전 검색 용어를 클릭할 수 있고, 이것은 실제 검색 결과를 보여줄 것입니다! 우리는 단지 우선은 단순하게 하고 있습니다.
 
 앱을 완성하기 위해, 우리는 당신이 다음을 하기를 필요로 합니다.
 
diff --git a/files/ko/learn/javascript/first_steps/index.md b/files/ko/learn/javascript/first_steps/index.md
index 87d6278b6f0248..6555df519157e3 100644
--- a/files/ko/learn/javascript/first_steps/index.md
+++ b/files/ko/learn/javascript/first_steps/index.md
@@ -9,7 +9,7 @@ l10n:
 
 우리의 첫 번째 JavaScript 과정에서는, 현실적인 첫 JavaScript 예제 작성에 앞서 "JavaScript란 뭘까", "JavaScript는 어떻게 생겼을까", "JavaScript는 뭘 할 수 있을까"와 같은 핵심적인 질문에 답을 하겠습니다. 그다음으로는 변수, 문자열, 숫자, 배열과 같은 핵심 개념을 자세히 논의해 보겠습니다.
 
-> **알림:**
+> [!CALLOUT]
 >
 > #### 프론트엔드 웹 개발자가 되고자 하시나요?
 >
@@ -25,7 +25,8 @@ JavaScript를 몰라도 이번 과정 시작에는 문제가 없지만, HTML과
 - [HTML 소개](/ko/docs/Learn/HTML/Introduction_to_HTML)
 - [CSS 소개](/ko/docs/Learn/CSS/Introduction_to_CSS)
 
-> **참고:** 파일을 만들 수 없는 컴퓨터나 태블릿, 기타 장치에서 작업을 하신다면 예제 코드의 대부분을 [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서도 시험할 수 있습니다.
+> [!NOTE]
+> 파일을 만들 수 없는 컴퓨터나 태블릿, 기타 장치에서 작업을 하신다면 예제 코드의 대부분을 [JSBin](https://jsbin.com/)이나 [Glitch](https://glitch.com/) 같은 온라인 코딩 프로그램에서도 시험할 수 있습니다.
 
 ## 구성
 
diff --git a/files/ko/learn/javascript/first_steps/math/index.md b/files/ko/learn/javascript/first_steps/math/index.md
index 47dd52ee28eab0..0bf300511f0f3c 100644
--- a/files/ko/learn/javascript/first_steps/math/index.md
+++ b/files/ko/learn/javascript/first_steps/math/index.md
@@ -48,7 +48,8 @@ l10n:
 
 두 번째 좋은 소식은 다른 프로그래밍 언어와 달리, JavaScript는 실수와 정수 모두 {{jsxref("Number")}}라는 하나의 데이터 타입만 사용합니다. 실수와 정수 모두 같은 데이터 타입이기 때문에 하나의 방법으로 동작하게 할 수 있다는 뜻입니다.
 
-> **참고:** 사실 JavaScript에는 {{jsxref("BigInt")}}라는 또 다른 숫자 타입이 있습니다. 정수를 나타내는 데 사용되는 데이터 타입이지만 이 글에서는 다루지 않습니다.
+> [!NOTE]
+> 사실 JavaScript에는 {{jsxref("BigInt")}}라는 또 다른 숫자 타입이 있습니다. 정수를 나타내는 데 사용되는 데이터 타입이지만 이 글에서는 다루지 않습니다.
 
 ### 나를 위한 숫자들
 
@@ -126,9 +127,11 @@ myNumber = Number(myNumber) + 3;
 | `%`    | 나머지 (또는 모듈로) | 왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다. | `8 % 3` ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.) |
 | `**`   | 지수                 | 왼쪽의 숫자를 오른쪽 숫자만큼 제곱합니다.             | `5 ** 2` ( 5의 제곱이기 때문에 25를 반환합니다.)                      |
 
-> **참고:** 연산에 관계된 수를 {{Glossary("Operand", "피연산자")}}라고 부릅니다.
+> [!NOTE]
+> 연산에 관계된 수를 {{Glossary("Operand", "피연산자")}}라고 부릅니다.
 
-> **참고:** 지수를 계산할 때 {{jsxref("Math.pow()")}} 메서드를 사용할 수도 있고 `**`와 매우 비슷한 동작을 합니다. 예를 들어, `Math.pow(7, 3)`의 경우 `7`은 밑, `3`은 지수이므로 `343`을 반환합니다. 이 결과는 `7 ** 3`과 같습니다.
+> [!NOTE]
+> 지수를 계산할 때 {{jsxref("Math.pow()")}} 메서드를 사용할 수도 있고 `**`와 매우 비슷한 동작을 합니다. 예를 들어, `Math.pow(7, 3)`의 경우 `7`은 밑, `3`은 지수이므로 `343`을 반환합니다. 이 결과는 `7 ** 3`과 같습니다.
 
 아직 수학을 공부할 필요는 없습니다. 하지만 우리는 문법 확인을 해야합니다. 아래의 명령어들을 [developer tools JavaScript console](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools) 에 입력해주세요.
 
@@ -181,7 +184,8 @@ num2 + num1 / 8 + 2;
 
 직접 실행해 보세요.
 
-> **참고:** JavaScript의 연산자와 연산자 우선순위에 대해 더 알고 싶다면 [연산자 우선순위](/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence) 문서를 참고하세요.
+> [!NOTE]
+> JavaScript의 연산자와 연산자 우선순위에 대해 더 알고 싶다면 [연산자 우선순위](/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence) 문서를 참고하세요.
 
 ## 증감 연산자
 
@@ -218,7 +222,8 @@ num2--;
 num2;
 ```
 
-> **참고:** 변수 앞에 연산자를 사용하면 브라우저가 변수를 먼저 증가/감소시키고 값을 반환합니다. 이번에는 `++num1`과 `--num2`를 사용하고 위의 예제를 다시 실행해 보세요.
+> [!NOTE]
+> 변수 앞에 연산자를 사용하면 브라우저가 변수를 먼저 증가/감소시키고 값을 반환합니다. 이번에는 `++num1`과 `--num2`를 사용하고 위의 예제를 다시 실행해 보세요.
 
 ## 대입 연산자
 
@@ -249,7 +254,8 @@ var y = 4; // y는 4입니다.
 x *= y; // 이제 x의 값은 12입니다.
 ```
 
-> **참고:** 더 많은 [연산자](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#할당_연산자)가 있지만, 지금은 이것만 시용해도 충분합니다.
+> [!NOTE]
+> 더 많은 [연산자](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#할당_연산자)가 있지만, 지금은 이것만 시용해도 충분합니다.
 
 ## 실전 예제: 캔버스 크기 바꾸기
 
@@ -283,7 +289,8 @@ Reset 버튼을 눌러서 되돌릴 수 있기 때문에 코드가 동작하지
 | `<=`   | ~보다 작거나 같음 | 왼쪽 값이 오른쪽 값보다 작거나 같은지 여부를 테스트합니다. | `3 <= 2`      |
 | `>=`   | ~보다 크거나 같음 | 왼쪽 값이 오른쪽 값보다 크거나 같은지 여부를 테스트합니다. | `5 >= 4`      |
 
-> **참고:** 일부 사람들은 `==`와 `!=`를 동등성과 불일치성을 테스트하는 데 사용합니다. 이 연산자들은 JavaScript에서 유효한 연산자이지만, `===`/`!==`와는 다릅니다. 전자는 값이 동일한지는 테스트하지만, 값의 데이터 유형이 동일한지의 여부는 테스트하지 않습니다. 후자의 경우 엄격한 버전은 값과 값의 데이터 유형의 동일성을 모두 테스트합니다. 엄격한 버전이 오류가 적은 편이기 때문에, 이를 사용하는 것을 권장합니다.
+> [!NOTE]
+> 일부 사람들은 `==`와 `!=`를 동등성과 불일치성을 테스트하는 데 사용합니다. 이 연산자들은 JavaScript에서 유효한 연산자이지만, `===`/`!==`와는 다릅니다. 전자는 값이 동일한지는 테스트하지만, 값의 데이터 유형이 동일한지의 여부는 테스트하지 않습니다. 후자의 경우 엄격한 버전은 값과 값의 데이터 유형의 동일성을 모두 테스트합니다. 엄격한 버전이 오류가 적은 편이기 때문에, 이를 사용하는 것을 권장합니다.
 
 만약 콘솔에 값들을 입력한다면 `true`/`false` 값이 반환되는걸 볼 수 있습니다. 이는 이전 글에서 본 것 처럼 불리언(boolean)입니다. 코드에서 결정을 내리거나, 어떤 선택을 할 때마다 사용하기 때문에 불리언은 상당히 유용합니다. 불리언을 사용하는 예는 다음과 같습니다.
 
@@ -322,7 +329,8 @@ function updateBtn() {
 
 `updateBtn()` 함수 내부에서 동등 연산자가 사용되는걸 볼 수 있습니다. 원리는 동일하지만, 이 경우엔 두 수식이 같은 값을 가지고 있는지 테스트하는 것이 아닌 버튼의 텍스트 콘텐츠가 특정 문자열을 포함하고 있는지를 테스트합니다. 버튼이 "Start machine"이라고 표시되어 있을 때 누르면 "Stop machine"으로 바꾸고 라벨을 변경합니다. 버튼이 "Stop machine"이라고 표시되어 있을 때 누르면 다시 표시를 바꿉니다.
 
-> **참고:** 두 상태 사이를 전환하는 이러한 컨트롤을 일반적으로 **토글(toggle)** 이라고 합니다. 토글은 조명 켜기, 조명 끄기 등 한 상태와 다른 상태 사이를 전환합니다.
+> [!NOTE]
+> 두 상태 사이를 전환하는 이러한 컨트롤을 일반적으로 **토글(toggle)** 이라고 합니다. 토글은 조명 켜기, 조명 끄기 등 한 상태와 다른 상태 사이를 전환합니다.
 
 ## 실력 테스트!
 
@@ -334,6 +342,7 @@ function updateBtn() {
 
 다음 글에서는 텍스트와 JavaScript에서 텍스트를 조작하는 방법에 대해 알아보겠습니다.
 
-> **참고:** 수학을 좋아하고 JavaScript에서 수학이 어떻게 구현되는지 더 자세히 알고 싶으시다면 MDN의 메인 JavaScript 섹션에서 더 자세한 내용을 확인할 수 있습니다. [숫자와 날짜](/ko/docs/Web/JavaScript/Guide/Numbers_and_dates), [표현식 및 연산자](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators) 문서에서 시작하기 좋습니다.
+> [!NOTE]
+> 수학을 좋아하고 JavaScript에서 수학이 어떻게 구현되는지 더 자세히 알고 싶으시다면 MDN의 메인 JavaScript 섹션에서 더 자세한 내용을 확인할 수 있습니다. [숫자와 날짜](/ko/docs/Web/JavaScript/Guide/Numbers_and_dates), [표현식 및 연산자](/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators) 문서에서 시작하기 좋습니다.
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
index ed7554e27b92b9..bafabcdc2908fa 100644
--- a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
@@ -36,7 +36,8 @@ l10n:
 
 위 방법 대신에, 여러분은 테스트에 [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 `<script>` 엘리멘트를 넣을 수 있습니다.
 
-> **참고:** 문제가 해결되지 않으면 이 페이지 하단의 [평가 또는 추가 도움말](#assessment_or_further_help) 섹션을 참조해 도움을 요청하세요.
+> [!NOTE]
+> 문제가 해결되지 않으면 이 페이지 하단의 [평가 또는 추가 도움말](#assessment_or_further_help) 섹션을 참조해 도움을 요청하세요.
 
 ## 프로젝트에 대한 간략한 설명
 
diff --git a/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
index e699170ec679e3..25d8d4f2737087 100644
--- a/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
+++ b/files/ko/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -7,11 +7,13 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 
 이 기량 테스트의 목적은 당신이 우리의 [필요한 정보를 저장하기 — 변수](/ko/docs/Learn/JavaScript/First_steps/Variables) 문서를 이해했는지를 평가하기 위함입니다.
 
-> **참고:** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
+> [!NOTE]
+> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks.
 >
 > If you get stuck, then ask us for help — see the [Assessment or further help](#assessment_or_further_help) section at the bottom of this page.
 
-> **참고:** 아래에 있는 예제들에서, 답을 알아내기 위해 시도하는 것을 돕기 위해 만약 당신의 코드에 오류가 있으면, 페이지의 결과 패널에 출력될 것입니다 (또는 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에 출력될 것입니다).
+> [!NOTE]
+> 아래에 있는 예제들에서, 답을 알아내기 위해 시도하는 것을 돕기 위해 만약 당신의 코드에 오류가 있으면, 페이지의 결과 패널에 출력될 것입니다 (또는 다운로드 버전의 경우, 브라우저의 JavaScript 콘솔에 출력될 것입니다).
 
 ## 변수 1
 
@@ -25,7 +27,7 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html", '100%', 400)}}
 
-> **알림:**
+> [!CALLOUT]
 >
 > [Download the starting point for this task](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/variables/variables1-download.html) to work in your own editor or in an online editor.
 
@@ -37,7 +39,7 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html", '100%', 400)}}
 
-> **알림:**
+> [!CALLOUT]
 >
 > [Download the starting point for this task](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/variables/variables2-download.html) to work in your own editor or in an online editor.
 
@@ -49,7 +51,7 @@ slug: Learn/JavaScript/First_steps/Test_your_skills:_variables
 
 {{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html", '100%', 400)}}
 
-> **알림:**
+> [!CALLOUT]
 >
 > [Download the starting point for this task](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/tasks/variables/variables3-download.html) to work in your own editor or in an online editor.
 
diff --git a/files/ko/learn/javascript/first_steps/useful_string_methods/index.md b/files/ko/learn/javascript/first_steps/useful_string_methods/index.md
index ef91fb35895dce..02fc9c14cb8ec3 100644
--- a/files/ko/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/ko/learn/javascript/first_steps/useful_string_methods/index.md
@@ -317,7 +317,8 @@ textarea.onkeyup = function () {
 3. Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
 4. Change the value of the `result` variable to equal to the final result, not the `input`.
 
-> **참고:** A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.
+> [!NOTE]
+> A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.
 
 ```html hidden
 <h2>Live output</h2>
diff --git a/files/ko/learn/javascript/first_steps/variables/index.md b/files/ko/learn/javascript/first_steps/variables/index.md
index 427af009fdc394..56af22456bf9c3 100644
--- a/files/ko/learn/javascript/first_steps/variables/index.md
+++ b/files/ko/learn/javascript/first_steps/variables/index.md
@@ -81,7 +81,8 @@ JavaScript에 대해 더 많이 배운다면, 변수에 대해 많이 익숙해
 
 변수의 특별한 점은 문자열과 숫자뿐 아니라 무엇이든 포함할 수 있다는 것입니다. 변수에는 복잡한 데이터와 심지어 전체 함수를 포함하여 놀라운 작업을 수행할 수도 있습니다. 이와 관련한 내용은 차차 배우게 될 것입니다.
 
-> **참고:** 변수는 값을 포함합니다. 이것은 중요한 차이점입니다. 변수는 값 자체가 아니라 값을 담는 컨테이너입니다. 물건을 담을 수 있는 작은 상자와 같다고 생각하면 됩니다.
+> [!NOTE]
+> 변수는 값을 포함합니다. 이것은 중요한 차이점입니다. 변수는 값 자체가 아니라 값을 담는 컨테이너입니다. 물건을 담을 수 있는 작은 상자와 같다고 생각하면 됩니다.
 
 ![](boxes.png)
 
@@ -96,7 +97,8 @@ let myAge;
 
 여기서 우리는 `myName`과 `myAge`라는 두 개의 변수를 생성합니다. 웹 브라우저의 콘솔에 이 두줄을 입력합니다. 그런 다음, 본인이 원하는 변수를 하나 또는 두 개 만듭니다.
 
-> **참고:** JavaScript에서는 모든 코드 명령어가 세미콜론 (;)으로 끝나야 합니다. 한 줄의 코드에서는 코드가 올바르게 작동할 수 있지만, 여러 줄의 코드를 함께 작성하는 경우에는 그렇지 않을 수 있습니다. 따라서, 세미콜론을 작성하는 습관을 들이는 것이 좋습니다.
+> [!NOTE]
+> JavaScript에서는 모든 코드 명령어가 세미콜론 (;)으로 끝나야 합니다. 한 줄의 코드에서는 코드가 올바르게 작동할 수 있지만, 여러 줄의 코드를 함께 작성하는 경우에는 그렇지 않을 수 있습니다. 따라서, 세미콜론을 작성하는 습관을 들이는 것이 좋습니다.
 
 예를 들어 변수 이름만 입력하면 이러한 값이 실행 환경에 존재하는지 테스트할 수 있습니다.
 
@@ -111,7 +113,8 @@ myAge;
 scoobyDoo;
 ```
 
-> **참고:** 존재하지만 정의된 값이 없는 변수와 전혀 존재하지 않는 변수를 혼동하면 안 됩니다. 이 둘은 매우 다른 개념입니다. 위에서 본 상자 비유에서 존재하지 않는다는 것은 값을 넣을 상자(변수)가 없다는 것을 의미합니다. 정의된 값이 없다는 것은 상자는 있지만 그 안에 값이 없다는 것을 의미합니다.
+> [!NOTE]
+> 존재하지만 정의된 값이 없는 변수와 전혀 존재하지 않는 변수를 혼동하면 안 됩니다. 이 둘은 매우 다른 개념입니다. 위에서 본 상자 비유에서 존재하지 않는다는 것은 값을 넣을 상자(변수)가 없다는 것을 의미합니다. 정의된 값이 없다는 것은 상자는 있지만 그 안에 값이 없다는 것을 의미합니다.
 
 ## 변수의 초기화
 
@@ -164,7 +167,8 @@ logName();
 var myName;
 ```
 
-> **참고:** 위의 코드는 JavaScript 콘솔에 개별 줄을 입력할 때는 작동하지 않으며, 웹 문서에서 여러 줄의 JavaScript를 실행할 때만 작동합니다.
+> [!NOTE]
+> 위의 코드는 JavaScript 콘솔에 개별 줄을 입력할 때는 작동하지 않으며, 웹 문서에서 여러 줄의 JavaScript를 실행할 때만 작동합니다.
 
 이 기능은 **호이스팅** 때문에 작동합니다. 이에 대한 자세한 내용은 [var 호이스팅](/ko/docs/Web/JavaScript/Reference/Statements/var#var_호이스팅hoisting)을 참고하시면 됩니다.
 
@@ -195,7 +199,8 @@ myName = "Bob";
 
 이러한 이유와 그 외 여러 가지 이유로 코드에 `var` 대신 `let`을 사용하는 것이 좋습니다. 구형 브라우저에 대한 지원을 명시적으로 작성하지 않는 한, 2015년부터 모든 최신 브라우저에서 `let`을 지원하므로 더 이상 `var`을 사용할 이유가 없습니다.
 
-> **참고:** 브라우저의 콘솔에서 이 코드를 시도하는 경우 각 코드 블록을 전체적으로 복사하여 여기에 붙여넣는 것이 좋습니다. 크롬 콘솔에는 `let` 및 `const`를 사용한 변수 재선언이 허용되는 기능이 있습니다.
+> [!NOTE]
+> 브라우저의 콘솔에서 이 코드를 시도하는 경우 각 코드 블록을 전체적으로 복사하여 여기에 붙여넣는 것이 좋습니다. 크롬 콘솔에는 `let` 및 `const`를 사용한 변수 재선언이 허용되는 기능이 있습니다.
 >
 > ```plain
 > > let myName = "Chris";
@@ -228,7 +233,8 @@ myAge = 40;
 - 변수는 대소문자를 구분합니다. 따라서 `myage` 와 `myAge` 는 다른 변수입니다.
 - 마지막으로 JavaScript 예약어를 변수 이름으로 사용하면 안 됩니다. 여기서 예약어란 JavaScript의 실제 구문을 구성하는 단어를 의미합니다. 따라서 변수 이름으로 `var`, `function`, `let`, `for`와 같은 단어를 사용할 수 없습니다. 브라우저는 이러한 단어를 다른 코드 항목으로 인식하므로 오류가 발생합니다.
 
-> **참고:** 피해야 할 예약어 목록은 다음 [어휘 문법 - Reserved words](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)에서 확인할 수 있습니다.
+> [!NOTE]
+> 피해야 할 예약어 목록은 다음 [어휘 문법 - Reserved words](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)에서 확인할 수 있습니다.
 
 다음은 바람직한 변수 이름의 예시입니다.
 
diff --git a/files/ko/learn/javascript/first_steps/what_is_javascript/index.md b/files/ko/learn/javascript/first_steps/what_is_javascript/index.md
index 3a2a959ea9f998..cec730cd0383e4 100644
--- a/files/ko/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/ko/learn/javascript/first_steps/what_is_javascript/index.md
@@ -112,7 +112,8 @@ API는 일반적으로 두 개의 범주로 나뉩니다.
   두 웹 기술을 사용해서 만들 수 있는 놀라운 결과를 엿보려면 [Chrome Experiments](https://experiments.withgoogle.com/collection/chrome)와 [webglsamples](https://webglsamples.org/)를 방문하세요.
 - {{domxref("HTMLMediaElement")}}와 {{domxref("WebRTC API", "WebRTC")}}를 포함하는 [오디오와 비디오 API](/ko/docs/Web/Guide/Audio_and_video_delivery)를 사용하면 웹 페이지에서 바로 오디오 및 비디오를 재생하거나 웹 카메라에서 비디오를 가져와 다른 사람의 컴퓨터에 표시하는 등 멀티미디어로 정말 흥미로운 작업을 할 수 있습니다. (간단한 [스냅샷 데모](https://chrisdavidmills.github.io/snapshot/)를 방문해서 감을 잡아보세요.)
 
-> **참고:** 위의 데모 중 상당수는 구형 브라우저에서 작동하지 않으므로 실험할 때는 Firefox, Chrome, Edge, Opera와 같은 최신 브라우저를 사용하여 코드를 실행하는 것이 좋습니다.
+> [!NOTE]
+> 위의 데모 중 상당수는 구형 브라우저에서 작동하지 않으므로 실험할 때는 Firefox, Chrome, Edge, Opera와 같은 최신 브라우저를 사용하여 코드를 실행하는 것이 좋습니다.
 > 이후에 프로덕션 코드 (고객이 사용하게 될 코드) 배포에 다가가게 되면 [크로스 브라우저 테스트](/ko/docs/Learn/Tools_and_testing/Cross_browser_testing)를 고려하세요.
 
 **서드파티 API**는 기본적으로 브라우저에 내장되어 있지 않으며, 일반적으로 웹 어딘가에서 해당 코드와 정보를 가져와야 합니다.
@@ -120,7 +121,8 @@ API는 일반적으로 두 개의 범주로 나뉩니다.
 - [Twitter API](https://developer.twitter.com/en/docs)로 여러분의 최신 트윗을 웹 사이트가 보여주도록 구현할 수 있습니다.
 - [Google 지도 API](https://developers.google.com/maps/)와 [OpenStreetMap API](https://wiki.openstreetmap.org/wiki/API)로 웹 사이트에 지도를 삽입하고, 지도 관련 기능을 추가할 수 있습니다.
 
-> **참고:** 위의 서드파티 API는 고급 기능으로, 이 과정에서는 다루지 않습니다. 이에 대한 자세한 내용은 [클라이언트 사이드 웹 API 과정](/ko/docs/Learn/JavaScript/Client-side_web_APIs)에서 알아보세요.
+> [!NOTE]
+> 위의 서드파티 API는 고급 기능으로, 이 과정에서는 다루지 않습니다. 이에 대한 자세한 내용은 [클라이언트 사이드 웹 API 과정](/ko/docs/Learn/JavaScript/Client-side_web_APIs)에서 알아보세요.
 
 여기 나열된 항목 말고도 훨씬 다양한 API들이 존재합니다! 하지만 아직 너무 앞서나가진 마세요. JavaScript를 하루 배운 것으로 차세대 Facebook, Google 지도, Instagram을 만들 수는 없는 법입니다. 아직 배워야 할 기본이 많이 남았고, 기본을 배우는 것이 이 과정을 보는 이유이니, 시작해 봅시다!
 
@@ -142,7 +144,8 @@ JavaScript의 가장 일반적인 용도는 위에서 언급했듯이 DOM (Docum
 각 브라우저 탭에는 코드를 실행할 수 있는 별도의 그릇이 있습니다. (전문 용어로 '실행 환경'이라고 부릅니다.) 대부분의 경우 각 탭의 코드는 완전히 독립적으로 실행되며 한 탭의 코드가 다른 탭이나 다른 웹사이트의 코드에 직접적인 영향을 미칠 수 없습니다.
 이건 중요한 보안 절차입니다. 이런 제약이 없으면 해커들이 다른 웹사이트의 정보를 훔치는 코드를 작성하는 등 나쁜 짓을 할 수 있기 때문입니다.
 
-> **참고:** 서로 다른 웹 사이트/탭 사이에서 코드와 정보를 안전하게 주고받을 수 있는 방법이 있지만, 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않겠습니다.
+> [!NOTE]
+> 서로 다른 웹 사이트/탭 사이에서 코드와 정보를 안전하게 주고받을 수 있는 방법이 있지만, 지금 과정과는 거리가 멀기 때문에 여기서는 다루지 않겠습니다.
 
 ### JavaScript 실행 순서
 
@@ -166,7 +169,8 @@ function updateName() {
 코드의 처음 두 줄의 순서를 바꾸면 더 이상 작동하지 않고 [브라우저 개발자 콘솔](/ko/docs/Learn/Common_questions/What_are_browser_developer_tools)에 오류 `TypeError: para is undefined`가 나타납니다.
 `para` 객체가 아직 존재하지 않으므로 이벤트 수신기를 추가할 수 없기 때문입니다.
 
-> **참고:** 이는 매우 흔한 오류로, 코드에서 참조하는 객체가 실제로 존재하는지 확인한 후에 작업을 수행해야 합니다.
+> [!NOTE]
+> 이는 매우 흔한 오류로, 코드에서 참조하는 객체가 실제로 존재하는지 확인한 후에 작업을 수행해야 합니다.
 
 ### 인터프리터와 컴파일러
 
@@ -241,12 +245,14 @@ CSS가 외부 스타일시트를 적용하는 데 {{htmlelement("link")}} 요소
 
 5. 파일을 저장하고 브라우저에서 페이지를 새로고침하세요. 이제 버튼을 클릭하는 순간 새로운 문단이 생성돼 밑에 추가되는 모습을 볼 수 있습니다.
 
-> **참고:** 예제가 잘 동작하지 않으면 각 단계를 다시 차근차근 시도하면서 모두 정확히 따라했는지 확인해보세요.
+> [!NOTE]
+> 예제가 잘 동작하지 않으면 각 단계를 다시 차근차근 시도하면서 모두 정확히 따라했는지 확인해보세요.
 > 시작 코드를 저장할 때 `.html` 파일로 저장했나요?
 > {{htmlelement("script")}} 요소를 닫는 `</head>` 요소 바로 앞에 배치했나요?
 > JavaScript 코드를 정확히 보이는 그대로 입력했나요? **JavaScript는 대소문자를 구별하고 매우 까다로우므로 구문을 예제 그대로 입력하지 않으면 동작하지 않을 수 있습니다.**
 
-> **참고:** 완성된 예제 코드를 GitHub의 [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)에서 볼 수 있습니다. ([실제로 동작하는 모습도 확인해보세요](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html))
+> [!NOTE]
+> 완성된 예제 코드를 GitHub의 [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)에서 볼 수 있습니다. ([실제로 동작하는 모습도 확인해보세요](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html))
 
 ### 외부 JavaScript
 
@@ -280,7 +286,8 @@ CSS가 외부 스타일시트를 적용하는 데 {{htmlelement("link")}} 요소
    일반적으로 코드를 체계적으로 정리하고 여러 HTML 파일에서 재사용할 수 있다는 측면에서 스크립트를 외부 파일로 분리하는 것이 좋습니다.
    또한 HTML에 스크립트 덩어리를 넣지 않았기에 HTML을 더 쉽게 읽을 수 있습니다.
 
-> **참고:** 완성된 예제 코드를 GitHub의 [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)과 [script.js](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/script.js)에서 볼 수 있습니다. ([실제로 동작하는 모습도 확인해보세요](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html))
+> [!NOTE]
+> 완성된 예제 코드를 GitHub의 [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)과 [script.js](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/script.js)에서 볼 수 있습니다. ([실제로 동작하는 모습도 확인해보세요](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html))
 
 ### 인라인 JavaScript 처리기
 
@@ -467,7 +474,8 @@ for (const button of buttons) {
 }
 ```
 
-> **참고:** 보통은 많은 주석이 적은 주석보다 낫지만, 변수가 무엇인지 설명하기 위해(변수 이름이 더 직관적이어야 함) 또는 매우 간단한 연산을 설명하기 위해(코드가 지나치게 복잡할 수 있음) 많은 주석을 추가하는 경우 주의해야 합니다.
+> [!NOTE]
+> 보통은 많은 주석이 적은 주석보다 낫지만, 변수가 무엇인지 설명하기 위해(변수 이름이 더 직관적이어야 함) 또는 매우 간단한 연산을 설명하기 위해(코드가 지나치게 복잡할 수 있음) 많은 주석을 추가하는 경우 주의해야 합니다.
 
 ## 요약
 
diff --git a/files/ko/learn/javascript/first_steps/what_went_wrong/index.md b/files/ko/learn/javascript/first_steps/what_went_wrong/index.md
index afb7af10c72979..ef40527ed68641 100644
--- a/files/ko/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ko/learn/javascript/first_steps/what_went_wrong/index.md
@@ -42,7 +42,8 @@ l10n:
 1. 시작하려면 즐겨 사용하는 텍스트 편집기와 브라우저에서 로컬 사본을 엽니다.
 2. 게임 플레이를 시도해 보세요. "Submit guess" 버튼을 누르면 작동하지 않는 것을 알 수 있습니다.
 
-> **참고:** 직접 작성한 게임 예제가 동작하지 않는 경우에도 우선 예제 파일로 진행하는 걸 추천합니다. 이 글에 적힌 기법을 먼저 알아본 다음에 여러분의 코드로 돌아가서 활용하시면 됩니다.
+> [!NOTE]
+> 직접 작성한 게임 예제가 동작하지 않는 경우에도 우선 예제 파일로 진행하는 걸 추천합니다. 이 글에 적힌 기법을 먼저 알아본 다음에 여러분의 코드로 돌아가서 활용하시면 됩니다.
 
 이 시점에서 개발자 콘솔을 참조하여 구문 오류가 발생하는지 확인한 다음 오류를 수정해 보겠습니다. 아래에서 방법을 알아보도록 하겠습니다.
 
@@ -64,7 +65,8 @@ l10n:
 
 3. 코드 편집기에서 86번째 줄을 보면 다음과 같은 줄을 찾을 수 있습니다.
 
-   > **경고:** 오류가 86번째 줄에 없을 수 있습니다. 로컬 컴퓨터에서 라이브 서버를 실행하는 확장 기능이 있는 코드 편집기를 사용하는 경우 추가 코드가 삽입됩니다. 이 때문에 개발자 도구는 86번째 줄이 아닌 다른 줄에서 오류가 발생한 것으로 표시합니다.
+   > [!WARNING]
+   > 오류가 86번째 줄에 없을 수 있습니다. 로컬 컴퓨터에서 라이브 서버를 실행하는 확장 기능이 있는 코드 편집기를 사용하는 경우 추가 코드가 삽입됩니다. 이 때문에 개발자 도구는 86번째 줄이 아닌 다른 줄에서 오류가 발생한 것으로 표시합니다.
 
    ```js
    guessSubmit.addeventListener("click", checkGuess);
@@ -74,7 +76,8 @@ l10n:
 
 5. `addEventListener()` 페이지를 보면 함수 이름의 철자가 잘못되어 오류가 발생한 것으로 보입니다. JavaScript는 대소문자를 구분하므로 철자는 물론 대소문자도 잘못 적으면 오류가 발생합니다. `addeventListener`를 `addEventListener`로 수정하면 이 문제가 해결됩니다. 지금 변경해 보세요.
 
-> **참고:** MDN의 [TypeError: "x" is not a function](/ko/docs/Web/JavaScript/Reference/Errors/Not_a_function) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
+> [!NOTE]
+> MDN의 [TypeError: "x" is not a function](/ko/docs/Web/JavaScript/Reference/Errors/Not_a_function) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
 
 ### 구문 오류 2회차
 
@@ -98,7 +101,8 @@ l10n:
 
    동일한 오류이지만 브라우저마다 다른 방식으로 설명합니다.
 
-   > **참고:** 이 오류는 함수 `checkGuess() {}` 블록에서 발생했기 때문에 페이지가 로드되자마자 나타나지 않았습니다. 나중에 [함수 문서](/ko/docs/Learn/JavaScript/Building_blocks/Functions)에서 자세히 알아보겠지만 함수 내부 코드는 함수 외부 코드와 별도의 범위에서 실행됩니다. 이 경우 코드가 시행되지 않았고 86번째 줄에서 `checkGuess()` 함수가 실행될 때까지 오류가 발생하지 않았습니다.
+   > [!NOTE]
+   > 이 오류는 함수 `checkGuess() {}` 블록에서 발생했기 때문에 페이지가 로드되자마자 나타나지 않았습니다. 나중에 [함수 문서](/ko/docs/Learn/JavaScript/Building_blocks/Functions)에서 자세히 알아보겠지만 함수 내부 코드는 함수 외부 코드와 별도의 범위에서 실행됩니다. 이 경우 코드가 시행되지 않았고 86번째 줄에서 `checkGuess()` 함수가 실행될 때까지 오류가 발생하지 않았습니다.
 
 4. 오류에 표시된 줄 번호는 80입니다. 80번째 줄을 살펴보면 다음 코드를 볼 수 있습니다.
 
@@ -133,7 +137,8 @@ l10n:
 9. 따라서 우리가 사용했어야 하는 선택자는 마침표(`.`)로 시작하는 클래스 선택자였는데, 49번째 줄의 `querySelector()` 메서드에 제공한 선택자에는 마침표가 없습니다. 이것이 문제일 수 있습니다! `lowOrHi`를 `.lowOrHi`로 바꿔보세요.
 10. 저장 후 다시 새로고침해보면 `console.log()` 명령문이 우리가 원하는 `<p>` 요소를 반환하는 모습을 볼 수 있습니다. 또 다른 오류를 고쳤습니다! 이제 `console.log()`를 삭제하거나 나중에 참고할 수 있도록 보관할 수 있습니다.
 
-> **참고:** MDN의 [TypeError: "x" is (not) "y"](/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_type) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
+> [!NOTE]
+> MDN의 [TypeError: "x" is (not) "y"](/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_type) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
 
 ### 구문 오류 3회차
 
@@ -215,7 +220,8 @@ const userGuess === Number(guessField.value);
 
 이 오류는 사용자가 다른 작업을 수행하려고 한다고 생각하기 때문에 발생합니다. 변수를 어떤 값과 동일하게 만드는 할당 연산자(`=`)와, 어떤 값이 다른 값과 같은지 판별해서 `true`/`false`를 반환하는 일치 연산자(`===`)를 혼동하지 않도록 주의해야 합니다.
 
-> **참고:** MDN의 [SyntaxError: missing ; before statement](/ko/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
+> [!NOTE]
+> MDN의 [SyntaxError: missing ; before statement](/ko/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
 
 ### 어떤 값을 입력해도 항상 이겼다고 함
 
@@ -237,7 +243,8 @@ if (userGuess = randomNumber) {
 
 이 오류는 단순한 편입니다. 일반적으로 함수/메서드 호출이 끝날 때 닫는 괄호를 놓쳤음을 의미합니다.
 
-> **참고:** MDN의 [SyntaxError: missing ) after argument list](/ko/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
+> [!NOTE]
+> MDN의 [SyntaxError: missing ) after argument list](/ko/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list) 참고서에서 오류에 대한 자세한 설명을 확인하세요.
 
 ### SyntaxError: missing : after property id
 
@@ -265,7 +272,8 @@ function checkGuess( {
 
 이러한 모든 오류에 대해 연습에서 살펴본 예제를 어떻게 해결했는지 생각해 봅시다. 오류가 발생하면 주어진 줄 번호를 보고 해당하는 줄로 이동하여 무엇이 잘못되었는지 찾아봅니다. 오류가 반드시 해당하는 줄에 있는 것은 아니며, 위에서 인용한 것과 똑같은 문제로 인해 오류가 발생하지 않을 수도 있다는 점을 명심해야 합니다!
 
-> **참고:** MDN의 [SyntaxError: Unexpected token](/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_token)과 [SyntaxError: unterminated string literal](/ko/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) 참고서에서 두 오류에 대한 자세한 설명을 확인하세요.
+> [!NOTE]
+> MDN의 [SyntaxError: Unexpected token](/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_token)과 [SyntaxError: unterminated string literal](/ko/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) 참고서에서 두 오류에 대한 자세한 설명을 확인하세요.
 
 ## 요약
 
diff --git a/files/ko/learn/javascript/objects/basics/index.md b/files/ko/learn/javascript/objects/basics/index.md
index d0afbc5cebd93a..40fecc2c8d8e09 100644
--- a/files/ko/learn/javascript/objects/basics/index.md
+++ b/files/ko/learn/javascript/objects/basics/index.md
@@ -95,7 +95,8 @@ person.greeting();
 
 이제 객체 내부에 몇 가지 데이터와 기능이 있으며, 멋진 간단한 구문으로 액세스 할 수 있습니다!
 
-> **참고:** 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (그리고 [실행되는 예제도 보세요](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html)). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.
+> [!NOTE]
+> 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (그리고 [실행되는 예제도 보세요](https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html)). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.
 
 자, 이제 뭘 해볼까요? 객체는 각기 다른 이름(위의 예에서는 `name` 과 `age`)과 값(예제에서, `['Bob', 'Smith']` 과 `32`)을 갖는 복수개의 멤버로 구성됩니다. 한 쌍의 이름과 값은 ',' 로 구분되야 하고, 이름과 값은 ':' 으로 분리됩니다. 결국 문법은 아래와 같은 패턴이 됩니다.
 
@@ -305,7 +306,8 @@ var myNotification = new Notification("Hello!");
 
 다음 문서에서 생성자에 대해서 좀더 자세히 알아볼 것입니다.
 
-> **참고:** 객체간 통신은 **message passing** 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.
+> [!NOTE]
+> 객체간 통신은 **message passing** 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.
 
 ## 실력을 시험해보세요!
 
diff --git a/files/ko/learn/javascript/objects/classes_in_javascript/index.md b/files/ko/learn/javascript/objects/classes_in_javascript/index.md
index 0dca78a8e53721..e70de6cce36727 100644
--- a/files/ko/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ko/learn/javascript/objects/classes_in_javascript/index.md
@@ -59,7 +59,8 @@ Person.prototype.greeting = function () {
 };
 ```
 
-> **참고:** 소스 코드에는 `bio()와` `farewell()`메소드가 정의되어 있습니다. 잠시 후에 다른 생성자로 어떻게 상속하는지 알아보도록 합시다.
+> [!NOTE]
+> 소스 코드에는 `bio()와` `farewell()`메소드가 정의되어 있습니다. 잠시 후에 다른 생성자로 어떻게 상속하는지 알아보도록 합시다.
 
 객체 지향에 대해 처음 정의할 때 언급했었던 `Teacher` 클래스를 만들어 봅시다. `Person`을 상속받고 아래 몇 가지를 추가해서요:
 
@@ -216,7 +217,8 @@ teacher1.farewell();
 
 아주 잘 실행될 겁니다. 1, 2, 3, 6 줄은 Person() 생성자(클래스)에서 상속 받은 멤버에 접근합니다. 4번째 줄은 Teacher() 생성자(클래스)만 가지고 있는 멤버에 접근합니다. 5번째 줄은 Person()에서 상속 받은 멤버도 있지만 Teacher()가 이미 자신만의 새 메소드를 정의했으므로 Teacher()의 메소드에 접근합니다.
 
-> **참고:** 코드가 잘 동작하지 않으면 [완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html)을 확인해 보세요. ([실행 페이지](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)도 보시구요).
+> [!NOTE]
+> 코드가 잘 동작하지 않으면 [완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html)을 확인해 보세요. ([실행 페이지](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)도 보시구요).
 
 이 테크닉이 Javascript에서 상속 받는 클래스를 만드는 유일한 방법은 아니지만 잘 동작하며 상속을 구현하는 방법을 잘 설명하고 있습니다.
 
@@ -228,7 +230,8 @@ JavaScript 라이브러리를 쓰면 간단합니다 — 상속 기능을 사용
 
 [OOP theory section](/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters), 에서는 개념적으로 Person을 상속받고 Teacher보다 덜 공손한 `greeting()` 메소드를 재정의한 `Student` 클래스를 정의했었습니다. 해당 절에서 `Student`의 인삿말이 어땠는지 확인해 보시고 `Person()`을 상속받는 `Student()` 생성자를 구현해 보세요. `greeting()` 함수도 재정의 해 보시구요.
 
-> **참고:** 코드가 잘 동작하지 않으면 [완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) 을 확인해 보세요.([실행 페이지](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)도 보시구요).
+> [!NOTE]
+> 코드가 잘 동작하지 않으면 [완성된 버전](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) 을 확인해 보세요.([실행 페이지](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)도 보시구요).
 
 ## 객체 멤버 요약
 
@@ -244,7 +247,8 @@ JavaScript 라이브러리를 쓰면 간단합니다 — 상속 기능을 사용
 
 ECMAScript 2015에서는 C++나 Java와 유사한 [클래스 문법](/ko/docs/Web/JavaScript/Reference/Classes)을 공개하여 클래스를 조금 더 쉽고 명확하게 재활용 할 수 있게 되었습니다. 이 절에서는 프로토타입 상속으로 작성한 Person과 Teacher 예제를 클래스 문법으로 변경하고 어떻게 동작하는지 설명하겠습니다.
 
-> **참고:** 대부분의 최신 브라우저에서 새로운 클래스 작성 방식을 지원합니다만 일부 구형 브라우저(Internet Explorer가 대표적)에서는 동작하지 않으므로 하위호환성을 위해 프로토타입 상속을 배워둘 필요가 있습니다.
+> [!NOTE]
+> 대부분의 최신 브라우저에서 새로운 클래스 작성 방식을 지원합니다만 일부 구형 브라우저(Internet Explorer가 대표적)에서는 동작하지 않으므로 하위호환성을 위해 프로토타입 상속을 배워둘 필요가 있습니다.
 
 Class-스타일로 재작성한 Person 예제를 보시죠:
 
@@ -287,7 +291,8 @@ leia.farewell();
 // Leia has left the building. Bye for now
 ```
 
-> **참고:** 코드를 까보면 class 부분은 프로토타입 상속으로 변환이 됩니다. — 문법 설탕(syntactic sugar)의 일종인거죠. 하지만 읽기 쉽다는데 대부분 동의하실 겁니다.
+> [!NOTE]
+> 코드를 까보면 class 부분은 프로토타입 상속으로 변환이 됩니다. — 문법 설탕(syntactic sugar)의 일종인거죠. 하지만 읽기 쉽다는데 대부분 동의하실 겁니다.
 
 ### class 문법으로 상속
 
@@ -339,7 +344,8 @@ snape.subject; // Dark arts
 
 Person을 수정하지 않고 Teacher를 생성한 것처럼 또 다른 하위클래스도 생성할 수 있습니다.
 
-> **참고:** GitHub에서 [es2015-class-inheritance.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html) 예제를 참조하세요([실행 페이지](https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html)).
+> [!NOTE]
+> GitHub에서 [es2015-class-inheritance.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html) 예제를 참조하세요([실행 페이지](https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html)).
 
 ## Getters와 Setters
 
@@ -391,7 +397,8 @@ snape._subject="Balloon animals" // Sets subject to "Balloon animals"
 console.log(snape._subject) // Returns "Balloon animals"
 ```
 
-> **참고:** GitHub에서 [es2015-getters-setters.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html) 예제를 참조하세요([실행 페이지](https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html)).
+> [!NOTE]
+> GitHub에서 [es2015-getters-setters.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html) 예제를 참조하세요([실행 페이지](https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html)).
 
 ## JavaScript에서 언제 상속을 사용해야 할까?
 
@@ -401,7 +408,8 @@ console.log(snape._subject) // Returns "Balloon animals"
 
 처음 시작하거나 작은 프로젝트에서 직접 상속을 구현하는 코드를 작성하는 경우는 그리 많지 않습니다. 필요하지도 않는데 상속을 위한 코드를 구현하는 건 시간 낭비에 불과하죠. 하지만 코드량이 많아질수록 상속이 필요한 경우가 생깁니다. 동일한 기능을 가진 클래스가 많아졌음을 발견했다면 기능들을 한데 묶어 공유할 수 있도록 일반 객체를 만들고 특이 객체들에게 상속하는 방식이 훨씬 편하고 유용하다는 점을 알 수 있습니다.
 
-> **참고:** Javascript에서는 프로토타입을 통해 상속이 구현되어 있어 이 방식을 흔히 **위임**이라고 표현합니다. 특이 객체들이 일반 객체에게 일부 기능의 실행을 위임하는 것이죠.
+> [!NOTE]
+> Javascript에서는 프로토타입을 통해 상속이 구현되어 있어 이 방식을 흔히 **위임**이라고 표현합니다. 특이 객체들이 일반 객체에게 일부 기능의 실행을 위임하는 것이죠.
 
 상속을 구현할때 상속 레벨을 너무 깊게 하지 말고, 메소드와 속성들이 정확히 어디에 구현되어 있는지 항상 인지해야 합니다. 브라우저 내장 객체의 prototype 역시 일시적으로 수정이 가능하지만 정말로 필요한 경우를 제외하고는 건드리지 말아야 합니다. 너무 깊은 상속은 디버그 할 때 끝없는 혼돈과 고통만을 줄 겁니다.
 
diff --git a/files/ko/learn/javascript/objects/index.md b/files/ko/learn/javascript/objects/index.md
index 2997b6f22cb5a4..08ecea8f86b191 100644
--- a/files/ko/learn/javascript/objects/index.md
+++ b/files/ko/learn/javascript/objects/index.md
@@ -7,7 +7,9 @@ slug: Learn/JavaScript/Objects
 
 JavaScript에서는 배열과같은 기능부터 JavaScript 위에 구축된 브라우저 {{Glossary("API", "APIs")}}에 이르기까지 대부분의 것들이 객체입니다. 사용자는 관련된 함수들과 변수들을 효율적인 패키지로 추상화하거나 편리한 데이터 컨테이너로 작동하는 객체를 만들 수 있습니다. 언어에 대한 지식을 가지고 더 멀리 나아고자 한다면 JavaScript의 객체 기반의 본질을 이해하는 것이 중요하므로, 여러분을 돕기위해 이 모듈을 제공하였습니다. 여기에서는 객체 이론과 구문을 자세히 가르쳐드리며, 사용자 정의 객체를 만드는 방법도 알아볼 것입니다.
 
-> **알림:** #### 프론트엔드 웹 개발자가 되고자 하시나요?목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.[**시작하기**](/ko/docs/Learn/Front-end_web_developer)
+> [!CALLOUT]
+>
+> #### 프론트엔드 웹 개발자가 되고자 하시나요?목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.[**시작하기**](/ko/docs/Learn/Front-end_web_developer)
 
 ## 사전 지식
 
@@ -15,7 +17,8 @@ JavaScript에서는 배열과같은 기능부터 JavaScript 위에 구축된 브
 
 JavaScript 객체에 대해 자세히 알아보려면, 기본 문법에 대해 어느 정도 능숙해야 합니다. 이 장을 읽기 전에 [JavaScript 첫걸음](/ko/docs/Learn/JavaScript/First_steps)과 [JavaScript 구성 요소](/ko/docs/Learn/JavaScript/Building_blocks)를 먼저 읽어보시기를 바랍니다.
 
-> **참고:** 컴퓨터/태블릿/혹은 다른 디바이스 상에서 스스로 파일을 만들수 없는 환경이라면, [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 과 같은 온라인 코딩 프로그램을 이용하여 (거의 모든) 예제 코드를 테스트해 보실 수 있습니다.
+> [!NOTE]
+> 컴퓨터/태블릿/혹은 다른 디바이스 상에서 스스로 파일을 만들수 없는 환경이라면, [JSBin](https://jsbin.com/) 또는 [Glitch](https://glitch.com/) 과 같은 온라인 코딩 프로그램을 이용하여 (거의 모든) 예제 코드를 테스트해 보실 수 있습니다.
 
 ## 가이드
 
diff --git a/files/ko/learn/javascript/objects/json/index.md b/files/ko/learn/javascript/objects/json/index.md
index 4d1c4c0b05893a..b6ed913a640c17 100644
--- a/files/ko/learn/javascript/objects/json/index.md
+++ b/files/ko/learn/javascript/objects/json/index.md
@@ -42,7 +42,8 @@ JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된
 
 JSON은 문자열 형태로 존재합니다 — 네트워크를 통해 전송할 때 아주 유용하죠. 데이터에 접근하기 위해서는 네이티브 JSON 객체로 변환될 필요가 있습니다. 별로 큰 문제는 아닌 것이 Javascript는 [JSON](/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON) 전역 객체를 통해 문자열과 JSON 객체의 상호변환을 지원합니다.
 
-> **참고:** 문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.
+> [!NOTE]
+> 문자열에서 네이티브 객체로 변환하는 것은 파싱(Parsing)이라고 합니다. 네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은 문자열화(Stringification)이라고 합니다.
 
 개별 JSON 객체를 `.json` 확장자를 가진 단순 텍스트 파일에 저장할 수 있습니다. {{glossary("MIME 타입")}}은 `application/json` 입니다.
 
@@ -109,7 +110,8 @@ superHeroes["members"][1]["powers"][2];
 4. 이 객체에서 `powers` 프로퍼티에 접근하려면 `["powers"]`를 입력합니다.
 5. `powers` 프로퍼티 안에는 위에서 선택한 hero의 superpower들이 있습니다. 세 번째 것을 선택해야 하므로 `[2]`.
 
-> **참고:** 위에서 볼 수 있듯 [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) 예제에서 JSON 내 변수([source code](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html) 참고)를 만들었다. 당신 브라우저의 Javascript 콘솔을 통하여 이 코드를 로드하고 그 변수 안에 얻을 수 있는 데이터에 접근해보자.
+> [!NOTE]
+> 위에서 볼 수 있듯 [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) 예제에서 JSON 내 변수([source code](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html) 참고)를 만들었다. 당신 브라우저의 Javascript 콘솔을 통하여 이 코드를 로드하고 그 변수 안에 얻을 수 있는 데이터에 접근해보자.
 
 ### JSON에서의 배열
 
@@ -291,9 +293,11 @@ function showHeroes(jsonObj) {
 5. 현재 히어로의 초능력을 반복 실행할 또다른 `for` 반복문을 사용합니다. 하나의 객체씩 `<li>` 를 생성하고, 그 안에 초능력을 집어 넣고, `appendChild()`를 사용하여 '`myList'` 라는 `<ul>` 안에 `listItem` 을 집어 넣습니다.
 6. 마지막으로 `<article>` (`myArticle`) 안에 `<h2>`, `<p>`, 그리고 `<ul>` 넣은 뒤, `<section>` 안에 `<article>`을 넣어 줍니다. 요소가 추가되어 지는 순서가 중요해요.왜냐하면 HTML 내에 보여질 거거든요.
 
-> **참고:** 만약 실습에 문제를 겪고 있다면, [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) 코드를 참조하세요. ([running live](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html) 또한 보세요.)
+> [!NOTE]
+> 만약 실습에 문제를 겪고 있다면, [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) 코드를 참조하세요. ([running live](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html) 또한 보세요.)
 
-> **참고:** 만약 우리가 주로 사용하는 JavaScript 객체에 접근하기 위한 점/괄호 표기법을 따르는데 문제를 겪고 있다면, 다른 탭이나 당신의 선호하는 텍스트 에디터에 [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) 파일을 여는 것이 도움이 될 것이다. 또한 당신은 점/괄호 표기법에 대한 다른 정보를 위해 [JavaScript object basics](/ko/docs/Learn/JavaScript/Objects/Basics) 글을 다시 확인하는 것을 권합니다.
+> [!NOTE]
+> 만약 우리가 주로 사용하는 JavaScript 객체에 접근하기 위한 점/괄호 표기법을 따르는데 문제를 겪고 있다면, 다른 탭이나 당신의 선호하는 텍스트 에디터에 [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) 파일을 여는 것이 도움이 될 것이다. 또한 당신은 점/괄호 표기법에 대한 다른 정보를 위해 [JavaScript object basics](/ko/docs/Learn/JavaScript/Objects/Basics) 글을 다시 확인하는 것을 권합니다.
 
 ## 객체와 문자 사이의 변환
 
diff --git a/files/ko/learn/javascript/objects/object-oriented_programming/index.md b/files/ko/learn/javascript/objects/object-oriented_programming/index.md
index 88a09ca693e3fc..6b8330513ae4ad 100644
--- a/files/ko/learn/javascript/objects/object-oriented_programming/index.md
+++ b/files/ko/learn/javascript/objects/object-oriented_programming/index.md
@@ -9,7 +9,8 @@ l10n:
 
 객체 지향 프로그래밍(OOP)은 Java 및 C++를 비롯한 많은 프로그래밍 언어의 기본이 되는 프로그래밍 패러다임입니다. 이 기사에서는 OOP의 기본 개념에 대한 개요를 제공합니다. **클래스와 인스턴스**, **상속**, **캡슐화**라는 세 가지 주요 개념에 대해 설명합니다. 지금은 특히 JavaScript를 참조하지 않고 이러한 개념을 설명하므로 모든 예제가 {{Glossary("Pseudocode", "pseudocode")}}로 제공됩니다.
 
-> **참고:** 정확히 말하면 여기에 설명된 기능은 **클래스 기반** 또는 "고전적인" OOP라고 하는 특정 스타일의 OOP입니다. 사람들이 OOP에 대해 이야기할 때 일반적으로 이것이 의미하는 유형입니다.
+> [!NOTE]
+> 정확히 말하면 여기에 설명된 기능은 **클래스 기반** 또는 "고전적인" OOP라고 하는 특정 스타일의 OOP입니다. 사람들이 OOP에 대해 이야기할 때 일반적으로 이것이 의미하는 유형입니다.
 
 그런 다음 JavaScript에서 생성자와 프로토타입 체인이 이러한 OOP 개념과 어떻게 관련되고 어떻게 다른지 살펴보겠습니다. 다음 기사에서는 객체 지향 프로그램을 보다 쉽게 ​​구현할 수 있도록 하는 JavaScript의 추가 기능에 대해 살펴보겠습니다.
 
diff --git a/files/ko/learn/javascript/objects/object_prototypes/index.md b/files/ko/learn/javascript/objects/object_prototypes/index.md
index 6c5c378eb62fac..f3a781173bc9f7 100644
--- a/files/ko/learn/javascript/objects/object_prototypes/index.md
+++ b/files/ko/learn/javascript/objects/object_prototypes/index.md
@@ -40,7 +40,8 @@ JavaScript는 흔히 **프로토타입 기반 언어**(**prototype-based languag
 
 JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 `prototype` 속성에서 파생된 `__proto__` 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.
 
-> **참고:** 객체의 prototype([`Object.getPrototypeOf(obj)`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf)함수 또는 deprecated 된 [`__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)속성으로 접근 가능한)과 생성자의 `prototype` 속성의 차이를 인지하는 것이 중요합니다. 전자는 개별 객체의 속성이며 후자는 생성자의 속성입니다. 이 말은 `Object.getPrototypeOf(new Foobar())`의 반환값이 `Foobar.prototype`과 동일한 객체라는 의미입니다.
+> [!NOTE]
+> 객체의 prototype([`Object.getPrototypeOf(obj)`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf)함수 또는 deprecated 된 [`__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)속성으로 접근 가능한)과 생성자의 `prototype` 속성의 차이를 인지하는 것이 중요합니다. 전자는 개별 객체의 속성이며 후자는 생성자의 속성입니다. 이 말은 `Object.getPrototypeOf(new Foobar())`의 반환값이 `Foobar.prototype`과 동일한 객체라는 의미입니다.
 
 자세히 알기 위해 예제를 하나 봅시다.
 
@@ -86,9 +87,11 @@ person1.valueOf();
 - 없으므로 `person1`의 프로토타입 객체(`Person()` 생성자의 프로토타입)에 `valueOf()` 메소드가 있는지 체크합니다.
 - 여전히 없으므로 `Person()` 생성자의 프로토타입 객체의 프로토타입 객체(`Object()` 생성자의 프로토타입)가 `valueOf()` 메소드를 가지고 있는지 체크합니다. 여기에 있으니 호출하며 끝납니다!
 
-> **참고:** 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 **복사되는 것이 아님**을 재차 언급합니다. — 위에서 보시다 시피 체인을 타고 올라가며 접근할 뿐입니다.
+> [!NOTE]
+> 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 **복사되는 것이 아님**을 재차 언급합니다. — 위에서 보시다 시피 체인을 타고 올라가며 접근할 뿐입니다.
 
-> **참고:** 특정 객체의 프로토타입 객체에 바로 접근하는 공식적인 방법은 없습니다. — Javascript 언어 표준 스펙에서`[[prototype]]`으로 표현되는 프로토타입 객체에 대한 "링크"는 내부 속성으로 정의되어 있습니다. ({{glossary("ECMAScript")}} 참조). 하지만 많은 수의 모던 브라우저들이 [`__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) (앞뒤로 언더바 2개씩) 속성을 통해 특정 객체의 프로토타입 객체에 접근할 수 있도록 구현하였습니다. 예를 들자면 `person1.__proto__` 또는 `person1.__proto__.__proto__` 코드로 체인이 어떻게 구성되어 있는지 확인해 보세요!
+> [!NOTE]
+> 특정 객체의 프로토타입 객체에 바로 접근하는 공식적인 방법은 없습니다. — Javascript 언어 표준 스펙에서`[[prototype]]`으로 표현되는 프로토타입 객체에 대한 "링크"는 내부 속성으로 정의되어 있습니다. ({{glossary("ECMAScript")}} 참조). 하지만 많은 수의 모던 브라우저들이 [`__proto__`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) (앞뒤로 언더바 2개씩) 속성을 통해 특정 객체의 프로토타입 객체에 접근할 수 있도록 구현하였습니다. 예를 들자면 `person1.__proto__` 또는 `person1.__proto__.__proto__` 코드로 체인이 어떻게 구성되어 있는지 확인해 보세요!
 >
 > ECMAScript 2015부터는 `Object.getPrototypeOf(obj)` 함수를 통해 객체의 프로토타입 객체에 **바로 접근할 수 있게** 되었습니다..
 
@@ -102,7 +105,8 @@ So [`Object.prototype.watch()`](/ko/docs/Web/JavaScript/Reference/Global_Objects
 
 [`Object.is()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is), [`Object.keys()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)등 `prototype` 버킷에 정의되지 않은 멤버들은 상속되지 않습니다. 이 것들은 `Object()` 생성자에서만 사용할 수 있는 멤버들이죠.
 
-> **참고:** 척 보기엔 이상합니다. — 함수에 불과한 생성자에 멤버를 정의한다니요? 함수 역시 객체의 하나입니다 — 못 미더우시면 [`Function()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function) 생성자 레퍼런스 페이지를 확인해 보세요.
+> [!NOTE]
+> 척 보기엔 이상합니다. — 함수에 불과한 생성자에 멤버를 정의한다니요? 함수 역시 객체의 하나입니다 — 못 미더우시면 [`Function()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Function) 생성자 레퍼런스 페이지를 확인해 보세요.
 
 1. prototype 속성을 직접 확인해 볼 수 있습니다. — 예제로 돌아가서 Javascript console에 아래 코드를 타이핑 해 보세요:
 
@@ -234,7 +238,8 @@ Person.prototype.farewell = function () {
 
 그런데도 person1에서 바로 farewell() 메소드를 사용할 수 있습니다 - 자동으로 업데이트 되기 때문이죠(역주:원문은 이런 뉘앙스입니다만 실제로는 프로토타입 객체는 모든 인스턴스에서 공유하기 때문에 정의하는 즉시 별도의 갱신 과정 없이 접근이 가능합니다).
 
-> **참고:** 코드가 잘 동작하지 않는다면 [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) 코드를 참조하세요 ([running live](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html) 페이지도 보시구요).
+> [!NOTE]
+> 코드가 잘 동작하지 않는다면 [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) 코드를 참조하세요 ([running live](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html) 페이지도 보시구요).
 
 prototype에 속성을 정의하는 경우는 별로 본 적이 없을겁니다. 왜냐면 별로 좋은 방법이 아니거든요. 속성을 추가할 때 아래와 같이 할 수 있습니다:
 
diff --git a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md
index d480023ad51056..c4e6c2d8064dae 100644
--- a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md
+++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.md
@@ -7,9 +7,11 @@ slug: Learn/JavaScript/Objects/Test_your_skills:_JSON
 
 이 테스트의 목표는 [JSON으로 작업하기](/ko/docs/Learn/JavaScript/Objects/JSON)를 잘 이해했는지 평가해보는 것입니다.
 
-> **참고:** 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.
+> [!NOTE]
+> 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.
 
-> **참고:** 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 JavaScript 콘솔로도 확인 가능합니다.)
+> [!NOTE]
+> 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 JavaScript 콘솔로도 확인 가능합니다.)
 
 ## JSON 1
 
@@ -31,7 +33,8 @@ slug: Learn/JavaScript/Objects/Test_your_skills:_JSON
 
 {{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}
 
-> **경고:** 이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, _cross-origin_ 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 JavaScript 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 \<iframe>에 내장되어 있습니다.) 하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.
+> [!WARNING]
+> 이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, _cross-origin_ 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 JavaScript 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 \<iframe>에 내장되어 있습니다.) 하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.
 
 ## 평가 또는 추가 도움말
 
diff --git a/files/ko/learn/performance/multimedia/index.md b/files/ko/learn/performance/multimedia/index.md
index c42f95fd332291..86accea4129ba5 100644
--- a/files/ko/learn/performance/multimedia/index.md
+++ b/files/ko/learn/performance/multimedia/index.md
@@ -28,7 +28,8 @@ l10n:
   </tbody>
 </table>
 
-> **참고:** 이 글은 일반적인 원칙과 기술을 포함하여 웹에서의 멀티미디어 전송 최적화를 개략적으로 소개합니다. 더 깊은 내용을 다루는 가이드를 찾으신다면, <https://images.guide>를 참조하세요.
+> [!NOTE]
+> 이 글은 일반적인 원칙과 기술을 포함하여 웹에서의 멀티미디어 전송 최적화를 개략적으로 소개합니다. 더 깊은 내용을 다루는 가이드를 찾으신다면, <https://images.guide>를 참조하세요.
 
 ## 멀티미디어를 최적화해야 하는 이유
 
diff --git a/files/ko/learn/server-side/django/deployment/index.md b/files/ko/learn/server-side/django/deployment/index.md
index 3cdab123c038f9..de5b44d7f8ea88 100644
--- a/files/ko/learn/server-side/django/deployment/index.md
+++ b/files/ko/learn/server-side/django/deployment/index.md
@@ -446,7 +446,8 @@ psycopg2==2.6.2
 whitenoise==3.2.2
 ```
 
-> **참고:** 위 목록에 **psycopg2** 줄이 있다는 것을 주의해야 한다! 로컬환경에서 이 라이브러리를 설치한 적이 없더라도 이 줄은 **requirements.txt** 파일에 추가해야 한다.
+> [!NOTE]
+> 위 목록에 **psycopg2** 줄이 있다는 것을 주의해야 한다! 로컬환경에서 이 라이브러리를 설치한 적이 없더라도 이 줄은 **requirements.txt** 파일에 추가해야 한다.
 
 #### Runtime 파일 추가하기
 
@@ -602,7 +603,8 @@ git push origin master
 git push heroku master
 ```
 
-> **참고:** Heroku에 사이트 업데이트하는 것을 완료한후, 존재하지 않는 주소URL(예를 들면, **/catalog/doesnotexist/**) 을 입력해 보자. 이전에는 이런 경우 자세한 설명이 담긴 디버그 페이지를 보여주었었지만, 이제는 단순한 "Not Found" 페이지가 보일것이다.
+> [!NOTE]
+> Heroku에 사이트 업데이트하는 것을 완료한후, 존재하지 않는 주소URL(예를 들면, **/catalog/doesnotexist/**) 을 입력해 보자. 이전에는 이런 경우 자세한 설명이 담긴 디버그 페이지를 보여주었었지만, 이제는 단순한 "Not Found" 페이지가 보일것이다.
 
 ### 디버깅 하기
 
diff --git a/files/ko/learn/server-side/django/development_environment/index.md b/files/ko/learn/server-side/django/development_environment/index.md
index 555ca2e64ef987..96a44380e44710 100644
--- a/files/ko/learn/server-side/django/development_environment/index.md
+++ b/files/ko/learn/server-side/django/development_environment/index.md
@@ -259,7 +259,8 @@ source /usr/local/bin/virtualenvwrapper.sh
 
 이 코드들은 우분트에서도 같은 코드이지만, startup 파일은 당신의 홈 디렉토리에 위치하며 다른 이름 **.bash_profile**을 가진 숨겨진 파일입니다.
 
-> **참고:** 파인더(finder)에서**.bash-profile** 파일을 찾을 수 없다면, 터미널에서 nano를 이용해 이 파일을 열 수 있습니다.
+> [!NOTE]
+> 파인더(finder)에서**.bash-profile** 파일을 찾을 수 없다면, 터미널에서 nano를 이용해 이 파일을 열 수 있습니다.
 >
 > 터미널 명령은 대체로 아래와 같습니다 :
 >
diff --git a/files/ko/learn/server-side/django/forms/index.md b/files/ko/learn/server-side/django/forms/index.md
index bb51366128442d..053301eb7d4dc4 100644
--- a/files/ko/learn/server-side/django/forms/index.md
+++ b/files/ko/learn/server-side/django/forms/index.md
@@ -385,7 +385,8 @@ def renew_book_librarian(request, pk):
 
 폼 코드는 상대적으로 간단하다. 우선 form이 어디에 제출될 것인지(`action`)(POST인지 PUT인지) 명시하여 `form` 태그를 선언하고, 데이터를 제출하는 `method` 를 명시한다(이 경우에는 "HTTP POST") — 해당 페이지 위 쪽의 [HTML Forms](#HTML_forms) overview에서 보았듯이, `action`을 비워 놓았는데, 이렇게 하면 form 데이터가 현재 URL페이지로 다시 POST 된다(지금 우리가 하고자 하는 것입니다!). `form` 태그 안에는 `submit` input 태그 또한 만들어서 페이지 사용자가 눌러서 데이터를 제출(submit)할 수 있도록 한다. `form` 태그 안에정의된 또 다른 하나인 `{% csrf_token %}`는 Django의 cross-site 위조 방지의 방식 중 하나이다.
 
-> **참고:** Add the `{% csrf_token %}` to every Django template you create that uses `POST` to submit data. This will reduce the chance of forms being hijacked by malicious users.
+> [!NOTE]
+> Add the `{% csrf_token %}` to every Django template you create that uses `POST` to submit data. This will reduce the chance of forms being hijacked by malicious users.
 
 마지막으로 템플릿에 context라는 dictionary형 데이터로 넘기는 `\{{form}}` 변수가 남았다. 별로 놀랍지 않을 수 있지만, 아래처럼 하면 form의 모든 field의 필드, 위젯, 도움말을 함께 렌더링하는 기본 렌더링기능을 사용할 수 있다 — 렌더링된 결과는 다음과 같다.
 
@@ -407,7 +408,8 @@ def renew_book_librarian(request, pk):
 </tr>
 ```
 
-> **참고:** 필드가 하나만 있기 때문에 분명하지는 않지만 기본적으로 모든 필드는 자체 테이블 행에 정의되어 있습니다. 템플릿 변수 `\{{ form.as_table }}`을 참조하면이 동일한 렌더링이 제공됩니다.
+> [!NOTE]
+> 필드가 하나만 있기 때문에 분명하지는 않지만 기본적으로 모든 필드는 자체 테이블 행에 정의되어 있습니다. 템플릿 변수 `\{{ form.as_table }}`을 참조하면이 동일한 렌더링이 제공됩니다.
 
 유효하지 않은 날짜를 입력하는 경우 페이지에서 렌더링 된 오류 목록 (아래 굵게 표시)을 얻게됩니다.
 
@@ -455,7 +457,8 @@ If you accepted the "challenge" in [Django Tutorial Part 8: User authentication
 {% endif %}
 ```
 
-> **참고:** Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to access the renew book page (perhaps use your superuser account).
+> [!NOTE]
+> Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to access the renew book page (perhaps use your superuser account).
 
 You can alternatively manually construct a test URL like this — `http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/` (a valid bookinstance id can be obtained by navigating to a book detail page in your library, and copying the `id` field).
 
@@ -491,7 +494,8 @@ class RenewBookModelForm(ModelForm):
         fields = ['due_back',]
 ```
 
-> **참고:** This might not look like all that much simpler than just using a `Form` (and it isn't in this case, because we just have one field). However if you have a lot of fields, it can reduce the amount of code quite significantly!
+> [!NOTE]
+> This might not look like all that much simpler than just using a `Form` (and it isn't in this case, because we just have one field). However if you have a lot of fields, it can reduce the amount of code quite significantly!
 
 The rest of the information comes from the model field definitions (e.g. labels, widgets, help text, error messages). If these aren't quite right, then we can override them in our `class Meta`, specifying a dictionary containing the field to change and its new value. For example, in this form we might want a label for our field of "_Renewal date_" (rather than the default based on the field name: _Due date_), and we also want our help text to be specific to this use case. The `Meta` below shows you how to override these fields, and you can similarly set `widgets` and `error_messages` if the defaults aren't sufficient.
 
@@ -625,7 +629,8 @@ There is nothing particularly new here! You can see that the views are classes,
 
 The author create, update, and delete pages are now ready to test (we won't bother hooking them into the site sidebar in this case, although you can do so if you wish).
 
-> **참고:** Observant users will have noticed that we didn't do anything to prevent unauthorised users from accessing the pages! We leave that as an exercise for you (hint: you could use the `PermissionRequiredMixin` and either create a new permission or reuse our `can_mark_returned` permission).
+> [!NOTE]
+> Observant users will have noticed that we didn't do anything to prevent unauthorised users from accessing the pages! We leave that as an exercise for you (hint: you could use the `PermissionRequiredMixin` and either create a new permission or reuse our `can_mark_returned` permission).
 
 ### Testing the page
 
diff --git a/files/ko/learn/server-side/django/generic_views/index.md b/files/ko/learn/server-side/django/generic_views/index.md
index 76f36cd2c56884..caf04c657e7753 100644
--- a/files/ko/learn/server-side/django/generic_views/index.md
+++ b/files/ko/learn/server-side/django/generic_views/index.md
@@ -72,7 +72,8 @@ class BookListView(generic.ListView):
 
 이게 전부입니다! Generic view는 명시된 모델(Book)의 모든 레코드를 가져오기 위해 데이터베이스를 쿼리할 것이고, **/locallibrary/catalog/templates/catalog/book_list.html**(아래에서 만들 예정)경로에 있는 템플릿을 렌더링합니다. 템플릿 안에서 우리는 `object_list`나 `book_list`라는 템플릿 변수를 사용해 도서 목록에 접근할 수 있습니다. (일반적으로 "`the_model_name_list`").
 
-> **참고:** 이 어색한 템플릿 경로는 오타가 아닙니다. Generic views는 `/application_name/the_model_name_list.html`(지금 상황에서는 `catalog/book_list.html`)에서 템플릿을 찾습니다. 이 경로는 애플리캐이션의 `/application_name/templates/` 디렉토리 안에 있습니다(`/catalog/templates/)`.
+> [!NOTE]
+> 이 어색한 템플릿 경로는 오타가 아닙니다. Generic views는 `/application_name/the_model_name_list.html`(지금 상황에서는 `catalog/book_list.html`)에서 템플릿을 찾습니다. 이 경로는 애플리캐이션의 `/application_name/templates/` 디렉토리 안에 있습니다(`/catalog/templates/)`.
 
 속성이나 디폴트 동작을 추가할 수도 있습니다. 예를 들어, 같은 모델을 사용하지만 여러 개의 뷰를 사용해야 되는 경우 다른 템플릿 파일을 명시할 수 있습니다. 혹은 `book_list` 템플릿 변수명이 직관적이지 않다고 생각해 다른 템플릿 변수명을 사용하고 싶을지도 모릅니다. 아마 가장 유용한 바리에이션은 리턴 값의 결과를 바꾸거나 필터링하는 것입니다. 따라서 모든 책을 나열하는 대신, 유저가 읽은 순으로 5개의 책을 나열할 수도 있습니다.
 
@@ -185,7 +186,8 @@ class BookListView(generic.ListView):
 
 우리는 템플릿 안에 모델에서 정의한 함수를 불러올 수도 있습니다. 이 경우, 우리는 `Book.get_absolute_url()` 함수를 호출해 연관된 세부 레코드를 표시하는 URL을 가져옵니다. 이 작업은 함수가 아무 인자를 가지지 않을 때 제공됩니다 (여기에는 인자를 넘길 방법이 없습니다!).
 
-> **참고:** 우리는 템플릿 내에서 함수를 호출할 때 발생하는 부작용을 조금 조심해야 합니다. 여기서 우리는 그저 표시하기 위해 URL을 얻었지만, 함수는 그보다 더한 작업도 할 수 있습니다 — (예를 들면) 우리는 그냥 템플릿을 렌더링한다고 해서 우리의 데이터베이스를 삭제하고 싶지 않을 것입니다.
+> [!NOTE]
+> 우리는 템플릿 내에서 함수를 호출할 때 발생하는 부작용을 조금 조심해야 합니다. 여기서 우리는 그저 표시하기 위해 URL을 얻었지만, 함수는 그보다 더한 작업도 할 수 있습니다 — (예를 들면) 우리는 그냥 템플릿을 렌더링한다고 해서 우리의 데이터베이스를 삭제하고 싶지 않을 것입니다.
 
 #### 베이스 템플릿 업데이트
 
@@ -223,13 +225,15 @@ _book-detail URL 패턴은 우리가 원하는 책의 id를 캡처하기 위해
 
 (번역 봉사자 주: uuid를 읽지 못한다면\[NoReverseMatch] \<int:pk>로 해보십시오.)
 
-> **참고:** 앞에서 언급했듯이, 관련된 URL 은 실제로는 `catalog/book/<digits>` 입니다.(우리가 **catalog** application 에 있기때문에, `/catalog/` 를 가정합니다).
+> [!NOTE]
+> 앞에서 언급했듯이, 관련된 URL 은 실제로는 `catalog/book/<digits>` 입니다.(우리가 **catalog** application 에 있기때문에, `/catalog/` 를 가정합니다).
 
 > **경고:** **명심**: 통상 class-based detail view 는 **pk** 라는 이름을 가진 파라미터로 전달됩니다. 만일 자체적으로 function view 를 만든다면 어떤 이름이라도 사용 가능합니다. 혹은 이름이 없는 argument 에 정보를 넣어 전달 할 수도 있습니다.
 
 #### Regular expression 을 이용한 고급 path matching
 
-> **참고:** 튜터리얼과는 관련 없습니다. 하지만 향후 Django 스타일로 개발하기 위해선 매우 유용한 팁입니다.
+> [!NOTE]
+> 튜터리얼과는 관련 없습니다. 하지만 향후 Django 스타일로 개발하기 위해선 매우 유용한 팁입니다.
 
 `path()` 를 이용한 패턴 검색은 간단하고 일반적인 경우 - 예를 들어 단지 특정 문자열이나 숫자가 있는지 - 매우 유용합니다. 만일 좀더 세밀한 조건 - 예를 들어 특정 문자열 길이를 갖는 문자열 검색 - 으로 검색 하고자 한다면 . [re_path()](https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.re_path) 를 사용하길 권고 드립니다.
 
@@ -269,7 +273,8 @@ _Regular expressions_ 은 정말로 파워풀한 매핑 툴 입니다. 하지만
 
 당신은 다양한 패턴들을 한번의 매칭을 통해 변환시킬 수 있습니다. 그러므로 다양한 정보들을 URL안에 인코딩할 수 있습니다.
 
-> **참고:** 추가적으로, 특정 날짜에 출간된 책 목록을 URL에 인코딩할 수 있을지 생각해보세요. 그리고 어떤 Regular Expression이 해당 URL을 매칭할 수 있을까요?
+> [!NOTE]
+> 추가적으로, 특정 날짜에 출간된 책 목록을 URL에 인코딩할 수 있을지 생각해보세요. 그리고 어떤 Regular Expression이 해당 URL을 매칭할 수 있을까요?
 
 #### Passing additional options in your URL maps
 
@@ -280,7 +285,8 @@ path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl
 path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
 ```
 
-> **참고:** 추가된 options 과 변환된 패턴들 중 명명된 것들은 view 에 명명된 arguments로 전달됩니다. 만약 당신이 **동일한 이름을** 변환된 패턴들과 추가적인 option에 사용한다면, 오직 변환된 패턴들만이 view에 보내지게 됩니다. ( 추가된 option들에 있는 값들은 모두 버려집니다).
+> [!NOTE]
+> 추가된 options 과 변환된 패턴들 중 명명된 것들은 view 에 명명된 arguments로 전달됩니다. 만약 당신이 **동일한 이름을** 변환된 패턴들과 추가적인 option에 사용한다면, 오직 변환된 패턴들만이 view에 보내지게 됩니다. ( 추가된 option들에 있는 값들은 모두 버려집니다).
 
 ### 뷰 (클래스 기반)
 
@@ -355,7 +361,8 @@ def book_detail_view(request, primary_key):
 {% endblock %}
 ```
 
-> **참고:** 이 템플릿의 작가 링크는 비어있는 URL입니다. 왜냐면 우리는 아직 작가 상세 페이지를 만들지 않았기 때문이죠. 만약 페이지가 존재한다면, URL을 아래와 같이 업데이트 해야합니다.
+> [!NOTE]
+> 이 템플릿의 작가 링크는 비어있는 URL입니다. 왜냐면 우리는 아직 작가 상세 페이지를 만들지 않았기 때문이죠. 만약 페이지가 존재한다면, URL을 아래와 같이 업데이트 해야합니다.
 >
 > ```
 > <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
@@ -378,7 +385,8 @@ def book_detail_view(request, primary_key):
 
 이 메소드는 관계의 한쪽("one")에만 `ForeignKey`(one-to many) 필드를 선언했기 때문에 필요합니다. 다른("many") 모델에서 아무것도 선언하지 않았기 때문에 관련 레코드 집합을 가져올 필드가 없습니다. 이 문제를 해결하기 위해, Django는 지금 우리가 사용하고 있는 "reverse lookup"이라는 적당한 이름의 함수를 만들었습니다. 이 함수의 이름은 `ForeignKey`가 선언되어있는 모델 이름을 소문자로 만들고, 그 뒤에 `_set`을 붙이면 됩니다. (따라서 `Book`에서 만든 함수는 `bookinstance_set()`가 되겠죠.)
 
-> **참고:** 여기서 우리는 모든 레코드를 가져오기 위해 `all()` 을 사용했습니다(기본값이죠). 반대로 당신은 `filter()` 메서드를 사용해서 레코드의 부분 집합을 가져올 수 있지만, 당신은 template에서 이걸 직접할 수는 없어요. 왜냐하면 함수의 arguments를 정할 수 없으니까요.
+> [!NOTE]
+> 여기서 우리는 모든 레코드를 가져오기 위해 `all()` 을 사용했습니다(기본값이죠). 반대로 당신은 `filter()` 메서드를 사용해서 레코드의 부분 집합을 가져올 수 있지만, 당신은 template에서 이걸 직접할 수는 없어요. 왜냐하면 함수의 arguments를 정할 수 없으니까요.
 >
 > 만약 순서를 정의하지 않는다면 (클래스 기반 view 또는 model에서), 당신은 개발 서버로 부터 다음과 같은 에러를 받게 될 거라는 것 또한 알아두세요.
 >
@@ -502,7 +510,7 @@ next/previous 링크와 함께 보이는 밑에 pagination 링크는 당신이 
 
 URL mappers에 필요한 코드들과 view들은 ,사실상, 우리가 위에서 만들었던 `Book` 목록과 세부 사항 view들과 동일해야 합니다. template들은 다르겠지만, 비슷한 동작을 가지고 있을 겁니다.
 
-> **참고:**
+> [!NOTE]
 >
 > - 작가 목록 페이지를 위한 URL mapper를 만들고나면, **All authors** base template에 있는 **All authors** 링크 또한 업데이트 해야될 필요를 느끼게 될 겁니다. 우리가 **All books** 링크 업데이트 때 했던, [수행 과정](#Update_the_base_template)을 따라해주세요.
 > - 작가 세부 사항 페이지에 대한 URL mapper를 만들고나면, 당신은 [book detail view template](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**) 또한 업데이트 해야 합니다. 그래야 작가 링크가 당신이 새로 만든 작가 세부 사항 페이지를 가리키거든요. (비어 있는 URL로 있기 보다는 말이죠). 굵게 되어 있는 부분을 template 내의 태그에 넣어주세요.
diff --git a/files/ko/learn/server-side/django/introduction/index.md b/files/ko/learn/server-side/django/introduction/index.md
index 2ab158fc1b4cd1..3158a166ce8ea5 100644
--- a/files/ko/learn/server-side/django/introduction/index.md
+++ b/files/ko/learn/server-side/django/introduction/index.md
@@ -73,7 +73,8 @@ Django는 다음과 같은 소프트웨어를 개발하는데 도움을 줍니
 
 장고는 2008년 9월 첫 번째 주요 릴리즈(1.0)에서부터 2017년의 최근 버전(2.0)까지 성장하고 발전했습니다. 장고는 각각의 버전에서 기능을 추가하고 버그를 수정했습니다. 새로운 유형의 데이터베이스, 탬플릿 엔진들 그리고 캐싱에 대한 지원에서부터 일반 보기 함수와 클래스들의 추가까지요(이를 통해 여러 프로그래밍 작업을 위해 개발자들이 작성해야 할 코드를 줄여줍니다).
 
-> **참고:** 장고를 더 좋게 만들기 위해 어떤 작업이 이루어지고 있는지, 최근 버전에서 어떤 변경이 있었는지 확인하려면 장고 웹사이트의 [release notes](https://docs.djangoproject.com/en/1.10/releases/) 를 살펴보세요.
+> [!NOTE]
+> 장고를 더 좋게 만들기 위해 어떤 작업이 이루어지고 있는지, 최근 버전에서 어떤 변경이 있었는지 확인하려면 장고 웹사이트의 [release notes](https://docs.djangoproject.com/en/1.10/releases/) 를 살펴보세요.
 
 장고는 수많은 사용자와 기여자가 있는 협력적이고 번성하는 프로젝트입니다. 여전히 몇 가지 장고만의 특징이 있지만, 장고는 모든 유형의 웹사이트를 개발할 수 있는 다용도적인 웹 프레임워크로 발전했습니다.
 
@@ -108,7 +109,8 @@ Django 웹 어플리케이션은 전형적으로 아래와 같이 분류된 파
 - **Models:** 모델은 응용프로그램의 데이터 구조를 정의하고 데이터베이스의 기록을 관리(추가, 수정, 삭제)하고 쿼리하는 방법을 제공하는 파이썬 객체입니다.
 - **Templates:** 탬플릿은 파일의 구조나 레이아웃을 정의하고(예: HTML 페이지), 실제 내용을 보여주는 데 사용되는 플레이스홀더를 가진 텍스트 파일입니다. 뷰는 HTML 탬플릿을 이용하여 동적으로 HTML 페이지를 만들고 모델에서 가져온 데이터로 채웁니다. 탬플릿으로 모든 파일의 구조를 정의할 수 있습니다.탬플릿이 꼭 HTML 타입일 필요는 없습니다!
 
-> **참고:** 장고는 이 구조를 "모델 뷰 템플릿(Model View Template)(MVT)" 아키텍처라고 부릅니다. 이것은 더 익숙한 [Model View Controller](/ko/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 아키텍처와 많은 유사점을 가지고 있습니다.
+> [!NOTE]
+> 장고는 이 구조를 "모델 뷰 템플릿(Model View Template)(MVT)" 아키텍처라고 부릅니다. 이것은 더 익숙한 [Model View Controller](/ko/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 아키텍처와 많은 유사점을 가지고 있습니다.
 
 아래 부문들은 장고 앱의 주요 부분들이 어떻게 보일지에 대한 단서를 보여줄 것입니다 (우리는 개발 환경을 설치한 이후에 세부적인 디테일에 대해 다룰겁니다).
 
@@ -149,7 +151,8 @@ def index(request):
     return HttpResponse('Hello from Django!')
 ```
 
-> **참고:** 파이썬에 관하여:
+> [!NOTE]
+> 파이썬에 관하여:
 >
 > - [Python modules](https://docs.python.org/3/tutorial/modules.html)은 우리가 코드에 쓰고 싶을지도 모르며 분리된 파일로 저장되어 있는 함수의 "라이브러리" 입니다.
 > - `from django.http import HttpResponse`와 같은 방법으로 `django.http` 모듈에서 `HttpResponse` 객체만 가져와서 뷰에서 사용할 수 있습니다. 모듈에서 여럿, 아니면 전체 모듈을 임포트할 수 있는 몇 가지 방법이 있습니다.
diff --git a/files/ko/learn/server-side/django/models/index.md b/files/ko/learn/server-side/django/models/index.md
index 96544b24ac18d5..8893d3c736d7a7 100644
--- a/files/ko/learn/server-side/django/models/index.md
+++ b/files/ko/learn/server-side/django/models/index.md
@@ -203,7 +203,8 @@ record = MyModelName(my_field_name="Instance #1")
 record.save()
 ```
 
-> **참고:** 만약 당신이 어떤 필드도 `primary_key`를 선언하지 않았다면, 새로운 레코드는 자동적으로 `id`라는 필드 이름을 가진 `primary_key`가 주어지게 됩니다. 위의 레코드를 저장한 후 이 `id` 필드를 쿼리할 수 있는데, 1의 값을 가질 겁니다.
+> [!NOTE]
+> 만약 당신이 어떤 필드도 `primary_key`를 선언하지 않았다면, 새로운 레코드는 자동적으로 `id`라는 필드 이름을 가진 `primary_key`가 주어지게 됩니다. 위의 레코드를 저장한 후 이 `id` 필드를 쿼리할 수 있는데, 1의 값을 가질 겁니다.
 
 이 새로운 레코드 안의 필드에 점 구문(.)을 사용해서 접근하여 값을 변경할 수 있습니다. 수정된 값들을 데이터베이스에 저장하기 위해 `save()`를 호출해야 합니다.
 
diff --git a/files/ko/learn/server-side/django/sessions/index.md b/files/ko/learn/server-side/django/sessions/index.md
index 4bd5d98e729773..393f4c63dcb544 100644
--- a/files/ko/learn/server-side/django/sessions/index.md
+++ b/files/ko/learn/server-side/django/sessions/index.md
@@ -67,7 +67,8 @@ MIDDLEWARE = [
 
 아래 코드는 key 값이 `"my_car"` 인 데이터를 어떻게 읽고 쓰고 삭제하는지 보여줍니다. 물론 그 key 값은 현재의 session (브라우저와 사이트의 연결정보) 과 연관되어진 key 입니다.
 
-> **참고:** 장고가 대단한점 한가지는 여러분이 이런 session 의 매카니즘에 생각하지 않게끔 한다는 점입니다. 만일 view 안에 있는 아래의 code 를 사용하면 **오직 현재의 브라우저만**이 현재의 request 에 관한 `my_car` 정보를 알 수 있다는 겁니다.
+> [!NOTE]
+> 장고가 대단한점 한가지는 여러분이 이런 session 의 매카니즘에 생각하지 않게끔 한다는 점입니다. 만일 view 안에 있는 아래의 code 를 사용하면 **오직 현재의 브라우저만**이 현재의 request 에 관한 `my_car` 정보를 알 수 있다는 겁니다.
 
 ```python
 # Get a session value by its key (e.g. 'my_car'), raising a KeyError if the key is not present
@@ -104,7 +105,8 @@ request.session['my_car']['wheels'] = 'alloy'
 request.session.modified = True
 ```
 
-> **참고:** You can change the behavior so the site will update the database/send cookie on every request by adding `SESSION_SAVE_EVERY_REQUEST = True` into your project settings (**locallibrary/locallibrary/settings.py**).
+> [!NOTE]
+> You can change the behavior so the site will update the database/send cookie on every request by adding `SESSION_SAVE_EVERY_REQUEST = True` into your project settings (**locallibrary/locallibrary/settings.py**).
 
 ## 간단한 예제 — 방문자수 받아오기
 
@@ -134,7 +136,8 @@ def index(request):
 
 먼저 `'num_visits'` 세션 키 값을 가져오도록 합니다, 그리고 만약 전에 방문한적이 없다면 0이 되도록 합니다. 매번 요청받을 때 마다, 값을 증가시키고 세션에 값을 저장합니다 (유저의 다음 방문을 위해서요). context 변수를 통해 template에 `num_visits` 변수가 전달됩니다.
 
-> **참고:** 이 지점에서 우리는 브라우저가 쿠키를 지원하는 지 그렇지 않은지 테스트할 수도 있습니다(예제로서 [How to use sessions](https://docs.djangoproject.com/en/2.0/topics/http/sessions/) 를 보도록하십시오). 또한 쿠키를 지원하는 지와는 별개로 UI를 디자인할 것입니다.
+> [!NOTE]
+> 이 지점에서 우리는 브라우저가 쿠키를 지원하는 지 그렇지 않은지 테스트할 수도 있습니다(예제로서 [How to use sessions](https://docs.djangoproject.com/en/2.0/topics/http/sessions/) 를 보도록하십시오). 또한 쿠키를 지원하는 지와는 별개로 UI를 디자인할 것입니다.
 
 메인 HTML template(**/locallibrary/catalog/templates/index.html**) "Dynamic content" 섹션 밑 부분에 context 변수가 보일 수 있도록 밑에 보이는 굵은 선으로 표시된 코드를 추가해주세요:
 
diff --git a/files/ko/learn/server-side/django/skeleton_website/index.md b/files/ko/learn/server-side/django/skeleton_website/index.md
index 15e40aedf8251e..a232c5bab6a352 100644
--- a/files/ko/learn/server-side/django/skeleton_website/index.md
+++ b/files/ko/learn/server-side/django/skeleton_website/index.md
@@ -41,7 +41,8 @@ slug: Learn/Server-side/Django/skeleton_website
 1. 프로젝트 폴더, 기본적인 파일 템플릿과 프로젝트 관리 스크립트(**manage.py**)를 만들기 위해서 `django-admin`을 사용합니다.
 2. 하나 또는 그 이상의 애플리케이션을 만들기 위해서 **manage.py**를 사용합니다.
 
-   > **참고:** 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다.
+   > [!NOTE]
+   > 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다.
 
 3. 프로젝트에 포함시키기 위해 새 어플리케이션들을 등록(register)합니다.
 4. 각 어플리케이션에 대해 url/mapper를 연결(hook up)합니다.
diff --git a/files/ko/learn/server-side/django/testing/index.md b/files/ko/learn/server-side/django/testing/index.md
index 709c5baa09a837..b14b5b19d0047c 100644
--- a/files/ko/learn/server-side/django/testing/index.md
+++ b/files/ko/learn/server-side/django/testing/index.md
@@ -77,7 +77,8 @@ class YourTestClass(TestCase):
 
 대부분의 테스트들을 위한 최선의 기본 클라스는 [django.test.TestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase) 입니다. 이 테스트 클라스는 이것이 실행되기 전에 하나의 깨끗한 데이터베이스를 생성하고, 그리고 이 자체의 트랜젝션에서 모든 테스트를 실행합니다. 이 클라스는 자체의 테스트 클라이언트를 갖고있는데, 이것은 당신이 view 레벨에서 그 코드가 사용자와 상호작용하는 것을 시뮬레이션할 수 있게 합니다. 아래 섹션에서는 이 [TestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase) 기본 클라스를 이용하여 유닛테스트들에 집중할 것입니다.
 
-> **참고:** 이[django.test.TestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase) 클라스는 매우 편리합니다. 그러나 어떤 테스트들은 그들이 필요로하는 것보다 느려지는 결과가 올 수 있습니다(모든 테스트들이 그들 자체의 데이터베이스나 또는 view 상호작용의 셋업이 필요한 것은 아닙니다) 한번 당신이 이 클라스를 통해서 무엇을 할 수 있는지 익숙해진다면, 당신은 더 심플한 테스트 클라스들을 가지고 당신의 몇몇 테스트들을 대체하게 될 것입니다.
+> [!NOTE]
+> 이[django.test.TestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#testcase) 클라스는 매우 편리합니다. 그러나 어떤 테스트들은 그들이 필요로하는 것보다 느려지는 결과가 올 수 있습니다(모든 테스트들이 그들 자체의 데이터베이스나 또는 view 상호작용의 셋업이 필요한 것은 아닙니다) 한번 당신이 이 클라스를 통해서 무엇을 할 수 있는지 익숙해진다면, 당신은 더 심플한 테스트 클라스들을 가지고 당신의 몇몇 테스트들을 대체하게 될 것입니다.
 
 ### 무엇을 테스트해야 하는가?
 
@@ -103,7 +104,8 @@ class Author(models.Model):
 
 단순히, 당신은 당신의 요구에 따라 만들어지 메소드들 `get_absolute_url()` 과 `__str__()` 이 원래 요구된 대로 작동하는지 체크해야합니다. 왜냐하면 이것들은 당신이 만들어낸 코드/비즈니스 로직이기 때문입니다. `get_absolute_url()`의 경우에 있어서는 Django의 reverse() 메소드는 적당하게 작동되었다고 신뢰할 수 있습니다, 그래서 당신이 테스트해야 하는 것은 실제로 정의되어온 관련된 view 입니다.
 
-> **참고:** 영특한 독자들은 date of birth와 date of death를 합리적인 값으로 제한해야 한다고 적어야 하고, 그리고 death는 birth보다 뒤에 왔는지를 체크해야 한다고 할 것입니다. Django에 있어서 이 제약은 당신의 폼클라스에 추가될 것입니다(당신이 그 필드들의 이러한 모습을 모델 레벨이 아니라 오직 폼 레벨에서 사용될 수 있도록 인증을 정의할 수 있다고 할지라도 말입니다)
+> [!NOTE]
+> 영특한 독자들은 date of birth와 date of death를 합리적인 값으로 제한해야 한다고 적어야 하고, 그리고 death는 birth보다 뒤에 왔는지를 체크해야 한다고 할 것입니다. Django에 있어서 이 제약은 당신의 폼클라스에 추가될 것입니다(당신이 그 필드들의 이러한 모습을 모델 레벨이 아니라 오직 폼 레벨에서 사용될 수 있도록 인증을 정의할 수 있다고 할지라도 말입니다)
 
 이런 것들을 마음에 두고서 테스트를 정의하고 실행해봅시다.
 
@@ -124,7 +126,8 @@ catalog/
 
 당신의 LocalLibrary 프로젝트에서 위와 같은 구조의 파일을 만드십시오. \_\_init\_\_.py 파일은 비어있는 파일입니다.(이것은 Python에게 이 디렉토리가 패키지임을 알려줍니다) skeleton 테스트파일인 /catalog/tests.py를 복사하여 이름을 바꿔서 위의 세개의 테스트파일을 만드십시오.
 
-> **참고:** 이 skeleton 테스트파일 **/catalog/tests.py 은 우리가** [Django skeleton website](/ko/docs/Learn/Server-side/Django/skeleton_website) 를 만들었을 때 자동으로 생성됩니다. 당신의 테스트들을 여기에 모두 넣는 것도 괜찮습니다만, 당신이 적절하게 테스트를 해나가면 당신은 금방 매우 크고, 관리할 필요 없는 테스트파일로 끝나게 될 것입니다.
+> [!NOTE]
+> 이 skeleton 테스트파일 **/catalog/tests.py 은 우리가** [Django skeleton website](/ko/docs/Learn/Server-side/Django/skeleton_website) 를 만들었을 때 자동으로 생성됩니다. 당신의 테스트들을 여기에 모두 넣는 것도 괜찮습니다만, 당신이 적절하게 테스트를 해나가면 당신은 금방 매우 크고, 관리할 필요 없는 테스트파일로 끝나게 될 것입니다.
 >
 > 이 skeleton 파일은 우리에게 필요하지 않으니 지우십시오.
 
@@ -169,11 +172,13 @@ class YourTestClass(TestCase):
 - `setUpTestData()` 는 클래스 전체에서 사용되는 설정을 위해서 테스트 시작 때 딱 한 번만 실행됩니다. 테스트 메쏘드가 실행되면서 수정되거나 변경되지 않을 객체들을 이곳에서 생성할 수 있습니다.
 - `setUp()` 은 각각의 테스트 메쏘드가 실행될 때마다 실행됩니다. 테스트 중 내용이 변경될 수 있는 객체를 이곳에서 생성할 수 있습니다 (모든 테스트 메쏘드는 방금 막 생성된 ("fresh") 오브젝트를 입력받게 됩니다).
 
-> **참고:** 테스트 클래스는 위 예제에서 사용하지 않은 `tearDown(`h 메소드를 가지고 있습니다. 이 메소드는 특히 데이터베이스 테스트에는 유용하지가 않은데 바로 베이스 클래스인 `TestCase` 가 데이터베이스 삭제(teardown) 을 처리해주기 때문입니다.
+> [!NOTE]
+> 테스트 클래스는 위 예제에서 사용하지 않은 `tearDown(`h 메소드를 가지고 있습니다. 이 메소드는 특히 데이터베이스 테스트에는 유용하지가 않은데 바로 베이스 클래스인 `TestCase` 가 데이터베이스 삭제(teardown) 을 처리해주기 때문입니다.
 
 아래에는 `Assert` 함수를 사용하여 조건이 참, 거짓 또는 동일한지 테스트하는 여러 가지 테스트 메서드가 있습니다 (`AssertTrue`, `AssertFalse`, `AssertEqual`). 조건이 예상대로 실행되지 않으면 테스트가 실패하고 콘솔에 오류를 보고합니다.
 
-> **참고:** 일반적으로 위와 같이 테스트에 **print()** 함수를 포함하면 **안**됩니다. 여기서는 setup 함수들이 콘솔에서 호출되는 순서를 (다음 절에서) 볼 수 있도록 하기 위해 사용되었습니다.
+> [!NOTE]
+> 일반적으로 위와 같이 테스트에 **print()** 함수를 포함하면 **안**됩니다. 여기서는 setup 함수들이 콘솔에서 호출되는 순서를 (다음 절에서) 볼 수 있도록 하기 위해 사용되었습니다.
 
 ## 어떻게 테스트를 작동시키는가
 
@@ -185,7 +190,8 @@ python3 manage.py test
 
 이 명령은 현재 경로에서 **test\*.py** 패턴을 만족하는 모든 파일을 찾은 후 이들 테스트를 적합한 베이스 클래스를 이용해서 실행합니다 (우리는 현재 여러 개의 테스트 파일을 가지고 있지만 **/catalog/tests/test_models.py** 만이 실제 테스트를 포함하고 있습니다. 기본적으로 각각의 테스트는 실패 결과만을 보고하며, 마지막으로 테스트 결과 요약을 출력합니다.
 
-> **참고:** 만약 `ValueError: Missing staticfiles manifest entry ...` 과 같은 에러를 마주칠 수 있습니다. 이런 에러는 보통 테스팅 도구가 기본적으로 collectstatic을 실행하지 않고, 당신의 앱이 이를 요구하는 storage 클래스를 사용하기 때문일 수 있습니다 ([manifest_strict](https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) 에 더 자세한 정보가 적혀 있습니다). 이 문제를 해결할 수 있는 다양한 방법이 있지만 가장 간단한 방법은 테스트 실행 전에 collectstatic을 실행하는 것입니다.
+> [!NOTE]
+> 만약 `ValueError: Missing staticfiles manifest entry ...` 과 같은 에러를 마주칠 수 있습니다. 이런 에러는 보통 테스팅 도구가 기본적으로 collectstatic을 실행하지 않고, 당신의 앱이 이를 요구하는 storage 클래스를 사용하기 때문일 수 있습니다 ([manifest_strict](https://docs.djangoproject.com/en/2.0/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) 에 더 자세한 정보가 적혀 있습니다). 이 문제를 해결할 수 있는 다양한 방법이 있지만 가장 간단한 방법은 테스트 실행 전에 collectstatic을 실행하는 것입니다.
 >
 > ```bash
 > python3 manage.py collectstatic
@@ -451,7 +457,8 @@ class RenewBookFormTest(TestCase):
 
 나머지 함수들은 폼이 적절한 구간 내에 있는 갱신 일자를 수락하는지와 더불어 부적합한 구간에 있는 일자를 거절하는지를 테스트 합니다. 우리가 테스트용 날짜들을 `datetime.timedelta()` (몇 일이나 몇 주를 나타냅니다)을 이용해서 현재 날짜 근처로(`datetime.date.today()` ) 생성하는 것을 기억해두세요. 그리고나서 우리는 폼을 만들고, 데이터를 집어넣고, 데이터가 유효한지를 테스트합니다.
 
-> **참고:** 여기서 우리는 데이터베이스나 테스트 클라이언트를 사용하지 않습니다. [SimpleTestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase)를 이용해서 테스트 클래스를 만드는 것을 고려해보세요.
+> [!NOTE]
+> 여기서 우리는 데이터베이스나 테스트 클라이언트를 사용하지 않습니다. [SimpleTestCase](https://docs.djangoproject.com/en/2.0/topics/testing/tools/#django.test.SimpleTestCase)를 이용해서 테스트 클래스를 만드는 것을 고려해보세요.
 >
 > 또한 우리는 만약 폼이 유효하지 않을 경우 적절한 에러가 발생하는지 역시 검증해야 합니다. 하지만 보통 이 부분은 view processing의 일부로 처리되기 때문에 다음 섹션에서 다루도록 하겠습니다.
 
@@ -550,7 +557,8 @@ class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView):
 
 아래 코드를 **/catalog/tests/test_views.py** 에 추가해주세요. 여기서 우리는 `SetUp()` 을 이용해서 계정을 생성한 다음 테스트에 사용할 `BookInstance` 객체와 관련된 책 및 기타 정보를 생성합니다. 각각의 테스트 계정에 의해서 책이 반반씩 대출되었지만 일단 우리는 모든 책의 상태를 "maintenance"로 설정합니다. 우리는 테스트 하면서 이들 객체들을 수정할 것이기 때문에 `setUpTestData()` 대신 `SetUp()`을 사용했습니다.
 
-> **참고:** 아래의 `setUp()` 코드는 특정 `Language`의 책을 생성하지만, `Language` 모델이 이전 튜토리얼에서 도전 과제로 생성되었기 때문에 여러분의 코드에는 존재하지 않을 수 있습니다. 이때는 간단히 `Language` 객체를 불러오거나 생성하는 코드를 주석처리 해주세요. 같은 작업을 곧 나올 `RenewBookInstancesViewTest` 에도 해줘야 합니다.
+> [!NOTE]
+> 아래의 `setUp()` 코드는 특정 `Language`의 책을 생성하지만, `Language` 모델이 이전 튜토리얼에서 도전 과제로 생성되었기 때문에 여러분의 코드에는 존재하지 않을 수 있습니다. 이때는 간단히 `Language` 객체를 불러오거나 생성하는 코드를 주석처리 해주세요. 같은 작업을 곧 나올 `RenewBookInstancesViewTest` 에도 해줘야 합니다.
 
 ```python
 import datetime
@@ -845,7 +853,8 @@ Add the following tests to the bottom of the test class. These check that only u
         self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future)
 ```
 
-> **경고:** 만약 당신이 class `RenewBookForm(forms.Form)` 대신에 class `RenewBookModelForm(forms.ModelForm)` 을 사용한다면, form의 필드명은 **'renewal_date'** 대신 **'due_back'**으로 나타날 것입니다.
+> [!WARNING]
+> 만약 당신이 class `RenewBookForm(forms.Form)` 대신에 class `RenewBookModelForm(forms.ModelForm)` 을 사용한다면, form의 필드명은 **'renewal_date'** 대신 **'due_back'**으로 나타날 것입니다.
 
 The next test (add this to the class too) checks that the view redirects to a list of all borrowed books if renewal succeeds. What differs here is that for the first time we show how you can `POST` data using the client. The post _data_ is the second argument to the post function, and is specified as a dictionary of key/values.
 
@@ -857,7 +866,8 @@ The next test (add this to the class too) checks that the view redirects to a li
         self.assertRedirects(response, reverse('all-borrowed'))
 ```
 
-> **경고:** The _all-borrowed_ view was added as a _challenge_, and your code may instead redirect to the home page '/'. If so, modify the last two lines of the test code to be like the code below. The `follow=True` in the request ensures that the request returns the final destination URL (hence checking `/catalog/` rather than `/`).
+> [!WARNING]
+> The _all-borrowed_ view was added as a _challenge_, and your code may instead redirect to the home page '/'. If so, modify the last two lines of the test code to be like the code below. The `follow=True` in the request ensures that the request returns the final destination URL (hence checking `/catalog/` rather than `/`).
 >
 > ```python
 >  response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True )
diff --git a/files/ko/learn/server-side/express_nodejs/index.md b/files/ko/learn/server-side/express_nodejs/index.md
index 49cbc4bb801c5a..179a906ab5c03e 100644
--- a/files/ko/learn/server-side/express_nodejs/index.md
+++ b/files/ko/learn/server-side/express_nodejs/index.md
@@ -11,7 +11,8 @@ Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 구동되
 
 이 장의 내용은 Server-side 웹 프로그래밍과 웹 프레임워크에 대한 이해가 필요합니다. 잘 모르겠다면 [Server-side website programming first steps](/ko/docs/Learn/Server-side/First_steps) 을 먼저 확인해보세요. 일반적인 프로그래밍 컨셉과 [JavaScript](/ko/docs/Web/JavaScript) 의 지식이 요구되지만, 핵심까지 세세하게 알 필요는 없습니다.
 
-> **참고:** 여기서는 클라이언트 측에서의 자바스크립에 관한 많은 유용한 자료들을 이용할 수 있다. [JavaScript](/ko/docs/Web/JavaScript), [JavaScript Guide](/ko/docs/Web/JavaScript/Guide), [JavaScript Basics](/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/ko/docs/Learn/JavaScript) (한 번 배워보자). JavaScript의 핵심과 컨셉은 Node.js를 이용한 서버측 개발과 같으므로, 여기의 자료들을 이용하는 게 좋을 것이다. Node.js 는HTTP서버를 구축하고 파일 시스템에 접근하는 등의 브라우저가 필요없는 환경에서에서 유용한 기능을 제공하는 [additional APIs](https://nodejs.org/dist/latest-v6.x/docs/api/documentation.htm)를 제공하지만, 브라우저나 DOM에서 작동되는 JavaScript API는 지원하지 않는다.
+> [!NOTE]
+> 여기서는 클라이언트 측에서의 자바스크립에 관한 많은 유용한 자료들을 이용할 수 있다. [JavaScript](/ko/docs/Web/JavaScript), [JavaScript Guide](/ko/docs/Web/JavaScript/Guide), [JavaScript Basics](/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/ko/docs/Learn/JavaScript) (한 번 배워보자). JavaScript의 핵심과 컨셉은 Node.js를 이용한 서버측 개발과 같으므로, 여기의 자료들을 이용하는 게 좋을 것이다. Node.js 는HTTP서버를 구축하고 파일 시스템에 접근하는 등의 브라우저가 필요없는 환경에서에서 유용한 기능을 제공하는 [additional APIs](https://nodejs.org/dist/latest-v6.x/docs/api/documentation.htm)를 제공하지만, 브라우저나 DOM에서 작동되는 JavaScript API는 지원하지 않는다.
 >
 > 다음 목차에서는 Node.js와 Express 그리고 인터넷과 책에서의 방대한 좋은 자료들에 있는 정보들을 알려준다. 이들은 [How do I get started with Node.js](http://stackoverflow.com/a/5511507/894359) (StackOverflow) 나 [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Quora)에 참고해보자
 
diff --git a/files/ko/learn/server-side/first_steps/client-server_overview/index.md b/files/ko/learn/server-side/first_steps/client-server_overview/index.md
index 5eb28353055675..e6ffdd7cdd9f2f 100644
--- a/files/ko/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/ko/learn/server-side/first_steps/client-server_overview/index.md
@@ -63,7 +63,8 @@ HTML 페이지가 반환 되면 웹 브라우저에 의해 렌더링 될 것입
 
 당신은 링크를 클릭하거나 사이트를 검색하는 간단한 `GET` request를 만들 수 있습니다.(검색엔진의 홈페이지 같은). 예를 들자면, 만약 당신이 MDN에서 "클라이언트 서버 개요"를 검색하면 전송되는 HTTP request는 아래의 텍스트와 매우 유사할 것 입니다(메시지의 일부가 브라우저/설정에 따라 다르므로 같지는 않습니다).
 
-> **참고:** HTTP 메시지의 형식은 "웹 표준" ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt))에 정의 되어 있습니다. 이 수준의 세부사항을 알 필요는 없지만 적어도 이제는 이 모든 것이 어디서 왔는지를 알 수 있습니다!
+> [!NOTE]
+> HTTP 메시지의 형식은 "웹 표준" ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt))에 정의 되어 있습니다. 이 수준의 세부사항을 알 필요는 없지만 적어도 이제는 이 모든 것이 어디서 왔는지를 알 수 있습니다!
 
 #### The request
 
@@ -190,13 +191,15 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
 ```
 
-> **참고:** HTTP responses 그리고 requests를 보여주는 예시들은 [Fiddler](https://www.telerik.com/download/fiddler) 어플리케이션을 사용하여 캡처하였습니다, 그렇지만 당신은 스니퍼(e.g. <http://web-sniffer.net/>)나 브라우저 확장 기능인 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/) 같은 것을 사용하여 확인 할 수 있습니다. 이러한 것을 직접 시도해보세요. 링크된 도구들을 사용하여 여러 사이트들을 돌아다니고 프로필 정보를 수정 하여 다양한 requests 와 responses를 확인해보세요. 현대의 대부분 브라우저는 네트워크 요청을 모니터 할수 있는 도구 또한 가지고 있습니다 (예를들면, Firefox가 가진 도구인 [Network Monitor](/ko/docs/Tools/Network_Monitor) ).
+> [!NOTE]
+> HTTP responses 그리고 requests를 보여주는 예시들은 [Fiddler](https://www.telerik.com/download/fiddler) 어플리케이션을 사용하여 캡처하였습니다, 그렇지만 당신은 스니퍼(e.g. <http://web-sniffer.net/>)나 브라우저 확장 기능인 [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/) 같은 것을 사용하여 확인 할 수 있습니다. 이러한 것을 직접 시도해보세요. 링크된 도구들을 사용하여 여러 사이트들을 돌아다니고 프로필 정보를 수정 하여 다양한 requests 와 responses를 확인해보세요. 현대의 대부분 브라우저는 네트워크 요청을 모니터 할수 있는 도구 또한 가지고 있습니다 (예를들면, Firefox가 가진 도구인 [Network Monitor](/ko/docs/Tools/Network_Monitor) ).
 
 ## Static sites
 
 정적 사이트는 특정 리소스가 요청될 때마다 서버에서 하드 코딩된 동일한 컨텐츠를 반환하는 사이트 입니다. 예를 들면 당신이 `/static/myproduct1.html` 에서 제품에 대한 정보페이지를 가지고 있다면 , 이 페이지는 어떤 유저에게나 동일하게 반환될 것입니다. 만약 당신이 비슷한 제품을 사이트에 추가 하고 싶다면 당신은 다른 페이지를 추가하여야 합니다(예. `myproduct2.html`) . 이것은 실제로 비효율적이 될것입니다 — 제품 페이지가 수천이 된다면? 각 페이지에 (기본 페이지 템플릿, 구조체 등)걸쳐 많은 코드를 반복하고 페이지에 대한 구조를 변경하려는 경우 — 예를 들어 새로운 관련제품에 대한 섹션을 추가하는 경우 — 모든 페이지를 개별적으로 변경해야 합니다.
 
-> **참고:** 정적사이트는 작은수의 페이지만 가지고 있거나 같은 콘텐츠를 모든 유저에게 보내고 싶을때는 좋을 수 있습니다. 그렇지만 페이지 수가 많아지기 시작하면 상당한 비용의 유지비가 필요합니다.
+> [!NOTE]
+> 정적사이트는 작은수의 페이지만 가지고 있거나 같은 콘텐츠를 모든 유저에게 보내고 싶을때는 좋을 수 있습니다. 그렇지만 페이지 수가 많아지기 시작하면 상당한 비용의 유지비가 필요합니다.
 
 어떻게 작동하는지 다시 살펴보겠습니다, 마지막 기사에서 살펴본 정적 사이트의 아키텍쳐는다이어그램을 다시 살펴보면
 
@@ -272,7 +275,8 @@ urlpatterns = [
 ]
 ```
 
-> **참고:** url () 함수의 첫 번째 매개 변수는 "정규 표현식"(RegEx 또는 RE)이라는 패턴 일치 기술을 사용하기 때문에 조금 이상하게 보일 수 있습니다 (예 : r' ^ junior / $ '). 위의 하드 코딩 된 값 대신 URL에서 패턴을 일치시키고 뷰 기능에서 매개 변수로 사용할 수있는 것 외에는 정규 표현식이 어떻게 작동하는지 알 필요가 없습니다. 예를 들어, 정말 간단한 RegEx는 "하나의 대문자와 일치하고 4 \~ 7 자의 소문자가옵니다"라고 말할 수 있습니다
+> [!NOTE]
+> url () 함수의 첫 번째 매개 변수는 "정규 표현식"(RegEx 또는 RE)이라는 패턴 일치 기술을 사용하기 때문에 조금 이상하게 보일 수 있습니다 (예 : r' ^ junior / $ '). 위의 하드 코딩 된 값 대신 URL에서 패턴을 일치시키고 뷰 기능에서 매개 변수로 사용할 수있는 것 외에는 정규 표현식이 어떻게 작동하는지 알 필요가 없습니다. 예를 들어, 정말 간단한 RegEx는 "하나의 대문자와 일치하고 4 \~ 7 자의 소문자가옵니다"라고 말할 수 있습니다
 
 웹프레임 워크는 뷰 함수가 데이터베이스안의 정보를 가져오는 것 또한 쉽게 만들어 줍니다. 데이터 구조는 기본 데이터베이스에 저장할 필드를 정의하는 Python 클래스 인 모델에서 정의됩니다. "team_type"필드를 가진 Team이라는 모델이 있다면 간단한 쿼리 구문을 사용하여 특정 유형의 모든 팀을 되 찾을 수 있습니다.
 
diff --git a/files/ko/learn/server-side/first_steps/introduction/index.md b/files/ko/learn/server-side/first_steps/introduction/index.md
index 733ffaa74a84d5..dd106ad5cc521c 100644
--- a/files/ko/learn/server-side/first_steps/introduction/index.md
+++ b/files/ko/learn/server-side/first_steps/introduction/index.md
@@ -67,7 +67,8 @@ _아래의 다이어그램은 정적사이트의 기본적인 웹 구조를 보
 
 개발자는 일반적으로 **web frameworks**를 이용하여 코드를 작성 합니다. 웹 프레임 워크는 일반적인 문제를 해결하고 개발 속도를 높이며 특정 도메인에서 직면하는 다양한 유형의 작업을 단순화하도록 설계된 함수, 객체, 규칙 및 기타 코드 구성 요소의 모음입니다. 다시 말하지만 클라이언트와 서버 측 코드 모두 프레임 워크를 사용하지만 도메인은 매우 다르므로 프레임 워크도 다릅니다. 클라이언트 측 웹 프레임 워크는 레이아웃 및 프리젠 테이션 작업을 단순화하는 반면 서버 측 웹 프레임 워크는 직접 구현해야하는 많은 "공통"웹 서버 기능을 제공합니다(예: 세션 지원, 사용자와 인증을 지원, 데이터베이스와 쉬운 연결, 템플리트 라이브러리, 기타 등등.).
 
-> **참고:** 클라이언트 측 프레임워크는 때때로 클라이언트측 코드를 개발하는 속도를 올릴 수 있게 도와주도록 사용하지만, 당신은 모든 코드를 직접 작성 할 수도 있습니다; 사실은 당신이 작고, 간단한 사이트의 UI를 만든다면 당신이 직접 작성하는 코드가 더 빠르고 효과적일수 있습니다. 이와 대조적으로, 당신은 서버측 웹 앱의 컴포넌트를 프레임 워크 없이 작성 하는것은 거의 고려 하지 않을 것 입니다 — 파이썬에서 HTTP 서버와 같은 중요한 기능구현을 처음부터 하는 것은 어렵지만 Django와 같은 Python 웹 프레임 워크는 다른 유용한 도구와 함께 즉시 사용할 수있는 도구를 제공합니다.
+> [!NOTE]
+> 클라이언트 측 프레임워크는 때때로 클라이언트측 코드를 개발하는 속도를 올릴 수 있게 도와주도록 사용하지만, 당신은 모든 코드를 직접 작성 할 수도 있습니다; 사실은 당신이 작고, 간단한 사이트의 UI를 만든다면 당신이 직접 작성하는 코드가 더 빠르고 효과적일수 있습니다. 이와 대조적으로, 당신은 서버측 웹 앱의 컴포넌트를 프레임 워크 없이 작성 하는것은 거의 고려 하지 않을 것 입니다 — 파이썬에서 HTTP 서버와 같은 중요한 기능구현을 처음부터 하는 것은 어렵지만 Django와 같은 Python 웹 프레임 워크는 다른 유용한 도구와 함께 즉시 사용할 수있는 도구를 제공합니다.
 
 ## 서버측에서 무엇을 할 수 있나요?
 
@@ -87,7 +88,8 @@ Amazon에서 얼마나 많은 제품을 사용할 수 있는지 상상해보십
 
 왜냐하면 데이터베이스의 정보는 다른 비즈니스 시스템에 의해 간단히 공유되고 업데이트 될 수 있기 때문입니다(예를 들어, 제품이 온라인 또는 상점에서 판매 될 때, 상점은 재고 데이터베이스를 갱신 할 수 있습니다).
 
-> **참고:** 효율적인 저장 및 정보 전달을위한 서버 측 코드의 이점을보기 위해 상상력을 집중하지 않아도됩니다:
+> [!NOTE]
+> 효율적인 저장 및 정보 전달을위한 서버 측 코드의 이점을보기 위해 상상력을 집중하지 않아도됩니다:
 >
 > 1. Amazon 또는 기타 전자 상거래 사이트로 이동하십시오.
 > 2. 여러 개의 키워드를 검색하고 결과가 나타나더라도 페이지 구조가 변하지 않는지 유의 하십시오
@@ -101,7 +103,8 @@ Amazon에서 얼마나 많은 제품을 사용할 수 있는지 상상해보십
 
 사용자의 습관에 대한 면밀한 분석은 그들의 흥미를 예측하거나 사용자 맞춤 응답과 알림을 주는데에 사용 될 수 있습니다, 예를 들어 이전에 방문했거나 인기있는 위치 목록을지도에서 볼 수 있습니다.
 
-> **참고:** 익명의 사용자로 [Google Maps](https://maps.google.com/)로 이동하고 **길 찾기** 버튼을 선택한 다음 여행의 시작 및 종료 지점을 입력하십시오. 이제 Google 계정을 사용하여 시스템에 로그인하십시오 (이 과정에 대한 정보는 아래에서 방향을 선택하는 패널에 나타납니다). 이제 웹 사이트에서 시작 지점과 종료 지점으로 집과 직장 위치를 선택할 수 있습니다 (아직 완료하지 않았다면이 세부 정보를 저장하십시오).
+> [!NOTE]
+> 익명의 사용자로 [Google Maps](https://maps.google.com/)로 이동하고 **길 찾기** 버튼을 선택한 다음 여행의 시작 및 종료 지점을 입력하십시오. 이제 Google 계정을 사용하여 시스템에 로그인하십시오 (이 과정에 대한 정보는 아래에서 방향을 선택하는 패널에 나타납니다). 이제 웹 사이트에서 시작 지점과 종료 지점으로 집과 직장 위치를 선택할 수 있습니다 (아직 완료하지 않았다면이 세부 정보를 저장하십시오).
 
 ### 컨텐츠에 대한 접근 제한
 
@@ -112,13 +115,15 @@ Amazon에서 얼마나 많은 제품을 사용할 수 있는지 상상해보십
 - Facebook과 같은 소셜 네트워크는 사용자가 자신의 데이터를 완벽하게 제어 할 수 있도록 허용하지만 친구 만 보거나 댓글을 달 수 있습니다. 사용자는 자신의 데이터를 볼 수있는 사용자를 결정하고, 확장자별로 피드에 데이터가 표시됩니다 — 승인은 사용자 환경의 핵심 부분입니다!
 - 현재 당신이 보고 있는 이 사이트는 모든 사람들이 기사를 볼 수 있지만 로그인 한 사용자만 내용을 편집 할 수 있습니다. 이를 시도하려면 이 페이지 상단의 편집 버튼을 클릭하십시오 - 로그인되어있는 경우 편집보기가 표시됩니다. 로그인하지 않으면 가입 페이지로 이동합니다.
 
-> **참고:** 콘텐츠에 대한 액세스가 제어되는 다른 실제 사례를 고려하십시오. 예를 들어 은행의 온라인 사이트로 이동하면 무엇을 볼 수 있습니까? 계정에 로그인 - 어떤 추가 정보를보고 수정할 수 있습니까? 은행만 변경 될 수 있음을 알 수 있는 정보는 무엇입니까?
+> [!NOTE]
+> 콘텐츠에 대한 액세스가 제어되는 다른 실제 사례를 고려하십시오. 예를 들어 은행의 온라인 사이트로 이동하면 무엇을 볼 수 있습니까? 계정에 로그인 - 어떤 추가 정보를보고 수정할 수 있습니까? 은행만 변경 될 수 있음을 알 수 있는 정보는 무엇입니까?
 
 ### 세션과 상태 저장
 
 개발자는 서버 프로그래밍을 사용하여 **sessions**을 만들 수 있습니다 — 서버가 현재 사이트의 사용자 정보를 저장하거나 정보에 기반한 다른 응답을 보낼 수 있는 기본적인 메커니즘 입니다. 예를 들어, 사이트에서 사용자가 이전에 로그인하여 이메일 또는 주문 내역에 대한 링크를 표시하거나 간단한 게임의 상태를 저장하여 사용자가 사이트를 다시 이용할 때 떠났던 부분부터 다시 할 수 있습니다.
 
-> **참고:** 구독 모델이있는 신문 사이트를 방문하여 많은 수의 탭을 엽니다(예: [The Age](http://www.theage.com.au/)). 몇 시간 / 일 동안 사이트를 계속 방문하십시오. 결국 구독 방법을 설명하는 페이지로 리디렉션되기 시작하고 기사에 액세스 할 수 없게됩니다. 이 정보는 쿠키에 저장된 세션 정보의 예 입니다.
+> [!NOTE]
+> 구독 모델이있는 신문 사이트를 방문하여 많은 수의 탭을 엽니다(예: [The Age](http://www.theage.com.au/)). 몇 시간 / 일 동안 사이트를 계속 방문하십시오. 결국 구독 방법을 설명하는 페이지로 리디렉션되기 시작하고 기사에 액세스 할 수 없게됩니다. 이 정보는 쿠키에 저장된 세션 정보의 예 입니다.
 
 ### 알림과 대화
 
@@ -130,7 +135,8 @@ Amazon에서 얼마나 많은 제품을 사용할 수 있는지 상상해보십
 - Amazon은 당신 관심을 가질만한 이미 구입했거나 본 제품과 유사한 제품을 제안하는 제품 전자 메일을 정기적으로 보냅니다.
 - 웹서버는 사이트의 관리자에게 서버의 메모리가 부족하거나 의심스러운 활동을 하는 사용자가 있을때 메시지를 보내서 경고 할 수 있습니다.
 
-> **참고:** 가장 일반적인 유형의 알림은 "등록 확인"입니다. 관심있는 큰 사이트 (Google, Amazon, Instagram 등)를 선택하고 이메일 주소를 사용하여 새 계정을 만드십시오. 귀하는 귀하의 등록을 확인하거나 귀하의 계정을 인증하기 위해 승인을 요구하는 이메일을 곧 받게 될 것입니다.
+> [!NOTE]
+> 가장 일반적인 유형의 알림은 "등록 확인"입니다. 관심있는 큰 사이트 (Google, Amazon, Instagram 등)를 선택하고 이메일 주소를 사용하여 새 계정을 만드십시오. 귀하는 귀하의 등록을 확인하거나 귀하의 계정을 인증하기 위해 승인을 요구하는 이메일을 곧 받게 될 것입니다.
 
 ### 정보 분석
 
@@ -138,7 +144,8 @@ Amazon에서 얼마나 많은 제품을 사용할 수 있는지 상상해보십
 
 그 예로, Amazon과 Google둘다 전에 검색하였던 결과(및 구매)를 바탕으로 제품 광고를 합니다.
 
-> **참고:** Facebook 사용자인 경우 기본 피드로 이동하여 게시물 스트림을 확인하십시오. 일부 게시물의 숫자 순서가 어긋나는 것에 유의하십시오. 특히 "좋아요"가 많은 게시물은 최근 게시물보다 목록에서 더 자주 표시됩니다. 또한 어떤 광고가 게재 되고 있는지 살펴보십시오. 다른 사이트에서 봤던 광고를 볼 수 있습니다. 콘텐츠 및 광고를 강조하는 Facebook의 알고리즘은 약간의 수수께끼 일 수 있지만 좋아하는 것과 보는 습관에 달려 있다는 것은 분명합니다.
+> [!NOTE]
+> Facebook 사용자인 경우 기본 피드로 이동하여 게시물 스트림을 확인하십시오. 일부 게시물의 숫자 순서가 어긋나는 것에 유의하십시오. 특히 "좋아요"가 많은 게시물은 최근 게시물보다 목록에서 더 자주 표시됩니다. 또한 어떤 광고가 게재 되고 있는지 살펴보십시오. 다른 사이트에서 봤던 광고를 볼 수 있습니다. 콘텐츠 및 광고를 강조하는 Facebook의 알고리즘은 약간의 수수께끼 일 수 있지만 좋아하는 것과 보는 습관에 달려 있다는 것은 분명합니다.
 
 ## 요약
 
diff --git a/files/ko/learn/server-side/first_steps/web_frameworks/index.md b/files/ko/learn/server-side/first_steps/web_frameworks/index.md
index dc67212241a3e0..403fadd14f3d7d 100644
--- a/files/ko/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/ko/learn/server-side/first_steps/web_frameworks/index.md
@@ -143,7 +143,8 @@ def youngest(request):
 
 예를들어, Django 템플릿 시스템은 구체화된 "double-handlebars" 구조 (예를 들어 `\{{ variable_name }}`)를 사용하도록 허용하는데, 이것은 페이지가 로딩될 때 뷰 함수의 값들로 대체될 수 있습니다. 템플릿 시스템은 또한 다양한 표현식을 지원하는데 (예를 들어 : `{% expression %}`), 템플리트가 템플리트에 전달 된 목록 값을 반복하는 것과 같은 간단한 조작을 수행 할 수 있습니다.
 
-> **참고:** 다른 대부분의 템플릿 시스템들은 비슷한 문법을 사용합니다, 예: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 등등.
+> [!NOTE]
+> 다른 대부분의 템플릿 시스템들은 비슷한 문법을 사용합니다, 예: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), 등등.
 
 아래의 코드 스니펫은 그것이 어떻게 작동 하는지 보여줍니다. 이전 섹션에 사용한 "youngest team" 예제를 다시 보겠습니다, HTML 템플릿은 뷰에서 `youngest_teams`이라고 불리는 목록 변수를 전달 받습니다. HTML 골격 내에는 `youngest_teams`이 있는지 체크하는 표현식이 있고, 있다면 `for` 루프를 통해 반복문을 만드는 것을 볼 수 있습니다. 각 반복당 템플릿은 팀리스트에 있는 `team_name`을 출력해줍니다.
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index 74262d62f35491..048abcd8605a5c 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -26,7 +26,9 @@ JavaScript 프레임워크는 최신 프론트엔드 웹 개발의 필수 부분
 
 결과적으로 코드는 더욱 풍부해지고 전문적이게 될 것이며, 프레임워크가 구축하고 있는 근본적인 웹 플랫폼 기능을 이해한다면 보다 확실하게 문제를 해결할 수 있을 겁니다.
 
-> **알림:** ### 프론트 개발자가 되고 싶으신가요?목표를 달성하는데 필요한 모든 필수 정보가 포함 된 과정을 구성했습니다.[시작하기](/ko/docs/Learn/Front-end_web_developer)
+> [!CALLOUT]
+>
+> ### 프론트 개발자가 되고 싶으신가요?목표를 달성하는데 필요한 모든 필수 정보가 포함 된 과정을 구성했습니다.[시작하기](/ko/docs/Learn/Front-end_web_developer)
 
 ## 입문 가이드
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
index 868e2e8bbbad6f..51ed203c622921 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md
@@ -194,7 +194,8 @@ Vue 덕분에 UI를 구축하기 위해 자체 함수를 작성할 필요가 없
 
 이 모듈의 각 프레임워크에는 대규모 활성 커뮤니티가 있으므로, 각 프레임워크의 에코시스템은 개발자 경험을 개선하는 도구를 제공합니다. 이러한 도구를 사용하면 테스트(응용 프로그램이 제대로 작동하는지 확인) 또는 Linting(코드에 오류가 없고 스타일이 일관성이 있는지 확인)과 같은 항목을 쉽게 추가할 수 있습니다.
 
-> **참고:** 웹 도구 개념에 대해 자세히 알아보려면, [클라이언트 측 도구 개요](/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)를 확인해주세요.
+> [!NOTE]
+> 웹 도구 개념에 대해 자세히 알아보려면, [클라이언트 측 도구 개요](/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)를 확인해주세요.
 
 ### 구획화
 
@@ -265,7 +266,8 @@ JavaScript와 브라우저의 기본 기능을 사용하여 라우터를 만드
 | Vue        | Modern (IE9+ in Vue 2)              | HTML-based   | HTML-based, JSX, Pug   | [공식 문서](https://cli.vuejs.org/guide/browser-compatibility.html)         |
 | Ember      | Modern (IE9+ in Ember version 2.18) | Handlebars   | Handlebars, TypeScript | [공식 문서](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) |
 
-> **참고:** 우리가 "HTML-based"이라고 설명한 DSL에는 공식 이름이 없습니다. 실제 DSL은 아니지만 비표준 HTML이므로, 강조할 가치가 있다고 생각합니다.
+> [!NOTE]
+> 우리가 "HTML-based"이라고 설명한 DSL에는 공식 이름이 없습니다. 실제 DSL은 아니지만 비표준 HTML이므로, 강조할 가치가 있다고 생각합니다.
 
 ### 프레임워크에 강력한 커뮤니티가 있습니까?
 
@@ -299,7 +301,8 @@ Vue 팀은 [Vue를 다른 인기 있는 프레임워크와 철저하게 비교
 
 이 모듈에서 다루는 모든 프레임워크는 서버 측 렌더링과 클라이언트 측 렌더링을 지원합니다. React의 경우 [Next.js](https://nextjs.org/), Vue의 경우 [Nuxt.js](https://nuxtjs.org/)(헷갈릴 수 있지만, 관련 없음!), Ember의 경우 [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot), Angular의 경우 [Angular Universal](https://angular.io/guide/universal)를 확인하세요.
 
-> **참고:** 일부 SSR 솔루션은 커뮤니티에서 작성하고 유지 관리하는 반면, 일부는 프레임워크 유지 관리자가 제공하는 "공식" 솔루션입니다.
+> [!NOTE]
+> 일부 SSR 솔루션은 커뮤니티에서 작성하고 유지 관리하는 반면, 일부는 프레임워크 유지 관리자가 제공하는 "공식" 솔루션입니다.
 
 ### 정적 사이트 생성기
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md
index 5da3cda1f17a13..2119946c1100e5 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md
@@ -280,7 +280,8 @@ const prevTaskLength = usePrevious(tasks.length);
 
 여기서 우리는 `usePrevious()`를 호출하여 다음과 같이 할 일 상태의 길이를 추적합니다.
 
-> **참고:** 이제 두 개의 파일에서 `usePrevious()`를 활용하고 있으므로, 효율성이 좋은 리팩터는 `usePrevious()` 함수를 자체 파일로 이동하고, 해당 파일에서 내보내고, 당신이 이 사용자 지정 훅을 필요로 하는 곳에 가져오는 것입니다. 이 작업을 마치면 연습으로 해보세요
+> [!NOTE]
+> 이제 두 개의 파일에서 `usePrevious()`를 활용하고 있으므로, 효율성이 좋은 리팩터는 `usePrevious()` 함수를 자체 파일로 이동하고, 해당 파일에서 내보내고, 당신이 이 사용자 지정 훅을 필요로 하는 곳에 가져오는 것입니다. 이 작업을 마치면 연습으로 해보세요
 
 ### `useEffect()`를 사용하여 제목 포커스 제어
 
@@ -308,7 +309,8 @@ useEffect(() => {
 
 `useRef()` 및 `useEffect()`는 다소 고급 기능이며, 이러한 기능을 사용하는 것을 자랑스럽게 생각하세요! 더 많이 연습할 수 있는 기회를 찾으세요, 그렇게 하면 사용자를 위한 포괄적인 경험을 만들 수 있기 때문입니다. 기억하세요, 우리 애플리케이션은 키보드 없이는 키보드 사용자가 접근할 수 없었을 것입니다!
 
-> **참고:** 우리 버전과 비교하여 코드를 확인해야 하는 경우, [todo-react repository](https://github.com/mdn/todo-react)에서 샘플 React 애플리케이션 코드의 완성된 버전을 찾을 수 있습니다. 실행 중인 라이브 버전은, <https://mdn.github.io/todo-react>을 참고하세요.
+> [!NOTE]
+> 우리 버전과 비교하여 코드를 확인해야 하는 경우, [todo-react repository](https://github.com/mdn/todo-react)에서 샘플 React 애플리케이션 코드의 완성된 버전을 찾을 수 있습니다. 실행 중인 라이브 버전은, <https://mdn.github.io/todo-react>을 참고하세요.
 
 마지막 기사에서는 학습을 더 진행하는 데 사용할 수 있는 React 리소스 목록을 제공합니다.
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
index 6118c2f199f49d..570f3b0d9cabe2 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md
@@ -89,7 +89,8 @@ export default function Todo() {
 }
 ```
 
-> **참고:** 컴포넌트는 항상 무언가를 반환해야 합니다. 만약 앞으로 컴포넌트를 렌더링하려고 할 때, 아무것도 반환하지 않는 컴포넌트를 만든다면, React는 브라우저에 에러를 표시할 것입니다.
+> [!NOTE]
+> 컴포넌트는 항상 무언가를 반환해야 합니다. 만약 앞으로 컴포넌트를 렌더링하려고 할 때, 아무것도 반환하지 않는 컴포넌트를 만든다면, React는 브라우저에 에러를 표시할 것입니다.
 
 우리가 만든 `Todo` 컴포넌트가 완성되어 사용할 수 있습니다. `App.js`에 다음과 같이 `Todo`를 가져오는 코드를 파일의 상단에 추가하세요.
 
@@ -383,7 +384,8 @@ function FilterButton(props) {
 export default FilterButton;
 ```
 
-> **참고:** 여기서 `<Todo />` 컴포넌트를 처음 만들 때와 동일한 실수를 하고 있다는 것을 알 수 있습니다. 각 버튼이 동일할 것입니다. 괜찮습니다! [필터 버튼으로 돌아가기](/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)에서 이 컴포넌트를 나중에 수정할 것입니다.
+> [!NOTE]
+> 여기서 `<Todo />` 컴포넌트를 처음 만들 때와 동일한 실수를 하고 있다는 것을 알 수 있습니다. 각 버튼이 동일할 것입니다. 괜찮습니다! [필터 버튼으로 돌아가기](/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering#back_to_the_filter_buttons)에서 이 컴포넌트를 나중에 수정할 것입니다.
 
 ## 모든 컴포넌트를 가져오기
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index d09e8b948884df..69370f7884495a 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -63,7 +63,8 @@ const header = (
 );
 ```
 
-> **참고:** 위의 스니펫에 있는 괄호는 JSX에 유일하지도 않고, 여러분의 애플리케이션에 어떠한 영향을 주지도 않습니다. 이들은 여러 줄의 코드가 동일한 표현식의 부분이라는 것을 당신(과 컴퓨터)에게 알려줍니다. header 표현식은 다음과 같이도 쓸 수도 있습니다.
+> [!NOTE]
+> 위의 스니펫에 있는 괄호는 JSX에 유일하지도 않고, 여러분의 애플리케이션에 어떠한 영향을 주지도 않습니다. 이들은 여러 줄의 코드가 동일한 표현식의 부분이라는 것을 당신(과 컴퓨터)에게 알려줍니다. header 표현식은 다음과 같이도 쓸 수도 있습니다.
 
 ```js
 const header = (
@@ -130,7 +131,8 @@ npx create-react-app moz-todo-react
 - 기본적인 앱 아키텍처를 정의하는 파일과 디렉토리의 구조를 만듭니다.
 - 컴퓨터에 깃이 설치되어있다면, 디렉토리를 깃 레포지토리로 초기화합니다.
 
-> **참고:** yarn package manager를 설치했다면, create-react-app은 그것을 npm 대신 기본으로 사용할 것입니다. 두 패키지 매니저가 모두 설치되어있고 NPM을 명시적으로 사용하길 원한다면, create-react-app을 실행할 때 플래그 `--use-npm`을 사용하면 됩니다.
+> [!NOTE]
+> yarn package manager를 설치했다면, create-react-app은 그것을 npm 대신 기본으로 사용할 것입니다. 두 패키지 매니저가 모두 설치되어있고 NPM을 명시적으로 사용하길 원한다면, create-react-app을 실행할 때 플래그 `--use-npm`을 사용하면 됩니다.
 
 ```bash
 npx create-react-app moz-todo-react --use-npm
@@ -316,7 +318,8 @@ serviceWorker.unregister();
 
 이 모든 것이 React에게 우리가 루트로서, 혹은 첫 번째 컴포넌트로서 `App` 컴포넌트를 렌더링하길 원한다고 알려줍니다.
 
-> **참고:** JSX에서, React 컴포넌트와 HTML 요소는 반드시 닫는 태그가 있어야 합니다. `<App>` 혹은 `<img>`라고만 쓰는 것은 오류를 발생시킬 것입니다.
+> [!NOTE]
+> JSX에서, React 컴포넌트와 HTML 요소는 반드시 닫는 태그가 있어야 합니다. `<App>` 혹은 `<img>`라고만 쓰는 것은 오류를 발생시킬 것입니다.
 
 [Service workers](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers)는 앱 성능에 도움이 되고 오프라인에서 일할 수 있는 웹 애플리케이션의 기능을 제공하는 특별한 코드들이지만, 이 기사에서 다루는 범위는 아닙니다. 다섯 번째 줄과 코드 가장 아래에 있는 것은 지울 수 있습니다.
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md
index 40aa48917e8bae..55314730c20643 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md
@@ -54,7 +54,8 @@ React에서는, 다음과 같이 JSX의 요소에 직접 이벤트 처리기를
 </button>
 ```
 
-> **참고:** 이는 HTML에서 인라인 이벤트 처리기를 사용하지 말라고 조언하는 경향이 있는 모범사례 조건과 관련하여 직관에 반하는 것처럼 보일 수 있지만, JSX는 실제로 JavaScript의 일부라는 점을 기억하세요.
+> [!NOTE]
+> 이는 HTML에서 인라인 이벤트 처리기를 사용하지 말라고 조언하는 경향이 있는 모범사례 조건과 관련하여 직관에 반하는 것처럼 보일 수 있지만, JSX는 실제로 JavaScript의 일부라는 점을 기억하세요.
 
 위의 예에서는, `<button>` 요소에 `onClick` props을 추가하고 있습니다. 해당 props의 값은 간단한 경고를 트리거하는 함수입니다.
 
@@ -117,7 +118,8 @@ function handleSubmit(e) {
 
 브라우저에서 "추가" 버튼을 클릭하면 `addTask()` 콜백 함수가 작동한다는 것을 증명할 수 있지만, 입력 필드에 무엇을 입력하고 있는지 알려주는 알림을 받을 수 있다면 좋을 것입니다! 이것이 우리가 다음에 할 일입니다.
 
-> **참고:** 콜백 props의 이름을 `addTask`로 지정하여 props이 무엇을 하는지 쉽게 이해할 수 있도록 했습니다. React 코드에서 접할 수 있는 또 다른 일반적인 규칙은 콜백 props 이름에 `on`이라는 단어를 접두사로 붙인 다음, 실행시킬 이벤트 이름을 붙이는 것입니다. 예를 들어, 우리는 form에 `addTask` 값을 가진 `onSubmit` props을 줄 수 있습니다.
+> [!NOTE]
+> 콜백 props의 이름을 `addTask`로 지정하여 props이 무엇을 하는지 쉽게 이해할 수 있도록 했습니다. React 코드에서 접할 수 있는 또 다른 일반적인 규칙은 콜백 props 이름에 `on`이라는 단어를 접두사로 붙인 다음, 실행시킬 이벤트 이름을 붙이는 것입니다. 예를 들어, 우리는 form에 `addTask` 값을 가진 `onSubmit` props을 줄 수 있습니다.
 
 ## 상태와 `useState` hook
 
@@ -271,7 +273,8 @@ function Form(props) {
 export default Form;
 ```
 
-> **참고:** 작업 이름을 입력하지 않고 추가 버튼을 누르기만 하면 비어있는 작업을 제출할 수 있다는 사실을 알게 될 것입니다. 빈 작업이 추가되지 않도록 하는 방법을 생각할 수 있나요? 힌트로, `handleSubmit()` 함수에 일종의 검사를 추가해야 할 수도 있습니다.
+> [!NOTE]
+> 작업 이름을 입력하지 않고 추가 버튼을 누르기만 하면 비어있는 작업을 제출할 수 있다는 사실을 알게 될 것입니다. 빈 작업이 추가되지 않도록 하는 방법을 생각할 수 있나요? 힌트로, `handleSubmit()` 함수에 일종의 검사를 추가해야 할 수도 있습니다.
 
 ## 종합 : 작업 추가
 
@@ -333,7 +336,8 @@ function addTask(name) {
 npm install nanoid
 ```
 
-> **참고:** yarn을 사용하는 경우, 대신 `yarn add nanoid`가 필요합니다.
+> [!NOTE]
+> yarn을 사용하는 경우, 대신 `yarn add nanoid`가 필요합니다.
 
 이제 `nanoid`를 `App.js` 상단으로 가져올 수 있으므로 이를 사용하여 새 작업에 대한 고유 ID를 만들 수 있습니다. 우선 `App.js` 상단에 다음 구문을 추가합니다.
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md
index 60764a27c5a1e1..28b9cd1cb719c9 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md
@@ -287,7 +287,8 @@ const FILTER_MAP = {
 const FILTER_NAMES = Object.keys(FILTER_MAP);
 ```
 
-> **참고:** 우리는 `App()` 함수 외부에서 이러한 상수들을 정의하고 있습니다. 내부에 정의된 경우, `<App />` 컴포넌트가 다시 렌더링될 때마다 다시 계산되기 때문인데, 우리는 그것을 원하지 않습니다. 이 정보는 애플리케이션이 무엇을 하든 절대 변경되지 않습니다.
+> [!NOTE]
+> 우리는 `App()` 함수 외부에서 이러한 상수들을 정의하고 있습니다. 내부에 정의된 경우, `<App />` 컴포넌트가 다시 렌더링될 때마다 다시 계산되기 때문인데, 우리는 그것을 원하지 않습니다. 이 정보는 애플리케이션이 무엇을 하든 절대 변경되지 않습니다.
 
 ### 필터 렌더링
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
index b0cf3a6223f132..4321679072cb19 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md
@@ -9,7 +9,8 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_
 
 여러분이 React로 개념 증명을 만드는, 곧 사용자가 원하는 작업을 추가, 편집, 그리고 삭제할 수 있으며, 작업을 삭제하지 않고 완료로 표시할 수도 있는 앱을 만드는 작업을 맡게 되었다고 가정해 보겠습니다. 이 기사는 기본 `App` 컴포넌트 구조와 스타일링을 설정하는 방법에 대해서 다루며, 여러분은 개별 컴포넌트 정의와 상호작용성을 배울 준비를 갖추게 될 겁니다.
 
-> **참고:** 여러분의 코드를 우리의 것과 비교하고 싶다면 [todo-react repository](https://github.com/mdn/todo-react) 에서 최종적인 버전의 샘플 React 앱 코드를 확인해보세요. 실행 중인 라이브 버전은 <https://mdn.github.io/todo-react-build/> 에서 볼 수 있습니다.
+> [!NOTE]
+> 여러분의 코드를 우리의 것과 비교하고 싶다면 [todo-react repository](https://github.com/mdn/todo-react) 에서 최종적인 버전의 샘플 React 앱 코드를 확인해보세요. 실행 중인 라이브 버전은 <https://mdn.github.io/todo-react-build/> 에서 볼 수 있습니다.
 
 <table class="learn-box standard-table">
  <tbody>
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
index 4cfb7ffc03e42c..901d78d63b9ae1 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md
@@ -97,7 +97,8 @@ Svelte에서 애플리케이션은 하나 이상의 컴포넌트로 구성됩니
 
 시작합시다.
 
-> **참고:** 처음 몇 개의 컴포넌트를 만드는 과정에서, 컴포넌트 간의 통신 방법과 각각의 장단점에 대해 배우게 될 것입니다.
+> [!NOTE]
+> 처음 몇 개의 컴포넌트를 만드는 과정에서, 컴포넌트 간의 통신 방법과 각각의 장단점에 대해 배우게 될 것입니다.
 
 ## 필터 컴포넌트 추출하기
 
@@ -142,7 +143,8 @@ Svelte에서 애플리케이션은 하나 이상의 컴포넌트로 구성됩니
    <FilterButton {filter} />
    ```
 
-> **참고:** HTML 속성 이름과 변수가 일치할 때, `{variable}`로 대체될 수 있습니다. 그래서 `<FilterButton filter={filter} />` 를 `<FilterButton {filter} />`로 대체할 수 있었습니다.
+> [!NOTE]
+> HTML 속성 이름과 변수가 일치할 때, `{variable}`로 대체될 수 있습니다. 그래서 `<FilterButton filter={filter} />` 를 `<FilterButton {filter} />`로 대체할 수 있었습니다.
 
 잘하고 있네요! 이제 앱을 한번 실행해 보세요. 필터 버튼을 클릭하면 선택된 상태가 되고 스타일이 적절히 업데이트됩니다. 하지만 문제가 있습니다. 할 일(to-do)들이 필터링되지 않습니다. 그 이유는 `filter` 변수가 `Todos` 컴포넌트에서 `FilterButton` 컴포넌트로 prop을 통해 전달되지만, `FilterButton` 컴포넌트에서 발생하는 변경사항이 부모로 다시 전달되지 않기 때문입니다 - 데이터 바인딩은 기본적으로 단방향입니다.- 이 문제를 해결할 방법을 살펴봅시다.
 
@@ -269,7 +271,8 @@ export let onclick = (clicked) => {};
 
 사용자 정의 이벤트를 생성하기 위해 `createEventDispatcher` 유틸리티를 사용할 것입니다. 이 유틸리티는 사용자 정의 이벤트를 발생시킬 수 있는 `dispatch()` 함수를 반환합니다. 이벤트를 발행할 때는 이벤트의 이름과 선택적으로 리스너에게 전달하고 싶은 추가 정보가 담긴 객체를 전달해야 합니다. 이 추가 정보 데이터는 이벤트 객체의 `detail` 속성에서 사용할 수 있습니다.
 
-> **참고:** Svelte의 사용자 정의 이벤트는 일반 DOM 이벤트와 동일한 API를 공유합니다. 또한, 핸들러 없이 `on:event`를 지정함으로써 이벤트를 부모 컴포넌트로 버블링시킬 수 있습니다.
+> [!NOTE]
+> Svelte의 사용자 정의 이벤트는 일반 DOM 이벤트와 동일한 API를 공유합니다. 또한, 핸들러 없이 `on:event`를 지정함으로써 이벤트를 부모 컴포넌트로 버블링시킬 수 있습니다.
 
 우리는 `Todo` 컴포넌트를 수정하여 삭제되는 할 일(to-do)에 대한 추가 정보와 함께 `remove` 이벤트를 발생시킬 것입니다.
 
@@ -490,7 +493,8 @@ on:keydown={(e) => e.key === 'Escape' && onCancel()}
    </div>
    ```
 
-   > **참고:** 이를 두 개의 다른 컴포넌트로 더 나눌 수도 있습니다. 하나는 할 일(to-do)을 편집하기 위한 것이고 다른 하나는 그것을 표시하기 위한 것입니다. 이것은 단일 컴포넌트에서 이 수준의 복잡성을 다루는 것에 대해 얼마나 숙련되어 있는지에 따라 다릅니다. 또한 이를 더 분리하면 다른 컨텍스트에서 이 컴포넌트를 재사용할 수 있게 될지도 고려해야 합니다.
+   > [!NOTE]
+   > 이를 두 개의 다른 컴포넌트로 더 나눌 수도 있습니다. 하나는 할 일(to-do)을 편집하기 위한 것이고 다른 하나는 그것을 표시하기 위한 것입니다. 이것은 단일 컴포넌트에서 이 수준의 복잡성을 다루는 것에 대해 얼마나 숙련되어 있는지에 따라 다릅니다. 또한 이를 더 분리하면 다른 컨텍스트에서 이 컴포넌트를 재사용할 수 있게 될지도 고려해야 합니다.
 
 2. 업데이트 기능을 작동시키기 위해, `Todos` 컴포넌트에서 `update` 이벤트를 처리해야 합니다. 그 `<script>` 섹션에 이 핸들러를 추가하세요.
 
@@ -517,7 +521,8 @@ on:keydown={(e) => e.key === 'Escape' && onCancel()}
 
 보시다시피, Svelte에서 "props-down, events-up" 패턴을 구현하는 것은 쉽습니다. 하지만, 간단한 컴포넌트의 경우 `bind`가 좋은 선택이 될 수 있습니다.
 
-> **참고:** Svelte는 컴포넌트 간 정보를 공유하기 위한 더 고급 메커니즘을 제공합니다. [Context API](https://svelte.dev/docs/svelte#setcontext) and [Stores](https://svelte.dev/docs/svelte-store). Context API는 컴포넌트와 그 자식들이 데이터와 함수를 prop으로 전달하거나 많은 이벤트를 발생시키지 않고 서로 "소통"할 수 있는 메커니즘을 제공합니다. Stores는 계층적으로 관련되지 않은 컴포넌트 간에 반응성 데이터를 공유할 수 있도록 합니다. 이 시리즈에서 나중에 Stores에 대해 더 살펴볼 것입니다.
+> [!NOTE]
+> Svelte는 컴포넌트 간 정보를 공유하기 위한 더 고급 메커니즘을 제공합니다. [Context API](https://svelte.dev/docs/svelte#setcontext) and [Stores](https://svelte.dev/docs/svelte-store). Context API는 컴포넌트와 그 자식들이 데이터와 함수를 prop으로 전달하거나 많은 이벤트를 발생시키지 않고 서로 "소통"할 수 있는 메커니즘을 제공합니다. Stores는 계층적으로 관련되지 않은 컴포넌트 간에 반응성 데이터를 공유할 수 있도록 합니다. 이 시리즈에서 나중에 Stores에 대해 더 살펴볼 것입니다.
 
 ## 지금까지의 코드
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
index a6ce58ff765e0e..5bd9bd26082fd7 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md
@@ -51,7 +51,8 @@ Svelte는 HTML, CSS 및 JavaScript의 고전적인 웹 개발 모델을 고수
 
 현재 주요한 단점은 신생 프레임워크라는 것입니다. 따라서 생태계는 성숙한 프레임워크보다 도구, 지원, 플러그인, 명확한 사용 패턴 등의 측면에서 더 제한적이며 일자리도 적습니다. 그러나 Svelte의 장점은 당신이 그것에 대해 관심을 갖도록 만들기에 충분할 것입니다.
 
-> **참고:** 최근 Svelte는 가장 요청이 많았던 기능 중 하나인 [공식 타입스크립트 지원](https://svelte.dev/blog/svelte-and-typescript)을 추가했습니다. 나중에 이 자습서 시리즈에서 살펴보겠습니다.
+> [!NOTE]
+> 최근 Svelte는 가장 요청이 많았던 기능 중 하나인 [공식 타입스크립트 지원](https://svelte.dev/blog/svelte-and-typescript)을 추가했습니다. 나중에 이 자습서 시리즈에서 살펴보겠습니다.
 
 [Svelte 공식 튜토리얼](https://svelte.dev/tutorial/basics)을 통해 기본 개념을 빠르게 숙지한 후 이 튜토리얼 시리즈로 돌아와서 좀 더 심도 있게 빌드하는 방법을 알아보시기 바랍니다.
 
@@ -106,7 +107,8 @@ npm install
 npm run dev
 ```
 
-> **참고:** degit은 마술 같은 것을 하지 않습니다. 단지 최신 버전의 git repo 콘텐츠를 다운로드하고 압축을 풀 수 있게 해줍니다. 리포지토리의 모든 기록을 다운로드하거나 완전한 로컬 복제본을 생성하지 않기 때문에 `git clone`을 사용하는 것보다 훨씬 빠릅니다.
+> [!NOTE]
+> degit은 마술 같은 것을 하지 않습니다. 단지 최신 버전의 git repo 콘텐츠를 다운로드하고 압축을 풀 수 있게 해줍니다. 리포지토리의 모든 기록을 다운로드하거나 완전한 로컬 복제본을 생성하지 않기 때문에 `git clone`을 사용하는 것보다 훨씬 빠릅니다.
 
 `npm run dev`를 실행한 후 Svelte는 애플리케이션을 컴파일하고 빌드합니다. `localhost:8080`에서 로컬 서버를 시작합니다. Svelte는 파일 업데이트를 감시하고 소스 파일이 변경되면 자동으로 앱을 다시 컴파일하고 새로 고칩니다. 브라우저에 다음과 같이 표시됩니다.
 
@@ -176,7 +178,8 @@ moz-todo-svelte
 <!-- 마크업(0 또는 다른 HTML 엘리먼트들)이 들어갑니다. -->
 ```
 
-> **참고:** 컴포넌트 형식에 대한 자세한 내용은 [Svelte 설명서](https://svelte.dev/docs#Component_format)를 참조하세요.
+> [!NOTE]
+> 컴포넌트 형식에 대한 자세한 내용은 [Svelte 설명서](https://svelte.dev/docs#Component_format)를 참조하세요.
 
 이를 염두에 두고 스타터 템플릿과 함께 제공되는 `src/App.svelte` 파일을 살펴보겠습니다. 다음과 같은 내용이 표시되어야 합니다.
 
@@ -282,7 +285,8 @@ Svelte에서 컴포넌트의 `<style>` 블록 내부 CSS는 해당 컴포넌트
 
 앱을 컴파일할 때 Svelte는 `h1` 스타일 정의를 `h1.svelte-1tky8bj`로 변경한 다음 컴포넌트의 모든 `<h1>` 요소를 `<h1 class="svelte-1tky8bj">`로 수정합니다. 필요에 따라 스타일을 선택합니다.
 
-> **참고:** 이 동작을 재정의하고 `:global()` 한정자를 사용하여 전역적으로 선택기에 스타일을 적용할 수 있습니다([Svelte `<style>` 문서](https://svelte.dev/docs#style)를 보시면 더 많은 정보가 있습니다).
+> [!NOTE]
+> 이 동작을 재정의하고 `:global()` 한정자를 사용하여 전역적으로 선택기에 스타일을 적용할 수 있습니다([Svelte `<style>` 문서](https://svelte.dev/docs#style)를 보시면 더 많은 정보가 있습니다).
 
 ## 몇 가지 변경
 
@@ -418,7 +422,8 @@ npm run dev
 
 git 및 GitHub에 대해 자세히 알아보려면 저희가 정리한 유용한 가이드 링크 목록을 보세요. [Git 및 GitHub](/ko/docs/Learn/Tools_and_testing/GitHub)
 
-> **참고:** git repo를 복제하지 않고 파일을 다운로드하기만 하려면 `npx degit opensas/mdn-svelte-tutorial`과 같은 degit 도구를 사용할 수 있습니다. `npx degit opensas/mdn-svelte-tutorial/01-getting-started`를 사용하여 특정 폴더를 다운로드할 수도 있습니다. Degit은 로컬 git repo를 만들지 않고 지정된 폴더의 파일만 다운로드합니다.
+> [!NOTE]
+> git repo를 복제하지 않고 파일을 다운로드하기만 하려면 `npx degit opensas/mdn-svelte-tutorial`과 같은 degit 도구를 사용할 수 있습니다. `npx degit opensas/mdn-svelte-tutorial/01-getting-started`를 사용하여 특정 폴더를 다운로드할 수도 있습니다. Degit은 로컬 git repo를 만들지 않고 지정된 폴더의 파일만 다운로드합니다.
 
 ### Svelte REPL 사용
 
@@ -447,11 +452,13 @@ REPL을 시작하려면 브라우저를 열고 <https://svelte.dev/repl>로 이
 
 REPL에서 파일을 변경할 때마다 Svelte는 앱을 다시 컴파일하고 결과 탭을 업데이트합니다. 앱을 공유하려면 URL을 공유하세요. 예를 들어 전체 앱을 실행하는 REPL 링크는 다음과 같습니다. <https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2>.
 
-> **참고:** URL에서 Svelte의 버전을 지정하는 방법에 유의하십시오. 이는 Svelte의 특정 버전과 관련된 문제를 보고할 때 유용합니다.
+> [!NOTE]
+> URL에서 Svelte의 버전을 지정하는 방법에 유의하십시오. 이는 Svelte의 특정 버전과 관련된 문제를 보고할 때 유용합니다.
 
 바로 코딩을 시작할 수 있도록 각 기사의 시작과 끝에 REPL을 제공합니다.
 
-> **참고:** 현재 REPL은 폴더 이름을 제대로 처리할 수 없습니다. REPL에 대한 자습서를 따르는 경우 루트 폴더 내에 모든 컴포넌트를 생성하십시오. 그런 다음 코드에 다음과 같은 경로를 본다면 (예: `import Todos from './components/Todos.svelte'`),곧장 일반 URL로 대체하세요 (예: `import Todos from './Todos.svelte'`).
+> [!NOTE]
+> 현재 REPL은 폴더 이름을 제대로 처리할 수 없습니다. REPL에 대한 자습서를 따르는 경우 루트 폴더 내에 모든 컴포넌트를 생성하십시오. 그런 다음 코드에 다음과 같은 경로를 본다면 (예: `import Todos from './components/Todos.svelte'`),곧장 일반 URL로 대체하세요 (예: `import Todos from './Todos.svelte'`).
 
 ## 지금까지의 코드
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
index 8f5c133ef55d80..3a6c1baa81684f 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md
@@ -343,7 +343,8 @@ created public/build/bundle.js in 220ms
 <img height="32" width="88" src="https://www.w3.org/WAI/wcag2A" />
 ```
 
-> **참고:** VSCode를 사용하면 _Quick fix…_ 링크를 클릭하거나 <kbd>Ctrl</kbd> + <kbd>.</kbd>를 눌러 무시 주석을 자동으로 추가할 수 있습니다.
+> [!NOTE]
+> VSCode를 사용하면 _Quick fix…_ 링크를 클릭하거나 <kbd>Ctrl</kbd> + <kbd>.</kbd>를 눌러 무시 주석을 자동으로 추가할 수 있습니다.
 
 이 경고를 전체적으로 비활성화하려면 다음과 같이 `Svelte` 플러그인 구성 내부의 `rollup.config.js` 파일에 `onwarn` 핸들러를 추가할 수 있습니다.
 
@@ -373,7 +374,8 @@ plugins: [
 
 의도적으로 이러한 경고는 컴파일러 자체에서 구현되며 프로젝트에 추가하도록 선택할 수 있는 플러그인으로 구현되지 않습니다. 아이디어는 기본적으로 마크업에서 a11y 문제를 확인하고 특정 경고를 선택적으로 제외할 수 있도록 하는 것입니다.
 
-> **참고:** 예를 들어 빠른 프로토타입을 제작하는 동안과 같이 그럴 만한 이유가 있는 경우에만 이러한 경고를 비활성화해야 합니다. 훌륭한 웹 시민이 되어 최대한 광범위한 사용자 기반이 페이지에 액세스할 수 있도록 하는 것이 중요합니다.
+> [!NOTE]
+> 예를 들어 빠른 프로토타입을 제작하는 동안과 같이 그럴 만한 이유가 있는 경우에만 이러한 경고를 비활성화해야 합니다. 훌륭한 웹 시민이 되어 최대한 광범위한 사용자 기반이 페이지에 액세스할 수 있도록 하는 것이 중요합니다.
 
 Svelte가 확인하는 접근성 규칙은 JSX 요소에 대한 많은 접근성 규칙에 대한 정적 검사를 제공하는 ESLint용 플러그인[eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules)에서 가져옵니다. Svelte는 컴파일러에서 모두 구현하는 것을 목표로 하며 대부분은 이미 Svelte로 포팅되었습니다. GitHub에서 [여전히 누락된 접근성 검사](https://github.com/sveltejs/svelte/issues/820)를 확인할 수 있습니다. 해당 링크를 클릭하여 각 규칙의 의미를 확인할 수 있습니다.
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
index 590445f3c08a36..43aca1e961fc54 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md
@@ -256,7 +256,8 @@ let completedTodos = todos.filter((todo) => todo.completed).length;
 
 Svelte에게 `totalTodos` 및 `completedTodos` 변수에 `$:` 접두사를 붙여서 반응형이 되기를 원한다고 말할 수 있습니다. Svelte는 의존하는 데이터가 변경될 때마다 자동으로 업데이트하는 코드를 생성합니다.
 
-> **참고:** Svelte는 `$:` [JavaScript 레이블 문 구문](/ko/docs/Web/JavaScript/Reference/Statements/label)을 사용하여 반응형 구문을 표시합니다. props를 선언하는 데 사용되는 `export` 키워드처럼, 이것은 약간 낯설게 보일 수 있습니다. 이것은 Svelte가 유효한 JavaScript 구문을 활용하고 새로운 목적을 부여하는 또 다른 예입니다. 이 경우 "참조된 값이 변경될 때마다 이 코드를 다시 실행"하는 것을 의미합니다. 한 번 익숙해지면, 모르던 때로 돌아갈 수 없을 것입니다.
+> [!NOTE]
+> Svelte는 `$:` [JavaScript 레이블 문 구문](/ko/docs/Web/JavaScript/Reference/Statements/label)을 사용하여 반응형 구문을 표시합니다. props를 선언하는 데 사용되는 `export` 키워드처럼, 이것은 약간 낯설게 보일 수 있습니다. 이것은 Svelte가 유효한 JavaScript 구문을 활용하고 새로운 목적을 부여하는 또 다른 예입니다. 이 경우 "참조된 값이 변경될 때마다 이 코드를 다시 실행"하는 것을 의미합니다. 한 번 익숙해지면, 모르던 때로 돌아갈 수 없을 것입니다.
 
 `src/components/Todos.svelte` 내부의 `totalTodos` 및 `completedTodos` 변수 정의를 다음과 같이 업데이트하세요.
 
@@ -310,7 +311,8 @@ Svelte 컴파일러는 배후에서 종속성 트리를 만들기 위해 코드
    $: console.log("newTodoName: ", newTodoName);
    ```
 
-   > **참고:** 아시다시피 반응형 구문은 변수 선언으로 제한되지 않습니다. `$:` 기호 뒤에 _any_ JavaScript 문을 넣을 수 있습니다.
+   > [!NOTE]
+   > 아시다시피 반응형 구문은 변수 선언으로 제한되지 않습니다. `$:` 기호 뒤에 _any_ JavaScript 문을 넣을 수 있습니다.
 
 4. 이제 `localhost:5042`로 돌아가서 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>를 눌러 브라우저 콘솔을 열고 무언가를 입력하세요. 입력 필드. 항목이 기록된 것을 볼 수 있습니다. 이 시점에서 원하는 경우 반응형 `console.log()`를 삭제할 수 있습니다.
 5. 다음으로 새로운 할 일을 추가하는 함수인 `addTodo()`를 만들겠습니다. 이 함수는 새로운 `todo` 객체를 `todos` 배열로 푸시합니다. `src/components/Todos.svelte` 내부의 `<script>` 블록 맨 아래에 다음을 추가합니다.
@@ -322,7 +324,8 @@ Svelte 컴파일러는 배후에서 종속성 트리를 만들기 위해 코드
    }
    ```
 
-   > **참고:** 지금은 모든 할 일에 동일한 `id`를 할당하지만 걱정하지 마세요. 곧 수정할 것입니다.
+   > [!NOTE]
+   > 지금은 모든 할 일에 동일한 `id`를 할당하지만 걱정하지 마세요. 곧 수정할 것입니다.
 
 6. 이제 폼이 제출(submit)될 때마다 `addTodo()`를 호출하도록 HTML을 업데이트하려고 합니다. NewTodo 폼의 여는 태그를 다음과 같이 업데이트하세요.
 
@@ -364,7 +367,8 @@ Svelte 컴파일러는 배후에서 종속성 트리를 만들기 위해 코드
    }
    ```
 
-   > **참고:** 보시다시피 반응형 구문은 한 줄로 제한되지 않습니다. 다음 구문은 정상 작동하지만 가독성이 약간 떨어집니다. `$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
+   > [!NOTE]
+   > 보시다시피 반응형 구문은 한 줄로 제한되지 않습니다. 다음 구문은 정상 작동하지만 가독성이 약간 떨어집니다. `$: newTodoId = totalTodos ? Math.max(...todos.map((t) => t.id)) + 1 : 1`
 
 2. Svelte는 어떻게 이것이 가능할까요? 컴파일러는 전체 반응형 구문을 파싱하고 `totalTodos` 변수와 `todos` 배열에 의존하는 것을 감지합니다. 따라서 둘 중 하나가 수정될 때마다 이 코드가 재평가되고 그에 따라 `newTodoId`가 업데이트됩니다.
 
@@ -423,7 +427,8 @@ Svelte 컴파일러는 배후에서 종속성 트리를 만들기 위해 코드
 
    활성 필터 버튼에 `btn__primary` 클래스를 적용하여 현재 필터를 표시합니다. 스타일 클래스를 요소에 조건부로 적용하려면 `class:name={value}` 지시문을 사용합니다. 값 표현식이 참으로 평가되면 클래스 이름이 적용됩니다. 조건이 다른 여러 지시문을 동일한 요소에 추가할 수 있습니다. 따라서 `class:btn__primary={filter === 'all'}`을 실행할 때 Svelte는 filter가 all인 경우 `btn__primary` 클래스를 적용합니다.
 
-   > **참고:** Svelte는 클래스가 변수 이름과 일치할 때 `<div class:active={active}>`를 `<div class:active>`로 축소할 수 있는 바로 가기를 제공합니다.
+   > [!NOTE]
+   > Svelte는 클래스가 변수 이름과 일치할 때 `<div class:active={active}>`를 `<div class:active>`로 축소할 수 있는 바로 가기를 제공합니다.
 
    `aria-pressed={filter === 'all'}`에서도 비슷한 일이 발생합니다. 중괄호 사이에 전달된 JavaScript 표현식이 참으로 값으로 평가되면 `aria-pressed` 속성이 버튼에 추가됩니다.
 
@@ -440,7 +445,8 @@ Svelte 컴파일러는 배후에서 종속성 트리를 만들기 위해 코드
 
    코드를 분석한 후 Svelte는 `filterTodos()` 함수가 `filter` 및 `todos` 변수에 의존한다는 것을 감지합니다. 그리고 마크업에 포함된 다른 동적 표현식과 마찬가지로 이러한 종속성이 변경될 때마다 그에 따라 DOM이 업데이트됩니다. 따라서 `filter` 또는 `todos`가 변경될 때마다 `filterTodos()` 함수가 재평가되고 루프 내부의 항목이 업데이트됩니다.
 
-> **참고:** 때때로 반응성이 까다로울 수 있습니다. Svelte는 `filterTodos(filter, todo)` 표현식에서 참조하기 때문에 `filter`를 종속성으로 인식합니다. `filter`는 최상위 변수이므로 도우미 함수 params에서 제거하고 `filterTodos(todo)`와 같이 호출하고 싶을 수도 있습니다. 이것은 작동하지만 이제 Svelte는 `{#each filterTodos(todos) }`가 `filter`에 의존하고 필터가 변경될 때 필터링된 할 일 목록이 업데이트되지 않는다는 것을 알아낼 방법이 없습니다. Svelte는 종속성을 찾기 위해 코드를 분석하므로 이에 대해 명시하고 최상위 변수의 가시성에 의존하지 않는 것이 좋습니다. 게다가 어떤 정보를 사용하고 있는지에 대해 코드를 명확하고 명시적으로 만드는 것이 좋습니다.
+> [!NOTE]
+> 때때로 반응성이 까다로울 수 있습니다. Svelte는 `filterTodos(filter, todo)` 표현식에서 참조하기 때문에 `filter`를 종속성으로 인식합니다. `filter`는 최상위 변수이므로 도우미 함수 params에서 제거하고 `filterTodos(todo)`와 같이 호출하고 싶을 수도 있습니다. 이것은 작동하지만 이제 Svelte는 `{#each filterTodos(todos) }`가 `filter`에 의존하고 필터가 변경될 때 필터링된 할 일 목록이 업데이트되지 않는다는 것을 알아낼 방법이 없습니다. Svelte는 종속성을 찾기 위해 코드를 분석하므로 이에 대해 명시하고 최상위 변수의 가시성에 의존하지 않는 것이 좋습니다. 게다가 어떤 정보를 사용하고 있는지에 대해 코드를 명확하고 명시적으로 만드는 것이 좋습니다.
 
 ## 지금까지의 코드
 
diff --git a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
index df4dd126f50f84..fdbab7a32808a3 100644
--- a/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
+++ b/files/ko/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md
@@ -65,7 +65,8 @@ Vue는 애플리케이션에 Vue를 점진적으로 통합시킬 수 있도록 
 1. Node.js 8.11 이상 설치
 2. npm 또는 yarn
 
-> **참고:** 아직 위 항목을 설치하지 않았다면, [more about installing npm and Node.js](/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups) 를 참고하세요.
+> [!NOTE]
+> 아직 위 항목을 설치하지 않았다면, [more about installing npm and Node.js](/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line#Adding_powerups) 를 참고하세요.
 
 CLI를 설치하기 위해 아래 커맨드를 터미널에서 실행하세요.
 npm을 사용하는 경우:
@@ -133,7 +134,8 @@ Vue의 다양한 기능을 알아보기 위해, 예제로 할 일 목록(todo li
 
 만약 이전에 한 번도 Vue CLI를 사용해본 적 없다면, 위에서 설명하지 않은 질문이 한 가지 더 표시될 것입니다. 패키지 매니저를 고르라는 메세지가 나타나면, 여러분이 선호하는 것을 고르면 됩니다. 지금부터는 여러분이 선택한 패키지 매니저(npm / yarn)가 기본값으로 설정됩니다. 만약 이 기본값을 변경하고 싶다면 `vue create` 커맨드를 실행할 때 `--packageManager=<package-manager>` 플래그를 추가하면 됩니다. 다시 말해, 만약 여러분이 이전에 yarn을 사용했지만 다음에는 npm을 사용하도록 프로젝트를 생성하고 싶다면 `vue create moz-todo-vue --packageManager=npm`을 실행하면 됩니다.
 
-> **참고:** 모든 옵션을 여기서 설명하지는 않았습니다. 자세한 내용은 [find more information on the CLI](https://cli.vuejs.org) 를 참고하세요.
+> [!NOTE]
+> 모든 옵션을 여기서 설명하지는 않았습니다. 자세한 내용은 [find more information on the CLI](https://cli.vuejs.org) 를 참고하세요.
 
 ## 프로젝트 구조
 
@@ -147,7 +149,8 @@ Vue의 다양한 기능을 알아보기 위해, 예제로 할 일 목록(todo li
   - `favicon.ico`: 앱의 대표 favicon 파일입니다. 기본값으로 Vue 로고가 들어가 있습니다.
   - `index.html`: 앱의 템플릿 파일입니다. 우리의 Vue 앱은 이 HTML 페이지로부터 실행됩니다. lodash 템플릿 구문을 사용해 보간법으로 값을 지정할 수 있습니다.
 
-    > **참고:** index.html 파일은 애플리케이션 레이아웃을 관리하는 템플릿이 아닙니다. 이 파일은 Vue 앱 외부의 정적 HTML을 제어하는 템플릿입니다. 고급 사용 사례를 제외하면 이 파일을 직접 편집할 일은 거의 없습니다.
+    > [!NOTE]
+    > index.html 파일은 애플리케이션 레이아웃을 관리하는 템플릿이 아닙니다. 이 파일은 Vue 앱 외부의 정적 HTML을 제어하는 템플릿입니다. 고급 사용 사례를 제외하면 이 파일을 직접 편집할 일은 거의 없습니다.
 
 - `src`: 우리의 Vue 애플리케이션의 핵심 내용을 포함하게 될 디렉토리입니다.
 
@@ -156,7 +159,8 @@ Vue의 다양한 기능을 알아보기 위해, 예제로 할 일 목록(todo li
   - `components`: 우리가 앞으로 만들 Vue 컴포넌트를 저장할 디렉토리입니다. 지금은 한 개의 예시 컴포넌트만을 포함하고 있습니다.
   - `assets`: CSS나 이미지 등의 정적 자산(static assets)을 저장하는 디렉토리입니다. 이 파일들은 src 디렉토리에 포함되어 있기 때문에 Webpack의 처리를 받습니다. 즉, [Sass/SCSS](https://sass-lang.com/)나 [Stylus](https://stylus-lang.com/)와 같은 전처리 도구를 사용할 수 있다는 의미입니다.
 
-> **참고:** 새로운 프로젝트를 생성할 때 어떤 옵션을 선택했는지에 따라, 위에 소개되지 않은 디렉토리가 생길 수도 있습니다. 예를 들어 router 옵션을 선택했다면 `views`가 생성됩니다.
+> [!NOTE]
+> 새로운 프로젝트를 생성할 때 어떤 옵션을 선택했는지에 따라, 위에 소개되지 않은 디렉토리가 생길 수도 있습니다. 예를 들어 router 옵션을 선택했다면 `views`가 생성됩니다.
 
 ## .vue 파일 (단일 파일 컴포넌트)
 
@@ -196,7 +200,8 @@ export default {
 
 `<style>` 에는 컴포넌트에서 사용할 CSS를 포함합니다. `<style scoped>`와 같이 `scoped` 속성을 추가하면 Vue는 그 안의 내용을 SFC(단일 파일 컴포넌트) 내부 범위에서만 적용합니다. CSS-in-JS 방식과 비슷하게 동작하지만, 여기서는 일반 CSS 구문을 작성할 수 있다는 차이점이 있습니다.
 
-> **참고:** CLI로 프로젝트를 생성할 때 CSS 전처리기를 선택했다면, 빌드타임에 Webpack에서 내용을 처리할 수 있도록 `<style>` 태그에 `lang` 속성을 추가할 수 있습니다. 예를 들어 `<style lang="scss">` 라고 작성하면 스타일링 정보에 SCSS 문법을 사용할 수 있습니다.
+> [!NOTE]
+> CLI로 프로젝트를 생성할 때 CSS 전처리기를 선택했다면, 빌드타임에 Webpack에서 내용을 처리할 수 있도록 `<style>` 태그에 `lang` 속성을 추가할 수 있습니다. 예를 들어 `<style lang="scss">` 라고 작성하면 스타일링 정보에 SCSS 문법을 사용할 수 있습니다.
 
 ## 로컬에서 앱 실행하기
 
diff --git a/files/ko/learn/tools_and_testing/github/index.md b/files/ko/learn/tools_and_testing/github/index.md
index 48388574379015..4faf4f205e1290 100644
--- a/files/ko/learn/tools_and_testing/github/index.md
+++ b/files/ko/learn/tools_and_testing/github/index.md
@@ -18,7 +18,8 @@ VCS는 소프트웨어 개발을 할 때 필수적이다.
 
 VCSes provide tools to meet the above needs. [Git](https://git-scm.com/) is an example of a VCS, and [GitHub](https://github.com/) is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.
 
-> **참고:** Git is actually a _distributed_ version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.
+> [!NOTE]
+> Git is actually a _distributed_ version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.
 
 ## 전제 조건
 
@@ -32,7 +33,8 @@ Git와 GitHub를 사용하려면, 다음과 같은 사양이 요구된다:
 
 코딩 지식과 더불어 기초적인 용어에 대한 지식이 있으면 좋다. 예를 들어, 디렉토리를 이동하거나 파일생성, 그리고 시스템 `PATH`를 변경시키는것과 같은 기본적인 용어에 대한 지식이 있는 것이 추천된다.
 
-> **참고:** Github is not the only site/toolset you can use with Git. There are other alternatives such as [GitLab](https://about.gitlab.com/) that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.
+> [!NOTE]
+> Github is not the only site/toolset you can use with Git. There are other alternatives such as [GitLab](https://about.gitlab.com/) that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.
 
 ## 가이드
 
@@ -49,7 +51,8 @@ Git와 GitHub를 사용하려면, 다음과 같은 사양이 요구된다:
 - [Mastering issues (from GitHub)](https://guides.github.com/features/issues/)
   - : Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.
 
-> **참고:** There is **a lot more** that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) and [Dangit, git!](https://dangitgit.com/)
+> [!NOTE]
+> There is **a lot more** that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) and [Dangit, git!](https://dangitgit.com/)
 
 ## 바깥 고리
 
diff --git a/files/ko/mdn/community/communication_channels/index.md b/files/ko/mdn/community/communication_channels/index.md
index 14866b3283ecad..47c27a45b31a60 100644
--- a/files/ko/mdn/community/communication_channels/index.md
+++ b/files/ko/mdn/community/communication_channels/index.md
@@ -9,7 +9,8 @@ l10n:
 
 MDN Web Docs 스태프와 연락하거나 커뮤니티 논의에 참여할 수 있는 소통 창구는 다양합니다.
 
-> **참고:** 이 글에서는 MDN Web Docs의 글로벌 커뮤니티를 다룹니다. 한국어 소통 창구는 [지역화](/ko/docs/MDN/Community/Contributing/Translated_content) 문서에서 확인하세요.
+> [!NOTE]
+> 이 글에서는 MDN Web Docs의 글로벌 커뮤니티를 다룹니다. 한국어 소통 창구는 [지역화](/ko/docs/MDN/Community/Contributing/Translated_content) 문서에서 확인하세요.
 
 ## 채팅
 
diff --git a/files/ko/mdn/community/contributing/getting_started/index.md b/files/ko/mdn/community/contributing/getting_started/index.md
index e2db532c0f4c4a..56305fe2d5f07e 100644
--- a/files/ko/mdn/community/contributing/getting_started/index.md
+++ b/files/ko/mdn/community/contributing/getting_started/index.md
@@ -31,7 +31,8 @@ MDN에 참여하기 위해서는 반드시 MDN 계정을 생성해야합니다.
 
 완벽하지 않아도 괜찮습니다. 오류가 있다면 다른 MDN 공헌자들이 고칠 것입니다. 궁금한 점은 <a href="/ko/docs/MDN/Community">커뮤니티</a> 페이지의 메일링 리스트나 채팅 채널에서 답을 얻을 수도 있습니다.
 
-> **참고:** 수정된 내용을 "실제로" 반영하기 위함이 아닌, 실험을 하고 싶다면 "<a href="/ko/docs/Sandbox">샌드박스</a>" 페이지를 이용하세요. 이 페이지는 반드시 필요한 내용이 아니라면 수정하지 마세요. 단순히 어떤 일이 일어나는지 보려고 불필요한 변경을 하는 것은 다른 공헌자들에게 혼란을 줄 수 있습니다.
+> [!NOTE]
+> 수정된 내용을 "실제로" 반영하기 위함이 아닌, 실험을 하고 싶다면 "<a href="/ko/docs/Sandbox">샌드박스</a>" 페이지를 이용하세요. 이 페이지는 반드시 필요한 내용이 아니라면 수정하지 마세요. 단순히 어떤 일이 일어나는지 보려고 불필요한 변경을 하는 것은 다른 공헌자들에게 혼란을 줄 수 있습니다.
 
 작업을 모두 마쳤다면, 다른 작업을 자유롭게 고르거나 아래의 <a href="#Other things you can do on MDN">MDN에서 할 수 있는 다른 일</a>을 살펴보세요.
 
diff --git a/files/ko/mdn/community/contributing/translated_content/index.md b/files/ko/mdn/community/contributing/translated_content/index.md
index 9b0c82a0ed8e24..3440fffc5a41d9 100644
--- a/files/ko/mdn/community/contributing/translated_content/index.md
+++ b/files/ko/mdn/community/contributing/translated_content/index.md
@@ -7,7 +7,8 @@ slug: MDN/Community/Contributing/Translated_content
 
 2020년 12월 14일부터 MDN은 GitHub 기반 [Yari 플랫폼](https://github.com/mdn/yari)에서 동작하고 있습니다. MDN이 얻을 수 있는 것도 많았지만, 이를 실현하려면 저희가 지역화를 다루는 방식을 크게 바꿔야만 했습니다. 왜냐하면 en-US 로케일 외에는 상당수가 유지되지 않고 오래된 콘텐츠로 남겨졌기 때문이고, 앞으로는 더 잘 관리하고자 했기 때문입니다.
 
-> **참고:** 한국어 이외의 로케일 목록은 [영어 문서](/ko/docs/MDN/Community/Contributing/Translated_content)를 참고하세요.
+> [!NOTE]
+> 한국어 이외의 로케일 목록은 [영어 문서](/ko/docs/MDN/Community/Contributing/Translated_content)를 참고하세요.
 
 - 토론: [Discord (#korean 채널)](/discord), [Google Groups (`yari-content-ko`)](https://groups.google.com/g/yari-content-ko)
 - 현재 기여자: [hochan222](https://github.com/hochan222), [yechoi42](https://github.com/yechoi42), [wisedog](https://github.com/wisedog), [sunhpark42](https://github.com/sunhpark42), [1ilsang](https://github.com/1ilsang)
diff --git a/files/ko/mdn/writing_guidelines/attrib_copyright_license/index.md b/files/ko/mdn/writing_guidelines/attrib_copyright_license/index.md
index 3870250cd4c70c..7eecc1e95d3213 100644
--- a/files/ko/mdn/writing_guidelines/attrib_copyright_license/index.md
+++ b/files/ko/mdn/writing_guidelines/attrib_copyright_license/index.md
@@ -15,7 +15,8 @@ MDN Web 문서의 콘텐츠는 무료로 사용할 수 있으며 다양한 오
 
 ### 문서
 
-> **참고:** MDN 웹 문서의 내용은 Mozilla 내부 및 외부 작성자의 기여로 작성되었습니다. 달리 명시되지 않는 한 콘텐츠는 [Creative Commons 저작자표시-동일조건변경허락 라이선스](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA) v2.5 또는 이후 버전의 조건에 따라 사용할 수 있습니다.
+> [!NOTE]
+> MDN 웹 문서의 내용은 Mozilla 내부 및 외부 작성자의 기여로 작성되었습니다. 달리 명시되지 않는 한 콘텐츠는 [Creative Commons 저작자표시-동일조건변경허락 라이선스](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA) v2.5 또는 이후 버전의 조건에 따라 사용할 수 있습니다.
 
 이곳의 콘텐츠가 재사용되면 원본 콘텐츠와 동일한 라이선스(CC-BY-SA v2.5 또는 이후 버전)로 게시됩니다. MDN Web Docs의 콘텐츠를 재사용할 때, "Mozilla Contributors"뿐만 아니라 원본 콘텐츠에도 저작자 표시가 지정되어 있는지 확인해야 합니다. 자료원이 된 콘텐츠의 특정 페이지의 하이퍼링크(온라인)나 URL(인쇄물)이 포함되어합니다. 예를 들어, 이 문서에 대한 저작자 표시를 제공하려면 다음과 같이 작성할 수 있습니다.
 
@@ -35,7 +36,8 @@ MDN Web 문서의 콘텐츠는 무료로 사용할 수 있으며 다양한 오
 
 MDN Web Docs에 기여하고 싶다면, 여러분의 문서가 저작자표시-동일조건변경허락 라이선스(또는 가끔씩 있는 편집 하는 페이지에 이미 지정된 대체 라이선스) 아래 사용될 수 있고, 코드 예제는 [Creative Commons CC-0](https://creativecommons.org/publicdomain/zero/1.0/) (공개 도메인에 제공) 아래 사용 될 수 있다는 것에 동의하는 것입니다.
 
-> **경고:** 대체 라이선스를 사용하여 새 페이지를 만들 수 없습니다.
+> [!WARNING]
+> 대체 라이선스를 사용하여 새 페이지를 만들 수 없습니다.
 
 **기증된 자료의 저작권은 저자가 다른 사람에게 양도하지 않는 한 저자에게 있습니다.**
 
@@ -53,7 +55,8 @@ MDN은 가능한 원조 콘텐츠로 구성되어야 합니다.
 
 ### 콘텐츠를 재사용하거나 재게시하려는 경우
 
-> **참고:** 콘텐츠를 재게시해야 할 합당한 이유가 없는 한 "아니오"라고 대답할 것입니다.
+> [!NOTE]
+> 콘텐츠를 재게시해야 할 합당한 이유가 없는 한 "아니오"라고 대답할 것입니다.
 > MDN 작성 팀의 결정이 최종 결정입니다.
 
 누군가가 이전에 자신의 블로그에 게시한 기사를 MDN에 기부하고 싶거나 복잡한 참조 시트를 MDN에 복사하는 것이라면, 재게시하는 것이 정당할 수 있습니다. 이러한 경우 아래 방법을 통해 미리 MDN 팀과 계획을 논의하십시오.
diff --git a/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md b/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
index 3f5ccd30475978..372da5a3a34648 100644
--- a/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
+++ b/files/ko/mdn/writing_guidelines/howto/creating_moving_deleting/index.md
@@ -53,7 +53,8 @@ MDN에 탑재된 편집기 사용에 대한 좀 더 세부적인 내용은 [MDN
 
 리비전 답글에서 답글을 달고 **엔터키**를 누르는 것은 "저장하고 계속 수정"하는 것을 클릭하는 것과 같습니다.
 
-> **참고:** 변경내용을 저장하려 할 때, 밴경내용이 실제 MDN에는 적절한 내용인데 유효하지 않다는 이유로 거절된다면, [작성팀에 콘텐츠가 게시되게 도와 달라는메일](mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E)을 보내야만 합니다.
+> [!NOTE]
+> 변경내용을 저장하려 할 때, 밴경내용이 실제 MDN에는 적절한 내용인데 유효하지 않다는 이유로 거절된다면, [작성팀에 콘텐츠가 게시되게 도와 달라는메일](mailto:mdn-spam-watch@mozilla.com?subject=MDN%3A%20Content%20Rejection%20Appeal&body=%3CDescribe%20the%20content%20you%20were%20trying%20to%20save%20and%20where%20you%20were%20trying%20to%20place%20it.%3E)을 보내야만 합니다.
 
 ## 새로운 페이지 생성하기
 
diff --git a/files/ko/mdn/writing_guidelines/howto/document_a_css_property/index.md b/files/ko/mdn/writing_guidelines/howto/document_a_css_property/index.md
index 2fea1df1b6690c..964efb323dc97f 100644
--- a/files/ko/mdn/writing_guidelines/howto/document_a_css_property/index.md
+++ b/files/ko/mdn/writing_guidelines/howto/document_a_css_property/index.md
@@ -15,7 +15,8 @@ l10n:
 
 먼저 문서화하려는 CSS 속성을 찾아야 합니다. 여러분은 페이지가 누락되었거나 [이슈 목록](https://github.com/mdn/content/issues)에서 보고된 누락된 콘텐츠를 보았을 수 있습니다. CSS 속성에 대한 자세한 내용은 관련 사양(예: [W3C 명세서](https://www.w3.org/Style/CSS/) 또는 Gecko나 Blink와 같은 렌더링 엔진에 사용되는 비표준 속성에 대한 버그 보고서)을 찾아야 합니다.
 
-> **참고:** W3C 명세서를 사용하는 경우, 게시된 버전(예: Working Draft)이 아닌 항상 **Editor's Draft**(왼쪽의 빨간색 배너 참고)를 사용하십시오. Editor's Draft는 항상 최종 버전에 더 가깝습니다!
+> [!NOTE]
+> W3C 명세서를 사용하는 경우, 게시된 버전(예: Working Draft)이 아닌 항상 **Editor's Draft**(왼쪽의 빨간색 배너 참고)를 사용하십시오. Editor's Draft는 항상 최종 버전에 더 가깝습니다!
 
 구현과 사양이 다른 경우, 구현 버그에서 자유롭게 알려주십시오. 다음 상황 중 하나가 가능합니다.
 
diff --git a/files/ko/mdn/writing_guidelines/howto/index.md b/files/ko/mdn/writing_guidelines/howto/index.md
index c250afc952a6ad..f224cdda6fc599 100644
--- a/files/ko/mdn/writing_guidelines/howto/index.md
+++ b/files/ko/mdn/writing_guidelines/howto/index.md
@@ -9,6 +9,7 @@ l10n:
 
 MDN 웹 문서 작성 지침에서 이 섹션에는 마크다운을 사용하는 방법, 용어집에 항목을 추가하는 방법, 페이지를 이동하거나 삭제하는 방법 등 MDN 웹 문서에 기여할 때 특정 작업을 하기 위한 모든 단계별 정보가 포함되어 있습니다. 기여 방법(GitHub를 통해 진행됨)에 대한 자세한 내용은 [기여 지침](/ko/docs/MDN/Community/Contributing)을 참조하십시오.
 
-> **참고:** 이 섹션을 통해 우리는 여러분이 기여 지침을 읽었고, `mdn/content` 저장소에 익숙하며 git과 GitHub 사용 방법을 알고 있다고 가정합니다.
+> [!NOTE]
+> 이 섹션을 통해 우리는 여러분이 기여 지침을 읽었고, `mdn/content` 저장소에 익숙하며 git과 GitHub 사용 방법을 알고 있다고 가정합니다.
 
 {{LandingPageListSubpages}}
diff --git a/files/ko/mdn/writing_guidelines/page_structures/banners_and_notices/index.md b/files/ko/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
index 464d579b7a6dfa..5dd0a798bef31b 100644
--- a/files/ko/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
+++ b/files/ko/mdn/writing_guidelines/page_structures/banners_and_notices/index.md
@@ -33,7 +33,8 @@ browser-compat: api.Ink
 배너가 있는 페이지에는 일반적으로 "보완적인" 페이지 메타데이터도 있습니다.
 예를 들어 `\{{SeeCompatTable}}`이 있는 페이지는 일반적으로 사이드바에 적절한 아이콘이 표시되도록 `experimental` 상태도 추가해야 합니다(위에 표시된 대로).
 
-> **참고:** 배너 매크로는 메타데이터에 의존하지 않지만 일부 다른 매크로 삽입 콘텐츠는 의존합니다.
+> [!NOTE]
+> 배너 매크로는 메타데이터에 의존하지 않지만 일부 다른 매크로 삽입 콘텐츠는 의존합니다.
 > 예를 들어 `\{{Compat}}` 매크로는 `browser-compat` 메타데이터 값에 의존합니다.
 
 ## 추가 할 수 있는 배너와 추가해야하는 배너
diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md
index a15e406acbe00d..88edb5838f7c5b 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.md
@@ -60,7 +60,8 @@ l10n:
 
 {{WebExtExamples}}
 
-> **참고:** 이 API는 Chromium의 [`chrome.contextMenus`](https://developer.chrome.com/docs/extensions/reference/contextMenus/#type-ContextType) API를 기반으로 합니다. 이 문서는 Chromium 코드의 [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json)에서 파생되었습니다.
+> [!NOTE]
+> 이 API는 Chromium의 [`chrome.contextMenus`](https://developer.chrome.com/docs/extensions/reference/contextMenus/#type-ContextType) API를 기반으로 합니다. 이 문서는 Chromium 코드의 [`context_menus.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/context_menus.json)에서 파생되었습니다.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/index.md
index fe9e514f0b88e5..dc679102bb45ee 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/index.md
@@ -49,7 +49,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage
 
 {{WebExtExamples("h2")}}
 
-> **Note:** This API is based on Chromium's [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/storage/) API. This documentation is derived from [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) in the Chromium code.
+> [!NOTE]
+> This API is based on Chromium's [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/storage/) API. This documentation is derived from [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) in the Chromium code.
 >
 > Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.
 
diff --git a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
index a72104fc2efe26..74052d4b147d2e 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md
@@ -28,7 +28,8 @@ slug: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get
 
 반환된 [`Promise`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)는 저장소에서 찾은 모든 항목을 담은 객체를 인수로 완료를 수행한다. 실패하면 에러 문장으로 거부가 수행된다. managed 저장소가 설정되어 있지 않으면 `undefined`가 반환된다.
 
-> **경고:** When used within a content script in Firefox versions prior to 52, the Promise returned by `browser.storage.local.get()` is fulfilled with an Array containing one Object. The Object in the Array contains the `keys` found in the storage area, as described above. The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as `chrome.storage.local.get()`, it correctly passes an Object to the callback function.
+> [!WARNING]
+> When used within a content script in Firefox versions prior to 52, the Promise returned by `browser.storage.local.get()` is fulfilled with an Array containing one Object. The Object in the Array contains the `keys` found in the storage area, as described above. The Promise is correctly fulfilled with an Object when used in the background context (background scripts, popups, options pages, etc.). When this API is used as `chrome.storage.local.get()`, it correctly passes an Object to the callback function.
 
 ## 브라우저 호환성
 
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md
index 14577dbb9924f2..fea312cd665809 100644
--- a/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/create/index.md
@@ -45,7 +45,8 @@ let creating = browser.tabs.create(
 
       - : `boolean`. 창에서 선택된 탭이 되는지에 대한 여부입니다. 기본 값은 `true`입니다.
 
-        > **경고:** 이 속성은 폐기되었으며, Firefox에서는 지원되지 않습니다. 대신 `active`를 사용하십시오.
+        > [!WARNING]
+        > 이 속성은 폐기되었으며, Firefox에서는 지원되지 않습니다. 대신 `active`를 사용하십시오.
 
     - `title` {{optional_inline}}
       - : `string`. 탭의 제목입니다. `discarded` 속성이 `true`로 생성된 탭에서만 사용할 수 있습니다.
@@ -102,7 +103,8 @@ browser.browserAction.onClicked.addListener(() => {
 
 {{Compat}}
 
-> **참고:** 이 API는 Chromium의 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-create) API를 기반으로 합니다. 이 문서는 Chromium 코드의 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)에서 파생되었습니다.
+> [!NOTE]
+> 이 API는 Chromium의 [`chrome.tabs`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-create) API를 기반으로 합니다. 이 문서는 Chromium 코드의 [`tabs.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json)에서 파생되었습니다.
 
 <!--
 // Copyright 2015 The Chromium Authors. All rights reserved.
diff --git a/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md
index 48718d3c95088f..f01250668a7d04 100644
--- a/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/what_are_webextensions/index.md
@@ -5,7 +5,8 @@ slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
 
 {{AddonSidebar}}
 
-> **참고:** 만약 브라우저 확장 기능의 기본적인 개념은 이미 익숙하다면, 이 섹션을 스킵하고 [확장 기능 파일이 어떻게 구성되는지 읽어보세요](/ko/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). 그 다음, [참고 문서](/ko/docs/Mozilla/Add-ons/WebExtensions#reference)와 함께 확장 기능을 개발해 보세요. [Firefox Extension Workshop](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)을 방문하여 Firefox용 테스트, 게시 및 확장 기능에 대한 작업 흐름에 대해 자세히 알아보세요.
+> [!NOTE]
+> 만약 브라우저 확장 기능의 기본적인 개념은 이미 익숙하다면, 이 섹션을 스킵하고 [확장 기능 파일이 어떻게 구성되는지 읽어보세요](/ko/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). 그 다음, [참고 문서](/ko/docs/Mozilla/Add-ons/WebExtensions#reference)와 함께 확장 기능을 개발해 보세요. [Firefox Extension Workshop](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)을 방문하여 Firefox용 테스트, 게시 및 확장 기능에 대한 작업 흐름에 대해 자세히 알아보세요.
 
 확장 기능은 브라우저에 기능을 추가합니다. 확장 기능은 표준 웹 기술(HTML, CSS, JavaScript)을 이용해 만들어집니다. 확장 기능은 JavaScript에서 사용되는 웹 API 뿐만이 아니라 전용 JavaScript API에도 접근할 수 있어 웹페이지의 코드가 할 수 있는 것보다 더 많은 일을 할 수 있습니다. 다음은 수행할 수 있는 작업의 몇 가지 예시입니다.
 
diff --git a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md
index 150d77a5d7f30d..db915bd47c5f5c 100644
--- a/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md
+++ b/files/ko/mozilla/add-ons/webextensions/your_first_webextension/index.md
@@ -125,7 +125,8 @@ Firefox로 "about:debugging" 페이지에 들어갑니다. "임시 확장기능
 
 {{EmbedYouTube("rxBQl2Z9IBQ")}}
 
-> **참고:** addons.mozilla.org에 들어가서 테스트 하지 마세요! Content script는 현재 이 도메인에 사용할 수 없도록 차단됩니다.
+> [!NOTE]
+> addons.mozilla.org에 들어가서 테스트 하지 마세요! Content script는 현재 이 도메인에 사용할 수 없도록 차단됩니다.
 
 좀 더 파고들어 봅시다. 테두리의 색을 변경하거나, 페이지 컨텐츠에 다른 것들을 해볼 수 있겠죠. content script를 저장하고 about:debugging 페이지에서 Reload 버튼을 눌러 확장기능 파일을 새로고침 할 수 있습니다. 그리고 나서는 곧바로 변경된 기능을 확인할 수 있죠.
 
diff --git a/files/ko/web/accessibility/aria/attributes/index.md b/files/ko/web/accessibility/aria/attributes/index.md
index fc389d22b8d957..60e6e8162aaedc 100644
--- a/files/ko/web/accessibility/aria/attributes/index.md
+++ b/files/ko/web/accessibility/aria/attributes/index.md
@@ -9,7 +9,8 @@ l10n:
 
 <abbr>ARIA</abbr> 속성을 사용하면 접근성 트리에 정의된 대로 요소의 상태와 속성을 수정할 수 있습니다.
 
-> **참고:** ARIA는 접근성 트리만을 수정하여 보조 기술이 사용자에게 컨텐츠를 제공하는 방법을 수정합니다. ARIA는 요소의 기능이나 동작에 대해 아무것도 변경하지 않습니다. 의도된 목적과 기본 기능을 위해 시맨틱 HTML 요소를 사용하지 않을 때는 행동, 포커스 및 ARIA 상태를 관리하기 위해 JavaScript를 사용해야 합니다.
+> [!NOTE]
+> ARIA는 접근성 트리만을 수정하여 보조 기술이 사용자에게 컨텐츠를 제공하는 방법을 수정합니다. ARIA는 요소의 기능이나 동작에 대해 아무것도 변경하지 않습니다. 의도된 목적과 기본 기능을 위해 시맨틱 HTML 요소를 사용하지 않을 때는 행동, 포커스 및 ARIA 상태를 관리하기 위해 JavaScript를 사용해야 합니다.
 
 ## ARIA 속성 유형
 
diff --git a/files/ko/web/accessibility/aria/index.md b/files/ko/web/accessibility/aria/index.md
index 0758909a00ac0e..43d9a0ff7c221e 100644
--- a/files/ko/web/accessibility/aria/index.md
+++ b/files/ko/web/accessibility/aria/index.md
@@ -9,7 +9,8 @@ slug: Web/Accessibility/ARIA
 
 ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공합니다. 예를 들어 ARIA는 HTML4에서의 탐색 랜드마크, JavaScript 위젯, 폼 힌트 및 오류 메시지, 실시간 콘텐츠 업데이트 등을 접근 가능한 형태로 제공합니다.
 
-> **경고:** 여기 등장하는 많은 위젯은 나중에 HTML5로 통합됐으므로, 구현하려는 기능을 가진 요소가 존재한다면 **개발자는 되도록 의미를 가진 HTML을 ARIA보다 선호해야 합니다**. 몇 가지 예시로, 네이티브 요소는 키보드 접근성, 역할, 상태를 내장하고 있습니다. 그러나 ARIA를 쓰기로 결정했다면 브라우저 동작 방식을 따라 하는 건 개발자의 책임입니다.
+> [!WARNING]
+> 여기 등장하는 많은 위젯은 나중에 HTML5로 통합됐으므로, 구현하려는 기능을 가진 요소가 존재한다면 **개발자는 되도록 의미를 가진 HTML을 ARIA보다 선호해야 합니다**. 몇 가지 예시로, 네이티브 요소는 키보드 접근성, 역할, 상태를 내장하고 있습니다. 그러나 ARIA를 쓰기로 결정했다면 브라우저 동작 방식을 따라 하는 건 개발자의 책임입니다.
 
 다음은 진행 표시줄 위젯의 마크업입니다.
 
@@ -41,7 +42,8 @@ function updateProgress(percentComplete) {
 }
 ```
 
-> **Note:** that ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants. However, the accessibility gains it provides far outweigh any technical invalidity. In HTML5, all ARIA attributes validate. The new landmark elements (`<main>`, `<header>`, `<nav>` etc) have built-in ARIA roles, so there is no need to duplicate them.
+> [!NOTE]
+> that ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants. However, the accessibility gains it provides far outweigh any technical invalidity. In HTML5, all ARIA attributes validate. The new landmark elements (`<main>`, `<header>`, `<nav>` etc) have built-in ARIA roles, so there is no need to duplicate them.
 
 ## 지원
 
diff --git a/files/ko/web/api/abortsignal/index.md b/files/ko/web/api/abortsignal/index.md
index 7c9abd296652c2..810414b6a9cce3 100644
--- a/files/ko/web/api/abortsignal/index.md
+++ b/files/ko/web/api/abortsignal/index.md
@@ -59,7 +59,8 @@ function fetchVideo() {
 
 > **참고:** `abort()`가 호출되면, `fetch()` promise는 <code dir="ltr">AbortError</code>과 함께 reject됩니다.
 
-> **경고:** 현재 버전의 Firefox는 `DOMException`으로 promise를 reject합니다.
+> [!WARNING]
+> 현재 버전의 Firefox는 `DOMException`으로 promise를 reject합니다.
 
 동작하는 완전한 예제는 GitHub에서 확인 할 수 있습니다 — [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api) 참고([라이브 실행도 확인할 수 있습니다](https://mdn.github.io/dom-examples/abort-api/)).
 
diff --git a/files/ko/web/api/analysernode/fftsize/index.md b/files/ko/web/api/analysernode/fftsize/index.md
index bf1e17dfe365ba..f7276e46800af9 100644
--- a/files/ko/web/api/analysernode/fftsize/index.md
+++ b/files/ko/web/api/analysernode/fftsize/index.md
@@ -20,7 +20,8 @@ FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 
 
 반드시 <math><semantics><msup><mn>2</mn><mn>5</mn></msup><annotation encoding="TeX">2^5</annotation></semantics></math>와 <math><semantics><msup><mn>2</mn><mn>15</mn></msup><annotation encoding="TeX">2^15</annotation></semantics></math> 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384`, 그리고 `32768`. 기본값은 `2048`입니다.
 
-> **참고:** 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, `IndexSizeError`라는 이름의 {{domxref("DOMException")}}이 발생합니다.
+> [!NOTE]
+> 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, `IndexSizeError`라는 이름의 {{domxref("DOMException")}}이 발생합니다.
 
 ## 예제
 
diff --git a/files/ko/web/api/analysernode/index.md b/files/ko/web/api/analysernode/index.md
index 9224493682865e..afd81ccfa0da6a 100644
--- a/files/ko/web/api/analysernode/index.md
+++ b/files/ko/web/api/analysernode/index.md
@@ -59,7 +59,8 @@ _부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다_.
 
 ## 예제
 
-> **참고:** 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 [Web Audio API 시각화](/ko/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 가이드를 참고하세요.
+> [!NOTE]
+> 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 [Web Audio API 시각화](/ko/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 가이드를 참고하세요.
 
 ### 기본 사용
 
diff --git a/files/ko/web/api/analysernode/maxdecibels/index.md b/files/ko/web/api/analysernode/maxdecibels/index.md
index d83b33f640d3bd..9c493eb78bc150 100644
--- a/files/ko/web/api/analysernode/maxdecibels/index.md
+++ b/files/ko/web/api/analysernode/maxdecibels/index.md
@@ -20,7 +20,8 @@ FFT 분석 데이터를 스케일링하는 것에 대한 최대 [데시벨](http
 
 `getByteFrequencyData()`로부터 데이터를 얻을 때, `maxDecibels` 또는 더 높은 진폭을 가진 모든 주파수는 `255`로 반환됩니다.
 
-> **참고:** 만약 `AnalyserNode.minDecibels`보다 더 작거나 같은 값이 설정된다면, `IndexSizeError` 예외가 발생합니다.
+> [!NOTE]
+> 만약 `AnalyserNode.minDecibels`보다 더 작거나 같은 값이 설정된다면, `IndexSizeError` 예외가 발생합니다.
 
 ## 예제
 
diff --git a/files/ko/web/api/analysernode/mindecibels/index.md b/files/ko/web/api/analysernode/mindecibels/index.md
index 880850c7ec9a23..775ee3d5d20545 100644
--- a/files/ko/web/api/analysernode/mindecibels/index.md
+++ b/files/ko/web/api/analysernode/mindecibels/index.md
@@ -20,7 +20,8 @@ FFT 분석 데이터를 스케일링하는 것에 대한 최소 [데시벨](http
 
 `getByteFrequencyData()`로부터 데이터를 얻을 때, `minDecibels` 또는 더 낮은 진폭을 가진 모든 주파수는 `0`으로 반환됩니다.
 
-> **참고:** 만약 `AnalyserNode.maxDecibels`보다 더 큰 값이 설정된다면, `INDEX_SIZE_ERR` 예외가 발생합니다.
+> [!NOTE]
+> 만약 `AnalyserNode.maxDecibels`보다 더 큰 값이 설정된다면, `INDEX_SIZE_ERR` 예외가 발생합니다.
 
 ## 예제
 
diff --git a/files/ko/web/api/analysernode/smoothingtimeconstant/index.md b/files/ko/web/api/analysernode/smoothingtimeconstant/index.md
index 535a520ce56311..8fd52bc76c51b6 100644
--- a/files/ko/web/api/analysernode/smoothingtimeconstant/index.md
+++ b/files/ko/web/api/analysernode/smoothingtimeconstant/index.md
@@ -22,7 +22,8 @@ analyserNode.smoothingTimeConstant = newValue;
 
 기술적인 측면에서, 우리는 [Blackman window](https://webaudio.github.io/web-audio-api/#blackman-window)를 적용했고 값들을 시간에 대해 매끄럽게 합니다. 기본값은 대부분의 경우에 적합합니다.
 
-> **참고:** 만약 범위 0-1 바깥의 값이 설정된다면, `INDEX_SIZE_ERR` 예외가 발생합니다.
+> [!NOTE]
+> 만약 범위 0-1 바깥의 값이 설정된다면, `INDEX_SIZE_ERR` 예외가 발생합니다.
 
 ## 예제
 
diff --git a/files/ko/web/api/attr/index.md b/files/ko/web/api/attr/index.md
index d9fc1fab7b1806..ae39859c72f185 100644
--- a/files/ko/web/api/attr/index.md
+++ b/files/ko/web/api/attr/index.md
@@ -19,7 +19,8 @@ slug: Web/API/Attr
 | `myAttr` | `mynamespace`     | _none_              | `myAttr`       | `myAttr`         |
 | `myAttr` | `mynamespace`     | `myns`              | `myAttr`       | `myns:myAttr`    |
 
-> **참고:** 이 인터페이스는 SVG, HTML 그리고 MathML 요소의 트리 표현에 존재하는 속성만 나타냅니다.
+> [!NOTE]
+> 이 인터페이스는 SVG, HTML 그리고 MathML 요소의 트리 표현에 존재하는 속성만 나타냅니다.
 >
 > {{HTMLElement("table")}} 요소에 대한 {{domxref("HTMLTableElement")}} 인터페이스의 속성을 나타내지 않습니다. (속성에 대한 자세한 내용은 {{Glossary("Attribute", "이 문서")}}를 참고하세요.)
 
diff --git a/files/ko/web/api/audiobuffersourcenode/index.md b/files/ko/web/api/audiobuffersourcenode/index.md
index e7febd9e1169fb..687e9fa0400ac4 100644
--- a/files/ko/web/api/audiobuffersourcenode/index.md
+++ b/files/ko/web/api/audiobuffersourcenode/index.md
@@ -51,7 +51,8 @@ _{{domxref("AudioNode")}}_ 를 부모로 가지는 매서드.
 
 이 예제는 two-second buffer를 생성하여 화이트 노이즈로 채워 이를 `AudioBufferSourceNode을 통해 재생한다.`
 
-> **참고:** You can also [run the code live](http://mdn.github.io/audio-buffer/), or [view the source](https://github.com/mdn/audio-buffer).
+> [!NOTE]
+> You can also [run the code live](http://mdn.github.io/audio-buffer/), or [view the source](https://github.com/mdn/audio-buffer).
 
 ```js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
@@ -95,7 +96,8 @@ button.onclick = function () {
 };
 ```
 
-> **참고:** For a `decodeAudioData` example, see the {{domxref("AudioContext.decodeAudioData")}} page.
+> [!NOTE]
+> For a `decodeAudioData` example, see the {{domxref("AudioContext.decodeAudioData")}} page.
 
 ## 명세서
 
diff --git a/files/ko/web/api/audionode/channelcountmode/index.md b/files/ko/web/api/audionode/channelcountmode/index.md
index f1de97c4b3bc1d..cc29b9141efd6a 100644
--- a/files/ko/web/api/audionode/channelcountmode/index.md
+++ b/files/ko/web/api/audionode/channelcountmode/index.md
@@ -57,7 +57,8 @@ slug: Web/API/AudioNode/channelCountMode
   </tbody>
 </table>
 
-> **참고:** 명세서의 구 버전에서는, {{domxref("ChannelSplitterNode")}}의 기본값은 max였습니다.
+> [!NOTE]
+> 명세서의 구 버전에서는, {{domxref("ChannelSplitterNode")}}의 기본값은 max였습니다.
 
 ## 구문
 
diff --git a/files/ko/web/api/audionode/index.md b/files/ko/web/api/audionode/index.md
index 29b19fa7a8ca92..491fe3a2fee66f 100644
--- a/files/ko/web/api/audionode/index.md
+++ b/files/ko/web/api/audionode/index.md
@@ -16,7 +16,7 @@ slug: Web/API/AudioNode
 
 {{InheritanceDiagram}}
 
-> **참고:**
+> [!NOTE]
 >
 > `AudioNode` 는 이벤트의 대상이 될 수 있으므로, `AudioNode`는 {{domxref("EventTarget")}} 인터페이스를 구현합니다.
 
diff --git a/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md b/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md
index fa366068afa28d..19eb070c6f023d 100644
--- a/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md
+++ b/files/ko/web/api/audioparam/exponentialramptovalueattime/index.md
@@ -7,7 +7,8 @@ slug: Web/API/AudioParam/exponentialRampToValueAtTime
 
 {{ domxref("AudioParam") }} 인터페이스의 **`exponentialRampToValueAtTime()`** 메서드는 {{domxref("AudioParam")}}의 값에 점진적인 지수적 변화를 예정합니다. 변화는 **이전** 이벤트에 명시된 시간에 시작해, 지수적 경사(ramp)를 따라 `value` 매개변수에 주어진 새로운 값으로 향하고, `endTime` 매개변수에 주어진 시간에 새로운 값에 도달합니다.
 
-> **참고:** 사람의 귀가 작동하는 방식 때문에,
+> [!NOTE]
+> 사람의 귀가 작동하는 방식 때문에,
 > 주파수나 playback rate를 변화시킬 때
 > 지수적 경사는 선형적 경사에 비해 더욱 유용한 것으로 여겨집니다.
 
@@ -71,7 +72,8 @@ expRampMinus.onclick = function () {
 };
 ```
 
-> **참고:** 마지막 함수에서 변화시킬 값으로 0이 아니라 0.01의 값이 사용되었는데,
+> [!NOTE]
+> 마지막 함수에서 변화시킬 값으로 0이 아니라 0.01의 값이 사용되었는데,
 > 이는 만약 0이 사용된다면
 > _invalid or illegal string_ 오류가 발생되기 때문입니다 — 이 값은 양수일 필요가 있습니다.
 
diff --git a/files/ko/web/api/audioparam/setvaluecurveattime/index.md b/files/ko/web/api/audioparam/setvaluecurveattime/index.md
index be6c62dd00fb39..bdb8fc1179922f 100644
--- a/files/ko/web/api/audioparam/setvaluecurveattime/index.md
+++ b/files/ko/web/api/audioparam/setvaluecurveattime/index.md
@@ -41,7 +41,8 @@ var paramRef = param.setValueCurveAtTime(values, startTime, duration);
 
 파라미터의 값이 커브를 따라서 종료되었을 때, 파라미터의 값은 `values` 매개변수에서 명시된 값들의 집합의 마지막 값과 일치하도록 보장됩니다.
 
-> **참고:** Web Audio API의 몇몇 이른 구현은 이것이 사실임을
+> [!NOTE]
+> Web Audio API의 몇몇 이른 구현은 이것이 사실임을
 > 보장하지 않는데, 이는 예기치 않은 결과를 유발합니다.
 
 ## 예제
diff --git a/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md b/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md
index 09900ceb7c7888..93ca003cbfb6be 100644
--- a/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md
+++ b/files/ko/web/api/audioworkletglobalscope/registerprocessor/index.md
@@ -20,7 +20,8 @@ AudioWorkletGlobalScope.registerProcessor(name, processorCtor);
 - `processorCtor`
   - : {{domxref("AudioWorkletProcessor")}}로부터 파생된 클래스의 생성자.
 
-> **참고:** 프로세서가 한 번 등록되고 나면
+> [!NOTE]
+> 프로세서가 한 번 등록되고 나면
 > {{domxref("AudioWorkletGlobalScope")}}에서
 > 키-값 쌍 `{ name: constructor }` 가 내부적으로 저장됩니다.
 > _name_ 은 등록된 프로세서를 기반으로 한 {{domxref("AudioWorkletNode")}}를 생성할 때 참조됩니다.
diff --git a/files/ko/web/api/audioworkletnode/audioworkletnode/index.md b/files/ko/web/api/audioworkletnode/audioworkletnode/index.md
index a51c9f46670051..9472e979ceaf22 100644
--- a/files/ko/web/api/audioworkletnode/audioworkletnode/index.md
+++ b/files/ko/web/api/audioworkletnode/audioworkletnode/index.md
@@ -26,7 +26,8 @@ var node = new AudioWorkletNode(context, name, options);
 
     <!-- 명세는 이 객체를 다음으로 나타냅니다: AudioWorkletNodeOptions -->
 
-    > **참고:** 이 객체에 적용된 [structured clone algorithm](/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)의 결과는
+    > [!NOTE]
+    > 이 객체에 적용된 [structured clone algorithm](/ko/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)의 결과는
     > 또한 연관된 {{domxref("AudioWorkletProcessor.AudioWorkletProcessor", "AudioWorkletProcessor()")}} 생성자로 내부적으로 전달됩니다
     > — 이는 근본적인 사용자 정의 {{domxref("AudioWorkletProcessor")}}의 커스텀 초기화를 가능케 합니다.
 
diff --git a/files/ko/web/api/audioworkletnode/index.md b/files/ko/web/api/audioworkletnode/index.md
index 575c93a8063ed2..2c50a639bbb4f7 100644
--- a/files/ko/web/api/audioworkletnode/index.md
+++ b/files/ko/web/api/audioworkletnode/index.md
@@ -5,7 +5,8 @@ slug: Web/API/AudioWorkletNode
 
 {{APIRef("Web Audio API")}}
 
-> **참고:** 이 인터페이스는 [secure contexts](/ko/docs/Web/Security/Secure_Contexts) 바깥에서 이용 가능하지만, {{domxref("BaseAudioContext.audioWorklet")}} 속성은 그렇지 않습니다. 따라서 사용자 정의 {{domxref("AudioWorkletProcessor")}}는 [secure contexts](/ko/docs/Web/Security/Secure_Contexts) 바깥에서 정의될 수 없습니다.
+> [!NOTE]
+> 이 인터페이스는 [secure contexts](/ko/docs/Web/Security/Secure_Contexts) 바깥에서 이용 가능하지만, {{domxref("BaseAudioContext.audioWorklet")}} 속성은 그렇지 않습니다. 따라서 사용자 정의 {{domxref("AudioWorkletProcessor")}}는 [secure contexts](/ko/docs/Web/Security/Secure_Contexts) 바깥에서 정의될 수 없습니다.
 
 [Web Audio API](/ko/docs/Web/API/Web_Audio_API)의 **`AudioWorkletNode`** 인터페이스는 사용자에 의해 정의된, 다른 노드들과 마찬가지로 오디오 라우팅 그래프에 연결될 수 있는, {{domxref("AudioNode")}}에 대한 base 클래스를 나타냅니다. **`AudioWorkletNode`** 는 연관된 {{domxref("AudioWorkletProcessor")}}를 가지고 있는데, 이는 Web Audio 렌더링 스레드에서 실제적인 오디오 프로세싱을 합니다.
 
diff --git a/files/ko/web/api/audioworkletnode/port/index.md b/files/ko/web/api/audioworkletnode/port/index.md
index e22b1d9b688cd8..d75758b3b490d9 100644
--- a/files/ko/web/api/audioworkletnode/port/index.md
+++ b/files/ko/web/api/audioworkletnode/port/index.md
@@ -7,7 +7,8 @@ slug: Web/API/AudioWorkletNode/port
 
 {{domxref("AudioWorkletNode")}} 인터페이스의 읽기 전용 **`port`** 속성은 연관된 {{domxref("MessagePort")}}를 반환합니다. 이것은 노드와 노드에 연관된 {{domxref("AudioWorkletProcessor")}} 사이에서 소통하기 위해 사용될 수 있습니다.
 
-> **참고:** 채널의 다른 쪽 끝에 있는 포트는
+> [!NOTE]
+> 채널의 다른 쪽 끝에 있는 포트는
 > 프로세서의 {{domxref("AudioWorkletProcessor.port", "port")}} 속성 아래에서
 > 사용 가능합니다.
 
diff --git a/files/ko/web/api/audioworkletprocessor/port/index.md b/files/ko/web/api/audioworkletprocessor/port/index.md
index 4b6548bce0116b..155d5a8b082216 100644
--- a/files/ko/web/api/audioworkletprocessor/port/index.md
+++ b/files/ko/web/api/audioworkletprocessor/port/index.md
@@ -7,7 +7,8 @@ slug: Web/API/AudioWorkletProcessor/port
 
 {{domxref("AudioWorkletProcessor")}} 인터페이스의 읽기 전용 **`port`** 속성은 연관된 {{domxref("MessagePort")}}를 반환합니다. 이것은 프로세서와 프로세서가 속한 {{domxref("AudioWorkletNode")}} 사이에서 소통하기 위해 사용될 수 있습니다.
 
-> **참고:** 채널의 다른 쪽 끝에 있는 포트는
+> [!NOTE]
+> 채널의 다른 쪽 끝에 있는 포트는
 > 노드의 {{domxref("AudioWorkletNode.port", "port")}} 속성 아래에서 사용 가능합니다.
 
 ## 구문
diff --git a/files/ko/web/api/audioworkletprocessor/process/index.md b/files/ko/web/api/audioworkletprocessor/process/index.md
index 52f15281cf98e4..9ebd8516684d47 100644
--- a/files/ko/web/api/audioworkletprocessor/process/index.md
+++ b/files/ko/web/api/audioworkletprocessor/process/index.md
@@ -11,7 +11,7 @@ slug: Web/API/AudioWorkletProcessor/process
 
 이 메서드는 오디오 렌더링 스레드에서 프로세서의 해당하는 {{domxref("AudioWorkletNode")}}를 통해 향해지고 있는 (또한 렌더링 quantum으로도 알려져 있는) 각 오디오 블럭에 대해 한 번 동기적으로 호출됩니다. 다른 말로 하자면, 여러분의 프로세서가 조작할 새로운 오디오 블럭이 준비될 때마다, `process()` 함수가 그렇게 하기 위해 호출됩니다.
 
-> **참고:**
+> [!NOTE]
 >
 > 현재, 오디오 데이터 블럭은 항상 128 프레임
 > 길이입니다—즉, 그것들은 입력들의 채널의 각각에 대해
@@ -70,7 +70,7 @@ var isActivelyProcessing = audioWorkletProcessor.process(
 2. 입력을 변형시키는 노드. 이런 노드를 구현하는 프로세서는 활동 중인 입력 노드들의 존재와 그 노드에 대한 참조들이 garbage-collected 될 수 있는지를 결정할 수 있게 허용하도록 `process` 메서드에서 `false` 를 반환해야 합니다. 이 동작을 하는 노드의 예시는 {{domxref("GainNode")}}입니다. 연결된 입력과 유지되는 참조가 없어지자마자, gain은 더 이상 무엇에도 적용되지 않을 수 있으므로, 이것은 안전하게 garbage-collected 될 수 있습니다.
 3. 입력을 변형시키나 소위 _tail-time_ 을 가지고 있는 노드 — 이는 이것이 심지어 입력이 끊기거나 활동이 없는 후일지라도 (0개의 채널을 생산) 몇 번에 대해 출력을 생산할 것임을 의미합니다. 이런 노드를 구현하는 프로세서는 `process` 메서드에서, 0개의 채널을 포함하는 입력이 발견되자마자 시작하며, _tail-time_ 의 기간 동안 `true` 를 반환해야 합니다.
 
-> **참고:**
+> [!NOTE]
 >
 > `return` 문의 부재는 이 메서드가 `undefined` 를 반환할 것임을 의미하고, 이것은 falsy 값이므로, 이것은 `false`를 반환하는 것과도 같습니다.
 > 명시적인 `return` 문을 누락하는 것은 여러분의 노드에서 감지하기 어려운 문제를 야기할 수도 있습니다.
diff --git a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md
index 3b6b7f21086048..5271bc58bb6ef9 100644
--- a/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md
+++ b/files/ko/web/api/baseaudiocontext/createperiodicwave/index.md
@@ -29,7 +29,8 @@ var wave = AudioContext.createPeriodicWave(real, imag[, constraints]);
 - `constraints` {{optional_inline}}
   - : 정규화(normalization)가 비활성화되어야 하는지를 명시하는 dictionary 객체입니다 (만약 명시되지 않으면, 기본적으로 정규화는 활성화 됩니다.) 이것은 하나의 프로퍼티를 취합니다:\* `disableNormalization`: 만약 `true`로 설정되면, 정규화는 주기파에 대해 비활성화 됩니다. 기본값은 `false`입니다.
 
-> **참고:** 만약 정규화되면, 결과 파동은 최고 절대값(maximum absolute peak value) 1을 가지게 됩니다.
+> [!NOTE]
+> 만약 정규화되면, 결과 파동은 최고 절대값(maximum absolute peak value) 1을 가지게 됩니다.
 
 ## 예제
 
diff --git a/files/ko/web/api/batterymanager/chargingtime/index.md b/files/ko/web/api/batterymanager/chargingtime/index.md
index 545969221ac283..4b42d0ac7648e0 100644
--- a/files/ko/web/api/batterymanager/chargingtime/index.md
+++ b/files/ko/web/api/batterymanager/chargingtime/index.md
@@ -7,7 +7,8 @@ slug: Web/API/BatteryManager/chargingTime
 
 몇 초 단위로, 배터리가 완전히 충전될 때까지 남은 시간량을 가리킵니다.
 
-> **참고:** 반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.
+> [!NOTE]
+> 반환되는 시간이 정확하더라도, 개인정보보호 정책 사유로 브라우저들이 더 큰 간격(대개 15분)으로 시간량을 반올림합니다.
 
 ```js
 var time = battery.chargingTime;