Merge branch 'main' into main

mdn · Sep 12, 2024 · e23a1b7 · e23a1b7
2 parents b6db48c + 234e6e9
commit e23a1b7
Show file tree

Hide file tree

Showing 663 changed files with 7,820 additions and 4,573 deletions.
diff --git a/.github/workflows/auto-merge.yml b/.github/workflows/auto-merge.yml
@@ -6,7 +6,7 @@ on:
 jobs:
   auto-merge:
     runs-on: ubuntu-latest
-    if: github.actor == 'dependabot[bot]'
+    if: github.event.pull_request.user.login == 'dependabot[bot]'
     steps:
       - uses: ahmadnassri/action-dependabot-auto-merge@v2
         with:

diff --git a/.github/workflows/markdown-lint-fix.yml b/.github/workflows/markdown-lint-fix.yml
@@ -61,7 +61,7 @@ jobs:
 
       - name: Create PR with only fixable issues
         if: success()
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v7
         with:
           commit-message: "${{ matrix.lang }}: auto-fix Markdownlint issues"
           branch: markdownlint-auto-cleanup-${{ matrix.lang }}
@@ -76,7 +76,7 @@ jobs:
 
       - name: Create PR with notice on unfixed issues
         if: failure()
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v7
         with:
           commit-message: "${{ matrix.lang }}: auto-fix Markdownlint issues"
           branch: markdownlint-auto-cleanup-${{ matrix.lang }}

