diff --git a/src/content/docs/ko/reference/configuration-reference.mdx b/src/content/docs/ko/reference/configuration-reference.mdx index 9f9b0f72d10f9..b95b7c7861134 100644 --- a/src/content/docs/ko/reference/configuration-reference.mdx +++ b/src/content/docs/ko/reference/configuration-reference.mdx @@ -1197,6 +1197,17 @@ Sharp 이미지 서비스의 기본 이미지 크기 제한을 우회하고 큰 반응형 이미지를 생성하는 데 사용되는 중단점입니다. `experimental.responsiveImages` 플래그를 활성화해야 합니다. 전체 목록은 일반적으로 사용되지 않으며, 소스 및 출력 크기에 따라 필터링됩니다. 사용되는 기본값은 로컬 또는 원격 이미지 서비스를 사용하는지에 따라 다릅니다. 원격 서비스의 경우 필요한 크기만 생성되므로 더 포괄적인 목록이 사용됩니다. 로컬 서비스의 경우 생성되는 이미지 수를 줄이기 위해 더 짧은 목록이 사용됩니다. +### image.experimentalDefaultStyles + +

+ +**타입:** `boolean`
+**기본값:** `true` +

+ +실험적 이미지의 크기가 올바르게 조정되도록 전역 스타일을 자동으로 추가할지 여부입니다. 이 옵션은 기본적으로 활성화되어 있지만, 스타일을 직접 관리하려는 경우 비활성화할 수 있습니다. +이 옵션은 `experimental.responsiveImages` 플래그가 활성화된 경우에만 사용할 수 있습니다. + ## Markdown 옵션 ### markdown.shikiConfig diff --git a/src/content/docs/ko/reference/experimental-flags/responsive-images.mdx b/src/content/docs/ko/reference/experimental-flags/responsive-images.mdx index ed0ec62be0aa0..b66581f6488d0 100644 --- a/src/content/docs/ko/reference/experimental-flags/responsive-images.mdx +++ b/src/content/docs/ko/reference/experimental-flags/responsive-images.mdx @@ -145,9 +145,9 @@ import myImage from '../assets/my_image.png'; > ``` -## 이미지 스타일 재정의 +## 반응형 이미지의 기본 스타일 -반응형 이미지 컴포넌트는 크기를 올바르게 조정하기 위해 몇 가지 스타일을 적용합니다. 적용되는 스타일은 레이아웃 유형에 따라 다르며, 생성된 `srcset` 및 `sizes` 속성에 최적의 동작을 제공하도록 설계되었습니다. 기본 스타일은 다음과 같습니다. +반응형 이미지 컴포넌트는 크기를 올바르게 조정하기 위해 몇 가지 스타일을 적용합니다. 적용되는 스타일은 레이아웃 유형에 따라 다르며, 생성된 `srcset` 및 `sizes` 속성에 최적의 동작을 제공하도록 설계되었습니다. ```css title="Responsive Image Styles" :where([data-astro-image]) { @@ -162,10 +162,14 @@ import myImage from '../assets/my_image.png'; } ``` -`` 또는 `` 컴포넌트의 `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)를 사용해야 합니다. +`` 또는 `` 컴포넌트에서 `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)를 참조하세요.