From 1b38df0a852a99a9756ef4d705e2b3ad91c70741 Mon Sep 17 00:00:00 2001 From: chanmin Date: Wed, 11 Sep 2024 21:47:18 +0900 Subject: [PATCH 1/8] docs(ko): add korean translation of fit-content --- files/ko/web/css/fit-content/index.md | 73 +++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 files/ko/web/css/fit-content/index.md diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md new file mode 100644 index 00000000000000..f7c0d81861dcf2 --- /dev/null +++ b/files/ko/web/css/fit-content/index.md @@ -0,0 +1,73 @@ +--- +title: fit-content +slug: Web/CSS/fit-content +l10n: + sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b +--- + +{{CSSRef}} + +**`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다. + +{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}}에 대해 박스 크기로 사용될 때, 최대 및 최소 크기는 콘텐츠의 크기를 의미합니다. + +> [!NOTE] +> CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다. + +## 구문 + +```css +width: fit-content; +block-size: fit-content; +``` + +## 예제 + +### Using fit-content for box sizing + +#### HTML + +```html +
+
Item
+
Item with more text in it.
+
+ Item with more text in it, hopefully we have added enough text so the text + will start to wrap. +
+
+``` + +#### CSS + +```css +.container { + border: 2px solid #ccc; + padding: 10px; + width: 20em; +} + +.item { + width: fit-content; + background-color: #8ca0ff; + padding: 5px; + margin-bottom: 1em; +} +``` + +#### 결과 + +{{EmbedLiveSample("Using_fit-content_for_box_sizing", "100%", 200)}} + +## 명세 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 함께 보기 + +- 연관된 크기 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}} +- [CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) 모듈 From 554d48f470c8850c615fa58a6a5c1c3333bfc1c1 Mon Sep 17 00:00:00 2001 From: chanmin Date: Wed, 11 Sep 2024 21:55:05 +0900 Subject: [PATCH 2/8] chore: translate code example --- files/ko/web/css/fit-content/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index f7c0d81861dcf2..c6b6eda6ac9a2c 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -29,11 +29,11 @@ block-size: fit-content; ```html
-
Item
-
Item with more text in it.
+
항목
+
더 많은 텍스트가 포함된 항목입니다.
- Item with more text in it, hopefully we have added enough text so the text - will start to wrap. + 텍스트가 더 많이 포함된 항목입니다. 텍스트가 줄바꿈되기를 기대하며 충분한 + 양의 텍스트를 추가했습니다.
``` From 354629ee8e7f3b344f04c231065e7cb505b1566e Mon Sep 17 00:00:00 2001 From: chanmin Date: Wed, 11 Sep 2024 22:09:41 +0900 Subject: [PATCH 3/8] fix: fix EmbedLiveSample --- files/ko/web/css/fit-content/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index c6b6eda6ac9a2c..297eec6f5bec1d 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -23,7 +23,7 @@ block-size: fit-content; ## 예제 -### Using fit-content for box sizing +### 박스 크기에 fit-content 사용하기 #### HTML @@ -57,7 +57,7 @@ block-size: fit-content; #### 결과 -{{EmbedLiveSample("Using_fit-content_for_box_sizing", "100%", 200)}} +{{EmbedLiveSample("박스 크기에 fit-content 사용하기", "100%", 200)}} ## 명세 From f7d72938e307807406c73adfdc69e73a54365991 Mon Sep 17 00:00:00 2001 From: chanmin Date: Wed, 11 Sep 2024 22:18:00 +0900 Subject: [PATCH 4/8] chore: fix awkward translation --- files/ko/web/css/fit-content/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index 297eec6f5bec1d..df0d4aea2ce6aa 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -9,7 +9,7 @@ l10n: **`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다. -{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}}에 대해 박스 크기로 사용될 때, 최대 및 최소 크기는 콘텐츠의 크기를 의미합니다. +{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 의 박스 크기로 사용할 경우, 최대 및 최소 크기는 콘텐츠의 크기를 참조합니다. > [!NOTE] > CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다. @@ -23,7 +23,7 @@ block-size: fit-content; ## 예제 -### 박스 크기에 fit-content 사용하기 +### fit-content를 사용해 박스 크기 설정하기 #### HTML @@ -57,7 +57,7 @@ block-size: fit-content; #### 결과 -{{EmbedLiveSample("박스 크기에 fit-content 사용하기", "100%", 200)}} +{{EmbedLiveSample("fit-content를 사용해 박스 크기 설정하기", "100%", 200)}} ## 명세 @@ -69,5 +69,5 @@ block-size: fit-content; ## 함께 보기 -- 연관된 크기 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}} +- 연관된 크기 설정 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}} - [CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) 모듈 From 0f7902a85f8d7df56d95d8a0e24e1d467c69cf64 Mon Sep 17 00:00:00 2001 From: chanmin Date: Wed, 11 Sep 2024 22:20:13 +0900 Subject: [PATCH 5/8] chore: fix awkward translation --- files/ko/web/css/fit-content/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index df0d4aea2ce6aa..e45a4fe2ce48d6 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -9,7 +9,7 @@ l10n: **`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다. -{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 의 박스 크기로 사용할 경우, 최대 및 최소 크기는 콘텐츠의 크기를 참조합니다. +{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 가 레이아웃된 박스의 크기로 사용될 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다. > [!NOTE] > CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다. From faa2d550e0595bfac3ecd0e03f4a9748a5984f90 Mon Sep 17 00:00:00 2001 From: chanmin Date: Wed, 11 Sep 2024 22:21:28 +0900 Subject: [PATCH 6/8] chore: fix awkward translation --- files/ko/web/css/fit-content/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index e45a4fe2ce48d6..7b0ec41ce4a067 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -9,7 +9,7 @@ l10n: **`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다. -{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 가 레이아웃된 박스의 크기로 사용될 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다. +{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 가 레이아웃된 박스의 크기로 사용된 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다. > [!NOTE] > CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다. From ece10ef061767d5c50c29f4084df4093ff3298db Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Sun, 29 Sep 2024 21:44:19 +0900 Subject: [PATCH 7/8] Update files/ko/web/css/fit-content/index.md --- files/ko/web/css/fit-content/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index 7b0ec41ce4a067..cb1c079b0ac112 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -59,7 +59,7 @@ block-size: fit-content; {{EmbedLiveSample("fit-content를 사용해 박스 크기 설정하기", "100%", 200)}} -## 명세 +## 명세서 {{Specifications}} From 670a5d846a40669284fbaf0bc7d24b601e4df3d0 Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Sun, 29 Sep 2024 21:44:28 +0900 Subject: [PATCH 8/8] Update files/ko/web/css/fit-content/index.md --- files/ko/web/css/fit-content/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md index cb1c079b0ac112..e607b1374b2d9b 100644 --- a/files/ko/web/css/fit-content/index.md +++ b/files/ko/web/css/fit-content/index.md @@ -67,7 +67,7 @@ block-size: fit-content; {{Compat}} -## 함께 보기 +## 같이 보기 - 연관된 크기 설정 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}} - [CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) 모듈