diff --git a/files/ko/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/ko/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index e03c7c2eb7a7fa..10f9351aa8b71e 100644 --- a/files/ko/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/ko/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -56,7 +56,7 @@ l10n: ### 범용 선택자를 사용하여 선택자를 더 쉽게 읽을 수 있도록 만들기 -범용 선택자의 한 가지 용도는 선택자를 더 읽기 쉽게 만들고 수행하는 작업의 측면에서 더 명확하게 만드는 것입니다. 예를 들어, 직계 자식을 포함하여 부모의 첫 번째 자식인 `
` 요소의 자손 요소를 선택하고 굵게 표시하려면, {{cssxref(":first-child")}} 의사 클래스를 사용할 수 있습니다. 이것에 대해서는 `
` 요소 선택자와 함께 하위 선택자로 [의사 클래스와 의사 요소](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)에 대한 강의에서 자세히 알아볼 것입니다. +범용 선택자의 한 가지 용도는 선택자를 더 읽기 쉽게 만들고 수행하는 작업의 측면에서 더 명확하게 만드는 것입니다. 예를 들어, 직계 자식을 포함하여 부모의 첫 번째 자식인 `
` 요소의 자손 요소를 선택하고 굵게 표시하려면, {{cssxref(":first-child")}} 의사 클래스를 사용할 수 있습니다. 이것에 대해서는 `
` 요소 선택자와 함께 하위 선택자로 [의사 클래스와 의사 요소](/ko/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)에 대한 강의에서 자세히 알아볼 것입니다. ```css article :first-child { diff --git a/files/ko/learn/css/css_layout/grids/index.md b/files/ko/learn/css/css_layout/grids/index.md index ff7993925d15e7..0fd52f06e48e3a 100644 --- a/files/ko/learn/css/css_layout/grids/index.md +++ b/files/ko/learn/css/css_layout/grids/index.md @@ -478,7 +478,7 @@ aside { {{ EmbedLiveSample('Line-based_placement', '100%', 600) }} -> **참고:** 마지막 열 또는 행 라인을 상대로 `-1` 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 줄은 항상 [implicit grid](/en-US/docs/Glossary/Grid)가 아닌 명시적 격자의 가장자리부터 계산된다는 점에 유의하세요. +> **참고:** 마지막 열 또는 행 라인을 상대로 `-1` 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 줄은 항상 [implicit grid](/ko/docs/Glossary/Grid)가 아닌 명시적 격자의 가장자리부터 계산된다는 점에 유의하세요. ## grid-template-areas로 위치잡기 diff --git a/files/ko/learn/css/css_layout/index.md b/files/ko/learn/css/css_layout/index.md index 7d2256a23db476..a88075b322d80e 100644 --- a/files/ko/learn/css/css_layout/index.md +++ b/files/ko/learn/css/css_layout/index.md @@ -28,9 +28,9 @@ l10n: - [일반 흐름](/ko/docs/Learn/CSS/CSS_layout/일반_흐름) - 웹페이지의 요소 무리는 여러분이 무언가 변화를 주기전까지는 _normal flow_(일반 흐름)에 따라 요소들을 배치합니다. 이 문서에서는 일반 흐름을 변경하는 방법을 배우기 위한 기초로서 일반 흐름의 기본을 설명합니다. - [플렉스박스(Flexbox)](/ko/docs/Learn/CSS/CSS_layout/Flexbox) - - [플렉스박스](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/%EA%B0%80%EB%B3%80%EC%83%81%EC%9E%90%EC%9D%98_%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8_%EC%82%AC%EC%9A%A9%EB%A1%80)는 행이나 열로 배치하는 1차원 레이아웃 메서드입니다. 항목은 좁은 공간에 맞게 축소되거나, 여분의 공간을 채우기 위해 변형됩니다. 이 문서에서는 모든 기본 사항을 설명합니다. 이 안내서를 공부한 후 [플렉스박스 기술을 테스트](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills)하여 이해도를 확인한 후 계속 진행할 수 있습니다. + - [플렉스박스](/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/%EA%B0%80%EB%B3%80%EC%83%81%EC%9E%90%EC%9D%98_%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8_%EC%82%AC%EC%9A%A9%EB%A1%80)는 행이나 열로 배치하는 1차원 레이아웃 메서드입니다. 항목은 좁은 공간에 맞게 축소되거나, 여분의 공간을 채우기 위해 변형됩니다. 이 문서에서는 모든 기본 사항을 설명합니다. 이 안내서를 공부한 후 [플렉스박스 기술을 테스트](/ko/docs/Learn/CSS/CSS_layout/Flexbox_skills)하여 이해도를 확인한 후 계속 진행할 수 있습니다. - [그리드(Grids)](/ko/docs/Learn/CSS/CSS_layout/Grids) - - CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 2차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열로 배치할 수 있으며, 복잡한 레이아웃을 간단하게 구축할 수 있는 많은 기능이 있습니다. 이 문서에서는 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 설명합니다. 이 안내서를 공부한 후 [그리드 기술을 테스트](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills)해 볼 수 있습니다. + - CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 2차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열로 배치할 수 있으며, 복잡한 레이아웃을 간단하게 구축할 수 있는 많은 기능이 있습니다. 이 문서에서는 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 설명합니다. 이 안내서를 공부한 후 [그리드 기술을 테스트](/ko/docs/Learn/CSS/CSS_layout/Grid_skills)해 볼 수 있습니다. - [플로트(Floats)](/ko/docs/Learn/CSS/CSS_layout/Floats) - 원래 텍스트 블록 안에 플로팅 이미지를 넣기 위해 사용되던 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 일반적으로 사용되는 도구 중 하나로 자리매김했었습니다. 플렉스박스와 그리드의 등장으로 플로트 속성은 원래의 용도로 돌아갔습니다. - [포지셔닝(Positioning)](/ko/docs/Learn/CSS/CSS_layout/위치잡기) @@ -50,12 +50,12 @@ l10n: 다음 평가는 위 가이드에서 다룬 CSS 레이아웃 방법에 대한 이해도를 테스트합니다. -- [레이아웃 이해의 핵심 사항](/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) +- [레이아웃 이해의 핵심 사항](/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) - 웹페이지를 레이아웃하여 다양한 레이아웃 방법에 대한 지식을 테스트하는 평가입니다. ## 같이 보기 -- [포지셔닝 실례](/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples) +- [포지셔닝 실례](/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples) - : 이 문서에서는 포지셔닝으로 어떤 작업을 수행할 수 있는지 설명하기 위해 몇 가지 실제 사례를 구축하는 방법을 보여줍니다. -- [CSS 레이아웃 안내서](/en-US/docs/Web/CSS/Layout_cookbook) +- [CSS 레이아웃 안내서](/ko/docs/Web/CSS/Layout_cookbook) - : CSS 레이아웃 안내서(cookbook)는 사이트에 구현해야 할 수 있는 일반적인 레이아웃 패턴에 대한 레시피를 한데 모으는 것을 목표로 합니다. 이 레시피는 프로젝트의 시작점으로 사용할 수 있는 코드를 제공할 뿐만 아니라 레이아웃 사양을 사용할 수 있는 다양한 방법과 개발자로서의 선택 사항을 강조합니다. diff --git a/files/ko/learn/css/css_layout/responsive_design/index.md b/files/ko/learn/css/css_layout/responsive_design/index.md index 2ffbed8d54d897..64b7050a4b085b 100644 --- a/files/ko/learn/css/css_layout/responsive_design/index.md +++ b/files/ko/learn/css/css_layout/responsive_design/index.md @@ -227,7 +227,7 @@ h1 { ``` -이 [viewport](/en-US/docs/Web/HTML/Viewport_meta_tag) 메타 태그는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고 문서의 크기를 의도한 크기의 100%로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려줍니다. +이 [viewport](/ko/docs/Web/HTML/Viewport_meta_tag) 메타 태그는 모바일 브라우저에 뷰포트의 너비를 기기 너비로 설정하고 문서의 크기를 의도한 크기의 100%로 조정하여 문서를 모바일에 최적화된 크기로 표시해야 함을 알려줍니다. 이것이 왜 필요한가요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문입니다. diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/index.md b/files/ko/learn/forms/how_to_structure_a_web_form/index.md index 7763406d4f45ab..7448efa21adab4 100644 --- a/files/ko/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.md @@ -324,7 +324,7 @@ HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두 ## 실력을 시험해 보세요! -이 글을 끝까지 읽었지만 가장 중요한 내용을 기억할 수 있나요? 이동하기 전에 [Test your skills: Form structure](/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure) 를 방문해 확인 해보세요! +이 글을 끝까지 읽었지만 가장 중요한 내용을 기억할 수 있나요? 이동하기 전에 [Test your skills: Form structure](/ko/docs/Learn/Forms/Test_your_skills:_Form_structure) 를 방문해 확인 해보세요! ## 요약 diff --git a/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md index 43dedf924f726f..3e4865e03273f7 100644 --- a/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/ko/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -338,7 +338,7 @@ Document fragments(문서 조각)를 참조하여 현재 문서의 다른 부분 > **참고:** 각 필드의 값은 인쇄되지 않는 문자(탭, 캐리지 리턴, 페이지 구분과 같은 보이지 않는 문자 [percent-escaped](http://en.wikipedia.org/wiki/Percent-encoding))와 공백을 사용하여 URL로 인코딩해야 합니다. > 또한 물음표(`?`)를 사용하여 필드 값에서 기본 URL을 구분하고, `mailto:` URL의 각 필드를 구분하는 `&`를 사용합니다. > 이것은 표준 URL 쿼리 표기법입니다. -> 어떤 URL 쿼리 표기법이 더 일반적으로 사용되는지 이해하기 위해 [The GET method](/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data#the_get_method) 문서를 읽어보세요. +> 어떤 URL 쿼리 표기법이 더 일반적으로 사용되는지 이해하기 위해 [The GET method](/ko/docs/Learn/Forms/Sending_and_retrieving_form_data#the_get_method) 문서를 읽어보세요. 여기 다른 몇 가지 `mailto` URL 샘플들이 있습니다. @@ -350,10 +350,10 @@ Document fragments(문서 조각)를 참조하여 현재 문서의 다른 부분 ## 실력을 시험해 보세요 -이 글의 끝에 도달한 여러분은 가장 중요했던 정보들을 기억하고 계신가요? 다음 단계로 넘어가기 전에 이 정보를 알고있는지 확인하기 위한 추가 테스트 해볼 수 있습니다. 자세한 내용은 [Test your skills: Links](/en-US/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links) 링크를 참조하세요. +이 글의 끝에 도달한 여러분은 가장 중요했던 정보들을 기억하고 계신가요? 다음 단계로 넘어가기 전에 이 정보를 알고있는지 확인하기 위한 추가 테스트 해볼 수 있습니다. 자세한 내용은 [Test your skills: Links](/ko/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links) 링크를 참조하세요. ## 요약 -이제 링크는 여기까지입니다. 어쨌든! 스타일링을 시작하면 나중에 이 과정의 링크로 돌아올 것입니다. 다음 HTML에서는 텍스트 의미론(Text Semantics)으로 돌아가서 유용하게 사용할 수 있는 고급의 다른 기능들을 살펴보도록 하겠습니다. 다음에 알아볼 내용은 [Advanced text formatting](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)입니다. +이제 링크는 여기까지입니다. 어쨌든! 스타일링을 시작하면 나중에 이 과정의 링크로 돌아올 것입니다. 다음 HTML에서는 텍스트 의미론(Text Semantics)으로 돌아가서 유용하게 사용할 수 있는 고급의 다른 기능들을 살펴보도록 하겠습니다. 다음에 알아볼 내용은 [Advanced text formatting](/ko/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)입니다. {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md index 102b39e72ad09c..b3ac09c4e68485 100644 --- a/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/ko/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -54,7 +54,7 @@ l10n: 좁은 화면에서 사이트를 볼 때 이미지의 중요한 세부 정보를 표시하는 이미지의 잘린 버전을 표시하는 것도 개선할 수 있습니다. 태블릿과 같은 중간 너비의 화면 장치에는 두 번째 잘린 이미지를 표시할 수 있습니다. 다양한 레이아웃에 대해 이러한 방식으로 서로 다른 자른 이미지를 제공하려는 일반적인 문제를 일반적으로 **아트 디렉션 문제(art direction problem)** 라고 합니다. -또한 모바일 화면에서 페이지를 보는 경우 페이지에 이렇게 큰 이미지를 삽입할 필요가 없습니다. 특히 모바일 사용자는 자신의 디바이스에 작은 이미지로 충분할 텐데 데스크톱 사용자용으로 큰 이미지를 다운로드하여 대역폭을 낭비하고 싶지 않을 것입니다. 반대로 작은 [래스터 이미지](/en-US/docs/Glossary/Raster_image)는 원래 크기보다 크게 표시되면 거칠게 보이기 시작합니다 (래스터 이미지는 [벡터 그래픽](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)에서 보았듯이 가로와 세로가 정해진 픽셀 수로 이루어진 이미지입니다). 이상적으로는 사용자의 웹 브라우저에서 여러 해상도를 사용할 수 있어야 합니다. 그러면 브라우저는 사용자 디바이스의 화면 크기에 따라 로드할 최적의 해상도를 결정할 수 있습니다. 이를 **해상도 전환 문제(resolution wsitching problem)** 라고 합니다. +또한 모바일 화면에서 페이지를 보는 경우 페이지에 이렇게 큰 이미지를 삽입할 필요가 없습니다. 특히 모바일 사용자는 자신의 디바이스에 작은 이미지로 충분할 텐데 데스크톱 사용자용으로 큰 이미지를 다운로드하여 대역폭을 낭비하고 싶지 않을 것입니다. 반대로 작은 [래스터 이미지](/ko/docs/Glossary/Raster_image)는 원래 크기보다 크게 표시되면 거칠게 보이기 시작합니다 (래스터 이미지는 [벡터 그래픽](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)에서 보았듯이 가로와 세로가 정해진 픽셀 수로 이루어진 이미지입니다). 이상적으로는 사용자의 웹 브라우저에서 여러 해상도를 사용할 수 있어야 합니다. 그러면 브라우저는 사용자 디바이스의 화면 크기에 따라 로드할 최적의 해상도를 결정할 수 있습니다. 이를 **해상도 전환 문제(resolution wsitching problem)** 라고 합니다. 상황을 더 복잡하게 생각하자면, 일부 기기에는 이미지를 제대로 보여주기 위해 예상보다 더 고해상도의 이미지가 필요한 고해상도 화면도 있습니다. 이것은 본질적으로 동일한 문제이지만 약간 다른 맥락에서 발생합니다. @@ -194,7 +194,7 @@ img { - **아트 디렉션**: 데스크톱 레이아웃에는 전체 장면을 보여주는 가로 이미지를, 모바일 레이아웃에는 주요 피사체를 확대하여 보여주는 세로 이미지를 제공하는 등 다양한 레이아웃에 맞게 잘린 이미지를 제공하려는 경우 문제가 발생할 수 있습니다. 이 문제는 {{htmlelement("picture")}} 요소를 사용하여 해결할 수 있습니다. - **해상도 전환**: 데스크톱 디스플레이처럼 큰 이미지가 필요하지 않은 좁은 화면 기기에는 작은 이미지 파일을 제공하고, 고밀도/저밀도 화면에는 서로 다른 해상도의 이미지를 제공하려는 경우 문제가 발생할 수 있습니다. [`벡터 그래픽`](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)(SVG 이미지)과 [`sizes`](/ko/docs/Web/HTML/Element/img#sizes) 속성이 있는 [`srcset`](/ko/docs/Web/HTML/Element/img#srcset)을 사용하여 이 문제를 해결할 수 있습니다. -이것으로 [멀티미디어 및 임베딩](/ko/docs/Learn/HTML/Multimedia_and_embedding) 모듈 전체가 끝났습니다! 이제 다음 단계로 넘어가기 전에 해야 할 일은 [멀티미디어 및 임베딩 평가](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)에 도전해보고 여러분의 실력을 확인하는 것입니다. 즐거운 시간 보내세요! +이것으로 [멀티미디어 및 임베딩](/ko/docs/Learn/HTML/Multimedia_and_embedding) 모듈 전체가 끝났습니다! 이제 다음 단계로 넘어가기 전에 해야 할 일은 [멀티미디어 및 임베딩 평가](/ko/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)에 도전해보고 여러분의 실력을 확인하는 것입니다. 즐거운 시간 보내세요! ## 같이 보기 diff --git a/files/ko/web/api/webglrenderingcontext/bufferdata/index.md b/files/ko/web/api/webglrenderingcontext/bufferdata/index.md index 773b1e439af100..36250ab97a05ff 100644 --- a/files/ko/web/api/webglrenderingcontext/bufferdata/index.md +++ b/files/ko/web/api/webglrenderingcontext/bufferdata/index.md @@ -8,7 +8,7 @@ l10n: {{APIRef("WebGL")}} -[WebGL API](/en-US/docs/Web/API/WebGL_API) 의 **`WebGLRenderingContext.bufferData()`** 메서드는 버퍼 객체의 데이터 저장소를 초기화하고 생성합니다. +[WebGL API](/ko/docs/Web/API/WebGL_API) 의 **`WebGLRenderingContext.bufferData()`** 메서드는 버퍼 객체의 데이터 저장소를 초기화하고 생성합니다. ## 구문 diff --git a/files/ko/web/api/webglrenderingcontext/drawarrays/index.md b/files/ko/web/api/webglrenderingcontext/drawarrays/index.md index d71def55ae6281..b9d35f1ffb05c5 100644 --- a/files/ko/web/api/webglrenderingcontext/drawarrays/index.md +++ b/files/ko/web/api/webglrenderingcontext/drawarrays/index.md @@ -45,7 +45,7 @@ drawArrays(mode, first, count) `gl.INVALID_ENUM` 오류가 발생합니다. - `first` 또는 `count` 가 음수인 경우, `gl.INVALID_VALUE` 오류가 발생합니다. -- `gl.CURRENT_PROGRAM` 이 [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null)인 경우, +- `gl.CURRENT_PROGRAM` 이 [`null`](/ko/docs/Web/JavaScript/Reference/Operators/null)인 경우, `gl.INVALID_OPERATION` 오류가 발생합니다. ## 예제 diff --git a/files/ko/web/api/window/message_event/index.md b/files/ko/web/api/window/message_event/index.md index 4a1d6ea5cfc945..3cee9eb9646427 100644 --- a/files/ko/web/api/window/message_event/index.md +++ b/files/ko/web/api/window/message_event/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef}} -`message` 이벤트는 window가 메세지를 받을 때, 예를 들어 다른 브라우징 맥락에서 [`Window.postMessage()`](/ko-KR/docs/Web/API/Window/postMessage)을 호출할 때 {{domxref('Window')}} 객체에서 실행됩니다. +`message` 이벤트는 window가 메세지를 받을 때, 예를 들어 다른 브라우징 맥락에서 [`Window.postMessage()`](/ko/docs/Web/API/Window/postMessage)을 호출할 때 {{domxref('Window')}} 객체에서 실행됩니다. 이 이벤트는 취소할 수 없고, 버블링되지도 않습니다. @@ -44,7 +44,7 @@ _이 인터페이스는 부모인 {{domxref("Event")}}의 속성들도 상속받 ## 예시 -서로 다른 [`