Skip to content

i18n(ko-KR): update configuration-reference.mdx and responsive-images.mdx #11816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yanthomasdev merged 2 commits into from
Jun 1, 2025
Merged

i18n(ko-KR): update configuration-reference.mdx and responsive-images.mdx #11816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c1ed4b
i18n(ko-KR): update `configuration-reference.mdx` and `responsive-ima…
jsparkdev Jun 1, 2025
26d8426
Merge branch 'main' into style
yanthomasdev Jun 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/content/docs/ko/reference/configuration-reference.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1197,6 +1197,17 @@ Sharp 이미지 서비스의 기본 이미지 크기 제한을 우회하고 큰

반응형 이미지를 생성하는 데 사용되는 중단점입니다. `experimental.responsiveImages` 플래그를 활성화해야 합니다. 전체 목록은 일반적으로 사용되지 않으며, 소스 및 출력 크기에 따라 필터링됩니다. 사용되는 기본값은 로컬 또는 원격 이미지 서비스를 사용하는지에 따라 다릅니다. 원격 서비스의 경우 필요한 크기만 생성되므로 더 포괄적인 목록이 사용됩니다. 로컬 서비스의 경우 생성되는 이미지 수를 줄이기 위해 더 짧은 목록이 사용됩니다.

### image.experimentalDefaultStyles

<p>

**타입:** `boolean`<br />
**기본값:** `true`
</p>

실험적 이미지의 크기가 올바르게 조정되도록 전역 스타일을 자동으로 추가할지 여부입니다. 이 옵션은 기본적으로 활성화되어 있지만, 스타일을 직접 관리하려는 경우 비활성화할 수 있습니다.
이 옵션은 `experimental.responsiveImages` 플래그가 활성화된 경우에만 사용할 수 있습니다.

## Markdown 옵션

### markdown.shikiConfig
Expand Down
14 changes: 9 additions & 5 deletions src/content/docs/ko/reference/experimental-flags/responsive-images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,9 @@ import myImage from '../assets/my_image.png';
>
```

## 이미지 스타일 재정의
## 반응형 이미지의 기본 스타일

반응형 이미지 컴포넌트는 크기를 올바르게 조정하기 위해 몇 가지 스타일을 적용합니다. 적용되는 스타일은 레이아웃 유형에 따라 다르며, 생성된 `srcset` 및 `sizes` 속성에 최적의 동작을 제공하도록 설계되었습니다. 기본 스타일은 다음과 같습니다.
반응형 이미지 컴포넌트는 크기를 올바르게 조정하기 위해 몇 가지 스타일을 적용합니다. 적용되는 스타일은 레이아웃 유형에 따라 다르며, 생성된 `srcset` 및 `sizes` 속성에 최적의 동작을 제공하도록 설계되었습니다.

```css title="Responsive Image Styles"
:where([data-astro-image]) {
Expand All @@ -162,10 +162,14 @@ import myImage from '../assets/my_image.png';
}
```

`<Image />` 또는 `<Picture />` 컴포넌트의 `fit` 및 `position` props를 설정하여 `object-fit` 및 `object-position` 스타일을 재정의할 수 있습니다.
### 기본 스타일 재정의

해당 스타일은 [특이성](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascade/Specificity)이 0인 [`:where()` 가상 클래스](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)를 사용합니다. 이는 사용자 정의 스타일로 쉽게 재정의할 수 있음을 의미합니다. 모든 클래스나 태그 이름은 `:where()`보다 높은 특이성을 가지므로, 이미지에 사용자 정의 클래스 또는 태그 이름을 추가하여 스타일을 쉽게 재정의할 수 있습니다.
해당 스타일은 [특이성](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascade/Specificity)이 0인 [`:where()` 가상 클래스](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)를 사용합니다. 이는 사용자 정의 스타일로 쉽게 재정의할 수 있음을 의미합니다. 모든 CSS 선택자는 `:where()`보다 높은 특이성을 가지므로, 이미지에 사용자 정의 스타일을 추가하여 스타일을 쉽게 재정의할 수 있습니다.

Tailwind 4는 [캐스케이드 레이어](https://developer.mozilla.org/ko/docs/Web/CSS/@layer)를 사용하기 때문에 특별한 경우입니다. 즉, 레이어를 사용하지 않는 규칙보다 Tailwind 규칙의 특이성이 항상 낮습니다. Astro는 캐스케이드 레이어를 지원하지 않는 브라우저를 지원하므로 이미지에 이를 사용할 수 없습니다. 따라서 Tailwind 4를 사용하여 스타일을 재정의해야 하는 경우 [`!important` 수정자](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier)를 사용해야 합니다.
`<Image />` 또는 `<Picture />` 컴포넌트에서 `fit` 및 `position` props를 설정하여 이미지별로 `object-fit` 및 `object-position` 스타일을 재정의할 수 있습니다.

반응형 이미지를 직접 스타일링하고 싶다면, [`image.experimentalDefaultStyles`](/ko/reference/configuration-reference/#imageexperimentaldefaultstyles)를 `false`로 설정하여 기본 스타일을 완전히 비활성화할 수 있습니다.

Tailwind 4는 [캐스케이드 레이어](https://developer.mozilla.org/ko/docs/Web/CSS/@layer)를 사용하기 때문에 특별한 경우입니다. 즉, 레이어를 사용하지 않는 규칙보다 Tailwind 규칙의 특이성이 항상 낮습니다. Astro는 캐스케이드 레이어를 지원하지 않는 브라우저를 지원하므로 이미지에 이를 사용할 수 없습니다. 즉, Tailwind 4를 사용하여 기본 스타일을 재정의하는 경우, [기본 스타일을 비활성화](/ko/reference/configuration-reference/#imageexperimentaldefaultstyles)해야 합니다.

전체적인 개요를 확인하고 이 실험적인 API에 대한 피드백을 제공하려면 [반응형 이미지 RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md)를 참조하세요.