diff --git a/.github/workflows/sync-translated-content.yml b/.github/workflows/sync-translated-content.yml
@@ -90,7 +90,7 @@ jobs:
           } >> "$GITHUB_ENV"
 
       - name: Create PR with sync for ${{ matrix.lang }}
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v7
         with:
           commit-message: "${{ matrix.lang }}: sync translated content"
           branch: content-sync-${{ matrix.lang }}

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -34,7 +34,7 @@ See the [Creating a pull request](#creating-a-pull-request) for more details on
 
 If you're not certain of the changes that you want to make, [get in touch with us][]!
 
-> **Note:** You can click the **View the source on GitHub** or **Edit the page on GitHub** link at the bottom of an MDN page to jump directly to the page source on GitHub.
+> **Note:** You may click the **View this page on GitHub** or **Report a problem with this content** link at the bottom of an MDN page, to either jump directly to the page source or raise an issue on GitHub.
 
 ### Forking and cloning the repository
 

diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md
@@ -22,9 +22,9 @@
 
 ## 용어 안내서 `참고 링크` 우선 순위
 
-- 1. 해당 단어에 대한 의견을 나눈 PR 링크
-- 2. 적절한 ko MDN 문서 링크
-- 3. 적절한 en-us MDN 문서 링크
+1. 해당 단어에 대한 의견을 나눈 PR 링크
+2. 적절한 ko MDN 문서 링크
+3. 적절한 en-us MDN 문서 링크
 
 ## Section Title
 

diff --git a/docs/ko/guides/macro-guide.md b/docs/ko/guides/macro-guide.md
@@ -29,5 +29,3 @@ EmbedLiveSample/MacroLiveSampleError 오류 찾는 [스크립트 링크 참고](
 ## 매크로 수정 및 번역
 
 MDN은 초창기에 [kuma](https://github.com/mdn/kuma) 플랫폼으로 MDN 웹 문서를 구동해왔습니다. 그 당시 사용한 많은 매크로들이 레거시로 남아 있습니다. 레거시로 남은 매크로를 [Kumascript](https://github.com/mdn/kumascript)라고 부릅니다. 현재는 [yari 저장소 내의 kumascript 폴더](https://github.com/mdn/yari/tree/main/kumascript)로 대체되어 사용되고 있습니다([참고](https://egas.tistory.com/168#%EB%AF%B8%EC%82%AC%EC%9A%A9-macro-%EC%A0%9C%EA%B1%B0)).
-
-만약 `{{DOMAttributeMethods}}` 매크로를 수정하자고 한다면 `kumascript/macros/DOMAttributeMethods.ejs`를 확인하면 됩니다([관련 PR](https://github.com/mdn/yari/pull/10502)).
diff --git a/docs/ko/guides/translation-guide.md b/docs/ko/guides/translation-guide.md
@@ -41,57 +41,34 @@
 
 | 용어          | 번역             | 참고 링크                     |
 | ------------- | ---------------- | ----------------------------- |
-| Note          | 참고             |                               |
-| Warning       | 경고             |                               |
-| Callout       | 알림             |                               |
 | Objective     | 목표             | [링크][What_is_accessibility] |
 | Prerequisites | 필요한 사전 지식 | [링크][What_is_accessibility] |
 
 ### 교육 과정 callout
 
 ```markdown
-> **알림:**
+> [!CALLOUT]
 >
 > #### 프론트엔드 웹 개발자가 되고자 하시나요?
 >
-> 목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.
+> 프론트엔드 웹 개발자가 되고 싶지만 무엇을 먼저 배워야 할지 모르겠다면, MDN 커리큘럼을 참고해 학습 계획을 세우는 것을 추천합니다. 이 커리큘럼은 성공적인 프론트엔드 개발자가 되기 위한 필수 기술과 실습을 체계적으로 학습할 수 있는 경로를 제공하며, 추천 학습 자료도 함께 제공합니다.
 >
-> [**시작하기**](/ko/docs/Learn/Front-end_web_developer)
+> [**시작하기**](/ko/curriculum/)
 ```
 
-### 카드 번역
+## GFM Alerts
 
-카드는 참고, 경고 그리고 알림의 세 가지 유형이 있으며, 영어 원문에서는 다음과 같이 표시됩니다.
+`> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!CAUTION]`, `> [!WARNING]`은 새로 추가된 github markdown으로 영어 문법만 사용할 수 있습니다.
 
 ```markdown
-# 참고
-
-> **Note:** This is a note.
-
-# 경고
-
-> **Warning:** This is a warning.
-
-# 알림
+// bad
 
-> **Callout:** This is a callout.
+> [!참고]
+> ...
 ```
 
-이런 카드는 아래와 같이 번역해주시면 됩니다.
-
-```markdown
-# 참고
-
-> **참고:** 참고입니다.
-
-# 경고
-
-> **경고:** 경고입니다.
-
-# 알림
-
-> **알림:** 알림입니다.
-```
+- [[Markdown] An option to highlight a "Note" and "Warning" using blockquote (Beta)](https://github.com/orgs/community/discussions/16925)
+- [Incorrect formatting for highlighted notes in GitHub flavoured Markdown](https://github.com/prettier/prettier/issues/16454)
 
 ## 역주/역자주
 

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
@@ -1932,7 +1932,7 @@
 /es/docs/Web/CSS/env()	/es/docs/Web/CSS/env
 /es/docs/Web/CSS/filter-function/blur()	/es/docs/Web/CSS/filter-function/blur
 /es/docs/Web/CSS/filter-function/brightness()	/es/docs/Web/CSS/filter-function/brightness
-/es/docs/Web/CSS/filter-function/url	/es/docs/Web/CSS/url
+/es/docs/Web/CSS/filter-function/url	/es/docs/Web/CSS/url_value
 /es/docs/Web/CSS/filtro	/es/docs/Web/CSS/filter
 /es/docs/Web/CSS/grid-column-gap	/es/docs/Web/CSS/column-gap
 /es/docs/Web/CSS/grid-gap	/es/docs/Web/CSS/gap
@@ -1951,7 +1951,8 @@
 /es/docs/Web/CSS/transform-function/translate()	/es/docs/Web/CSS/transform-function/translate
 /es/docs/Web/CSS/transform-function/translateY()	/es/docs/Web/CSS/transform-function/translateY
 /es/docs/Web/CSS/transform-function/translateZ()	/es/docs/Web/CSS/transform-function/translateZ
-/es/docs/Web/CSS/url()	/es/docs/Web/CSS/url
+/es/docs/Web/CSS/url	/es/docs/Web/CSS/url_value
+/es/docs/Web/CSS/url()	/es/docs/Web/CSS/url_value
 /es/docs/Web/CSS/var()	/es/docs/Web/CSS/var
 /es/docs/Web/Demos	/es/docs/orphaned/Web/Demos
 /es/docs/Web/Demos_of_open_web_technologies	/es/docs/orphaned/Web/Demos

diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
@@ -8273,7 +8273,7 @@
     "modified": "2020-10-15T21:58:20.034Z",
     "contributors": ["juan-ferrer-toribio"]
   },
-  "Web/CSS/url": {
+  "Web/CSS/url_value": {
     "modified": "2020-01-10T13:46:46.404Z",
     "contributors": ["roocce"]
   },

diff --git a/.../es/learn/common_questions/design_and_accessibility/common_web_layouts/index.md b/.../es/learn/common_questions/design_and_accessibility/common_web_layouts/index.md
@@ -1,38 +1,40 @@
 ---
 title: ¿Qué contienen los diseños web comunes?
 slug: Learn/Common_questions/Design_and_accessibility/Common_web_layouts
+l10n:
+  sourceCommit: 530c1f54e63834411aa38789b1ac82e3831c4dfa
 ---
 
 {{QuicklinksWithSubPages("Learn/Common_questions")}}
 
-Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes.
+Cuando diseñas páginas para tú sitio web es bueno tener una idea de los diseños más comunes.
 
-<table>
+<table class="standard-table">
   <tbody>
     <tr>
       <th scope="row">Prerrequisitos:</th>
       <td>
-        Asegúrese que usted ya ha pensado sobre
-        <a href="/es/docs/Learn/Common_questions/Thinking_before_coding"
-          >lo que quiere lograr</a
+        Asegúrate haber pensado
+        <a href="/es/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding"
+          >lo que quieres lograr</a
         >
-        con su proyecto web.
+        con tú proyecto web.
       </td>
     </tr>
     <tr>
       <th scope="row">Objetivo:</th>
       <td>
-        Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo.
+        Aprender dónde colocar las cosas en tus páginas web, y cómo hacerlo.
       </td>
     </tr>
   </tbody>
 </table>
 
 ## Resumen
 
-Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio.
+Existe una razón para que hablemos sobre diseño web. Comienzas con una página en blanco, y puedes tomar muchas direcciones. Y si no tienes mucha experiencia, comenzar con una página en blanco puede ser un poco intimidante. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio.
 
-Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes:
+Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web convencionales son construídas a partir de las siguientes partes:
 
 - Encabezado
   - : Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar.
@@ -63,11 +65,11 @@ La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos.
 
 Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio.
 
-Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio.
+Estas son reglas generales que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian dependiendo del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio.
 
 ## Aprendizaje activo
 
-_Aún no hay aprendizaje activo disponible. [Por favor, considere contribuir](/es/docs/MDN/Getting_started)._
+_Aún no hay aprendizaje activo disponible. [Por favor, considere contribuir](/es/docs/MDN/Community/Contributing/Getting_started)._
 
 ## Profundización
 
@@ -83,30 +85,30 @@ Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio de
 
 ### Diseño de dos columnas
 
-**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios).
+Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios).
 
 ![Example of a 2 column layout for a blog](screenshot-blog.jpg) ![A 2 column layout with the main content on the left column](screenshot-blog-overlay.jpg)
 
 En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacionada con el contenido principal, pero el contenido principal tiene sentido sin esta, de este modo pudieras pensar que la imagen forma parte del contenido principal o del lateral. En realidad no importa. Lo que importa es que si pones algo justo debajo del encabezado, debería ser parte del contenido principal o estar directamente relacionado con este.
 
 ### Es una trampa
 
-**[MICA](http://www.mica.edu/About_MICA.html)**. Este es un poco más complicado. Parece un diseño de tres columnas...
+**[MICA](http://www.mica.edu/About_MICA.html)**. Este es un poco más complicado. Parece un diseño de tres columnas:
 
 ![Example of a false 3 columns layout](screenshot-education.jpg) ![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg)
 
-...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.
+Pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.
 
 ¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la "I" del logo MICA crean una línea de fuerza vertical.
 
 Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los diseños simples son más fáciles de implementar, pero deje espacio expresar su creatividad en el área.
 
 ### Un diseño mucho más complicado
 
-**La [Opera de Paris](https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini).**
+**La Opera de Paris**.
 
 ![An example of a tricky layout.](screenshot-opera.jpg) ![This is a 2 column layout but the header is overlaping the main content.](screenshot-opera-overlay.jpg)
 
-Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos.
+Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que visualmente rompen el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. El ejemplo de la Opera parece más complejo que el de MICA, pero en realidad es más fácil de implementar (bueno, "fácil" es un concepto relativo).
 
-Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no.
+Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -29,5 +29,3 @@ EmbedLiveSample/MacroLiveSampleError 오류 찾는 [스크립트 링크 참고](
		## 매크로 수정 및 번역

		MDN은 초창기에 [kuma](https://github.com/mdn/kuma) 플랫폼으로 MDN 웹 문서를 구동해왔습니다. 그 당시 사용한 많은 매크로들이 레거시로 남아 있습니다. 레거시로 남은 매크로를 [Kumascript](https://github.com/mdn/kumascript)라고 부릅니다. 현재는 [yari 저장소 내의 kumascript 폴더](https://github.com/mdn/yari/tree/main/kumascript)로 대체되어 사용되고 있습니다([참고](https://egas.tistory.com/168#%EB%AF%B8%EC%82%AC%EC%9A%A9-macro-%EC%A0%9C%EA%B1%B0)).

		만약 `{{DOMAttributeMethods}}` 매크로를 수정하자고 한다면 `kumascript/macros/DOMAttributeMethods.ejs`를 확인하면 됩니다([관련 PR](https://github.com/mdn/yari/pull/10502)).