From 24cfb4fa3329cfd1b94c4136ebf18d46c7328e10 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Tue, 8 Aug 2023 01:05:55 -0700 Subject: [PATCH] ko: Format /web/css using Prettier (part 1) (#14793) --- files/ko/web/css/-webkit-line-clamp/index.md | 5 +- .../css/-webkit-overflow-scrolling/index.md | 9 +- files/ko/web/css/@charset/index.md | 9 +- .../web/css/@font-face/font-display/index.md | 5 +- files/ko/web/css/@font-face/index.md | 6 +- files/ko/web/css/@import/index.md | 4 +- files/ko/web/css/@keyframes/index.md | 61 +++-- files/ko/web/css/@media/index.md | 29 ++- .../css/@media/prefers-color-scheme/index.md | 37 ++- files/ko/web/css/@namespace/index.md | 9 +- files/ko/web/css/@page/index.md | 1 + files/ko/web/css/@supports/index.md | 41 ++- files/ko/web/css/_colon_active/index.md | 23 +- files/ko/web/css/_colon_checked/index.md | 42 +++- files/ko/web/css/_colon_default/index.md | 9 +- files/ko/web/css/_colon_defined/index.md | 16 +- files/ko/web/css/_colon_disabled/index.md | 31 ++- files/ko/web/css/_colon_enabled/index.md | 7 +- files/ko/web/css/_colon_first-child/index.md | 3 +- .../ko/web/css/_colon_first-of-type/index.md | 5 +- files/ko/web/css/_colon_first/index.md | 2 +- files/ko/web/css/_colon_focus-within/index.md | 7 +- files/ko/web/css/_colon_focus/index.md | 4 +- files/ko/web/css/_colon_fullscreen/index.md | 7 +- files/ko/web/css/_colon_hover/index.md | 2 +- files/ko/web/css/_colon_link/index.md | 4 +- files/ko/web/css/_colon_not/index.md | 11 +- files/ko/web/css/_colon_nth-child/index.md | 54 ++-- files/ko/web/css/_colon_root/index.md | 1 + files/ko/web/css/_colon_visited/index.md | 3 +- .../_doublecolon_-webkit-scrollbar/index.md | 36 +-- files/ko/web/css/_doublecolon_after/index.md | 21 +- files/ko/web/css/_doublecolon_before/index.md | 36 +-- .../web/css/_doublecolon_placeholder/index.md | 10 +- files/ko/web/css/align-content/index.md | 26 +- files/ko/web/css/all/index.md | 78 ++++-- .../web/css/alternative_style_sheets/index.md | 1 + files/ko/web/css/angle/index.md | 6 +- files/ko/web/css/animation-delay/index.md | 2 + files/ko/web/css/animation-fill-mode/index.md | 9 +- files/ko/web/css/animation/index.md | 14 +- files/ko/web/css/at-rule/index.md | 2 +- files/ko/web/css/attribute_selectors/index.md | 3 +- files/ko/web/css/backdrop-filter/index.md | 6 +- files/ko/web/css/backface-visibility/index.md | 17 +- .../ko/web/css/background-attachment/index.md | 34 ++- files/ko/web/css/background-clip/index.md | 25 +- files/ko/web/css/background-color/index.md | 38 ++- files/ko/web/css/background-image/index.md | 26 +- files/ko/web/css/background-origin/index.md | 10 +- files/ko/web/css/background-repeat/index.md | 36 +-- files/ko/web/css/background-size/index.md | 1 + files/ko/web/css/background/index.md | 7 +- files/ko/web/css/basic-shape/index.md | 33 ++- files/ko/web/css/blend-mode/index.md | 96 +++---- files/ko/web/css/border-bottom-color/index.md | 9 +- files/ko/web/css/border-bottom-style/index.md | 46 +++- files/ko/web/css/border-bottom/index.md | 5 +- files/ko/web/css/border-collapse/index.md | 142 +++++++---- files/ko/web/css/border-color/index.md | 15 +- files/ko/web/css/border-image-outset/index.md | 2 +- files/ko/web/css/border-image-repeat/index.md | 5 +- files/ko/web/css/border-image-width/index.md | 11 +- files/ko/web/css/border-image/index.md | 5 +- files/ko/web/css/border-left-color/index.md | 9 +- files/ko/web/css/border-left-style/index.md | 45 +++- files/ko/web/css/border-left/index.md | 4 +- files/ko/web/css/border-radius/index.md | 16 +- files/ko/web/css/border-right-color/index.md | 9 +- files/ko/web/css/border-right-style/index.md | 46 +++- files/ko/web/css/border-right/index.md | 5 +- files/ko/web/css/border-spacing/index.md | 12 +- files/ko/web/css/border-style/index.md | 64 +++-- files/ko/web/css/border-top-color/index.md | 9 +- files/ko/web/css/border-top-style/index.md | 45 +++- files/ko/web/css/border-top/index.md | 4 +- files/ko/web/css/border-width/index.md | 12 +- files/ko/web/css/box-shadow/index.md | 11 +- files/ko/web/css/box-sizing/index.md | 3 +- files/ko/web/css/calc/index.md | 3 +- files/ko/web/css/cascade/index.md | 52 ++-- files/ko/web/css/child_combinator/index.md | 3 +- files/ko/web/css/clear/index.md | 55 ++-- files/ko/web/css/clip-path/index.md | 238 ++++++++++-------- files/ko/web/css/color/index.md | 36 ++- files/ko/web/css/color_value/index.md | 1 + files/ko/web/css/comments/index.md | 1 + files/ko/web/css/computed_value/index.md | 1 + files/ko/web/css/contain/index.md | 11 +- files/ko/web/css/containing_block/index.md | 46 ++-- files/ko/web/css/content/index.md | 61 +++-- .../using_css_animations/index.md | 78 +++--- .../resizing_background_images/index.md | 3 +- .../using_multiple_backgrounds/index.md | 21 +- .../mastering_margin_collapsing/index.md | 22 +- .../css/css_colors/applying_color/index.md | 118 +++++---- .../using_css_counters/index.md | 18 +- files/ko/web/css/css_fonts/index.md | 2 +- .../basic_concepts_of_grid_layout/index.md | 119 +++++---- 99 files changed, 1514 insertions(+), 929 deletions(-) diff --git a/files/ko/web/css/-webkit-line-clamp/index.md b/files/ko/web/css/-webkit-line-clamp/index.md index 72f9e7f935afec..ed15e81b9c095d 100644 --- a/files/ko/web/css/-webkit-line-clamp/index.md +++ b/files/ko/web/css/-webkit-line-clamp/index.md @@ -52,8 +52,9 @@ slug: Web/CSS/-webkit-line-clamp ```html

- In this example the -webkit-line-clamp property is set to 3, which means the text is clamped after three lines. - An ellipsis will be shown at the point where the text is clamped. + In this example the -webkit-line-clamp property is set to + 3, which means the text is clamped after three lines. An ellipsis + will be shown at the point where the text is clamped.

``` diff --git a/files/ko/web/css/-webkit-overflow-scrolling/index.md b/files/ko/web/css/-webkit-overflow-scrolling/index.md index 0957e7e9ce000d..ff875513848a6a 100644 --- a/files/ko/web/css/-webkit-overflow-scrolling/index.md +++ b/files/ko/web/css/-webkit-overflow-scrolling/index.md @@ -2,6 +2,7 @@ title: "-webkit-overflow-scrolling" slug: Web/CSS/-webkit-overflow-scrolling --- + {{CSSRef}} {{Non-standard_header}} [CSS](/ko/docs/Web/CSS) **`-webkit-overflow-scrolling`** 속성은 터치 단말기에서 주어진 요소의 모멘텀 기반 스크롤 활성화 여부를 결정합니다. @@ -25,14 +26,10 @@ slug: Web/CSS/-webkit-overflow-scrolling ```html
-

- This paragraph has momentum scrolling -

+

This paragraph has momentum scrolling

-

- This paragraph does not. -

+

This paragraph does not.

``` diff --git a/files/ko/web/css/@charset/index.md b/files/ko/web/css/@charset/index.md index c8c6b8215b490a..e6c1ff552e4725 100644 --- a/files/ko/web/css/@charset/index.md +++ b/files/ko/web/css/@charset/index.md @@ -2,6 +2,7 @@ title: "@charset" slug: Web/CSS/@charset --- + {{ CSSRef }} **`@charset`** [CSS](/ko/docs/Web/CSS) [at-규칙](/ko/docs/Web/CSS/At-rule)은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; [중첩된 문](/ko/docs/Web/CSS/Syntax#nested_statements)이 아니기에, [조건부 그룹 at-규칙](/ko/docs/Web/CSS/At-rule#Conditional_Group_Rules) 내에 사용될 수 없습니다. 여러 `@charset` at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 `style` attribute 또는 HTML 페이지의 문자 집합과 관련 있는 {{ HTMLElement("style") }} 요소 내에서 사용될 수 없습니다. @@ -38,11 +39,11 @@ where: ## 예제 -```css -@charset "UTF-8"; /* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 */ +```css-nolint +@charset "UTF-8"; /* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 */ @charset 'iso-8859-15'; /* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 */ - @charset "UTF-8"; /* 무효한, at-규칙 앞에 문자(공백)가 있음 */ -@charset UTF-8; /* 무효한, ' 또는 " 없는 문자집합 CSS {{cssxref("<string>")}}이 아님 */ + @charset "UTF-8"; /* 무효한, at-규칙 앞에 문자(공백)가 있음 */ +@charset UTF-8; /* 무효한, ' 또는 " 없는 문자집합 CSS {{cssxref("<string>")}}이 아님 */ ``` ## 명세 diff --git a/files/ko/web/css/@font-face/font-display/index.md b/files/ko/web/css/@font-face/font-display/index.md index d6a0db1b492b9d..177f077ab8c1b7 100644 --- a/files/ko/web/css/@font-face/font-display/index.md +++ b/files/ko/web/css/@font-face/font-display/index.md @@ -53,8 +53,9 @@ font-display: optional; ```css @font-face { font-family: ExampleFont; - src: url(/path/to/fonts/examplefont.woff) format('woff'), - url(/path/to/fonts/examplefont.eot) format('eot'); + src: + url(/path/to/fonts/examplefont.woff) format("woff"), + url(/path/to/fonts/examplefont.eot) format("eot"); font-weight: 400; font-style: normal; font-display: fallback; diff --git a/files/ko/web/css/@font-face/index.md b/files/ko/web/css/@font-face/index.md index eabe67aab48a24..c44bde1d51d856 100644 --- a/files/ko/web/css/@font-face/index.md +++ b/files/ko/web/css/@font-face/index.md @@ -2,6 +2,7 @@ title: "@font-face" slug: Web/CSS/@font-face --- + {{CSSRef}} ## 요약(Summary) @@ -63,9 +64,8 @@ slug: Web/CSS/@font-face ```css @font-face { font-family: MyHelvetica; - src: local("Helvetica Neue Bold"), - local("HelveticaNeue-Bold"), - url(MgOpenModernaBold.ttf); + src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); font-weight: bold; } ``` diff --git a/files/ko/web/css/@import/index.md b/files/ko/web/css/@import/index.md index 232323c767a9ac..8a0f3445af89f6 100644 --- a/files/ko/web/css/@import/index.md +++ b/files/ko/web/css/@import/index.md @@ -10,10 +10,10 @@ slug: Web/CSS/@import ```css @import url("fineprint.css") print; @import url("bluish.css") speech; -@import 'custom.css'; +@import "custom.css"; @import url("chrome://communicator/skin/"); @import "common.css" screen; -@import url('landscape.css') screen and (orientation:landscape); +@import url("landscape.css") screen and (orientation: landscape); ``` 사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 `@import` 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 [미디어 질의](/ko/docs/Web/CSS/Media_Queries/Using_media_queries)를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 `all`을 지정하면 같은 효과가 있습니다. diff --git a/files/ko/web/css/@keyframes/index.md b/files/ko/web/css/@keyframes/index.md index 87fcbb260b4160..7802eaa6719b3c 100644 --- a/files/ko/web/css/@keyframes/index.md +++ b/files/ko/web/css/@keyframes/index.md @@ -2,6 +2,7 @@ title: "@keyframes" slug: Web/CSS/@keyframes --- + {{CSSRef}} **`@keyframes`** [@규칙](/ko/docs/Web/CSS/At-rule)은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다. @@ -42,10 +43,21 @@ slug: Web/CSS/@keyframes ```css @keyframes identifier { - 0% { top: 0; left: 0; } - 30% { top: 50px; } - 68%, 72% { left: 50px; } - 100% { top: 100px; left: 100%; } + 0% { + top: 0; + left: 0; + } + 30% { + top: 50px; + } + 68%, + 72% { + left: 50px; + } + 100% { + top: 100px; + left: 100%; + } } ``` @@ -59,10 +71,19 @@ slug: Web/CSS/@keyframes ```css @keyframes identifier { - 0% { top: 0; } - 50% { top: 30px; left: 20px; } - 50% { top: 10px; } - 100% { top: 0; } + 0% { + top: 0; + } + 50% { + top: 30px; + left: 20px; + } + 50% { + top: 10px; + } + 100% { + top: 0; + } } ``` @@ -76,16 +97,26 @@ slug: Web/CSS/@keyframes ```css @keyframes important1 { - from { margin-top: 50px; } - 50% { margin-top: 150px !important; } /* ignored */ - to { margin-top: 100px; } + from { + margin-top: 50px; + } + 50% { + margin-top: 150px !important; + } /* ignored */ + to { + margin-top: 100px; + } } @keyframes important2 { - from { margin-top: 50px; - margin-bottom: 100px; } - to { margin-top: 150px !important; /* ignored */ - margin-bottom: 50px; } + from { + margin-top: 50px; + margin-bottom: 100px; + } + to { + margin-top: 150px !important; /* ignored */ + margin-bottom: 50px; + } } ``` diff --git a/files/ko/web/css/@media/index.md b/files/ko/web/css/@media/index.md index 4f8bde6f6b7510..45ba41dcc27dad 100644 --- a/files/ko/web/css/@media/index.md +++ b/files/ko/web/css/@media/index.md @@ -57,22 +57,27 @@ Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요 ```css @media print { - body { font-size: 10pt; } + body { + font-size: 10pt; + } } @media screen { - body { font-size: 13px; } + body { + font-size: 13px; + } } @media screen, print { - body { line-height: 1.2; } + 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 only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { + body { + line-height: 1.4; + } } ``` @@ -80,11 +85,15 @@ Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 ```css @media (height > 600px) { - body { line-height: 1.4; } + body { + line-height: 1.4; + } } @media (400px <= width <= 700px) { - body { line-height: 1.4; } + body { + line-height: 1.4; + } } ``` diff --git a/files/ko/web/css/@media/prefers-color-scheme/index.md b/files/ko/web/css/@media/prefers-color-scheme/index.md index 5d08c0c0538e63..2f33c4c4e44b73 100644 --- a/files/ko/web/css/@media/prefers-color-scheme/index.md +++ b/files/ko/web/css/@media/prefers-color-scheme/index.md @@ -2,6 +2,7 @@ title: prefers-color-scheme slug: Web/CSS/@media/prefers-color-scheme --- + **`prefers-color-scheme`** [CSS](/ko/docs/Web/CSS) [미디어 특성](/ko/docs/Web/CSS/@media#media_features)은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다. 사용자는 운영체제 설정(라이트 모드 또는 다크 모드)이나 사용자 에이전트 설정에서 선호하는 테마를 나타낼 수 있습니다. @@ -22,7 +23,8 @@ slug: Web/CSS/@media/prefers-color-scheme ```html
Day (initial)
Day (changes in light scheme)
-
Day (changes in dark scheme)

+
Day (changes in dark scheme)
+
Night (initial)
Night (changes in light scheme)
@@ -32,20 +34,39 @@ slug: Web/CSS/@media/prefers-color-scheme ### CSS ```css -.day { background: #eee; color: black; } -.night { background: #333; color: white; } +.day { + background: #eee; + color: black; +} +.night { + background: #333; + color: white; +} @media (prefers-color-scheme: dark) { - .day.dark-scheme { background: #333; color: white; } - .night.dark-scheme { background: black; color: #ddd; } + .day.dark-scheme { + background: #333; + color: white; + } + .night.dark-scheme { + background: black; + color: #ddd; + } } @media (prefers-color-scheme: light) { - .day.light-scheme { background: white; color: #555; } - .night.light-scheme { background: #eee; color: black; } + .day.light-scheme { + background: white; + color: #555; + } + .night.light-scheme { + background: #eee; + color: black; + } } -.day, .night { +.day, +.night { display: inline-block; padding: 1em; width: 7em; diff --git a/files/ko/web/css/@namespace/index.md b/files/ko/web/css/@namespace/index.md index 25ea6aabd6b9f5..fe8c203e0de7ce 100644 --- a/files/ko/web/css/@namespace/index.md +++ b/files/ko/web/css/@namespace/index.md @@ -40,13 +40,16 @@ slug: Web/CSS/@namespace @namespace svg url(http://www.w3.org/2000/svg); /* 이는 모든 XHTML 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */ -a {} +a { +} /* 이는 모든 SVG 요소와 일치합니다 */ -svg|a {} +svg|a { +} /* 이는 XHTML 및 SVG 요소 둘 다와 일치합니다 */ -*|a {} +*|a { +} ``` ## 명세 diff --git a/files/ko/web/css/@page/index.md b/files/ko/web/css/@page/index.md index b6cae52084212f..bb277f96d605e6 100644 --- a/files/ko/web/css/@page/index.md +++ b/files/ko/web/css/@page/index.md @@ -2,6 +2,7 @@ title: "@page" slug: Web/CSS/@page --- + {{CSSRef}} **`@page`** CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. `@page`로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다. diff --git a/files/ko/web/css/@supports/index.md b/files/ko/web/css/@supports/index.md index 33260a1fecd2c0..0efbf3f292eb4e 100644 --- a/files/ko/web/css/@supports/index.md +++ b/files/ko/web/css/@supports/index.md @@ -34,7 +34,8 @@ JavaScript에서, `@supports`는 CSS 객체 모델 인터페이스 {{DOMxRef("CS 가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 `5% 5%`가 유효하다고 여길 때 통과합니다. ```css -@supports (transform-origin: 5% 5%) {} +@supports (transform-origin: 5% 5%) { +} ``` ### 함수 구문 @@ -46,7 +47,8 @@ JavaScript에서, `@supports`는 CSS 객체 모델 인터페이스 {{DOMxRef("CS 브라우저가 주어진 선택자를 지원하는지 판별합니다. 다음 예제는 브라우저가 [자식 결합자](/ko/docs/Web/CSS/Child_combinator)를 지원할 때 통과합니다. ```css -@supports selector(A > B) {} +@supports selector(A > B) { +} ``` ### `not` 연산자 @@ -54,14 +56,17 @@ JavaScript에서, `@supports`는 CSS 객체 모델 인터페이스 {{DOMxRef("CS `not` 연산자를 어떤 표현식 앞에 붙이면 그 반대 결과를 낳는 새로운 표현식을 생성합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 `10em 10em 10em`이 **유효하지 않다**고 여길 때 통과합니다. ```css -@supports not (transform-origin: 10em 10em 10em) {} +@supports not (transform-origin: 10em 10em 10em) { +} ``` 다른 연산자와 마찬가지로, 선언의 복잡도와 관계 없이 `not` 연산자를 적용할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다. ```css -@supports not (not (transform-origin: 2px)) {} -@supports (display: grid) and (not (display: inline-grid)) {} +@supports not (not (transform-origin: 2px)) { +} +@supports (display: grid) and (not (display: inline-grid)) { +} ``` > **참고:** 최상위 `not` 연산자는 괄호로 감싸지 않아도 괜찮습니다. `and`, `or` 등 다른 연산자와 함께 사용할 때는 괄호가 필요합니다. @@ -71,14 +76,17 @@ JavaScript에서, `@supports`는 CSS 객체 모델 인터페이스 {{DOMxRef("CS `and` 연산자는 두 표현식의 논리곱으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식이 **모두 참일 때만** 참을 반환합니다. 다음 예제는 두 개의 구성 표현식이 동시에 참이어야만 통과합니다. ```css -@supports (display: table-cell) and (display: list-item) {} +@supports (display: table-cell) and (display: list-item) { +} ``` 다수의 논리곱은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다. ```css -@supports (display: table-cell) and (display: list-item) and (display:run-in) {} -@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {} +@supports (display: table-cell) and (display: list-item) and (display: run-in) { +} +@supports (display: table-cell) and ((display: list-item) and (display: run-in)) { +} ``` ### `or` 연산자 @@ -86,17 +94,26 @@ JavaScript에서, `@supports`는 CSS 객체 모델 인터페이스 {{DOMxRef("CS `or` 연산자는 두 표현식의 논리합으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식 중 **어느 한 쪽이라도 참이면** 참을 반환합니다. 다음 예제는 두 개의 구성 표현식 중 하나라도 참이면 통과합니다. ```css -@supports (transform-style: preserve) or (-moz-transform-style: preserve) {} +@supports (transform-style: preserve) or (-moz-transform-style: preserve) { +} ``` 다수의 논리합은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다. ```css @supports (transform-style: preserve) or (-moz-transform-style: preserve) or - (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {} + (-o-transform-style: preserve) or (-webkit-transform-style: preserve) { +} -@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or - ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {} +@supports (transform-style: preserve-3d) or + ( + (-moz-transform-style: preserve-3d) or + ( + (-o-transform-style: preserve-3d) or + (-webkit-transform-style: preserve-3d) + ) + ) { +} ``` > **참고:** `and`와 `or` 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다. diff --git a/files/ko/web/css/_colon_active/index.md b/files/ko/web/css/_colon_active/index.md index 8be6bf3364906e..2a5f59bc24e567 100644 --- a/files/ko/web/css/_colon_active/index.md +++ b/files/ko/web/css/_colon_active/index.md @@ -31,7 +31,8 @@ a:active { #### HTML ```html -

링크를 포함하는 문단입니다. +

+ 링크를 포함하는 문단입니다. 이 링크는 클릭하는 동안 색이 빨갛게 됩니다. 이 문단은 클릭하는 동안 배경색이 회색이 됩니다.

@@ -40,12 +41,22 @@ a:active { #### CSS ```css -a:link { color: blue; } /* 방문하지 않은 링크 */ -a:visited { color: purple; } /* 방문한 링크 */ -a:hover { background: yellow; } /* 마우스를 올린 링크 */ -a:active { color: red; } /* 활성화한 링크 */ +a:link { + color: blue; +} /* 방문하지 않은 링크 */ +a:visited { + color: purple; +} /* 방문한 링크 */ +a:hover { + background: yellow; +} /* 마우스를 올린 링크 */ +a:active { + color: red; +} /* 활성화한 링크 */ -p:active { background: #eee; } /* 활성화한 문단 */ +p:active { + background: #eee; +} /* 활성화한 문단 */ ``` #### 결과 diff --git a/files/ko/web/css/_colon_checked/index.md b/files/ko/web/css/_colon_checked/index.md index 08335087f7fcc1..6d450a7eeb7928 100644 --- a/files/ko/web/css/_colon_checked/index.md +++ b/files/ko/web/css/_colon_checked/index.md @@ -31,15 +31,15 @@ slug: Web/CSS/:checked ```html
- + - +
- +
@@ -95,14 +95,38 @@ option:checked { - + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +
Column #1Column #2Column #3
Column #1Column #2Column #3
[cell text][cell text][cell text]
[cell text][cell text][cell text]
[cell text][cell text][cell text]
[cell text][cell text][cell text]
diff --git a/files/ko/web/css/_colon_default/index.md b/files/ko/web/css/_colon_default/index.md index 56befdeba6bc92..efed9025d1f145 100644 --- a/files/ko/web/css/_colon_default/index.md +++ b/files/ko/web/css/_colon_default/index.md @@ -2,6 +2,7 @@ title: ":default" slug: Web/CSS/:default --- + {{CSSRef}} [CSS](/ko/docs/Web/CSS) **`:default`** [의사 클래스](/ko/docs/Web/CSS/Pseudo-classes)는 연관 요소 내에서의 기본값인 요소를 선택합니다. @@ -24,16 +25,16 @@ slug: Web/CSS/:default
Favorite season - + - + - + - +
``` diff --git a/files/ko/web/css/_colon_defined/index.md b/files/ko/web/css/_colon_defined/index.md index 60c2ead7237474..48d3a6a65bf259 100644 --- a/files/ko/web/css/_colon_defined/index.md +++ b/files/ko/web/css/_colon_defined/index.md @@ -2,6 +2,7 @@ title: ":defined" slug: Web/CSS/:defined --- + {{CSSRef}} [CSS](/ko/docs/Web/CSS) **`:defined`** [의사 클래스](/ko/docs/Web/CSS/Pseudo-classes)는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의({{domxref("CustomElementRegistry.define()")}} 메서드 등)한 사용자 지정 요소를 의미합니다. @@ -31,18 +32,19 @@ simple-custom:defined { 이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다. ```js -customElements.define('simple-custom', +customElements.define( + "simple-custom", class extends HTMLElement { constructor() { super(); - let divElem = document.createElement('div'); - divElem.textContent = this.getAttribute('text'); + let divElem = document.createElement("div"); + divElem.textContent = this.getAttribute("text"); - let shadowRoot = this.attachShadow({mode: 'open'}) - .appendChild(divElem); - } -}) + let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem); + } + }, +); ``` 그 후, 위의 요소를 표준 `

