From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/@media/index.html | 153 +++++++++++++++++++++ .../web/css/@media/prefers-color-scheme/index.html | 89 ++++++++++++ 2 files changed, 242 insertions(+) create mode 100644 files/ko/web/css/@media/index.html create mode 100644 files/ko/web/css/@media/prefers-color-scheme/index.html (limited to 'files/ko/web/css/@media') diff --git a/files/ko/web/css/@media/index.html b/files/ko/web/css/@media/index.html new file mode 100644 index 0000000000..6c06996035 --- /dev/null +++ b/files/ko/web/css/@media/index.html @@ -0,0 +1,153 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - At-rule + - CSS + - Reference + - 미디어 쿼리 +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

@media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

+ +
+

참고: JavaScript에서는 @media를 {{domxref("CSSMediaRule")}} CSS 객체 모델 인터페이스로 접근할 수 있습니다.

+
+ +

구문

+ +

@media @규칙은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있습니다.

+ +
/* 최상위 코드 레벨 */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* 다른 조건부 @규칙 내에 중첩 */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

미디어 쿼리 구문에 관한 내용은 미디어 쿼리 사용하기 문서를 참고하세요.

+ +

접근성 고려사항

+ +

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 {{cssxref("<length>")}} 자리에는 em을 사용하는게 좋습니다.

+ +

em과 px 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 em이 더 자연스럽게 동작합니다.

+ +

Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 prefers-reduced-motion 쿼리를 사용하면 사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다.

+ +

보안

+ +

미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.

+ +

그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

출력과 화면 미디어 타입 판별

+ +
@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}
+ +

Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.

+ +
@media (height > 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+    body { line-height: 1.4; }
+}
+ +

더 많은 예제는 미디어 쿼리 사용하기를 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationCommentFeedback
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
+ Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Defines the basic syntax of the @media rule.CSS Working Group drafts GitHub issues
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
+ Deprecates all media types except for screen, print, speech, and all.
+ Makes the syntax more flexible by adding, among other things, the or keyword.

+ 		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.media")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/@media/prefers-color-scheme/index.html b/files/ko/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..1ce1a10a2b --- /dev/null +++ b/files/ko/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,89 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +

prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.

+ +

구문

+ +
+
no-preference
+
사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 boolean context에서 false로 판정됩니다.
+
light
+
사용자가 시스템에 라이트 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.
+
dark
+
사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.
+
+ +

예제

+ +

이 예제는 검은 배경에 흰 텍스트를 가진 요소를 라이트 테마를 사용하는 사용자가 볼 경우 색을 반대로 해서 나타냅니다.

+ +

HTML

+ +
<div class="themed">Theme</div>
+
+ +

CSS

+ +
.themed {
+  display: block;
+  width: 10em;
+  height: 10em;
+  background: black;
+  color: white;
+}
+
+@media (prefers-color-scheme: light) {
+  .themed {
+    background: white;
+    color: black;
+  }
+}
+
+ +

Result

+ +

{{EmbedLiveSample("예제")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
+

{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}

+ 		{{Spec2('CSS5 Media Queries')}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

같이 보기

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
-- cgit v1.2.3-54-g00ecf