mdn · hochan222 · Aug 8, 2023 · Aug 1, 2023
@@ -1,5 +1,5 @@
 ---
-title: '-moz-image-region'
+title: "-moz-image-region"
 slug: Web/CSS/-moz-image-region
 ---
 

@@ -1,5 +1,5 @@
 ---
-title: '-webkit-line-clamp'
+title: "-webkit-line-clamp"
 slug: Web/CSS/-webkit-line-clamp
 ---
 
@@ -52,8 +52,9 @@ slug: Web/CSS/-webkit-line-clamp
 
 ```html
 <p>
-  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, 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 <code>-webkit-line-clamp</code> property is set to
+  <code>3</code>, which means the text is clamped after three lines. An ellipsis
+  will be shown at the point where the text is clamped.
 </p>
 ```
 

@@ -1,7 +1,8 @@
 ---
-title: '-webkit-overflow-scrolling'
+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
 <div class="scroll-touch">
-  <p>
-    This paragraph has momentum scrolling
-  </p>
+  <p>This paragraph has momentum scrolling</p>
 </div>
 <div class="scroll-auto">
-  <p>
-    This paragraph does not.
-  </p>
+  <p>This paragraph does not.</p>
 </div>
 ```
 

@@ -1,7 +1,8 @@
 ---
-title: '@charset'
+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("&lt;string&gt;")}}이 아님 */
+ @charset "UTF-8"; /* 무효한, at-규칙 앞에 문자(공백)가 있음 */
+@charset UTF-8; /* 무효한, ' 또는 " 없는 문자집합 CSS {{cssxref("&lt;string&gt;")}}이 아님 */
 ```
 
 ## 명세

@@ -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;

@@ -1,7 +1,8 @@
 ---
-title: '@font-face'
+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;
 }
 ```

@@ -1,5 +1,5 @@
 ---
-title: '@import'
+title: "@import"
 slug: Web/CSS/@import
 ---
 
@@ -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`을 지정하면 같은 효과가 있습니다.

@@ -1,7 +1,8 @@
 ---
-title: '@keyframes'
+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;
+  }
 }
 ```
 

@@ -1,5 +1,5 @@
 ---
-title: '@media'
+title: "@media"
 slug: Web/CSS/@media
 ---
 
@@ -57,34 +57,43 @@ 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;
+  }
 }
 ```
 
 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;
+  }
 }
 ```
 

@@ -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
 <div class="day">Day (initial)</div>
 <div class="day light-scheme">Day (changes in light scheme)</div>
-<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
+<div class="day dark-scheme">Day (changes in dark scheme)</div>
+<br />
 
 <div class="night">Night (initial)</div>
 <div class="night light-scheme">Night (changes in light scheme)</div>
@@ -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;

@@ -1,5 +1,5 @@
 ---
-title: '@namespace'
+title: "@namespace"
 slug: Web/CSS/@namespace
 ---
 
@@ -40,13 +40,16 @@ slug: Web/CSS/@namespace
 @namespace svg url(http://www.w3.org/2000/svg);
 
 /* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */
-a {}
+a {
+}
 
 /* 이는 모든 SVG <a> 요소와 일치합니다 */
-svg|a {}
+svg|a {
+}
 
 /* 이는 XHTML 및 SVG <a> 요소 둘 다와 일치합니다 */
-*|a {}
+*|a {
+}
 ```
 
 ## 명세

@@ -1,7 +1,8 @@
 ---
-title: '@page'
+title: "@page"
 slug: Web/CSS/@page
 ---
+
 {{CSSRef}}
 
 **`@page`** CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. `@page`로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.