`와 함께 문서에 넣습니다. diff --git a/files/ko/web/css/_colon_disabled/index.md b/files/ko/web/css/_colon_disabled/index.md index ac8d0400964b68..efb7ac4fc35656 100644 --- a/files/ko/web/css/_colon_disabled/index.md +++ b/files/ko/web/css/_colon_disabled/index.md @@ -2,6 +2,7 @@ title: ":disabled" slug: Web/CSS/:disabled --- + {{CSSRef}} [CSS](/ko/docs/Web/CSS) **`:disabled`** [의사 클래스](/ko/docs/Web/CSS/Pseudo-classes)는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다. @@ -27,19 +28,19 @@ input:disabled {

배송지 - - - + + +
-
+
청구지 - -
- - - + +
+ + +
``` @@ -56,10 +57,14 @@ input[type="text"]:disabled { ```js // 페이지 로딩이 끝날 때까지 기다림 -document.addEventListener('DOMContentLoaded', function () { - // `change` 이벤츠 수신기를 체크박스에 부착 - document.getElementById('billing-checkbox').onchange = toggleBilling; -}, false); +document.addEventListener( + "DOMContentLoaded", + function () { + // `change` 이벤츠 수신기를 체크박스에 부착 + document.getElementById("billing-checkbox").onchange = toggleBilling; + }, + false, +); function toggleBilling() { // 청구지 텍스트 입력 칸을 모두 선택 diff --git a/files/ko/web/css/_colon_enabled/index.md b/files/ko/web/css/_colon_enabled/index.md index 20739d1dd40edc..664486c1540fef 100644 --- a/files/ko/web/css/_colon_enabled/index.md +++ b/files/ko/web/css/_colon_enabled/index.md @@ -2,6 +2,7 @@ title: ":enabled" slug: Web/CSS/:enabled --- + {{CSSRef}} [CSS](/ko/docs/Web/CSS) **`:enabled`** [의사 클래스](/ko/docs/Web/CSS/Pseudo-classes)는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다. @@ -26,12 +27,12 @@ input:enabled { ```html
-
+
-
+
- +
``` diff --git a/files/ko/web/css/_colon_first-child/index.md b/files/ko/web/css/_colon_first-child/index.md index aa9588dd60b43a..07eef0a20e1af6 100644 --- a/files/ko/web/css/_colon_first-child/index.md +++ b/files/ko/web/css/_colon_first-child/index.md @@ -61,7 +61,8 @@ p:first-child {