diff --git a/files/ko/web/css/accent-color/index.md b/files/ko/web/css/accent-color/index.md index 188db30d629897..623aa06d0f4f0f 100644 --- a/files/ko/web/css/accent-color/index.md +++ b/files/ko/web/css/accent-color/index.md @@ -9,7 +9,49 @@ l10n: **`accent-color`** [CSS](/ko/docs/Web/CSS) 속성은 일부 요소에 의하여 생성된 사용자 인터페이스 컨트롤의 {{Glossary("accent", "강조")}} 색상을 설정합니다. -{{EmbedInteractiveExample("pages/css/accent-color.html")}} +{{InteractiveExample("CSS Demo: accent-color")}} + +```css interactive-example-choice +accent-color: red; +``` + +```css interactive-example-choice +accent-color: #74992e; +``` + +```css interactive-example-choice +accent-color: rgb(255, 255, 128); +``` + +```css interactive-example-choice +accent-color: hsl(250, 100%, 34%); +``` + +```html interactive-example +
+
+ + +
+
+``` + +```css interactive-example +.container > div { + display: flex; + align-items: center; +} + +#example-element { + width: 40px; + height: 40px; +} + +#example-label { + margin-left: 10px; + font-size: x-large; +} +``` 현재 `accent-color` 를 지원하는 브라우저에서는 다음 HTML 요소들에 이를 적용합니다. diff --git a/files/ko/web/css/align-content/index.md b/files/ko/web/css/align-content/index.md index a73a393541096f..e84457d1e6fda3 100644 --- a/files/ko/web/css/align-content/index.md +++ b/files/ko/web/css/align-content/index.md @@ -7,7 +7,51 @@ slug: Web/CSS/align-content 아래의 대화형 예제는 그리드 레이아웃을 사용해 이 속성의 값을 시연합니다. -{{EmbedInteractiveExample("pages/css/align-content.html")}} +{{InteractiveExample("CSS Demo: align-content")}} + +```css interactive-example-choice +align-content: start; +``` + +```css interactive-example-choice +align-content: center; +``` + +```css interactive-example-choice +align-content: space-between; +``` + +```css interactive-example-choice +align-content: space-around; +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + display: grid; + grid-template-columns: 60px 60px; + grid-auto-rows: 40px; + column-gap: 10px; + height: 180px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` 이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과도 없습니다(`flex-wrap: nowrap` 등). diff --git a/files/ko/web/css/align-items/index.md b/files/ko/web/css/align-items/index.md index 9e64a732917ad4..a131d37f4aa902 100644 --- a/files/ko/web/css/align-items/index.md +++ b/files/ko/web/css/align-items/index.md @@ -11,7 +11,51 @@ l10n: 아래의 대화형 예제는 그리드 레이아웃을 사용하여 `align-items`의 속성 값을 시연합니다. -{{EmbedInteractiveExample("pages/css/align-items.html")}} +{{InteractiveExample("CSS Demo: align-items")}} + +```css interactive-example-choice +align-items: stretch; +``` + +```css interactive-example-choice +align-items: center; +``` + +```css interactive-example-choice +align-items: start; +``` + +```css interactive-example-choice +align-items: end; +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + display: grid; + width: 200px; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 80px; + grid-gap: 10px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` ## 구문 diff --git a/files/ko/web/css/all/index.md b/files/ko/web/css/all/index.md index 896675f50cafb1..a7b17692f8b544 100644 --- a/files/ko/web/css/all/index.md +++ b/files/ko/web/css/all/index.md @@ -7,7 +7,60 @@ slug: Web/CSS/all [CSS](/ko/docs/Web/CSS) **`all`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, [CSS 사용자 지정 속성](/ko/docs/Web/CSS/Using_CSS_custom_properties)을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/all.html")}} +{{InteractiveExample("CSS Demo: all")}} + +```css interactive-example-choice +/*no all property*/ +``` + +```css interactive-example-choice +all: initial; +``` + +```css interactive-example-choice +all: inherit; +``` + +```css interactive-example-choice +all: unset; +``` + +```css interactive-example-choice +all: revert; +``` + +```html interactive-example +
+
+
+

+ This paragraph has a font size of 1.5rem and a color of gold. It also + has 1rem of vertical margin set by the user-agent. The parent of the + paragraph is a <div> with a dashed blue border. +

+
+
+
+``` + +```css interactive-example +#example-element { + color: gold; + padding: 10px; + font-size: 1.5rem; + text-align: left; + width: 100%; +} + +.example-container { + border: 2px dashed #2d5ae1; +} + +.example-container-bg { + background-color: #77767b; + padding: 20px; +} +``` ## 구문 diff --git a/files/ko/web/css/angle/index.md b/files/ko/web/css/angle/index.md index 958945b129c6a1..8e9a60aebc732e 100644 --- a/files/ko/web/css/angle/index.md +++ b/files/ko/web/css/angle/index.md @@ -7,7 +7,41 @@ slug: Web/CSS/angle [CSS](/ko/docs/Web/CSS) **``** [자료형](/ko/docs/Web/CSS/CSS_Types)은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다. {{cssxref("<gradient>")}}나 일부 {{cssxref("transform")}} 함수에서 사용합니다.. -{{EmbedInteractiveExample("pages/css/type-angle.html")}} +{{InteractiveExample("CSS Demo: &lt;angle&gt;")}} + +```css interactive-example-choice +transform: rotate(45deg); +``` + +```css interactive-example-choice +transform: rotate(3.1416rad); +``` + +```css interactive-example-choice +transform: rotate(-50grad); +``` + +```css interactive-example-choice +transform: rotate(1.75turn); +``` + +```html interactive-example +
+
+ This box can rotate to different angles. +
+
+``` + +```css interactive-example +#example-element { + background-color: #0118f3; + padding: 0.75em; + width: 180px; + height: 120px; + color: white; +} +``` ## 구문 diff --git a/files/ko/web/css/animation-delay/index.md b/files/ko/web/css/animation-delay/index.md index 64c9bea9f3b428..b353bae1a33424 100644 --- a/files/ko/web/css/animation-delay/index.md +++ b/files/ko/web/css/animation-delay/index.md @@ -7,7 +7,106 @@ slug: Web/CSS/animation-delay **`animation-delay`** [CSS](/ko/docs/Web/CSS) 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다. -{{EmbedInteractiveExample("pages/css/animation-delay.html")}} +{{InteractiveExample("CSS Demo: animation-delay")}} + +```css interactive-example-choice +animation-delay: 250ms; +``` + +```css interactive-example-choice +animation-delay: 2s; +``` + +```css interactive-example-choice +animation-delay: -2s; +``` + +```html interactive-example +
+
Animation
+
Select a delay to start!
+
+``` + +```css interactive-example +#example-element { + background-color: #1766aa; + color: white; + margin: auto; + margin-left: 0; + border: 5px solid #333; + width: 150px; + height: 150px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#playstatus { + font-weight: bold; +} + +.animating { + animation-name: slide; + animation-duration: 3s; + animation-timing-function: ease-in; + animation-iteration-count: 2; + animation-direction: alternate; +} + +@keyframes slide { + from { + background-color: orange; + color: black; + margin-left: 0; + } + to { + background-color: orange; + color: black; + margin-left: 80%; + } +} +``` + +```js interactive-example +"use strict"; + +window.addEventListener("load", () => { + const el = document.getElementById("example-element"); + const status = document.getElementById("playstatus"); + + function update() { + status.textContent = "delaying"; + el.className = ""; + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + el.className = "animating"; + }); + }); + } + + el.addEventListener("animationstart", () => { + status.textContent = "playing"; + }); + + el.addEventListener("animationend", () => { + status.textContent = "finished"; + }); + + const observer = new MutationObserver(() => { + update(); + }); + + observer.observe(el, { + attributes: true, + attributeFilter: ["style"], + }); + + update(); +}); +``` {{cssxref("animation")}} 단축 속성을 사용해 애니메이션 관련 속성을 편리하게 같이 지정할 수 있습니다. diff --git a/files/ko/web/css/animation-iteration-count/index.md b/files/ko/web/css/animation-iteration-count/index.md index 30c77fbe607c44..704cec28faf8d9 100644 --- a/files/ko/web/css/animation-iteration-count/index.md +++ b/files/ko/web/css/animation-iteration-count/index.md @@ -9,7 +9,104 @@ l10n: **`animation-iteration-count`** [CSS](/ko/docs/Web/CSS) 속성은 애니메이션 시퀀스가 끝나기 전에 재생되는 횟수를 설정합니다. -{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}} +{{InteractiveExample("CSS Demo: animation-iteration-count")}} + +```css interactive-example-choice +animation-iteration-count: 0; +``` + +```css interactive-example-choice +animation-iteration-count: 2; +``` + +```css interactive-example-choice +animation-iteration-count: 1.5; +``` + +```html interactive-example +
+
Animation
+
Select a count to start!
+
+``` + +```css interactive-example +#example-element { + align-items: center; + background-color: #1766aa; + border-radius: 50%; + border: 5px solid #333; + color: white; + display: flex; + flex-direction: column; + height: 150px; + justify-content: center; + margin: auto; + margin-left: 0; + width: 150px; +} + +#playstatus { + font-weight: bold; +} + +.animating { + animation-name: slide; + animation-duration: 3s; + animation-timing-function: ease-in; +} + +@keyframes slide { + from { + background-color: orange; + color: black; + margin-left: 0; + } + to { + background-color: orange; + color: black; + margin-left: 80%; + } +} +``` + +```js interactive-example +"use strict"; + +window.addEventListener("load", () => { + const el = document.getElementById("example-element"); + const status = document.getElementById("playstatus"); + + function update() { + status.textContent = "delaying"; + el.className = ""; + window.requestAnimationFrame(() => { + window.requestAnimationFrame(() => { + el.className = "animating"; + }); + }); + } + + el.addEventListener("animationstart", () => { + status.textContent = "playing"; + }); + + el.addEventListener("animationend", () => { + status.textContent = "finished"; + }); + + const observer = new MutationObserver(() => { + update(); + }); + + observer.observe(el, { + attributes: true, + attributeFilter: ["style"], + }); + + update(); +}); +``` 모든 애니메이션 속성을 한 번에 설정한다면 단축 속성 {{cssxref("animation")}}를 사용하면 편리합니다. diff --git a/files/ko/web/css/animation/index.md b/files/ko/web/css/animation/index.md index ac8f14d414307e..273791427cfdf6 100644 --- a/files/ko/web/css/animation/index.md +++ b/files/ko/web/css/animation/index.md @@ -9,7 +9,49 @@ l10n: **`animation`** [단축](/ko/docs/Web/CSS/Shorthand_properties) [CSS](/ko/docs/Web/CSS) 속성은 스타일 사이에 에니메이션을 적용합니다. {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, 그리고 {{cssxref("animation-play-state")}}의 단축형입니다. -{{EmbedInteractiveExample("pages/css/animation.html")}} +{{InteractiveExample("CSS Demo: animation")}} + +```css interactive-example-choice +animation: 3s ease-in 1s infinite reverse both running slidein; +``` + +```css interactive-example-choice +animation: 3s linear 1s infinite running slidein; +``` + +```css interactive-example-choice +animation: 3s linear 1s infinite alternate slidein; +``` + +```css interactive-example-choice +animation: 0.5s linear 1s infinite alternate slidein; +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + background-color: #1766aa; + margin: 20px; + border: 5px solid #333; + width: 150px; + height: 150px; + border-radius: 50%; +} + +@keyframes slidein { + from { + margin-left: -20%; + } + to { + margin-left: 100%; + } +} +``` ## 구성 속성 diff --git a/files/ko/web/css/backface-visibility/index.md b/files/ko/web/css/backface-visibility/index.md index c834c92d181a88..7a381da2c9456b 100644 --- a/files/ko/web/css/backface-visibility/index.md +++ b/files/ko/web/css/backface-visibility/index.md @@ -7,7 +7,73 @@ slug: Web/CSS/backface-visibility [CSS](/ko/docs/Web/CSS) **`backface-visibility`** 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다. -{{EmbedInteractiveExample("pages/css/backface-visibility.html")}} +{{InteractiveExample("CSS Demo: backface-visibility")}} + +```css interactive-example-choice +backface-visibility: visible; +``` + +```css interactive-example-choice +backface-visibility: hidden; +``` + +```html interactive-example +
+
+
1
+
2
+
3
+
6
+
+
+``` + +```css interactive-example +#default-example { + background: linear-gradient(skyblue, khaki); +} + +#example-element { + width: 100px; + height: 100px; + perspective: 550px; + perspective-origin: 220% 220%; + transform-style: preserve-3d; +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + background: rgba(0, 0, 0, 0.4); + font-size: 60px; + color: white; +} + +.front { + transform: translateZ(50px); +} + +.back { + background: rgb(230, 0, 0); + color: white; + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(0, 0, 0, 0.6); + transform: rotateY(90deg) translateZ(50px); +} + +.bottom { + background: rgba(0, 0, 0, 0.6); + transform: rotateX(-90deg) translateZ(50px); +} +``` 요소의 뒷면은 앞면의 거울상입니다. 2D 상태에서는 볼 수 없지만 변형을 통해 3D 공간에서 회전되면 노출될 수 있습니다. (2D 변형에는 원근이 없으므로 효과가 없습니다.) diff --git a/files/ko/web/css/background-attachment/index.md b/files/ko/web/css/background-attachment/index.md index dc7398b1200ea3..47ac84230d657b 100644 --- a/files/ko/web/css/background-attachment/index.md +++ b/files/ko/web/css/background-attachment/index.md @@ -7,7 +7,71 @@ slug: Web/CSS/background-attachment [CSS](/ko/docs/Web/CSS) **`background-attachment`** 속성은 배경 이미지를 {{glossary("viewport", "뷰포트")}} 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다. -{{EmbedInteractiveExample("pages/css/background-attachment.html")}} +{{InteractiveExample("CSS Demo: background-attachment")}} + +```css interactive-example-choice +background-attachment: scroll; +``` + +```css interactive-example-choice +background-attachment: fixed; +``` + +```css interactive-example-choice +background-attachment: local; +``` + +```css interactive-example-choice +background-attachment: local, scroll; +``` + +```css interactive-example-choice +background-attachment: scroll, local; +``` + +```html interactive-example +
+
+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the streets + as if the waters had but newly retired from the face of the earth, and it + would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. London. Michaelmas term + lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. + Implacable November weather. As much mud in the streets as if the waters had + but newly retired from the face of the earth, and it would not be wonderful + to meet a Megalosaurus, forty feet long or so, waddling like an elephantine + lizard up Holborn Hill. +
+
+``` + +```css interactive-example +body { + overflow: scroll; +} + +#default-example { + height: 600px; +} + +#example-element { + max-width: 20rem; + height: 100%; + background: + url("/shared-assets/images/examples/lizard.png") right 3rem top 1rem / 15rem + no-repeat, + url("/shared-assets/images/examples/moon.jpg") center / 10rem; + color: #ff5454; + font-size: 1.5em; + font-weight: bold; + overflow: auto; + padding: 20px; + text-shadow: + 0 0 0.6rem #000, + 0 0 0.6rem #000; +} +``` ## 구문 diff --git a/files/ko/web/css/background-clip/index.md b/files/ko/web/css/background-clip/index.md index 9aee92557864ce..980839abed3da7 100644 --- a/files/ko/web/css/background-clip/index.md +++ b/files/ko/web/css/background-clip/index.md @@ -7,7 +7,42 @@ slug: Web/CSS/background-clip [CSS](/ko/docs/Web/CSS) **`background-clip`** 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다. -{{EmbedInteractiveExample("pages/css/background-clip.html")}} +{{InteractiveExample("CSS Demo: background-clip")}} + +```css interactive-example-choice +background-clip: border-box; +``` + +```css interactive-example-choice +background-clip: padding-box; +``` + +```css interactive-example-choice +background-clip: content-box; +``` + +```css interactive-example-choice +background-clip: text; +color: transparent; +``` + +```html interactive-example +
+
This is the content of the element.
+
+``` + +```css interactive-example +#example-element { + background-image: url("/shared-assets/images/examples/leopard.jpg"); + color: #d73611; + text-shadow: 2px 2px black; + padding: 20px; + border: 10px dashed #333; + font-size: 2em; + font-weight: bold; +} +``` 요소가 {{cssxref("background-image")}} 또는 {{cssxref("background-color")}}를 가지지 않으면, `background-clip`은 ({{cssxref("border-style")}} 또는 {{cssxref("border-image")}} 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다. diff --git a/files/ko/web/css/background-color/index.md b/files/ko/web/css/background-color/index.md index eeedefc28f833b..bd3f6628943451 100644 --- a/files/ko/web/css/background-color/index.md +++ b/files/ko/web/css/background-color/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/background-color [CSS](/en-US/CSS) **`background-color`** 속성은 요소의 배경 색을 지정합니다. -{{EmbedInteractiveExample("pages/css/background-color.html")}} +{{InteractiveExample("CSS Demo: background-color")}} + +```css interactive-example-choice +background-color: brown; +``` + +```css interactive-example-choice +background-color: #74992e; +``` + +```css interactive-example-choice +background-color: rgb(255, 255, 128); +``` + +```css interactive-example-choice +background-color: rgba(255, 255, 128, 0.5); +``` + +```css interactive-example-choice +background-color: hsl(50, 33%, 25%); +``` + +```css interactive-example-choice +background-color: hsla(50, 33%, 25%, 0.75); +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + min-width: 100%; + min-height: 100%; + padding: 10%; +} +``` ## 구문 diff --git a/files/ko/web/css/background-image/index.md b/files/ko/web/css/background-image/index.md index 71d0091fe5f384..4918170d0a5a34 100644 --- a/files/ko/web/css/background-image/index.md +++ b/files/ko/web/css/background-image/index.md @@ -7,7 +7,43 @@ slug: Web/CSS/background-image [CSS](/ko/docs/Web/CSS) **`background-image`** 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다. -{{EmbedInteractiveExample("pages/css/background-image.html")}} +{{InteractiveExample("CSS Demo: background-image")}} + +```css interactive-example-choice +background-image: url("/shared-assets/images/examples/lizard.png"); +``` + +```css interactive-example-choice +background-image: + url("/shared-assets/images/examples/lizard.png"), + url("/shared-assets/images/examples/star.png"); +``` + +```css interactive-example-choice +background-image: + url("/shared-assets/images/examples/star.png"), + url("/shared-assets/images/examples/lizard.png"); +``` + +```css interactive-example-choice +background-image: + linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), + url("/shared-assets/images/examples/lizard.png"); +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + min-width: 100%; + min-height: 100%; + padding: 10%; +} +``` 여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다. diff --git a/files/ko/web/css/background-origin/index.md b/files/ko/web/css/background-origin/index.md index a0f08fa5a2bc89..f8ca85bc182659 100644 --- a/files/ko/web/css/background-origin/index.md +++ b/files/ko/web/css/background-origin/index.md @@ -7,7 +7,40 @@ slug: Web/CSS/background-origin [CSS](/ko/docs/Web/CSS) **`background-origin`** 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다. -{{EmbedInteractiveExample("pages/css/background-origin.html")}} +{{InteractiveExample("CSS Demo: background-origin")}} + +```css interactive-example-choice +background-origin: border-box; +background-repeat: no-repeat; +``` + +```css interactive-example-choice +background-origin: padding-box; +background-repeat: no-repeat; +``` + +```css interactive-example-choice +background-origin: content-box; +background-repeat: no-repeat; +``` + +```html interactive-example +
+
This is the content of the element.
+
+``` + +```css interactive-example +#example-element { + background-image: url("/shared-assets/images/examples/leopard.jpg"); + color: #d73611; + text-shadow: 2px 2px black; + padding: 20px; + border: 10px dashed #333; + font-size: 2em; + font-weight: bold; +} +``` {{cssxref("background-attachment")}}가 `fixed`인 경우 `background-origin`은 무시됩니다. diff --git a/files/ko/web/css/background-repeat/index.md b/files/ko/web/css/background-repeat/index.md index 79201164171bc9..629bf1f4cae842 100644 --- a/files/ko/web/css/background-repeat/index.md +++ b/files/ko/web/css/background-repeat/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/background-repeat [CSS](/ko/docs/Web/CSS) **`background-repeat`** 속성은 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다. -{{EmbedInteractiveExample("pages/css/background-repeat.html")}} +{{InteractiveExample("CSS Demo: background-repeat")}} + +```css interactive-example-choice +background-repeat: repeat-x; +``` + +```css interactive-example-choice +background-repeat: repeat; +``` + +```css interactive-example-choice +background-repeat: space; +``` + +```css interactive-example-choice +background-repeat: round; +``` + +```css interactive-example-choice +background-repeat: no-repeat; +``` + +```css interactive-example-choice +background-repeat: space repeat; +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + background: #ccc url("/shared-assets/images/examples/moon.jpg") center / 120px; + min-width: 100%; + min-height: 100%; +} +``` 반복한 이미지는 기본값에선 요소 크기에 따라 잘릴 수 있지만, 잘리지 않도록 배경 이미지 크기를 조절하거나(`round`) 끝에서 끝까지 고르게 분배(`space`)할 수 있습니다. diff --git a/files/ko/web/css/background/index.md b/files/ko/web/css/background/index.md index 1c60abcbfa5289..c45a1e108c725d 100644 --- a/files/ko/web/css/background/index.md +++ b/files/ko/web/css/background/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/background [CSS](/ko/docs/Web/API/CSS) **`background`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다. -{{EmbedInteractiveExample("pages/css/background.html")}} +{{InteractiveExample("CSS Demo: background")}} + +```css interactive-example-choice +background: green; +``` + +```css interactive-example-choice +background: content-box radial-gradient(crimson, skyblue); +``` + +```css interactive-example-choice +background: no-repeat url("/shared-assets/images/examples/lizard.png"); +``` + +```css interactive-example-choice +background: left 5% / 15% 60% repeat-x + url("/shared-assets/images/examples/star.png"); +``` + +```css interactive-example-choice +background: + center / contain no-repeat + url("/shared-assets/images/examples/firefox-logo.svg"), + #eee 35% url("/shared-assets/images/examples/lizard.png"); +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + min-width: 100%; + min-height: 100%; + padding: 10%; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/basic-shape/circle/index.md b/files/ko/web/css/basic-shape/circle/index.md index e1f46577da7fd1..6dfedede97228e 100644 --- a/files/ko/web/css/basic-shape/circle/index.md +++ b/files/ko/web/css/basic-shape/circle/index.md @@ -9,7 +9,45 @@ l10n: **`circle()`** CSS [함수](/ko/docs/Web/CSS/CSS_Functions) 는 둥글기와 위치를 이용하여 원 도형을 정의합니다. {{cssxref("<basic-shape>")}} 데이터 타입 중 하나입니다. -{{EmbedInteractiveExample("pages/css/function-circle.html")}} +{{InteractiveExample("CSS Demo: circle()")}} + +```css interactive-example-choice +clip-path: circle(50px); +``` + +```css interactive-example-choice +clip-path: circle(6rem at right center); +``` + +```css interactive-example-choice +clip-path: circle(10% at 2rem 90%); +``` + +```css interactive-example-choice +clip-path: circle(closest-side at 5rem 6rem); +``` + +```css interactive-example-choice +clip-path: circle(farthest-side); +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#default-example { + background: #fe9; +} + +#example-element { + background: linear-gradient(to bottom right, #f52, #05f); + width: 100%; + height: 100%; +} +``` ## 구문 diff --git a/files/ko/web/css/border-bottom-color/index.md b/files/ko/web/css/border-bottom-color/index.md index 3adee5c742eb94..bee7da50adb687 100644 --- a/files/ko/web/css/border-bottom-color/index.md +++ b/files/ko/web/css/border-bottom-color/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-bottom-color **`border-bottom-color`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 아래쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-bottom")}} 단축 속성으로도 지정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}} +{{InteractiveExample("CSS Demo: border-bottom-color")}} + +```css interactive-example-choice +border-bottom-color: red; +``` + +```css interactive-example-choice +border-bottom-color: #32a1ce; +``` + +```css interactive-example-choice +border-bottom-color: rgb(170, 50, 220, 0.6); +``` + +```css interactive-example-choice +border-bottom-color: hsl(60, 90%, 50%, 0.8); +``` + +```css interactive-example-choice +border-bottom-color: transparent; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-bottom-style/index.md b/files/ko/web/css/border-bottom-style/index.md index bf6409c073e220..3babc9b0fabeee 100644 --- a/files/ko/web/css/border-bottom-style/index.md +++ b/files/ko/web/css/border-bottom-style/index.md @@ -7,7 +7,54 @@ slug: Web/CSS/border-bottom-style **`border-bottom-style`** [CSS](/ko/docs/Web/CSS) 속성은 요소 테두리의 아래쪽 스타일을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}} +{{InteractiveExample("CSS Demo: border-bottom-style")}} + +```css interactive-example-choice +border-bottom-style: none; +``` + +```css interactive-example-choice +border-bottom-style: dotted; +``` + +```css interactive-example-choice +border-bottom-style: dashed; +``` + +```css interactive-example-choice +border-bottom-style: solid; +``` + +```css interactive-example-choice +border-bottom-style: groove; +``` + +```css interactive-example-choice +border-bottom-style: inset; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} + +body { + background-color: #fff; +} +``` > [!NOTE] > 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다. diff --git a/files/ko/web/css/border-bottom-width/index.md b/files/ko/web/css/border-bottom-width/index.md index 160c98863f8006..91f3a84e62339e 100644 --- a/files/ko/web/css/border-bottom-width/index.md +++ b/files/ko/web/css/border-bottom-width/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-bottom-width [CSS](/ko/docs/Web/CSS) **`border-bottom-width`** 속성은 요소의 아래 테두리 너비를 지정합니다. -{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}} +{{InteractiveExample("CSS Demo: border-bottom-width")}} + +```css interactive-example-choice +border-bottom-width: thick; +``` + +```css interactive-example-choice +border-bottom-width: 2em; +``` + +```css interactive-example-choice +border-bottom-width: 4px; +``` + +```css interactive-example-choice +border-bottom-width: 2ex; +``` + +```css interactive-example-choice +border-bottom-width: 0; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: palegreen; + color: #000; + border: 0 solid crimson; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-bottom/index.md b/files/ko/web/css/border-bottom/index.md index 21b0c9320f52ed..d9d4e4fbe6e5fc 100644 --- a/files/ko/web/css/border-bottom/index.md +++ b/files/ko/web/css/border-bottom/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/border-bottom **`border-bottom`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 아래쪽 테두리를 설정합니다. {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-color")}}의 값을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-bottom.html")}} +{{InteractiveExample("CSS Demo: border-bottom")}} + +```css interactive-example-choice +border-bottom: solid; +``` + +```css interactive-example-choice +border-bottom: dashed red; +``` + +```css interactive-example-choice +border-bottom: 1rem solid; +``` + +```css interactive-example-choice +border-bottom: thick double #32a1ce; +``` + +```css interactive-example-choice +border-bottom: 4mm ridge rgba(211, 220, 50, 0.6); +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #8b008b; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 다른 단축 속성과 마찬가지로, `border-bottom`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다. diff --git a/files/ko/web/css/border-collapse/index.md b/files/ko/web/css/border-collapse/index.md index b5fd2106e18011..2bf4c2bbd32804 100644 --- a/files/ko/web/css/border-collapse/index.md +++ b/files/ko/web/css/border-collapse/index.md @@ -7,7 +7,47 @@ slug: Web/CSS/border-collapse **`border-collapse`** CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다. -{{EmbedInteractiveExample("pages/css/border-collapse.html")}} +{{InteractiveExample("CSS Demo: border-collapse")}} + +```css interactive-example-choice +border-collapse: collapse; +``` + +```css interactive-example-choice +border-collapse: separate; +``` + +```html interactive-example +
+ + + + + + + + + + + + + +
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
Cell 3.1Cell 3.2
+
+``` + +```css interactive-example +table { + width: 15rem; + table-layout: fixed; +} + +td { + border: 5px solid; + border-color: crimson dodgerblue orange limegreen; + padding: 0.75rem; +} +``` 분리(_separated_) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 {{ Cssxref("border-spacing") }} 속성에 의해 주어집니다. diff --git a/files/ko/web/css/border-color/index.md b/files/ko/web/css/border-color/index.md index 482ac3eef649b4..71c90bcc25b23c 100644 --- a/files/ko/web/css/border-color/index.md +++ b/files/ko/web/css/border-color/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-color **`border-color`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 모든 면의 테두리 색상을 설정합니다. -{{EmbedInteractiveExample("pages/css/border-color.html")}} +{{InteractiveExample("CSS Demo: border-color")}} + +```css interactive-example-choice +border-color: red; +``` + +```css interactive-example-choice +border-color: red #32a1ce; +``` + +```css interactive-example-choice +border-color: red rgba(170, 50, 220, 0.6) green; +``` + +```css interactive-example-choice +border-color: red yellow green hsla(60, 90%, 50%, 0.8); +``` + +```css interactive-example-choice +border-color: red yellow green transparent; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 각 면 테두리의 색상은 {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}를 사용해 정할 수 있습니다. 아니면 쓰기 방향에 따라 달라지는 속성인 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}을 사용할 수도 있습니다. diff --git a/files/ko/web/css/border-image-outset/index.md b/files/ko/web/css/border-image-outset/index.md index c3d65e343edcb3..8d1e4a7424a2d5 100644 --- a/files/ko/web/css/border-image-outset/index.md +++ b/files/ko/web/css/border-image-outset/index.md @@ -9,7 +9,46 @@ slug: Web/CSS/border-image-outset `border-image-outset`으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다. -{{EmbedInteractiveExample("pages/css/border-image-outset.html")}} +{{InteractiveExample("CSS Demo: border-image-outset")}} + +```css interactive-example-choice +border-image-outset: 0; +``` + +```css interactive-example-choice +border-image-outset: 15px; +``` + +```css interactive-example-choice +border-image-outset: 30px; +``` + +```css interactive-example-choice +border-image-outset: 40px; +``` + +```html interactive-example +
+
This is a box with a border around it.
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + background: #fff3d4; + color: #000; + border: 30px solid; + border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + round; + font-size: 1.2em; +} +``` ## 구문 diff --git a/files/ko/web/css/border-image-repeat/index.md b/files/ko/web/css/border-image-repeat/index.md index fc4b544856aaa7..9d5ce401d3051a 100644 --- a/files/ko/web/css/border-image-repeat/index.md +++ b/files/ko/web/css/border-image-repeat/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/border-image-repeat **`border-image-repeat`** [CSS](/ko/docs/Web/CSS) 속성은 원본 이미지의 [모서리 영역](/ko/docs/Web/CSS/border-image-slice#edge_region)을 요소의 [테두리 이미지](/ko/docs/Web/CSS/border-image) 크기에 맞춰 조절할 때 사용할 방법을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}} +{{InteractiveExample("CSS Demo: border-image-repeat")}} + +```css interactive-example-choice +border-image-repeat: stretch; +``` + +```css interactive-example-choice +border-image-repeat: repeat; +``` + +```css interactive-example-choice +border-image-repeat: round; +``` + +```css interactive-example-choice +border-image-repeat: space; +``` + +```css interactive-example-choice +border-image-repeat: round stretch; +``` + +```html interactive-example +
+
This is a box with a border around it.
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + background: #fff3d4; + color: #000; + border: 30px solid; + border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + round; + font-size: 1.2em; +} +``` ## 구문 diff --git a/files/ko/web/css/border-image-slice/index.md b/files/ko/web/css/border-image-slice/index.md index c7e6e5164719e9..8db5cb2af264b9 100644 --- a/files/ko/web/css/border-image-slice/index.md +++ b/files/ko/web/css/border-image-slice/index.md @@ -7,7 +7,48 @@ slug: Web/CSS/border-image-slice **`border-image-slice`** [CSS](/ko/docs/Web/CSS) 속성은 {{cssxref("border-image-source")}}로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 [테두리 이미지](/ko/docs/Web/CSS/border-image)를 이룹니다. -{{EmbedInteractiveExample("pages/css/border-image-slice.html")}} +{{InteractiveExample("CSS Demo: border-image-slice")}} + +```css interactive-example-choice +border-image-slice: 30; +``` + +```css interactive-example-choice +border-image-slice: 30 fill; +``` + +```css interactive-example-choice +border-image-slice: 44; +``` + +```css interactive-example-choice +border-image: url("/shared-assets/images/examples/border-florid.svg") round; +border-image-slice: calc(50 / 184 * 100%) calc(80 / 284 * 100%) fill; +border-image-width: 30px 48px; +``` + +```html interactive-example +
+
This is a box with a border around it.
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + background: #fff3d4; + color: #000; + border: 30px solid; + border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + round; + font-size: 1.2em; +} +``` 이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다. diff --git a/files/ko/web/css/border-image-source/index.md b/files/ko/web/css/border-image-source/index.md index 933a35ed28fec3..3203ece68536f3 100644 --- a/files/ko/web/css/border-image-source/index.md +++ b/files/ko/web/css/border-image-source/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/border-image-source **`border-image-source`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 [테두리 이미지](/ko/docs/Web/CSS/border-image)로 사용할 원본 이미지를 지정합니다. -{{EmbedInteractiveExample("pages/css/border-image-source.html")}} +{{InteractiveExample("CSS Demo: border-image-source")}} + +```css interactive-example-choice +border-image-source: url("/shared-assets/images/examples/border-diamonds.png"); +``` + +```css interactive-example-choice +border-image-source: url("/shared-assets/images/examples/border-stars.png"); +``` + +```css interactive-example-choice +border-image-source: repeating-linear-gradient( + 45deg, + transparent, + #4d9f0c 20px +); +``` + +```css interactive-example-choice +border-image-source: none; +``` + +```html interactive-example +
+
This is a box with a border around it.
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + background: #fff3d4; + color: #000; + border: 30px solid; + border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + round; + font-size: 1.2em; +} +``` {{cssxref("border-image-slice")}} 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다. diff --git a/files/ko/web/css/border-image-width/index.md b/files/ko/web/css/border-image-width/index.md index e665f2a86ab95a..53177dd7a59b4e 100644 --- a/files/ko/web/css/border-image-width/index.md +++ b/files/ko/web/css/border-image-width/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-image-width **`border-image-width`** [CSS](/ko/docs/Web/CSS) 속성은 요소 [테두리 이미지](/ko/docs/Web/CSS/border-image)의 너비를 설정합니다. -{{EmbedInteractiveExample("pages/css/border-image-width.html")}} +{{InteractiveExample("CSS Demo: border-image-width")}} + +```css interactive-example-choice +border-image-width: 30px; +``` + +```css interactive-example-choice +border-image-width: 15px 40px; +``` + +```css interactive-example-choice +border-image-width: 2.6rem; +``` + +```css interactive-example-choice +border-image-width: 20% 8%; +``` + +```html interactive-example +
+
This is a box with a border around it.
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + background: #fff3d4; + color: #000; + border: 30px solid; + border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + round; + font-size: 1.2em; +} +``` 속성의 값이 {{cssxref("border-width")}}보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다. diff --git a/files/ko/web/css/border-image/index.md b/files/ko/web/css/border-image/index.md index 7bccbefc8b02fd..21d166bf4476df 100644 --- a/files/ko/web/css/border-image/index.md +++ b/files/ko/web/css/border-image/index.md @@ -7,7 +7,53 @@ slug: Web/CSS/border-image **`border-image`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 주위에 이미지를 그립니다. 일반 [테두리](/ko/docs/Web/CSS/border)를 대체합니다. -{{EmbedInteractiveExample("pages/css/border-image.html")}} +{{InteractiveExample("CSS Demo: border-image")}} + +```css interactive-example-choice +border-image: url("/shared-assets/images/examples/border-diamonds.png") 30; +``` + +```css interactive-example-choice +border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 / + 19px round; +``` + +```css interactive-example-choice +border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + fill / 30px / 30px space; +``` + +```css interactive-example-choice +border-image: linear-gradient(#f6b73c, #4d9f0c) 30; +``` + +```css interactive-example-choice +border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px) + 60; +``` + +```html interactive-example +
+
This is a box with a border around it.
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; + padding: 50px; + background: #fff3d4; + color: #000; + border: 30px solid; + border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 + round; + font-size: 1.2em; +} +``` `border-image`는 {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}}의 [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 [초기값](/ko/docs/Web/CSS/initial_value)으로 설정됩니다. diff --git a/files/ko/web/css/border-left-color/index.md b/files/ko/web/css/border-left-color/index.md index 9ce4f27721489b..b9156333c5f039 100644 --- a/files/ko/web/css/border-left-color/index.md +++ b/files/ko/web/css/border-left-color/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-left-color **`border-left-color`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 왼쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-left")}} 단축 속성으로도 지정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/border-left-color.html")}} +{{InteractiveExample("CSS Demo: border-left-color")}} + +```css interactive-example-choice +border-left-color: red; +``` + +```css interactive-example-choice +border-left-color: #32a1ce; +``` + +```css interactive-example-choice +border-left-color: rgb(170, 50, 220, 0.6); +``` + +```css interactive-example-choice +border-left-color: hsl(60, 90%, 50%, 0.8); +``` + +```css interactive-example-choice +border-left-color: transparent; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-left-style/index.md b/files/ko/web/css/border-left-style/index.md index 88b121e7cc2598..de11f6f7594b07 100644 --- a/files/ko/web/css/border-left-style/index.md +++ b/files/ko/web/css/border-left-style/index.md @@ -7,7 +7,54 @@ slug: Web/CSS/border-left-style **`border-left-style`** [CSS](/ko/docs/Web/CSS) 속성은 요소 테두리의 왼쪽 스타일을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-left-style.html")}} +{{InteractiveExample("CSS Demo: border-left-style")}} + +```css interactive-example-choice +border-left-style: none; +``` + +```css interactive-example-choice +border-left-style: dotted; +``` + +```css interactive-example-choice +border-left-style: dashed; +``` + +```css interactive-example-choice +border-left-style: solid; +``` + +```css interactive-example-choice +border-left-style: groove; +``` + +```css interactive-example-choice +border-left-style: inset; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} + +body { + background-color: #fff; +} +``` > [!NOTE] > 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다. diff --git a/files/ko/web/css/border-left-width/index.md b/files/ko/web/css/border-left-width/index.md index 614c301599f1aa..a0ec52c483c2a2 100644 --- a/files/ko/web/css/border-left-width/index.md +++ b/files/ko/web/css/border-left-width/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-left-width [CSS](/ko/docs/Web/CSS) **`border-left-width`** 속성은 요소의 왼쪽 테두리 너비를 지정합니다. -{{EmbedInteractiveExample("pages/css/border-left-width.html")}} +{{InteractiveExample("CSS Demo: border-left-width")}} + +```css interactive-example-choice +border-left-width: thick; +``` + +```css interactive-example-choice +border-left-width: 2em; +``` + +```css interactive-example-choice +border-left-width: 4px; +``` + +```css interactive-example-choice +border-left-width: 2ex; +``` + +```css interactive-example-choice +border-left-width: 0; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: palegreen; + color: #000; + border: 0 solid crimson; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-left/index.md b/files/ko/web/css/border-left/index.md index 9333398224c805..00b1c62235cd0b 100644 --- a/files/ko/web/css/border-left/index.md +++ b/files/ko/web/css/border-left/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/border-left **`border-left`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 왼쪽 테두리를 설정합니다. {{cssxref("border-left-width")}}, {{cssxref("border-left-style")}}, {{cssxref("border-left-color")}}의 값을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-left.html")}} +{{InteractiveExample("CSS Demo: border-left")}} + +```css interactive-example-choice +border-left: solid; +``` + +```css interactive-example-choice +border-left: dashed red; +``` + +```css interactive-example-choice +border-left: 1rem solid; +``` + +```css interactive-example-choice +border-left: thick double #32a1ce; +``` + +```css interactive-example-choice +border-left: 4mm ridge rgba(211, 220, 50, 0.6); +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #8b008b; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 다른 단축 속성과 마찬가지로, `border-left`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다. diff --git a/files/ko/web/css/border-radius/index.md b/files/ko/web/css/border-radius/index.md index b71ada8039b42f..4e78ba541782d3 100644 --- a/files/ko/web/css/border-radius/index.md +++ b/files/ko/web/css/border-radius/index.md @@ -7,7 +7,52 @@ slug: Web/CSS/border-radius [CSS](/ko/docs/Web/CSS) **`border-radius`** 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다. -{{EmbedInteractiveExample("pages/css/border-radius.html")}} +{{InteractiveExample("CSS Demo: border-radius")}} + +```css interactive-example-choice +border-radius: 30px; +``` + +```css interactive-example-choice +border-radius: 25% 10%; +``` + +```css interactive-example-choice +border-radius: 10% 30% 50% 70%; +``` + +```css interactive-example-choice +border-radius: 10% / 50%; +``` + +```css interactive-example-choice +border-radius: 10px 100px / 120px; +``` + +```css interactive-example-choice +border-radius: 50% 20% / 10% 40%; +``` + +```html interactive-example +
+
+ This is a box with rounded corners. +
+
+``` + +```css interactive-example +#example-element { + width: 80%; + height: 80%; + display: flex; + justify-content: center; + flex-direction: column; + background-color: #5b6dcd; + color: white; + padding: 10px; +} +``` 꼭짓점 반경은 요소의 테두리 존재 여부와는 별개로 전체 {{Cssxref("background")}}에 적용됩니다. 원형 꼭짓점으로 인해 배경이 잘리는 지점은 {{cssxref("background-clip")}} 속성이 지정합니다. diff --git a/files/ko/web/css/border-right-color/index.md b/files/ko/web/css/border-right-color/index.md index 680386c66d1546..dd7849b59396a3 100644 --- a/files/ko/web/css/border-right-color/index.md +++ b/files/ko/web/css/border-right-color/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-right-color **`border-right-color`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 오른쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-right")}} 단축 속성으로도 지정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/border-right-color.html")}} +{{InteractiveExample("CSS Demo: border-right-color")}} + +```css interactive-example-choice +border-right-color: red; +``` + +```css interactive-example-choice +border-right-color: #32a1ce; +``` + +```css interactive-example-choice +border-right-color: rgb(170, 50, 220, 0.6); +``` + +```css interactive-example-choice +border-right-color: hsl(60, 90%, 50%, 0.8); +``` + +```css interactive-example-choice +border-right-color: transparent; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-right-style/index.md b/files/ko/web/css/border-right-style/index.md index c99b52fff280a8..40e2060b5f88b8 100644 --- a/files/ko/web/css/border-right-style/index.md +++ b/files/ko/web/css/border-right-style/index.md @@ -7,7 +7,54 @@ slug: Web/CSS/border-right-style **`border-right-style`** [CSS](/ko/docs/Web/CSS) 속성은 요소 테두리의 오른쪽 스타일을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-right-style.html")}} +{{InteractiveExample("CSS Demo: border-right-style")}} + +```css interactive-example-choice +border-right-style: none; +``` + +```css interactive-example-choice +border-right-style: dotted; +``` + +```css interactive-example-choice +border-right-style: dashed; +``` + +```css interactive-example-choice +border-right-style: solid; +``` + +```css interactive-example-choice +border-right-style: groove; +``` + +```css interactive-example-choice +border-right-style: inset; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} + +body { + background-color: #fff; +} +``` > [!NOTE] > 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다. diff --git a/files/ko/web/css/border-right-width/index.md b/files/ko/web/css/border-right-width/index.md index e30552ba488ba5..b0c2e40f0c581a 100644 --- a/files/ko/web/css/border-right-width/index.md +++ b/files/ko/web/css/border-right-width/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-right-width [CSS](/ko/docs/Web/CSS) **`border-right-width`** 속성은 요소의 오른쪽 테두리 너비를 지정합니다. -{{EmbedInteractiveExample("pages/css/border-right-width.html")}} +{{InteractiveExample("CSS Demo: border-right-width")}} + +```css interactive-example-choice +border-right-width: thick; +``` + +```css interactive-example-choice +border-right-width: 2em; +``` + +```css interactive-example-choice +border-right-width: 4px; +``` + +```css interactive-example-choice +border-right-width: 2ex; +``` + +```css interactive-example-choice +border-right-width: 0; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: palegreen; + color: #000; + border: 0 solid crimson; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-right/index.md b/files/ko/web/css/border-right/index.md index 6ae9918bcb370d..72a2f30f086f9b 100644 --- a/files/ko/web/css/border-right/index.md +++ b/files/ko/web/css/border-right/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/border-right **`border-right`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 오른쪽 테두리를 설정합니다. {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}}, {{cssxref("border-right-color")}}의 값을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-right.html")}} +{{InteractiveExample("CSS Demo: border-right")}} + +```css interactive-example-choice +border-right: solid; +``` + +```css interactive-example-choice +border-right: dashed red; +``` + +```css interactive-example-choice +border-right: 1rem solid; +``` + +```css interactive-example-choice +border-right: thick double #32a1ce; +``` + +```css interactive-example-choice +border-right: 4mm ridge rgba(211, 220, 50, 0.6); +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #8b008b; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 다른 단축 속성과 마찬가지로, `border-right`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다. diff --git a/files/ko/web/css/border-spacing/index.md b/files/ko/web/css/border-spacing/index.md index cd5b05aad6e419..455f04d4d98254 100644 --- a/files/ko/web/css/border-spacing/index.md +++ b/files/ko/web/css/border-spacing/index.md @@ -7,7 +7,51 @@ slug: Web/CSS/border-spacing [CSS](/ko/docs/Web/CSS) **`border-spacing`** 속성은 인접한 표 칸의 테두리 간격을 지정합니다. {{cssxref("border-collapse")}}가 `separate`여야 적용됩니다. -{{EmbedInteractiveExample("pages/css/border-spacing.html")}} +{{InteractiveExample("CSS Demo: border-spacing")}} + +```css interactive-example-choice +border-spacing: 0; +``` + +```css interactive-example-choice +border-spacing: 5px; +``` + +```css interactive-example-choice +border-spacing: 5px 1rem; +``` + +```html interactive-example +
+ + + + + + + + + + + + + +
Cell 1.1Cell 1.2
Cell 2.1Cell 2.2
Cell 3.1Cell 3.2
+
+``` + +```css interactive-example +table { + width: 15rem; + table-layout: fixed; +} + +td { + border: 5px solid; + border-color: crimson dodgerblue; + padding: 0.75rem; +} +``` `border-spacing` 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) `border-spacing` 값과 표에 적용한 (상/우/하/좌) {{cssxref("padding")}} 값의 합이 됩니다. diff --git a/files/ko/web/css/border-style/index.md b/files/ko/web/css/border-style/index.md index e9a86d699636f6..ca597751a4d23e 100644 --- a/files/ko/web/css/border-style/index.md +++ b/files/ko/web/css/border-style/index.md @@ -7,7 +7,54 @@ slug: Web/CSS/border-style **`border-style`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소 테두리 네 면의 스타일을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-style.html")}} +{{InteractiveExample("CSS Demo: border-style")}} + +```css interactive-example-choice +border-style: none; +``` + +```css interactive-example-choice +border-style: dotted; +``` + +```css interactive-example-choice +border-style: inset; +``` + +```css interactive-example-choice +border-style: dashed solid; +``` + +```css interactive-example-choice +border-style: dashed double none; +``` + +```css interactive-example-choice +border-style: dashed groove none dotted; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} + +body { + background-color: #fff; +} +``` ## 구문 diff --git a/files/ko/web/css/border-top-color/index.md b/files/ko/web/css/border-top-color/index.md index 684ad9d424f7d2..46e97e0154b923 100644 --- a/files/ko/web/css/border-top-color/index.md +++ b/files/ko/web/css/border-top-color/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-top-color **`border-top-color`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 위쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-top")}} 단축 속성으로도 지정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/border-top-color.html")}} +{{InteractiveExample("CSS Demo: border-top-color")}} + +```css interactive-example-choice +border-top-color: red; +``` + +```css interactive-example-choice +border-top-color: #32a1ce; +``` + +```css interactive-example-choice +border-top-color: rgb(170, 50, 220, 0.6); +``` + +```css interactive-example-choice +border-top-color: hsl(60, 90%, 50%, 0.8); +``` + +```css interactive-example-choice +border-top-color: transparent; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-top-style/index.md b/files/ko/web/css/border-top-style/index.md index e0d5667570a940..5cf6a0b4ab20bf 100644 --- a/files/ko/web/css/border-top-style/index.md +++ b/files/ko/web/css/border-top-style/index.md @@ -7,7 +7,54 @@ slug: Web/CSS/border-top-style **`border-top-style`** [CSS](/ko/docs/Web/CSS) 속성은 요소 테두리의 위쪽 스타일을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-top-style.html")}} +{{InteractiveExample("CSS Demo: border-top-style")}} + +```css interactive-example-choice +border-top-style: none; +``` + +```css interactive-example-choice +border-top-style: dotted; +``` + +```css interactive-example-choice +border-top-style: dashed; +``` + +```css interactive-example-choice +border-top-style: solid; +``` + +```css interactive-example-choice +border-top-style: groove; +``` + +```css interactive-example-choice +border-top-style: inset; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #000; + border: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} + +body { + background-color: #fff; +} +``` > [!NOTE] > 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다. diff --git a/files/ko/web/css/border-top-width/index.md b/files/ko/web/css/border-top-width/index.md index b83dd693288997..748778a3ca60fc 100644 --- a/files/ko/web/css/border-top-width/index.md +++ b/files/ko/web/css/border-top-width/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-top-width [CSS](/ko/docs/Web/CSS) **`border-top-width`** 속성은 요소의 위쪽 테두리 너비를 지정합니다. -{{EmbedInteractiveExample("pages/css/border-top-width.html")}} +{{InteractiveExample("CSS Demo: border-top-width")}} + +```css interactive-example-choice +border-top-width: thick; +``` + +```css interactive-example-choice +border-top-width: 2em; +``` + +```css interactive-example-choice +border-top-width: 4px; +``` + +```css interactive-example-choice +border-top-width: 2ex; +``` + +```css interactive-example-choice +border-top-width: 0; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: palegreen; + color: #000; + border: 0 solid crimson; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구문 diff --git a/files/ko/web/css/border-top/index.md b/files/ko/web/css/border-top/index.md index 04df51870ebf97..d3c78bca7335f2 100644 --- a/files/ko/web/css/border-top/index.md +++ b/files/ko/web/css/border-top/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/border-top **`border-top`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 위쪽 테두리를 설정합니다. {{cssxref("border-top-width")}}, {{cssxref("border-top-style")}}, {{cssxref("border-top-color")}}의 값을 지정합니다. -{{EmbedInteractiveExample("pages/css/border-top.html")}} +{{InteractiveExample("CSS Demo: border-top")}} + +```css interactive-example-choice +border-top: solid; +``` + +```css interactive-example-choice +border-top: dashed red; +``` + +```css interactive-example-choice +border-top: 1rem solid; +``` + +```css interactive-example-choice +border-top: thick double #32a1ce; +``` + +```css interactive-example-choice +border-top: 4mm ridge rgba(211, 220, 50, 0.6); +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #8b008b; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 다른 단축 속성과 마찬가지로, `border-top`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다. diff --git a/files/ko/web/css/border-width/index.md b/files/ko/web/css/border-width/index.md index 5682be6469fad6..aa3d8a1de2f9ca 100644 --- a/files/ko/web/css/border-width/index.md +++ b/files/ko/web/css/border-width/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/border-width [CSS](/ko/docs/Web/CSS) **`border-width`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소 네 면 테두리의 너비를 설정합니다. -{{EmbedInteractiveExample("pages/css/border-width.html")}} +{{InteractiveExample("CSS Demo: border-width")}} + +```css interactive-example-choice +border-width: thick; +``` + +```css interactive-example-choice +border-width: 1em; +``` + +```css interactive-example-choice +border-width: 4px 1.25em; +``` + +```css interactive-example-choice +border-width: 2ex 1.25ex 0.5ex; +``` + +```css interactive-example-choice +border-width: 0 4px 8px 12px; +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: palegreen; + color: #000; + border: 0 solid crimson; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/border/index.md b/files/ko/web/css/border/index.md index cee978f5670aab..576f17dab9a899 100644 --- a/files/ko/web/css/border/index.md +++ b/files/ko/web/css/border/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/border [CSS](/ko/docs/Web/CSS) **`border`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 테두리를 설정합니다. {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}의 값을 설정합니다. -{{EmbedInteractiveExample("pages/css/border.html")}} +{{InteractiveExample("CSS Demo: border")}} + +```css interactive-example-choice +border: solid; +``` + +```css interactive-example-choice +border: dashed red; +``` + +```css interactive-example-choice +border: 1rem solid; +``` + +```css interactive-example-choice +border: thick double #32a1ce; +``` + +```css interactive-example-choice +border: 4mm ridge rgba(211, 220, 50, 0.6); +``` + +```html interactive-example +
+
+ This is a box with a border around it. +
+
+``` + +```css interactive-example +#example-element { + background-color: #eee; + color: #8b008b; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/box-sizing/index.md b/files/ko/web/css/box-sizing/index.md index 9e8c3d57326b50..2c0e1456737958 100644 --- a/files/ko/web/css/box-sizing/index.md +++ b/files/ko/web/css/box-sizing/index.md @@ -7,7 +7,56 @@ slug: Web/CSS/box-sizing **`box-sizing`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. -{{EmbedInteractiveExample("pages/css/box-sizing.html")}} +{{InteractiveExample("CSS Demo: box-sizing")}} + +```css interactive-example-choice +box-sizing: content-box; +width: 100%; +``` + +```css interactive-example-choice +box-sizing: content-box; +width: 100%; +border: solid #5b6dcd 10px; +padding: 5px; +``` + +```css interactive-example-choice +box-sizing: border-box; +width: 100%; +border: solid #5b6dcd 10px; +padding: 5px; +``` + +```html interactive-example +
+
+

Parent container

+
+

Child container

+
+
+
+``` + +```css interactive-example +#example-element-parent { + width: 220px; + height: 200px; + border: solid 10px #ffc129; + margin: 0.8em; +} + +#example-element { + height: 60px; + margin: 2em auto; + background-color: rgba(81, 81, 81, 0.6); +} + +#example-element > p { + margin: 0; +} +``` CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다. diff --git a/files/ko/web/css/clear/index.md b/files/ko/web/css/clear/index.md index c898e91eddcae6..d9df9b1c66ee02 100644 --- a/files/ko/web/css/clear/index.md +++ b/files/ko/web/css/clear/index.md @@ -7,7 +7,62 @@ slug: Web/CSS/clear **`clear`** [CSS](/ko/docs/Web/CSS) 속성은 요소가 선행 [부동](/ko/docs/Web/CSS/float)(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. `clear` 속성은 부동 및 비부동 요소 모두에 적용됩니다. -{{EmbedInteractiveExample("pages/css/clear.html")}} +{{InteractiveExample("CSS Demo: clear")}} + +```css interactive-example-choice +clear: none; +``` + +```css interactive-example-choice +clear: left; +``` + +```css interactive-example-choice +clear: right; +``` + +```css interactive-example-choice +clear: both; +``` + +```html interactive-example +
+
+
Left
+
Right
+
+ As much mud in the streets as if the waters had but newly retired from the + face of the earth, and it would not be wonderful to meet a Megalosaurus, + forty feet long or so, waddling like an elephantine lizard up Holborn + Hill. +
+
+
+``` + +```css interactive-example +.example-container { + border: 1px solid #c5c5c5; + padding: 0.75em; + text-align: left; + line-height: normal; +} + +.floated-left { + border: solid 10px #ffc129; + background-color: rgba(81, 81, 81, 0.6); + padding: 1em; + float: left; +} + +.floated-right { + border: solid 10px #ffc129; + background-color: rgba(81, 81, 81, 0.6); + padding: 1em; + float: right; + height: 150px; +} +``` 비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 [마진 경계](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) 아래로까지 요소의 [보더 경계](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 [마진 상쇄](/ko/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)가 일어나지 않도록 합니다. diff --git a/files/ko/web/css/clip-path/index.md b/files/ko/web/css/clip-path/index.md index bdea7e31b0fbae..9c2216d1423fb0 100644 --- a/files/ko/web/css/clip-path/index.md +++ b/files/ko/web/css/clip-path/index.md @@ -7,7 +7,68 @@ slug: Web/CSS/clip-path **`clip-path`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다. -{{EmbedInteractiveExample("pages/css/clip-path.html")}} +{{InteractiveExample("CSS Demo: clip-path")}} + +```css interactive-example-choice +clip-path: circle(40%); +``` + +```css interactive-example-choice +clip-path: ellipse(130px 140px at 10% 20%); +``` + +```css interactive-example-choice +clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); +``` + +```css interactive-example-choice +clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z"); +``` + +```css interactive-example-choice +clip-path: rect(5px 145px 160px 5px round 20%); +``` + +```css interactive-example-choice +clip-path: xywh(0 5px 100% 75% round 15% 0); +``` + +```html interactive-example +
+
+ + We had agreed, my companion and I, that I should call for him at his house, + after dinner, not later than eleven o’clock. This athletic young Frenchman + belongs to a small set of Parisian sportsmen, who have taken up “ballooning” + as a pastime. After having exhausted all the sensations that are to be found + in ordinary sports, even those of “automobiling” at a breakneck speed, the + members of the “Aéro Club” now seek in the air, where they indulge in all + kinds of daring feats, the nerve-racking excitement that they have ceased to + find on earth. +
+
+``` + +```css interactive-example +section { + align-items: flex-start; +} + +.example-container { + text-align: left; + padding: 20px; +} + +#example-element { + float: left; + width: 150px; + margin: 20px; +} +``` ## 구문 diff --git a/files/ko/web/css/color/index.md b/files/ko/web/css/color/index.md index aeee216464f933..c946e147a946f9 100644 --- a/files/ko/web/css/color/index.md +++ b/files/ko/web/css/color/index.md @@ -7,7 +7,53 @@ slug: Web/CSS/color **`color`** [CSS](/ko/docs/Web/API/CSS) 속성은 요소의 글씨 및 [글씨 장식](/ko/docs/Web/CSS/text-decoration)의 전경색과 {{cssxref("currentcolor")}}의 값을 설정합니다. `currentcolor`는 다른 속성에서 사용할 수 있는 간접적인 값이며, {{cssxref("border-color")}} 등 일부 속성의 기본값입니다. -{{EmbedInteractiveExample("pages/css/color.html")}} +{{InteractiveExample("CSS Demo: color")}} + +```css interactive-example-choice +color: rebeccapurple; +``` + +```css interactive-example-choice +color: #00a400; +``` + +```css interactive-example-choice +color: rgb(214, 122, 127); +``` + +```css interactive-example-choice +color: hsl(30deg 82% 43%); +``` + +```css interactive-example-choice +color: hsla(237deg 74% 33% / 61%); +``` + +```css interactive-example-choice +color: hwb(152deg 0% 58% / 70%); +``` + +```html interactive-example +
+
+

+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. +

+
+
+``` + +```css interactive-example +#example-element { + font-size: 1.5em; +} + +.example-container { + background-color: white; + padding: 10px; +} +``` HTML에서 색을 사용하는 법은 [CSS로 HTML 요소에 색입히기](/ko/docs/Web/CSS/CSS_colors/Applying_color) 문서에서 정리한 내용으로 읽을 수 있습니다. diff --git a/files/ko/web/css/content-visibility/index.md b/files/ko/web/css/content-visibility/index.md index 541b93437ddeaf..f07ff6bcd4f6f2 100644 --- a/files/ko/web/css/content-visibility/index.md +++ b/files/ko/web/css/content-visibility/index.md @@ -11,7 +11,48 @@ l10n: > [!NOTE] > {{domxref("element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} 이벤트는 `content-visibility: auto` 가 적용된 어떠한 요소든 렌더링 작업이 생략되기 시작하거나 끝날 때에 발생합니다. 이는 애플리케이션 코드에 렌더링 절차가 필요하지 않을 때 (예시, {{htmlelement("canvas")}} 에 그림을 그리는 경우) 이 작업을 시작하거나 중단하여 처리 능력을 최적화할 수 있는 편리한 방법을 제공합니다. -{{EmbedInteractiveExample("pages/css/content-visibility.html")}} +{{InteractiveExample("CSS Demo: content-visibility")}} + +```css interactive-example-choice +content-visibility: visible; +``` + +```css interactive-example-choice +content-visibility: hidden; +``` + +```html interactive-example +
+
+
+ This is an inner div +
+
+
+``` + +```css interactive-example +.container { + width: 140px; + height: 140px; + border: 3px solid rgb(64, 28, 163); + background-color: rgb(135, 136, 184); + display: flex; + align-items: center; + justify-content: center; +} + +.child { + border: 3px solid rgb(64, 28, 163); + background-color: wheat; + color: black; + width: 80%; + height: 80%; + display: flex; + align-items: center; + justify-content: center; +} +``` ## 구문 diff --git a/files/ko/web/css/cursor/index.md b/files/ko/web/css/cursor/index.md index 70844b523fad98..4365905bf97fe2 100644 --- a/files/ko/web/css/cursor/index.md +++ b/files/ko/web/css/cursor/index.md @@ -7,7 +7,53 @@ slug: Web/CSS/cursor [CSS](/ko/docs/Web/CSS) **`cursor`** 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다. -{{EmbedInteractiveExample("pages/css/cursor.html")}} +{{InteractiveExample("CSS Demo: cursor")}} + +```css interactive-example-choice +cursor: help; +``` + +```css interactive-example-choice +cursor: wait; +``` + +```css interactive-example-choice +cursor: crosshair; +``` + +```css interactive-example-choice +cursor: not-allowed; +``` + +```css interactive-example-choice +cursor: zoom-in; +``` + +```css interactive-example-choice +cursor: grab; +``` + +```html interactive-example +
+
+ Move over this element to see the cursor style. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + background-color: #1766aa; + color: white; + height: 180px; + width: 360px; + justify-content: center; + align-items: center; + font-size: 14pt; + padding: 5px; +} +``` ## 구문 diff --git a/files/ko/web/css/filter-function/blur/index.md b/files/ko/web/css/filter-function/blur/index.md index 32f5a828d0e8d8..45ce2866943cf2 100644 --- a/files/ko/web/css/filter-function/blur/index.md +++ b/files/ko/web/css/filter-function/blur/index.md @@ -7,7 +7,29 @@ slug: Web/CSS/filter-function/blur **`blur()`** [CSS](/ko/docs/Web/CSS) 함수는 주어진 이미지에 [가우시안 블러](https://en.wikipedia.org/wiki/Gaussian_blur)를 적용합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다. -{{EmbedInteractiveExample("pages/css/function-blur.html")}} +{{InteractiveExample("CSS Demo: blur()")}} + +```css interactive-example-choice +filter: blur(0); +``` + +```css interactive-example-choice +filter: blur(4px); +``` + +```css interactive-example-choice +filter: blur(1.5rem); +``` + +```html interactive-example +
+ +
+``` ## 구문 diff --git a/files/ko/web/css/filter-function/brightness/index.md b/files/ko/web/css/filter-function/brightness/index.md index 618d738bd4c935..0fb089458e8e07 100644 --- a/files/ko/web/css/filter-function/brightness/index.md +++ b/files/ko/web/css/filter-function/brightness/index.md @@ -7,7 +7,33 @@ slug: Web/CSS/filter-function/brightness **`brightness()`** [CSS](/ko/docs/Web/CSS) 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 {{cssxref("<filter-function>")}}입니다. -{{EmbedInteractiveExample("pages/css/function-brightness.html")}} +{{InteractiveExample("CSS Demo: brightness()")}} + +```css interactive-example-choice +filter: brightness(1); +``` + +```css interactive-example-choice +filter: brightness(1.75); +``` + +```css interactive-example-choice +filter: brightness(50%); +``` + +```css interactive-example-choice +filter: brightness(0); +``` + +```html interactive-example +
+ +
+``` ## 구문 diff --git a/files/ko/web/css/filter-function/contrast/index.md b/files/ko/web/css/filter-function/contrast/index.md index 7713ca0a27cdd4..d936db035a4f2b 100644 --- a/files/ko/web/css/filter-function/contrast/index.md +++ b/files/ko/web/css/filter-function/contrast/index.md @@ -7,7 +7,33 @@ slug: Web/CSS/filter-function/contrast **`contrast()`** [CSS](/ko/docs/Web/CSS) 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다. -{{EmbedInteractiveExample("pages/css/function-contrast.html")}} +{{InteractiveExample("CSS Demo: contrast()")}} + +```css interactive-example-choice +filter: contrast(1); +``` + +```css interactive-example-choice +filter: contrast(1.75); +``` + +```css interactive-example-choice +filter: contrast(50%); +``` + +```css interactive-example-choice +filter: contrast(0); +``` + +```html interactive-example +
+ +
+``` ## 구문 diff --git a/files/ko/web/css/filter-function/invert/index.md b/files/ko/web/css/filter-function/invert/index.md index 6385f55eb8725a..621be4ee71f7dc 100644 --- a/files/ko/web/css/filter-function/invert/index.md +++ b/files/ko/web/css/filter-function/invert/index.md @@ -9,7 +9,37 @@ l10n: **`invert()`** [CSS](/ko/docs/Web/CSS) [함수](/ko/docs/Web/CSS/CSS_Functions)는 주어진 이미지에 색상 샘플들을 반전해줍니다. {{cssxref("<filter-function>")}}을 반환 값으로 가집니다. -{{EmbedInteractiveExample("pages/css/function-invert.html")}} +{{InteractiveExample("CSS Demo: invert()")}} + +```css interactive-example-choice +filter: invert(0); +``` + +```css interactive-example-choice +filter: invert(0.3); +``` + +```css interactive-example-choice +filter: invert(50%); +``` + +```css interactive-example-choice +filter: invert(70%); +``` + +```css interactive-example-choice +filter: invert(1); +``` + +```html interactive-example +
+ +
+``` ## 구문 diff --git a/files/ko/web/css/filter/index.md b/files/ko/web/css/filter/index.md index 94ae9b0f15f730..9d7c3ea596abf6 100644 --- a/files/ko/web/css/filter/index.md +++ b/files/ko/web/css/filter/index.md @@ -9,7 +9,58 @@ slug: Web/CSS/filter CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. [SVG 필터 요소](/ko/docs/Web/SVG/Element/filter)를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다. -{{EmbedInteractiveExample("pages/css/filter.html")}} +{{InteractiveExample("CSS Demo: filter")}} + +```css interactive-example-choice +filter: url("/shared-assets/images/examples/shadow.svg#element-id"); +``` + +```css interactive-example-choice +filter: blur(5px); +``` + +```css interactive-example-choice +filter: contrast(200%); +``` + +```css interactive-example-choice +filter: grayscale(80%); +``` + +```css interactive-example-choice +filter: hue-rotate(90deg); +``` + +```css interactive-example-choice +filter: drop-shadow(16px 16px 20px red) invert(75%); +``` + +```html interactive-example +
+
+ +
+
+``` + +```css interactive-example +.example-container { + background-color: #fff; + width: 260px; + height: 260px; + display: flex; + align-items: center; + justify-content: center; +} + +#example-element { + flex: 1; + padding: 30px; +} +``` ## 구문 diff --git a/files/ko/web/css/flex-basis/index.md b/files/ko/web/css/flex-basis/index.md index bbbbbf5784ca40..0613ec114891af 100644 --- a/files/ko/web/css/flex-basis/index.md +++ b/files/ko/web/css/flex-basis/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/flex-basis **`flex-basis`** [CSS](/ko/docs/Web/CSS) 속성은 플렉스 아이템의 초기 크기를 지정합니다. {{cssxref("box-sizing")}}을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다. -{{EmbedInteractiveExample("pages/css/flex-basis.html")}} +{{InteractiveExample("CSS Demo: flex-basis")}} + +```css interactive-example-choice +flex-basis: auto; +``` + +```css interactive-example-choice +flex-basis: 0; +``` + +```css interactive-example-choice +flex-basis: 200px; +``` + +```html interactive-example +
+
Item One
+
Item Two
+
Item Three
+
+``` + +```css interactive-example +.default-example { + border: 1px solid #c5c5c5; + width: auto; + max-height: 300px; + display: flex; +} + +.default-example > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + margin: 10px; + flex-grow: 1; + flex-shrink: 1; + flex-basis: auto; +} +``` > **참고:** `auto` 값을 가지지 않은 `flex-basis`와 {{cssxref("width")}}({{cssxref("flex-direction")}}`: column`인 경우 {{cssxref("height")}}) 값을 동시에 적용한 경우 `flex-basis`가 우선합니다. diff --git a/files/ko/web/css/flex-direction/index.md b/files/ko/web/css/flex-direction/index.md index 2d141bb1cd92df..2098e3767d7502 100644 --- a/files/ko/web/css/flex-direction/index.md +++ b/files/ko/web/css/flex-direction/index.md @@ -7,7 +7,48 @@ slug: Web/CSS/flex-direction **`flex-direction`** [CSS](/ko/docs/Web/CSS) 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다. -{{EmbedInteractiveExample("pages/css/flex-direction.html")}} +{{InteractiveExample("CSS Demo: flex-direction")}} + +```css interactive-example-choice +flex-direction: row; +``` + +```css interactive-example-choice +flex-direction: row-reverse; +``` + +```css interactive-example-choice +flex-direction: column; +``` + +```css interactive-example-choice +flex-direction: column-reverse; +``` + +```html interactive-example +
+
+
Item One
+
Item Two
+
Item Three
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + width: 80%; + display: flex; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + width: 60px; + margin: 10px; +} +``` `row`와 `row-reverse`의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 `dir` 값이 `ltr`이라면 `row`는 왼쪽부터 시작하는 가로축을, `row-reverse`는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 `dir` 값이 `rtl`이라면 `row`가 오른쪽부터 시작하는 가로축을, `row-reverse`가 왼쪽부터 시작하는 가로축을 나타냅니다. diff --git a/files/ko/web/css/flex-flow/index.md b/files/ko/web/css/flex-flow/index.md index eaed169cb6c589..25126711c7f23c 100644 --- a/files/ko/web/css/flex-flow/index.md +++ b/files/ko/web/css/flex-flow/index.md @@ -7,7 +7,52 @@ slug: Web/CSS/flex-flow **`flex-flow`** [CSS](/ko/docs/Web/CSS) 속성은 {{cssxref("flex-direction")}}, {{cssxref("flex-wrap")}} 속성의 [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)입니다. -{{EmbedInteractiveExample("pages/css/flex-flow.html")}} +{{InteractiveExample("CSS Demo: flex-flow")}} + +```css interactive-example-choice +flex-flow: row wrap; +``` + +```css interactive-example-choice +flex-flow: row-reverse nowrap; +``` + +```css interactive-example-choice +flex-flow: column wrap-reverse; +``` + +```css interactive-example-choice +flex-flow: column wrap; +``` + +```html interactive-example +
+
+
Item One
+
Item Two
+
Item Three
+
Item Four
+
Item Five
+
Item Six
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + width: 80%; + max-height: 300px; + display: flex; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + width: 60px; + margin: 10px; +} +``` ## 구문 diff --git a/files/ko/web/css/flex-grow/index.md b/files/ko/web/css/flex-grow/index.md index 18d630b1d290e9..06a43a51818aab 100644 --- a/files/ko/web/css/flex-grow/index.md +++ b/files/ko/web/css/flex-grow/index.md @@ -9,7 +9,45 @@ slug: Web/CSS/flex-grow 보통 `flex-grow`를 사용할땐, {{ Cssxref("flex-shrink") }}, {{ Cssxref("flex-basis") }} 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 {{ Cssxref("flex") }} 속성을 이용해 **축약형**으로 사용합니다. -{{EmbedInteractiveExample("pages/css/flex-grow.html")}} +{{InteractiveExample("CSS Demo: flex-grow")}} + +```css interactive-example-choice +flex-grow: 1; +``` + +```css interactive-example-choice +flex-grow: 2; +``` + +```css interactive-example-choice +flex-grow: 3; +``` + +```html interactive-example +
+
I grow
+
Item Two
+
Item Three
+
+``` + +```css interactive-example +.default-example { + border: 1px solid #c5c5c5; + width: auto; + max-height: 300px; + display: flex; +} + +.default-example > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + margin: 10px; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; +} +``` ## Syntax diff --git a/files/ko/web/css/flex-shrink/index.md b/files/ko/web/css/flex-shrink/index.md index 34be89a69dcdaf..a2364c62ea11e1 100644 --- a/files/ko/web/css/flex-shrink/index.md +++ b/files/ko/web/css/flex-shrink/index.md @@ -7,7 +7,45 @@ slug: Web/CSS/flex-shrink **`flex-shrink`** [CSS](/ko/docs/Web/CSS) property는 `flex-item` 요소의 `flex-shrink` 값을 설정하는 속성입니다. 만약 `flex-item` 요소의 크기가 `flex-container` 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 `flex-container` 요소 내부에서 `flex-item` 요소의 크기가 **축소**됩니다. -{{EmbedInteractiveExample("pages/css/flex-shrink.html")}} +{{InteractiveExample("CSS Demo: flex-shrink")}} + +```css interactive-example-choice +flex-shrink: 0; +``` + +```css interactive-example-choice +flex-shrink: 1; +``` + +```css interactive-example-choice +flex-shrink: 2; +``` + +```html interactive-example +
+
I shrink
+
Item Two
+
Item Three
+
+``` + +```css interactive-example +.default-example { + border: 1px solid #c5c5c5; + width: auto; + max-height: 300px; + display: flex; +} + +.default-example > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + margin: 10px; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 300px; +} +``` ## Syntax diff --git a/files/ko/web/css/flex-wrap/index.md b/files/ko/web/css/flex-wrap/index.md index 908e4031bee4f1..3f9fb2e5f4dd8e 100644 --- a/files/ko/web/css/flex-wrap/index.md +++ b/files/ko/web/css/flex-wrap/index.md @@ -7,7 +7,47 @@ slug: Web/CSS/flex-wrap [CSS](/ko/docs/Web/CSS) **`flex-wrap`** property는 `flex-item` 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/flex-wrap.html")}} +{{InteractiveExample("CSS Demo: flex-wrap")}} + +```css interactive-example-choice +flex-wrap: nowrap; +``` + +```css interactive-example-choice +flex-wrap: wrap; +``` + +```css interactive-example-choice +flex-wrap: wrap-reverse; +``` + +```html interactive-example +
+
+
Item One
+
Item Two
+
Item Three
+
Item Four
+
Item Five
+
Item Six
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + width: 80%; + display: flex; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + width: 60px; + margin: 10px; +} +``` 여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. [Using CSS flexible boxes](/en-US/CSS/Using_CSS_flexible_boxes) diff --git a/files/ko/web/css/flex/index.md b/files/ko/web/css/flex/index.md index 1a079641aec13b..df7cc640c5bdb2 100644 --- a/files/ko/web/css/flex/index.md +++ b/files/ko/web/css/flex/index.md @@ -7,7 +7,54 @@ slug: Web/CSS/flex **`flex`** [CSS](/ko/docs/Web/CSS) 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. `flex`는 {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, {{cssxref("flex-basis")}}의 [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)입니다. -{{EmbedInteractiveExample("pages/css/flex.html")}} +{{InteractiveExample("CSS Demo: flex")}} + +```css interactive-example-choice +flex: 1; +``` + +```css interactive-example-choice +flex: 2; +``` + +```css interactive-example-choice +flex: 1 30px; +``` + +```css interactive-example-choice +flex: 1 1 100px; +``` + +```html interactive-example +
+
Change me
+
flex: 1
+
flex: 1
+
+``` + +```css interactive-example +.default-example { + border: 1px solid #c5c5c5; + width: auto; + max-height: 300px; + display: flex; +} + +.default-example > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + margin: 10px; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; +} + +#example-element { + background-color: rgba(255, 0, 200, 0.2); + border: 3px solid rebeccapurple; +} +``` 대부분의 경우, `flex`의 값에는 `auto`, `initial`, `none`이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요. diff --git a/files/ko/web/css/float/index.md b/files/ko/web/css/float/index.md index b242e5257f6363..86474b98d5631f 100644 --- a/files/ko/web/css/float/index.md +++ b/files/ko/web/css/float/index.md @@ -7,7 +7,56 @@ slug: Web/CSS/float CSS 속성(property) **`float`** 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. -{{EmbedInteractiveExample("pages/css/float.html")}} +{{InteractiveExample("CSS Demo: float")}} + +```css interactive-example-choice +float: none; +``` + +```css interactive-example-choice +float: left; +``` + +```css interactive-example-choice +float: right; +``` + +```css interactive-example-choice +float: inline-start; +``` + +```css interactive-example-choice +float: inline-end; +``` + +```html interactive-example +
+
+
Float me
+ As much mud in the streets as if the waters had but newly retired from the + face of the earth, and it would not be wonderful to meet a Megalosaurus, + forty feet long or so, waddling like an elephantine lizard up Holborn Hill. +
+
+``` + +```css interactive-example +.example-container { + border: 1px solid #c5c5c5; + padding: 0.75em; + text-align: left; + width: 80%; + line-height: normal; +} + +#example-element { + border: solid 10px #efac09; + background-color: #040d46; + color: white; + padding: 1em; + width: 40%; +} +``` 부동**(floating) 요소** 는 `float` 의 계산값(computed value)이 `none`이 아닌 요소입니다. diff --git a/files/ko/web/css/font-feature-settings/index.md b/files/ko/web/css/font-feature-settings/index.md index a082953fbb6e23..0cebf8125e4781 100644 --- a/files/ko/web/css/font-feature-settings/index.md +++ b/files/ko/web/css/font-feature-settings/index.md @@ -7,7 +7,68 @@ slug: Web/CSS/font-feature-settings **`font-feature-settings`** CSS 속성은 오픈타입 폰트의 다양한 오픈타입 피처를 설정합니다. -{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}} +{{InteractiveExample("CSS Demo: font-feature-settings")}} + +```css interactive-example-choice +font-feature-settings: normal; +``` + +```css interactive-example-choice +font-feature-settings: "liga" 0; +``` + +```css interactive-example-choice +font-feature-settings: "tnum"; +``` + +```css interactive-example-choice +font-feature-settings: "smcp", "zero"; +``` + +```html interactive-example +
+
+

Difficult waffles

+ + + + + + + + + + +
0O
3.14
2.71
+
+
+``` + +```css interactive-example +@font-face { + font-family: "Fira Sans"; + src: + local("FiraSans-Regular"), + url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; +} + +section { + font-family: "Fira Sans", sans-serif; + margin-top: 10px; + font-size: 1.5em; +} + +#example-element table { + margin-left: auto; + margin-right: auto; +} + +.tabular { + border: 1px solid; +} +``` ## 문법 diff --git a/files/ko/web/css/font-size/index.md b/files/ko/web/css/font-size/index.md index 5e80a3eeb8d220..2b1c4b332bda5d 100644 --- a/files/ko/web/css/font-size/index.md +++ b/files/ko/web/css/font-size/index.md @@ -7,7 +7,39 @@ slug: Web/CSS/font-size **`font-size`** [CSS](/ko/docs/Web/CSS) 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 `em` 과 `ex` {{cssxref("<length>")}} 단위로 계산된 다른 항목들의 크기를 바꿉니다. -{{EmbedInteractiveExample("pages/css/font-size.html")}} +{{InteractiveExample("CSS Demo: font-size")}} + +```css interactive-example-choice +font-size: 1.2rem; +``` + +```css interactive-example-choice +font-size: x-small; +``` + +```css interactive-example-choice +font-size: smaller; +``` + +```css interactive-example-choice +font-size: 12px; +``` + +```css interactive-example-choice +font-size: 80%; +``` + +```html interactive-example +
+

+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the streets + as if the waters had but newly retired from the face of the earth, and it + would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+
+``` ## 구문 diff --git a/files/ko/web/css/font-synthesis/index.md b/files/ko/web/css/font-synthesis/index.md index 7aa3a57549b7e0..14635d1e2dd210 100644 --- a/files/ko/web/css/font-synthesis/index.md +++ b/files/ko/web/css/font-synthesis/index.md @@ -7,7 +7,136 @@ slug: Web/CSS/font-synthesis [CSS](/ko/docs/Web/CSS) **`font-synthesis`** 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다. -{{EmbedInteractiveExample("pages/css/font-synthesis.html")}} +{{InteractiveExample("CSS Demo: font-synthesis")}} + +```css interactive-example-choice +font-synthesis: weight style small-caps; +``` + +```css interactive-example-choice +font-synthesis: none; +``` + +```css interactive-example-choice +font-synthesis: weight; +``` + +```css interactive-example-choice +font-synthesis: style; +``` + +```css interactive-example-choice +font-synthesis: small-caps; +``` + +```css interactive-example-choice +font-synthesis: position; +``` + +```html interactive-example +
+
+

+ This font does not include bold, + italic, + small-caps, and + subscript or + superscript variants. +

+

+ 中文排版通常不运用粗体或斜体常不运用。 +

+
+
+``` + +```css interactive-example +@font-face { + font-family: Oxygen; + font-style: normal; + font-weight: 400; + src: url("https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2") + format("woff2"); +} + +/* [108] */ +@font-face { + font-family: "Ma Shan Zheng"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.108.woff2") + format("woff2"); +} +/* [110] */ +@font-face { + font-family: "Ma Shan Zheng"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.110.woff2") + format("woff2"); +} +/* [117] */ +@font-face { + font-family: "Ma Shan Zheng"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.117.woff2") + format("woff2"); +} +/* [118] */ +@font-face { + font-family: "Ma Shan Zheng"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.118.woff2") + format("woff2"); +} +/* [119] */ +@font-face { + font-family: "Ma Shan Zheng"; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.119.woff2") + format("woff2"); +} + +.english { + font-size: 1.2em; + font-family: Oxygen; +} + +.chinese { + font-size: 1.2em; + font-family: "Ma Shan Zheng"; +} + +.bold { + font-weight: bold; +} + +.italic { + font-style: italic; +} + +.small-caps { + font-variant: small-caps; +} + +.sub { + font-variant: sub; +} + +.sup { + font-variant: super; +} +``` ## 구문 diff --git a/files/ko/web/css/font/index.md b/files/ko/web/css/font/index.md index a49590d30e2333..3ca237873cfbe0 100644 --- a/files/ko/web/css/font/index.md +++ b/files/ko/web/css/font/index.md @@ -7,7 +7,68 @@ slug: Web/CSS/font **`font`** CSS 속성은 {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, {{cssxref("font-family")}}의 [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다. -{{EmbedInteractiveExample("pages/css/font.html")}} +{{InteractiveExample("CSS Demo: font")}} + +```css interactive-example-choice +font: + 1.2rem "Fira Sans", + sans-serif; +``` + +```css interactive-example-choice +font: + italic 1.2rem "Fira Sans", + serif; +``` + +```css interactive-example-choice +font: italic small-caps bold 16px/2 cursive; +``` + +```css interactive-example-choice +font: small-caps bold 24px/1 sans-serif; +``` + +```css interactive-example-choice +font: caption; +``` + +```html interactive-example +
+

+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the streets + as if the waters had but newly retired from the face of the earth, and it + would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+
+``` + +```css interactive-example +@font-face { + font-family: "Fira Sans"; + src: + local("FiraSans-Regular"), + url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Fira Sans"; + src: + local("FiraSans-Italic"), + url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2"); + font-weight: normal; + font-style: italic; +} + +section { + margin-top: 10px; + font-size: 1.1em; +} +``` 다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. `font` 속성으로 설정할 수 없는 {{cssxref("font-stretch")}}, {{ cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}}의 값도 초기값으로 돌아갑니다. diff --git a/files/ko/web/css/gap/index.md b/files/ko/web/css/gap/index.md index 9e3f935da1b9d5..35f07e10a2c71f 100644 --- a/files/ko/web/css/gap/index.md +++ b/files/ko/web/css/gap/index.md @@ -9,7 +9,55 @@ l10n: [CSS](/ko/docs/Web/CSS) **`gap`** 속성은 행과 열 사이의 간격 ({{glossary("gutters")}})을 설정합니다. {{CSSxRef("row-gap")}}과 {{CSSxRef("column-gap")}}의 [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)입니다. -{{EmbedInteractiveExample("pages/css/gap.html")}} +{{InteractiveExample("CSS Demo: gap")}} + +```css interactive-example-choice +gap: 0; +``` + +```css interactive-example-choice +gap: 10%; +``` + +```css interactive-example-choice +gap: 1em; +``` + +```css interactive-example-choice +gap: 10px 20px; +``` + +```css interactive-example-choice +gap: calc(20px + 10%); +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
Four
+
Five
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + display: grid; + grid-template-columns: 1fr 1fr; + width: 200px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` `grid-gap` 은 해당 속성의 별칭입니다. diff --git a/files/ko/web/css/gradient/index.md b/files/ko/web/css/gradient/index.md index 8a63a7d32f02ef..f3235614df8c6f 100644 --- a/files/ko/web/css/gradient/index.md +++ b/files/ko/web/css/gradient/index.md @@ -7,7 +7,39 @@ slug: Web/CSS/gradient **``** [CSS](/ko/docs/Web/CSS) [자료형](/ko/docs/Web/CSS/CSS_Types)은 {{cssxref("<image>")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다. -{{EmbedInteractiveExample("pages/css/type-gradient.html")}} +{{InteractiveExample("CSS Demo: &lt;gradient&gt;")}} + +```css interactive-example-choice +background: linear-gradient(#f69d3c, #3f87a6); +``` + +```css interactive-example-choice +background: radial-gradient(#f69d3c, #3f87a6); +``` + +```css interactive-example-choice +background: repeating-linear-gradient(#f69d3c, #3f87a6 50px); +``` + +```css interactive-example-choice +background: repeating-radial-gradient(#f69d3c, #3f87a6 50px); +``` + +```css interactive-example-choice +background: conic-gradient(#f69d3c, #3f87a6); +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + min-height: 100%; +} +``` CSS 그레이디언트는 [원본 크기가 없습니다](/ko/docs/Web/CSS/image#no_intrinsic). 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다. diff --git a/files/ko/web/css/gradient/linear-gradient/index.md b/files/ko/web/css/gradient/linear-gradient/index.md index 8569695db39ab9..2b7be1a1f1c95f 100644 --- a/files/ko/web/css/gradient/linear-gradient/index.md +++ b/files/ko/web/css/gradient/linear-gradient/index.md @@ -9,7 +9,38 @@ l10n: **`linear-gradient()`** [CSS](/ko/docs/Web/CSS) [함수](/ko/docs/Web/CSS/CSS_Functions)는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성합니다. 그 결과는 {{CSSxRef("<gradient>")}} 데이터 유형의 객체이며, 이는 {{CSSxRef("<image>")}}의 특별한 종류 중 하나입니다. -{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} +{{InteractiveExample("CSS Demo: linear-gradient()")}} + +```css interactive-example-choice +background: linear-gradient(#e66465, #9198e5); +``` + +```css interactive-example-choice +background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); +``` + +```css interactive-example-choice +background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%); +``` + +```css interactive-example-choice +background: + linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%), + linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), + linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); +``` + +```html interactive-example +
+
+
+``` + +```css interactive-example +#example-element { + min-height: 100%; +} +``` ## 구문 diff --git a/files/ko/web/css/grid-template-columns/index.md b/files/ko/web/css/grid-template-columns/index.md index 6996639d21d485..552ae743125df3 100644 --- a/files/ko/web/css/grid-template-columns/index.md +++ b/files/ko/web/css/grid-template-columns/index.md @@ -9,7 +9,52 @@ l10n: **`grid-template-columns`** CSS 속성은 {{glossary("grid column", "grid columns")}}의 열 이름과 트랙 크기 조정 함수들을 정의합니다. -{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}} +{{InteractiveExample("CSS Demo: grid-template-columns")}} + +```css interactive-example-choice +grid-template-columns: 60px 60px; +``` + +```css interactive-example-choice +grid-template-columns: 1fr 60px; +``` + +```css interactive-example-choice +grid-template-columns: 1fr 2fr; +``` + +```css interactive-example-choice +grid-template-columns: 8ch auto; +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
Four
+
Five
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + display: grid; + grid-auto-rows: 40px; + grid-gap: 10px; + width: 200px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` ## 구문 diff --git a/files/ko/web/css/height/index.md b/files/ko/web/css/height/index.md index c005f3df02246f..61da557b033dec 100644 --- a/files/ko/web/css/height/index.md +++ b/files/ko/web/css/height/index.md @@ -7,7 +7,41 @@ slug: Web/CSS/height **`height`** CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, {{cssxref("box-sizing")}}이 `border-box`라면 테두리 영역의 높이를 설정합니다. -{{EmbedInteractiveExample("pages/css/height.html")}} +{{InteractiveExample("CSS Demo: height")}} + +```css interactive-example-choice +height: 150px; +``` + +```css interactive-example-choice +height: 6em; +``` + +```css interactive-example-choice +height: 75%; +``` + +```css interactive-example-choice +height: auto; +``` + +```html interactive-example +
+
+ This is a box where you can change the height. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + flex-direction: column; + background-color: #5b6dcd; + justify-content: center; + color: #ffffff; +} +``` {{cssxref("min-height")}}와 {{cssxref("max-height")}} 속성은 `height`를 덮어씁니다. diff --git a/files/ko/web/css/hyphens/index.md b/files/ko/web/css/hyphens/index.md index 87d597eeb58a55..020291f6af7264 100644 --- a/files/ko/web/css/hyphens/index.md +++ b/files/ko/web/css/hyphens/index.md @@ -7,7 +7,34 @@ slug: Web/CSS/hyphens [CSS](/ko/docs/Web/CSS) **`hyphens`** 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다. 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다. -{{EmbedInteractiveExample("pages/css/hyphens.html")}} +{{InteractiveExample("CSS Demo: hyphens")}} + +```css interactive-example-choice +hyphens: none; +``` + +```css interactive-example-choice +hyphens: manual; +``` + +```css interactive-example-choice +hyphens: auto; +``` + +```html interactive-example +
+

An extra­ordinarily long English word!

+
+``` + +```css interactive-example +#example-element { + border: 2px dashed #999; + font-size: 1.5rem; + text-align: left; + width: 7rem; +} +``` 붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 [`lang`](/ko/docs/Web/HTML/Global_attributes/lang) 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 [`xml:lang`](/ko/docs/Web/SVG/Attribute/xml:lang) 특성을 사용해야 합니다. diff --git a/files/ko/web/css/isolation/index.md b/files/ko/web/css/isolation/index.md index 4897fe21deef87..b6d963d46cb924 100644 --- a/files/ko/web/css/isolation/index.md +++ b/files/ko/web/css/isolation/index.md @@ -7,7 +7,43 @@ slug: Web/CSS/isolation **`isolation`** [CSS](/ko/docs/Web/CSS) 속성은 요소가 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성해야 하는지 지정합니다. -{{EmbedInteractiveExample("pages/css/isolation.html")}} +{{InteractiveExample("CSS Demo: isolation")}} + +```css interactive-example-choice +isolation: auto; +``` + +```css interactive-example-choice +isolation: isolate; +``` + +```html interactive-example +
+
+
+ +

mix-blend-mode: multiply;

+
+
+
+``` + +```css interactive-example +.background-container { + background-color: #f4f460; + width: 250px; +} + +#example-element { + border: 1px solid black; + margin: 2em; +} + +#example-element * { + mix-blend-mode: multiply; + color: #8245a3; +} +``` {{cssxref("mix-blend-mode")}}와 함께 사용했을 때 특히 유용합니다. diff --git a/files/ko/web/css/justify-content/index.md b/files/ko/web/css/justify-content/index.md index b8bc32e6c96af2..6faae2e64701c6 100644 --- a/files/ko/web/css/justify-content/index.md +++ b/files/ko/web/css/justify-content/index.md @@ -11,7 +11,55 @@ l10n: 아래의 상호작용하는 예제는 그리드 레이아웃을 사용할 때의 일부 값들을 설명합니다. -{{EmbedInteractiveExample("pages/css/justify-content.html")}} +{{InteractiveExample("CSS Demo: justify-content")}} + +```css interactive-example-choice +justify-content: start; +``` + +```css interactive-example-choice +justify-content: center; +``` + +```css interactive-example-choice +justify-content: space-between; +``` + +```css interactive-example-choice +justify-content: space-around; +``` + +```css interactive-example-choice +justify-content: space-evenly; +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + width: 220px; + display: grid; + grid-template-columns: 60px 60px; + grid-auto-rows: 40px; + row-gap: 10px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` 자동 바깥 여백과 길이가 적용된 이후에 정렬이 적용됩니다. 즉, [Flexbox layout](/ko/docs/Web/CSS/CSS_flexible_box_layout) 안에서 최소 하나의 플렉스 요소가 `0`이 아닌 {{cssxref("flex-grow")}} 값을 갖는다면, 더 이상 사용할 수 있는 공간이 없기 때문에 아무 효과가 없습니다. diff --git a/files/ko/web/css/letter-spacing/index.md b/files/ko/web/css/letter-spacing/index.md index 895755a4087152..2168f6b30036b1 100644 --- a/files/ko/web/css/letter-spacing/index.md +++ b/files/ko/web/css/letter-spacing/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/letter-spacing **`letter-spacing`** [CSS](/ko/docs/Web/CSS) 속성은 글자 사이의 간격을 조절합니다. -{{EmbedInteractiveExample("pages/css/letter-spacing.html")}} +{{InteractiveExample("CSS Demo: letter-spacing")}} + +```css interactive-example-choice +letter-spacing: normal; +``` + +```css interactive-example-choice +letter-spacing: 0.2rem; +``` + +```css interactive-example-choice +letter-spacing: 1px; +``` + +```css interactive-example-choice +letter-spacing: -1px; +``` + +```html interactive-example +
+

+ As much mud in the streets as if the waters had but newly retired from the + face of the earth, and it would not be wonderful to meet a Megalosaurus, + forty feet long or so, waddling like an elephantine lizard up Holborn Hill. +

+
+``` + +```css interactive-example +@font-face { + src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); + font-family: Amstelvar; + font-style: normal; +} + +section { + font-size: 1.2em; + font-family: Amstelvar; +} +``` ## 구문 diff --git a/files/ko/web/css/margin-bottom/index.md b/files/ko/web/css/margin-bottom/index.md index 7e2e33fd2efc8c..7dcc35b9977700 100644 --- a/files/ko/web/css/margin-bottom/index.md +++ b/files/ko/web/css/margin-bottom/index.md @@ -7,7 +7,57 @@ slug: Web/CSS/margin-bottom **`margin-bottom`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 아래쪽에 [바깥 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다. -{{EmbedInteractiveExample("pages/css/margin-bottom.html")}} +{{InteractiveExample("CSS Demo: margin-bottom")}} + +```css interactive-example-choice +margin-bottom: 1em; +``` + +```css interactive-example-choice +margin-bottom: 10%; +``` + +```css interactive-example-choice +margin-bottom: 10px; +``` + +```css interactive-example-choice +margin-bottom: 0; +``` + +```html interactive-example +
+
+
+
+
+
+
+``` + +```css interactive-example +#container { + width: 300px; + height: 200px; + display: flex; + align-content: flex-start; + flex-direction: column; + justify-content: flex-start; +} + +.row { + height: 33.33%; + display: inline-block; + border: solid #ce7777 10px; + background-color: #2b3a55; + flex-shrink: 0; +} + +#example-element { + border: solid 10px #ffbf00; + background-color: #2b3a55; +} +``` {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 [비대체](/ko/docs/Web/CSS/Replaced_element)non-replaced 인라인 요소에는 효과가 없습니다. diff --git a/files/ko/web/css/margin-left/index.md b/files/ko/web/css/margin-left/index.md index b660a21ec79910..aa30e768860827 100644 --- a/files/ko/web/css/margin-left/index.md +++ b/files/ko/web/css/margin-left/index.md @@ -7,7 +7,55 @@ slug: Web/CSS/margin-left **`margin-left`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 왼쪽에 [바깥 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다. -{{EmbedInteractiveExample("pages/css/margin-left.html")}} +{{InteractiveExample("CSS Demo: margin-left")}} + +```css interactive-example-choice +margin-left: 1em; +``` + +```css interactive-example-choice +margin-left: 10%; +``` + +```css interactive-example-choice +margin-left: 10px; +``` + +```css interactive-example-choice +margin-left: 0; +``` + +```html interactive-example +
+
+
+
+
+
+
+``` + +```css interactive-example +#container { + width: 300px; + height: 200px; + display: flex; + align-content: flex-start; + justify-content: flex-start; +} + +.col { + width: 33.33%; + border: solid #5b6dcd 10px; + background-color: rgba(229, 232, 252, 0.6); + flex-shrink: 0; +} + +#example-element { + border: solid 10px #ffc129; + background-color: rgba(255, 244, 219, 0.6); +} +``` ## 구문 diff --git a/files/ko/web/css/margin-right/index.md b/files/ko/web/css/margin-right/index.md index 4dd713fa784f77..6e1a7b7480da9d 100644 --- a/files/ko/web/css/margin-right/index.md +++ b/files/ko/web/css/margin-right/index.md @@ -7,7 +7,55 @@ slug: Web/CSS/margin-right **`margin-right`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 오른쪽에 [바깥 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다. -{{EmbedInteractiveExample("pages/css/margin-right.html")}} +{{InteractiveExample("CSS Demo: margin-right")}} + +```css interactive-example-choice +margin-right: 1em; +``` + +```css interactive-example-choice +margin-right: 10%; +``` + +```css interactive-example-choice +margin-right: 10px; +``` + +```css interactive-example-choice +margin-right: 0; +``` + +```html interactive-example +
+
+
+
+
+
+
+``` + +```css interactive-example +#container { + width: 300px; + height: 200px; + display: flex; + align-content: flex-start; + justify-content: flex-start; +} + +.col { + width: 33.33%; + border: solid #5b6dcd 10px; + background-color: rgba(229, 232, 252, 0.6); + flex-shrink: 0; +} + +#example-element { + border: solid 10px #ffc129; + background-color: rgba(255, 244, 219, 0.6); +} +``` ## 구문 diff --git a/files/ko/web/css/margin-top/index.md b/files/ko/web/css/margin-top/index.md index 6cc7c38c9b9798..72acc92db3bd10 100644 --- a/files/ko/web/css/margin-top/index.md +++ b/files/ko/web/css/margin-top/index.md @@ -7,7 +7,57 @@ slug: Web/CSS/margin-top **`margin-top`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 위쪽에 [바깥 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다. -{{EmbedInteractiveExample("pages/css/margin-top.html")}} +{{InteractiveExample("CSS Demo: margin-top")}} + +```css interactive-example-choice +margin-top: 1em; +``` + +```css interactive-example-choice +margin-top: 10%; +``` + +```css interactive-example-choice +margin-top: 10px; +``` + +```css interactive-example-choice +margin-top: 0; +``` + +```html interactive-example +
+
+
+
+
+
+
+``` + +```css interactive-example +#container { + width: 300px; + height: 200px; + display: flex; + align-content: flex-start; + flex-direction: column; + justify-content: flex-start; +} + +.row { + height: 33.33%; + display: inline-block; + border: solid #ce7777 10px; + background-color: #2b3a55; + flex-shrink: 0; +} + +#example-element { + border: solid 10px #ffbf00; + background-color: #2b3a55; +} +``` {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 [비대체](/ko/docs/Web/CSS/Replaced_element)non-replaced 인라인 요소에는 효과가 없습니다. diff --git a/files/ko/web/css/margin/index.md b/files/ko/web/css/margin/index.md index 5d84b8f255b40b..e81ef16a0d4ba0 100644 --- a/files/ko/web/css/margin/index.md +++ b/files/ko/web/css/margin/index.md @@ -7,7 +7,61 @@ slug: Web/CSS/margin **`margin`** CSS 속성은 요소의 네 방향 [바깥 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)을 설정합니다. {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}의 단축 속성입니다. -{{EmbedInteractiveExample("pages/css/margin.html")}} +{{InteractiveExample("CSS Demo: margin")}} + +```css interactive-example-choice +margin: 1em; +``` + +```css interactive-example-choice +margin: 5% 0; +``` + +```css interactive-example-choice +margin: 10px 50px 20px; +``` + +```css interactive-example-choice +margin: 10px 50px 20px 0; +``` + +```css interactive-example-choice +margin: 0; +``` + +```html interactive-example +
+
+
+
+
+
+
+``` + +```css interactive-example +#container { + width: 300px; + height: 200px; + display: flex; + align-content: flex-start; + flex-direction: column; + justify-content: flex-start; +} + +.row { + height: 33.33%; + display: inline-block; + border: solid #ce7777 10px; + background-color: #2b3a55; + flex-shrink: 0; +} + +#example-element { + border: solid 10px #ffbf00; + background-color: #2b3a55; +} +``` 위와 아래 여백은 [대체 요소](/ko/docs/Web/CSS/Replaced_element)가 아닌 {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 인라인 요소에선 아무 효과도 없습니다. diff --git a/files/ko/web/css/max-height/index.md b/files/ko/web/css/max-height/index.md index 67939bfa5c1070..e02b24ca48cc8e 100644 --- a/files/ko/web/css/max-height/index.md +++ b/files/ko/web/css/max-height/index.md @@ -7,7 +7,42 @@ slug: Web/CSS/max-height **`max-height`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 최대 높이를 설정합니다. `max-height`는 {{cssxref("height")}} 속성의 [사용값](/ko/docs/Web/CSS/used_value)이 자신의 값보다 커지는걸 방지합니다. -{{EmbedInteractiveExample("pages/css/max-height.html")}} +{{InteractiveExample("CSS Demo: max-height")}} + +```css interactive-example-choice +max-height: 150px; +``` + +```css interactive-example-choice +max-height: 7em; +``` + +```css interactive-example-choice +max-height: 75%; +``` + +```css interactive-example-choice +max-height: 10px; +``` + +```html interactive-example +
+
+ This is a box where you can change the maximum height.
This will limit + how tall the box can be, potentially causing an overflow. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + flex-direction: column; + background-color: #5b6dcd; + justify-content: center; + color: #ffffff; +} +``` `max-height`가 {{cssxref("height")}}를 재설정하고, {{cssxref("min-height")}}가 `max-height`를 재설정합니다. diff --git a/files/ko/web/css/max-width/index.md b/files/ko/web/css/max-width/index.md index e070b6f2febec0..c90cef7e5c07da 100644 --- a/files/ko/web/css/max-width/index.md +++ b/files/ko/web/css/max-width/index.md @@ -7,7 +7,42 @@ slug: Web/CSS/max-width **`max-width`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 최대 너비를 설정합니다. `max-width`는 {{cssxref("width")}} 속성의 [사용값](/ko/docs/Web/CSS/used_value)이 자신의 값보다 커지는걸 방지합니다. -{{EmbedInteractiveExample("pages/css/max-width.html")}} +{{InteractiveExample("CSS Demo: max-width")}} + +```css interactive-example-choice +max-width: 150px; +``` + +```css interactive-example-choice +max-width: 20em; +``` + +```css interactive-example-choice +max-width: 75%; +``` + +```css interactive-example-choice +max-width: 20ch; +``` + +```html interactive-example +
+
+ Change the maximum width. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + flex-direction: column; + background-color: #5b6dcd; + height: 80%; + justify-content: center; + color: #ffffff; +} +``` `max-width`가 {{cssxref("width")}}를 재설정하고, {{cssxref("min-height")}}가 `max-width`를 재설정합니다. diff --git a/files/ko/web/css/min-height/index.md b/files/ko/web/css/min-height/index.md index bcfeaad7c76018..4013cb6e5b8bbf 100644 --- a/files/ko/web/css/min-height/index.md +++ b/files/ko/web/css/min-height/index.md @@ -7,7 +7,43 @@ slug: Web/CSS/min-height **`max-height`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 최소 높이를 설정합니다. `min-height`는 {{cssxref("height")}} 속성의 [사용값](/ko/docs/Web/CSS/used_value)이 자신의 값보다 작아지는걸 방지합니다. -{{EmbedInteractiveExample("pages/css/min-height.html")}} +{{InteractiveExample("CSS Demo: min-height")}} + +```css interactive-example-choice +min-height: 150px; +``` + +```css interactive-example-choice +min-height: 7em; +``` + +```css interactive-example-choice +min-height: 75%; +``` + +```css interactive-example-choice +min-height: 10px; +``` + +```html interactive-example +
+
+ This is a box where you can change the minimum height.
If there is + more content than the minimum the box will grow to the height needed by the + content. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + flex-direction: column; + background-color: #5b6dcd; + justify-content: center; + color: #ffffff; +} +``` `min-height`가 {{cssxref("max-height")}} 또는 {{cssxref("height")}}보다 커지면 요소의 높이는 `min-height`의 값을 사용합니다. diff --git a/files/ko/web/css/min-width/index.md b/files/ko/web/css/min-width/index.md index 954ca78a15d6fa..ad2da25e34fcaf 100644 --- a/files/ko/web/css/min-width/index.md +++ b/files/ko/web/css/min-width/index.md @@ -7,7 +7,42 @@ slug: Web/CSS/min-width **`min-width`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 최소 너비를 설정합니다. `min-width`는 {{cssxref("width")}} 속성의 [사용값](/ko/docs/Web/CSS/used_value)이 자신의 값보다 작아지는걸 방지합니다. -{{EmbedInteractiveExample("pages/css/min-width.html")}} +{{InteractiveExample("CSS Demo: min-width")}} + +```css interactive-example-choice +min-width: 150px; +``` + +```css interactive-example-choice +min-width: 20em; +``` + +```css interactive-example-choice +min-width: 75%; +``` + +```css interactive-example-choice +min-width: 40ch; +``` + +```html interactive-example +
+
+ Change the minimum width. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + flex-direction: column; + background-color: #5b6dcd; + height: 80%; + justify-content: center; + color: #ffffff; +} +``` `min-width`가 {{cssxref("max-width")}} 또는 {{cssxref("width")}}보다 커지면 요소의 너비는 `min-width`의 값을 사용합니다. diff --git a/files/ko/web/css/mix-blend-mode/index.md b/files/ko/web/css/mix-blend-mode/index.md index 775620e6ed9d28..24889440e3abee 100644 --- a/files/ko/web/css/mix-blend-mode/index.md +++ b/files/ko/web/css/mix-blend-mode/index.md @@ -7,7 +7,40 @@ slug: Web/CSS/mix-blend-mode **`mix-blend-mode`** [CSS](/ko/docs/Web/API/CSS) 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다. -{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}} +{{InteractiveExample("CSS Demo: mix-blend-mode")}} + +```css interactive-example-choice +mix-blend-mode: normal; +``` + +```css interactive-example-choice +mix-blend-mode: multiply; +``` + +```css interactive-example-choice +mix-blend-mode: hard-light; +``` + +```css interactive-example-choice +mix-blend-mode: difference; +``` + +```html interactive-example +
+
+ +
+
+``` + +```css interactive-example +.example-container { + background-color: sandybrown; +} +``` ## Syntax diff --git a/files/ko/web/css/object-fit/index.md b/files/ko/web/css/object-fit/index.md index 0a11abf936158f..83f2a77e8ce319 100644 --- a/files/ko/web/css/object-fit/index.md +++ b/files/ko/web/css/object-fit/index.md @@ -9,7 +9,44 @@ slug: Web/CSS/object-fit {{cssxref("object-position")}} 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다. -{{EmbedInteractiveExample("pages/css/object-fit.html")}} +{{InteractiveExample("CSS Demo: object-fit")}} + +```css interactive-example-choice +object-fit: fill; +``` + +```css interactive-example-choice +object-fit: contain; +``` + +```css interactive-example-choice +object-fit: cover; +``` + +```css interactive-example-choice +object-fit: none; +``` + +```css interactive-example-choice +object-fit: scale-down; +``` + +```html interactive-example +
+ +
+``` + +```css interactive-example +#example-element { + height: 100%; + width: 100%; + border: 2px dotted #888; +} +``` ## 구문 diff --git a/files/ko/web/css/object-position/index.md b/files/ko/web/css/object-position/index.md index e6bfeaa5351732..5c53c30f76dc57 100644 --- a/files/ko/web/css/object-position/index.md +++ b/files/ko/web/css/object-position/index.md @@ -9,7 +9,41 @@ slug: Web/CSS/object-position 대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 {{cssxref("object-fit")}} 속성으로 지정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/object-position.html")}} +{{InteractiveExample("CSS Demo: object-position")}} + +```css interactive-example-choice +object-position: 50% 50%; +``` + +```css interactive-example-choice +object-position: right top; +``` + +```css interactive-example-choice +object-position: left bottom; +``` + +```css interactive-example-choice +object-position: 250px 125px; +``` + +```html interactive-example +
+ +
+``` + +```css interactive-example +#example-element { + height: 250px; + width: 250px; + object-fit: none; + border: 1px solid red; +} +``` ## 구문 diff --git a/files/ko/web/css/opacity/index.md b/files/ko/web/css/opacity/index.md index 8fda4f33ff7e01..7b358d027f2127 100644 --- a/files/ko/web/css/opacity/index.md +++ b/files/ko/web/css/opacity/index.md @@ -7,7 +7,39 @@ slug: Web/CSS/opacity **`opacity`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다. -{{EmbedInteractiveExample("pages/css/opacity.html")}} +{{InteractiveExample("CSS Demo: opacity")}} + +```css interactive-example-choice +opacity: 0; +``` + +```css interactive-example-choice +opacity: 0.33; +``` + +```css interactive-example-choice +opacity: 1; +``` + +```html interactive-example +
+

+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the streets + as if the waters had but newly retired from the face of the earth, and it + would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+
+``` + +```css interactive-example +#example-element { + background-color: #963770; + color: white; + padding: 1em; +} +``` `opacity`는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다. diff --git a/files/ko/web/css/order/index.md b/files/ko/web/css/order/index.md index f8ae3a88c90c7c..a8d820430aff0d 100644 --- a/files/ko/web/css/order/index.md +++ b/files/ko/web/css/order/index.md @@ -7,7 +7,60 @@ slug: Web/CSS/order **`order`** [CSS](/ko/docs/Web/CSS) 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다. 컨테이너 아이템의 정렬 순서는 오름차순 `order` 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다. -{{EmbedInteractiveExample("pages/css/order.html")}} +{{InteractiveExample("CSS Demo: order")}} + +```css interactive-example-choice +order: 0; +``` + +```css interactive-example-choice +order: 3; +``` + +```css interactive-example-choice +order: -1; +``` + +```css interactive-example-choice +order: 2; +``` + +```html interactive-example +
+
Box 1:
+
Box 2: order: 1;
+
Box 3: order: 2;
+
Box 4: order: 2;
+
Box 5: order: 3;
+
+``` + +```css interactive-example +.default-example { + max-height: 300px; + display: flex; + flex-flow: column; +} + +.default-example > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + margin: 0.5rem; + padding: 0.5rem; + flex: 1; +} + +#example-element { + background-color: rgba(255, 0, 200, 0.2); + border: 3px solid rebeccapurple; +} + +#example-element::after { + content: attr(style); + outline: 2px dashed; + font-family: monospace; +} +``` ## 구문 diff --git a/files/ko/web/css/outline-style/index.md b/files/ko/web/css/outline-style/index.md index 677dc006bac9e3..13ec8f827d4235 100644 --- a/files/ko/web/css/outline-style/index.md +++ b/files/ko/web/css/outline-style/index.md @@ -7,7 +7,44 @@ slug: Web/CSS/outline-style [CSS](/ko/docs/Web/CSS) **`outline-style`** 속성은 요소 외곽선의 스타일을 설정합니다. 외곽선은 요소의 [테두리](/ko/docs/Web/CSS/border) 바깥에 그려지는 선입니다. -{{EmbedInteractiveExample("pages/css/outline-style.html")}} +{{InteractiveExample("CSS Demo: outline-style")}} + +```css interactive-example-choice +outline-style: none; +``` + +```css interactive-example-choice +outline-style: dotted; +``` + +```css interactive-example-choice +outline-style: solid; +``` + +```css interactive-example-choice +outline-style: groove; +``` + +```css interactive-example-choice +outline-style: inset; +``` + +```html interactive-example +
+
+ This is a box with an outline around it. +
+
+``` + +```css interactive-example +#example-element { + outline: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다. diff --git a/files/ko/web/css/outline-width/index.md b/files/ko/web/css/outline-width/index.md index ddff8bf002fc0a..310fc41c83127b 100644 --- a/files/ko/web/css/outline-width/index.md +++ b/files/ko/web/css/outline-width/index.md @@ -7,7 +7,40 @@ slug: Web/CSS/outline-width [CSS](/ko/docs/Web/CSS) **`outline-width`** 속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의 [테두리](/ko/docs/Web/CSS/border) 바깥에 그려지는 선입니다. -{{EmbedInteractiveExample("pages/css/outline-width.html")}} +{{InteractiveExample("CSS Demo: outline-width")}} + +```css interactive-example-choice +outline-width: 12px; +``` + +```css interactive-example-choice +outline-width: thin; +``` + +```css interactive-example-choice +outline-width: medium; +``` + +```css interactive-example-choice +outline-width: thick; +``` + +```html interactive-example +
+
+ This is a box with an outline around it. +
+
+``` + +```css interactive-example +#example-element { + outline: 0.75em solid; + padding: 0.75em; + width: 80%; + height: 100px; +} +``` 외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다. diff --git a/files/ko/web/css/outline/index.md b/files/ko/web/css/outline/index.md index 435f05a9374efe..cc069e1715e137 100644 --- a/files/ko/web/css/outline/index.md +++ b/files/ko/web/css/outline/index.md @@ -7,7 +7,44 @@ slug: Web/CSS/outline [CSS](/ko/docs/Web/CSS) **`outline`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 모든 외곽선 속성을 한꺼번에 지정합니다. -{{EmbedInteractiveExample("pages/css/outline.html")}} +{{InteractiveExample("CSS Demo: outline")}} + +```css interactive-example-choice +outline: solid; +``` + +```css interactive-example-choice +outline: dashed red; +``` + +```css interactive-example-choice +outline: 1rem solid; +``` + +```css interactive-example-choice +outline: thick double #32a1ce; +``` + +```css interactive-example-choice +outline: 8px ridge rgba(170, 50, 220, 0.6); +border-radius: 2rem; +``` + +```html interactive-example +
+
+ This is a box with an outline around it. +
+
+``` + +```css interactive-example +#example-element { + padding: 0.75rem; + width: 80%; + height: 100px; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/overflow-anchor/index.md b/files/ko/web/css/overflow-anchor/index.md index 3787bef97e312f..08903ee955fef5 100644 --- a/files/ko/web/css/overflow-anchor/index.md +++ b/files/ko/web/css/overflow-anchor/index.md @@ -11,7 +11,97 @@ l10n: 스크롤 앵커링 동작은 이를 지원하는 브라우저에서는 기본적으로 활성화되어 있습니다. 따라서 이 속성의 값을 바꾸는 것은 일반적으로 문서나, 혹은 문서의 일부분에서 스크롤 앵커링에 문제가 있다고 느껴질 때에 한하여 동작을 비활성화할 수 있습니다. -{{EmbedInteractiveExample("pages/css/overflow-anchor.html")}} +{{InteractiveExample("CSS Demo: overflow-anchor")}} + +```css interactive-example-choice +overflow-anchor: auto; +``` + +```css interactive-example-choice +overflow-anchor: none; +``` + +```html interactive-example +
+
+ +

Magic numbers for today are:

+
+
+
+``` + +```css interactive-example +.whole-content-wrapper { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +#example-element { + height: 100%; + border: 2px dashed dodgerblue; + padding: 0.75em; + text-align: left; + overflow: scroll; +} + +#playback { + font-size: 1em; + width: 10em; + height: 4em; + font-weight: bold; + margin: 1em auto; + background-color: aliceblue; + border: solid 2px dodgerblue; + border-radius: 5px; +} + +#playback:hover { + border-color: lightseagreen; +} + +#playback:active { + filter: brightness(0.9); +} +``` + +```js interactive-example +window.addEventListener("load", () => { + const example = document.getElementById("example-element"); + const button = document.getElementById("playback"); + let intervalId; + + function setInitialState() { + example.innerHTML = ""; + Array.from({ length: 10 }, (_, i) => i).forEach(addContent); + example.scrollTop = example.scrollHeight; + } + + function addContent() { + console.log("adding content"); + const magicNumber = Math.floor(Math.random() * 10000); + example.insertAdjacentHTML( + "afterbegin", + `
New Magic Number: ${magicNumber}
`, + ); + } + + button.addEventListener("click", () => { + if (example.classList.contains("running")) { + example.classList.remove("running"); + button.textContent = "Start lottery"; + clearInterval(intervalId); + } else { + example.classList.add("running"); + button.textContent = "Stop lottery"; + setInitialState(); + intervalId = setInterval(addContent, 1000); + } + }); +}); +``` ## 구문 diff --git a/files/ko/web/css/overflow/index.md b/files/ko/web/css/overflow/index.md index a7bf4e25dd3db4..1a75242ee80d7e 100644 --- a/files/ko/web/css/overflow/index.md +++ b/files/ko/web/css/overflow/index.md @@ -7,7 +7,47 @@ slug: Web/CSS/overflow **`overflow`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 요소의 콘텐츠가 너무 커서 요소의 [블록 서식 맥락](/ko/docs/Web/CSS/CSS_display/Block_formatting_context)에 맞출 수 없을 때의 처리법을 지정합니다. {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}의 값을 설정합니다. -{{EmbedInteractiveExample("pages/css/overflow.html")}} +{{InteractiveExample("CSS Demo: overflow")}} + +```css interactive-example-choice +overflow: visible; +``` + +```css interactive-example-choice +overflow: hidden; +``` + +```css interactive-example-choice +overflow: clip; +``` + +```css interactive-example-choice +overflow: scroll; +``` + +```css interactive-example-choice +overflow: auto; +``` + +```html interactive-example +
+

+ Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's + Inn Hall. Implacable November weather. As much mud in the streets as if the + waters had but newly retired from the face of the earth. +

+
+``` + +```css interactive-example +#example-element { + width: 15em; + height: 9em; + border: medium dotted; + padding: 0.75em; + text-align: left; +} +``` 적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출 등이 있습니다. diff --git a/files/ko/web/css/padding-bottom/index.md b/files/ko/web/css/padding-bottom/index.md index e564290668bd48..65c0d80ecae979 100644 --- a/files/ko/web/css/padding-bottom/index.md +++ b/files/ko/web/css/padding-bottom/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/padding-bottom **`padding-bottom`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 아래쪽에 [안쪽 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#padding-area)을 설정합니다. -{{EmbedInteractiveExample("pages/css/padding-bottom.html")}} +{{InteractiveExample("CSS Demo: padding-bottom")}} + +```css interactive-example-choice +padding-bottom: 1em; +``` + +```css interactive-example-choice +padding-bottom: 10%; +``` + +```css interactive-example-choice +padding-bottom: 20px; +``` + +```css interactive-example-choice +padding-bottom: 1ch; +``` + +```css interactive-example-choice +padding-bottom: 0; +``` + +```html interactive-example +
+
+
+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +
+
+
+``` + +```css interactive-example +#example-element { + border: 10px solid #ffc129; + overflow: hidden; + text-align: left; +} + +.box { + border: dashed 1px; +} +``` 요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다. diff --git a/files/ko/web/css/padding-left/index.md b/files/ko/web/css/padding-left/index.md index 9cbfce026762f6..8ef5039b819e84 100644 --- a/files/ko/web/css/padding-left/index.md +++ b/files/ko/web/css/padding-left/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/padding-left **`padding-left`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 왼쪽에 [안쪽 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#padding-area)을 설정합니다. -{{EmbedInteractiveExample("pages/css/padding-left.html")}} +{{InteractiveExample("CSS Demo: padding-left")}} + +```css interactive-example-choice +padding-left: 1.5em; +``` + +```css interactive-example-choice +padding-left: 10%; +``` + +```css interactive-example-choice +padding-left: 20px; +``` + +```css interactive-example-choice +padding-left: 1ch; +``` + +```css interactive-example-choice +padding-left: 0; +``` + +```html interactive-example +
+
+
+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +
+
+
+``` + +```css interactive-example +#example-element { + border: 10px solid #ffc129; + overflow: hidden; + text-align: left; +} + +.box { + border: dashed 1px; +} +``` 요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다. diff --git a/files/ko/web/css/padding-right/index.md b/files/ko/web/css/padding-right/index.md index 77be69849a0bff..5905d4e028e3c2 100644 --- a/files/ko/web/css/padding-right/index.md +++ b/files/ko/web/css/padding-right/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/padding-right **`padding-right`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 오른쪽에 [안쪽 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#padding-area)을 설정합니다. -{{EmbedInteractiveExample("pages/css/padding-right.html")}} +{{InteractiveExample("CSS Demo: padding-right")}} + +```css interactive-example-choice +padding-right: 1.5em; +``` + +```css interactive-example-choice +padding-right: 10%; +``` + +```css interactive-example-choice +padding-right: 20px; +``` + +```css interactive-example-choice +padding-right: 1ch; +``` + +```css interactive-example-choice +padding-right: 0; +``` + +```html interactive-example +
+
+
+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +
+
+
+``` + +```css interactive-example +#example-element { + border: 10px solid #ffc129; + overflow: hidden; + text-align: left; +} + +.box { + border: dashed 1px; +} +``` 요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다. diff --git a/files/ko/web/css/padding-top/index.md b/files/ko/web/css/padding-top/index.md index 94c5a329008d07..2c6874ac413800 100644 --- a/files/ko/web/css/padding-top/index.md +++ b/files/ko/web/css/padding-top/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/padding-top **`padding-top`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 위쪽에 [안쪽 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#padding-area)을 설정합니다. -{{EmbedInteractiveExample("pages/css/padding-top.html")}} +{{InteractiveExample("CSS Demo: padding-top")}} + +```css interactive-example-choice +padding-top: 1em; +``` + +```css interactive-example-choice +padding-top: 10%; +``` + +```css interactive-example-choice +padding-top: 20px; +``` + +```css interactive-example-choice +padding-top: 1ch; +``` + +```css interactive-example-choice +padding-top: 0; +``` + +```html interactive-example +
+
+
+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +
+
+
+``` + +```css interactive-example +#example-element { + border: 10px solid #ffc129; + overflow: hidden; + text-align: left; +} + +.box { + border: dashed 1px; +} +``` 요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다. diff --git a/files/ko/web/css/padding/index.md b/files/ko/web/css/padding/index.md index 5df2b023e090a4..7a1b65ebca523a 100644 --- a/files/ko/web/css/padding/index.md +++ b/files/ko/web/css/padding/index.md @@ -7,7 +7,50 @@ slug: Web/CSS/padding **`padding`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 네 방향 [안쪽 여백 영역](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#padding-area)을 설정합니다. {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}의 단축 속성입니다. -{{EmbedInteractiveExample("pages/css/padding.html")}} +{{InteractiveExample("CSS Demo: padding")}} + +```css interactive-example-choice +padding: 1em; +``` + +```css interactive-example-choice +padding: 10% 0; +``` + +```css interactive-example-choice +padding: 10px 50px 20px; +``` + +```css interactive-example-choice +padding: 10px 50px 30px 0; +``` + +```css interactive-example-choice +padding: 0; +``` + +```html interactive-example +
+
+
+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +
+
+
+``` + +```css interactive-example +#example-element { + border: 10px solid #ffc129; + overflow: hidden; + text-align: left; +} + +.box { + border: dashed 1px; +} +``` 요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다. diff --git a/files/ko/web/css/place-content/index.md b/files/ko/web/css/place-content/index.md index 959fc752fbed4e..e53853a5a3a1b3 100644 --- a/files/ko/web/css/place-content/index.md +++ b/files/ko/web/css/place-content/index.md @@ -8,7 +8,55 @@ l10n: {{CSSRef}} **`place-content`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties) 은 [그리드](/ko/docs/Web/CSS/CSS_grid_layout) 혹은 [플렉스박스](/ko/docs/Web/CSS/CSS_flexible_box_layout) 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 한번에 콘텐츠를 정렬합니다. (예를 들어, {{CSSxRef("align-content")}} 와 {{CSSxRef("justify-content")}} 속성) -{{EmbedInteractiveExample("pages/css/place-content.html")}} +{{InteractiveExample("CSS Demo: place-content")}} + +```css interactive-example-choice +place-content: end space-between; +``` + +```css interactive-example-choice +place-content: space-around start; +``` + +```css interactive-example-choice +place-content: start space-evenly; +``` + +```css interactive-example-choice +place-content: end center; +``` + +```css interactive-example-choice +place-content: end; +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + display: grid; + grid-template-columns: 60px 60px; + grid-auto-rows: 40px; + height: 180px; + width: 220px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/place-items/index.md b/files/ko/web/css/place-items/index.md index f0675f91810ef0..f95ac7ca6c39d8 100644 --- a/files/ko/web/css/place-items/index.md +++ b/files/ko/web/css/place-items/index.md @@ -9,7 +9,51 @@ l10n: [CSS](/ko/docs/Web/CSS) 의 **`place-items`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties) 은 [그리드](/ko/docs/Web/CSS/CSS_grid_layout) 혹은 [플렉스박스](/ko/docs/Web/CSS/CSS_flexible_box_layout) 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 (예를 들어, {{CSSxRef("align-items")}} 와 {{CSSxRef("justify-items")}} 속성) 한번에 요소들을 정렬합니다. 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다. -{{EmbedInteractiveExample("pages/css/place-items.html")}} +{{InteractiveExample("CSS Demo: place-items")}} + +```css interactive-example-choice +place-items: center stretch; +``` + +```css interactive-example-choice +place-items: center start; +``` + +```css interactive-example-choice +place-items: start end; +``` + +```css interactive-example-choice +place-items: end center; +``` + +```html interactive-example +
+
+
+
One
+
Two
+
Three
+
+
+
+``` + +```css interactive-example +#example-element { + border: 1px solid #c5c5c5; + display: grid; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 80px; + grid-gap: 10px; + width: 220px; +} + +#example-element > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/place-self/index.md b/files/ko/web/css/place-self/index.md index 0b4256def47827..2a4fa1e661e819 100644 --- a/files/ko/web/css/place-self/index.md +++ b/files/ko/web/css/place-self/index.md @@ -9,7 +9,49 @@ l10n: **`place-self`** [CSS](/ko/docs/Web/CSS) [단축 속성](/ko/docs/Web/CSS/Shorthand_properties) 은 [그리드](/ko/docs/Web/CSS/CSS_grid_layout) 혹은 [플렉스박스](/ko/docs/Web/CSS/CSS_flexible_box_layout) 와 같은 관계형 레이아웃 시스템에서 블록 방향과 인라인 방향에서 한번에 개별 요소를 정렬합니다 (예시. {{CSSxRef("align-items")}} 와 {{CSSxRef("justify-items")}} 속성). 만일 두번째 값이 지정되지 않는다면, 첫번째 값이 두번째 값으로도 사용됩니다. -{{EmbedInteractiveExample("pages/css/place-self.html")}} +{{InteractiveExample("CSS Demo: place-self")}} + +```css interactive-example-choice +place-self: stretch center; +``` + +```css interactive-example-choice +place-self: center start; +``` + +```css interactive-example-choice +place-self: start end; +``` + +```css interactive-example-choice +place-self: end center; +``` + +```html interactive-example +
+
+
One
+
Two
+
Three
+
+
+``` + +```css interactive-example +.example-container { + border: 1px solid #c5c5c5; + display: grid; + width: 220px; + grid-template-columns: 1fr 1fr; + grid-auto-rows: 80px; + grid-gap: 10px; +} + +.example-container > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/position/index.md b/files/ko/web/css/position/index.md index 8837f8cca7c7bd..cd0bfc0ed90099 100644 --- a/files/ko/web/css/position/index.md +++ b/files/ko/web/css/position/index.md @@ -7,7 +7,99 @@ slug: Web/CSS/position [CSS](/ko/docs/Web/CSS) **`position`** 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} 속성이 요소를 배치할 최종 위치를 결정합니다. -{{EmbedInteractiveExample("pages/css/position.html")}} +{{InteractiveExample("CSS Demo: position")}} + +```css interactive-example-choice +position: static; +``` + +```css interactive-example-choice +position: relative; +top: 40px; +left: 40px; +``` + +```css interactive-example-choice +position: absolute; +top: 40px; +left: 40px; +``` + +```css interactive-example-choice +position: sticky; +top: 20px; +``` + +```html interactive-example +
+
+

+ In this demo you can control the position property for the + yellow box. +

+
+
+
+

+ To see the effect of sticky positioning, select the + position: sticky option and scroll this container. +

+

+ The element will scroll along with its container, until it is at the top + of the container (or reaches the offset specified in top), + and will then stop scrolling, so it stays visible. +

+

+ The rest of this text is only supplied to make sure the container + overflows, so as to enable you to scroll it and see the effect. +

+
+

+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. + Orbiting this at a distance of roughly ninety-two million miles is an + utterly insignificant little blue green planet whose ape-descended life + forms are so amazingly primitive that they still think digital watches are + a pretty neat idea. +

+
+
+``` + +```css interactive-example +section { + align-items: flex-start; + overflow: auto; +} + +.box { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + float: left; + width: 65px; + height: 65px; +} + +.box + .box { + margin-left: 10px; +} + +.clear { + clear: both; + padding-top: 1em; +} + +#example-element-container { + position: relative; + text-align: left; +} + +#example-element { + background-color: yellow; + border: 3px solid red; + z-index: 1; +} +``` ## 구문 diff --git a/files/ko/web/css/resize/index.md b/files/ko/web/css/resize/index.md index d338696f5b84f0..93b58569581c18 100644 --- a/files/ko/web/css/resize/index.md +++ b/files/ko/web/css/resize/index.md @@ -9,7 +9,45 @@ l10n: **`resize`** [CSS](/ko/docs/Web/CSS) 속성은 요소의 크기 조절 여부와 방향을 설정할 수 있습니다. -{{EmbedInteractiveExample("pages/css/resize.html")}} +{{InteractiveExample("CSS Demo: resize")}} + +```css interactive-example-choice +resize: both; +``` + +```css interactive-example-choice +resize: horizontal; +``` + +```css interactive-example-choice +resize: vertical; +``` + +```css interactive-example-choice +resize: none; +``` + +```html interactive-example +
+
Try resizing this element.
+
+``` + +```css interactive-example +#example-element { + background: linear-gradient(135deg, #0ff 0%, #0ff 94%, #fff 95%); + border: 3px solid #c5c5c5; + overflow: auto; + width: 250px; + height: 250px; + font-weight: bold; + color: #000; + display: flex; + align-items: center; + justify-content: center; + padding: 10px; +} +``` `resize` 는 다음 요소들에는 적용되지 않습니다. diff --git a/files/ko/web/css/scale/index.md b/files/ko/web/css/scale/index.md index e986aa361ae411..894e231f17869f 100644 --- a/files/ko/web/css/scale/index.md +++ b/files/ko/web/css/scale/index.md @@ -9,7 +9,97 @@ l10n: [CSS](/ko/docs/Web/CSS) **`scale`** 속성은 {{CSSxRef("transform")}} 속성과는 독립적으로 개별적인 크기 변형을 지정할 수 있게 합니다. 이는 일반적인 사용자 인터페이스 사용에 더 알맞고, `transform` 값을 사용할 때처럼 정확한 순서를 기억해야 할 필요가 없습니다. -{{EmbedInteractiveExample("pages/css/scale.html")}} +{{InteractiveExample("CSS Demo: scale")}} + +```css interactive-example-choice +scale: none; +``` + +```css interactive-example-choice +scale: 1.5; +``` + +```css interactive-example-choice +scale: 1.7 50%; +``` + +```css interactive-example-choice +scale: 1 -1; +``` + +```css interactive-example-choice +scale: 1.2 1.2 2; +``` + +```html interactive-example +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+``` + +```css interactive-example +#default-example { + background: linear-gradient(skyblue, khaki); + perspective: 800px; + perspective-origin: 150% 150%; +} + +#example-element { + width: 100px; + height: 100px; + perspective: 550px; + transform-style: preserve-3d; +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: white; +} + +.front { + background: rgba(90, 90, 90, 0.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0, 210, 0, 0.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 210, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210, 210, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210, 0, 210, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} +``` ## 구문 diff --git a/files/ko/web/css/scroll-behavior/index.md b/files/ko/web/css/scroll-behavior/index.md index d2d6c65fc4a051..cb2b5b934e2aa9 100644 --- a/files/ko/web/css/scroll-behavior/index.md +++ b/files/ko/web/css/scroll-behavior/index.md @@ -9,7 +9,60 @@ l10n: **`scroll-behavior`** [CSS](/ko/docs/Web/CSS) 속성은 문서 탐색 또는 CSSOM 스크롤 API에 의하여 스크롤이 트리거될 때 스크롤을 포함하는 박스의 동작을 설정합니다. -{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}} +{{InteractiveExample("CSS Demo: scroll-behavior")}} + +```css interactive-example-choice +scroll-behavior: auto; +``` + +```css interactive-example-choice +scroll-behavior: smooth; +``` + +```html interactive-example +
+
+

+ Scroll to: + A + B + C +

+ + A + B + C + +
+
+``` + +```css interactive-example +/* stylelint-disable selector-type-no-unknown */ +.container { + flex-direction: column; +} + +.nav a { + color: #009e5f; +} + +scroll-container { + border: 1px solid black; + display: block; + height: 200px; + overflow-y: scroll; + width: 200px; +} + +scroll-page { + align-items: center; + display: flex; + font-size: 5em; + height: 100%; + justify-content: center; +} +``` 사용자에 의해 실행되는 스크롤 등 이 속성에 영향을 받지 않는 다른 스크롤의 종류가 있을 수 있습니다. 이 속성이 root 요소에 지정된다면, 이 속성은 뷰포트 전체에 적용됩니다. `body` 요소에 특정된 이 속성은 뷰포트로 전파되지 않을 수 있습니다. diff --git a/files/ko/web/css/scroll-padding/index.md b/files/ko/web/css/scroll-padding/index.md index 11f9c21d088a71..088d4da8036ae8 100644 --- a/files/ko/web/css/scroll-padding/index.md +++ b/files/ko/web/css/scroll-padding/index.md @@ -9,7 +9,67 @@ l10n: **`scroll-padding`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 {{cssxref("padding")}} 속성이 요소의 안쪽 여백을 설정하는 것처럼, 요소의 모든 측면에서의 스크롤 안쪽 여백을 한번에 정의합니다. -{{EmbedInteractiveExample("pages/css/scroll-padding.html")}} +{{InteractiveExample("CSS Demo: scroll-padding")}} + +```css interactive-example-choice +scroll-padding: 0; +``` + +```css interactive-example-choice +scroll-padding: 20px; +``` + +```css interactive-example-choice +scroll-padding: 2em; +``` + +```html interactive-example +
+
+
1
+
2
+
3
+
+
Scroll »
+
+``` + +```css interactive-example +.default-example .info { + inline-size: 100%; + padding: 0.5em 0; + font-size: 90%; + writing-mode: vertical-rl; +} + +.scroller { + text-align: left; + height: 250px; + width: 270px; + overflow-y: scroll; + display: flex; + flex-direction: column; + box-sizing: border-box; + border: 1px solid black; + scroll-snap-type: y mandatory; +} + +.scroller > div { + flex: 0 0 250px; + background-color: rebeccapurple; + color: #fff; + font-size: 30px; + display: flex; + align-items: center; + justify-content: center; + scroll-snap-align: start; +} + +.scroller > div:nth-child(even) { + background-color: #fff; + color: rebeccapurple; +} +``` `scroll-padding-*` 속성은 스크롤 포트의 최적화된 가시 영역에 대한 오프셋을 설정합니다. 이 영역은 사용자의 시야에 요소를 위치시키기 위한 타겟 영역으로 사용됩니다. 이는 작성자는 다른 콘텐츠 (위치가 고정된 툴바 혹은 사이드바 등)에 가려진 스크롤 포트의 영역을 제외하거나 타겟 요소와 스크롤 포트 가장자리 사이에 더 많은 여백을 둘 수 있습니다. diff --git a/files/ko/web/css/text-align/index.md b/files/ko/web/css/text-align/index.md index cb9e13c7347bf0..70d19bb9af804f 100644 --- a/files/ko/web/css/text-align/index.md +++ b/files/ko/web/css/text-align/index.md @@ -7,7 +7,49 @@ slug: Web/CSS/text-align [CSS](/ko/docs/Web/CSS) **`text-align`** 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 {{cssxref("vertical-align")}}과 동일하나 세로가 아닌 가로 방향으로 동작합니다. -{{EmbedInteractiveExample("pages/css/text-align.html")}} +{{InteractiveExample("CSS Demo: text-align")}} + +```css interactive-example-choice +text-align: start; +``` + +```css interactive-example-choice +text-align: end; +``` + +```css interactive-example-choice +text-align: center; +``` + +```css interactive-example-choice +text-align: justify; +``` + +```html interactive-example +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum. +

+
+
+``` + +```css interactive-example +section { + font-size: 1.5em; +} + +#default-example > div { + width: 250px; +} +``` ## 구문 diff --git a/files/ko/web/css/text-decoration/index.md b/files/ko/web/css/text-decoration/index.md index 4d57972b297633..2c1c081b28e434 100644 --- a/files/ko/web/css/text-decoration/index.md +++ b/files/ko/web/css/text-decoration/index.md @@ -7,7 +7,43 @@ slug: Web/CSS/text-decoration [CSS](/ko/docs/Web/CSS) **`text-decoration`** [단축 속성](/ko/docs/Web/CSS/Shorthand_properties)은 텍스트에 장식용 선을 추가합니다. 이 속성은 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-thickness")}}의 단축 속성입니다. -{{EmbedInteractiveExample("pages/css/text-decoration.html")}} +{{InteractiveExample("CSS Demo: text-decoration")}} + +```css interactive-example-choice +text-decoration: underline; +``` + +```css interactive-example-choice +text-decoration: underline dotted; +``` + +```css interactive-example-choice +text-decoration: underline dotted red; +``` + +```css interactive-example-choice +text-decoration: green wavy underline; +``` + +```css interactive-example-choice +text-decoration: underline overline #ff3028; +``` + +```html interactive-example +
+

+ I'd far rather be + happy than right + any day. +

+
+``` + +```css interactive-example +p { + font: 1.5em sans-serif; +} +``` 텍스트 장식은 모든 자손 텍스트 요소에 걸쳐서 적용됩니다. 달리 말하면, 자식 요소에서는 부모가 적용한 텍스트 장식을 제거할 수 없습니다. 예를 들어 `

이 문단에 강조 표시가 있어요.

` 마크업에 `p { text-decoration: underline; }` 스타일을 적용하면 전체 문단에 밑줄이 추가됩니다. 그다음 `em { text-decoration: none; }` 스타일 규칙을 추가해도 밑줄은 계속 보입니다. 다만 `em { text-decoration: overline; }` 스타일은 "강조 표시" 텍스트가 윗줄과 밑줄을 모두 갖게 합니다. diff --git a/files/ko/web/css/text-overflow/index.md b/files/ko/web/css/text-overflow/index.md index ae97fd5df21272..efa118850b1c33 100644 --- a/files/ko/web/css/text-overflow/index.md +++ b/files/ko/web/css/text-overflow/index.md @@ -9,7 +9,48 @@ l10n: **`text-overflow`** [CSS](/ko/docs/Web/CSS) 속성은 숨겨진 넘치는 콘텐츠를 사용자에게 어떻게 표시할지 설정합니다. 이는 말줄임표 (`…`)를 표시하여 생략되거나, 사용자 지정 문자열로 대체될 수 있습니다. -{{EmbedInteractiveExample("pages/css/text-overflow.html")}} +{{InteractiveExample("CSS Demo: text-overflow")}} + +```css interactive-example-choice +text-overflow: clip; +``` + +```css interactive-example-choice +text-overflow: ellipsis; +``` + +```css interactive-example-choice +text-overflow: "-"; +``` + +```css interactive-example-choice +text-overflow: ""; +``` + +```html interactive-example +
+
+

"Is there any tea on this spaceship?" he asked.

+
+
+``` + +```css interactive-example +#example-element-container { + width: 100%; + max-width: 18em; +} + +#example-element { + line-height: 50px; + border: 1px solid #c5c5c5; + overflow: hidden; + white-space: nowrap; + font-family: sans-serif; + padding: 0 0.5em; + text-align: left; +} +``` `text-overflow` 속성은 넘침을 유발하지는 않습니다. 컨테이너에서 텍스트가 넘치게 하려면 {{cssxref("overflow")}} 나 {{cssxref("white-space")}} 와 같은 다른 CSS 속성들을 적용해야 합니다. 아래는 예시입니다. diff --git a/files/ko/web/css/text-wrap/index.md b/files/ko/web/css/text-wrap/index.md index 8e5d297766dfe3..0969c087ec39a9 100644 --- a/files/ko/web/css/text-wrap/index.md +++ b/files/ko/web/css/text-wrap/index.md @@ -14,7 +14,55 @@ l10n: > [!NOTE] > {{CSSxRef("white-space-collapse")}} 와 `text-wrap` 속성은 {{CSSxRef("white-space")}} 단축 속성을 이용하여 함께 정의할 수 있습니다. -{{EmbedInteractiveExample("pages/css/text-wrap.html")}} +{{InteractiveExample("CSS Demo: text-wrap")}} + +```css interactive-example-choice +text-wrap: wrap; +``` + +```css interactive-example-choice +text-wrap: nowrap; +``` + +```css interactive-example-choice +text-wrap: balance; +``` + +```css interactive-example-choice +text-wrap: pretty; +``` + +```css interactive-example-choice +text-wrap: stable; +``` + +```html interactive-example +
+
+

Edit the text in the box:

+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut + cum eum id quos est. +

+
+
+
+``` + +```css interactive-example +.whole-content-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +#example-element { + border: 1px solid #c5c5c5; + width: 250px; +} +``` ## 구성 속성 diff --git a/files/ko/web/css/transform-function/translate/index.md b/files/ko/web/css/transform-function/translate/index.md index cf31eb838c8fec..98a488531f7059 100644 --- a/files/ko/web/css/transform-function/translate/index.md +++ b/files/ko/web/css/transform-function/translate/index.md @@ -10,7 +10,49 @@ l10n: **`translate()`** [CSS](/ko/docs/Web/CSS) [함수](/ko/docs/Web/CSS/CSS_Functions) 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다. 실행 결과로 {{cssxref("<transform-function>")}} 데이터 유형을 반환합니다. -{{EmbedInteractiveExample("pages/css/function-translate.html")}} +{{InteractiveExample("CSS Demo: translate()")}} + +```css interactive-example-choice +transform: translate(0); +``` + +```css interactive-example-choice +transform: translate(42px, 18px); +``` + +```css interactive-example-choice +transform: translate(-2.1rem, -2ex); +``` + +```css interactive-example-choice +transform: translate(3ch, 3mm); +``` + +```html interactive-example +
+ + +
+``` + +```css interactive-example +#static-element { + opacity: 0.4; + position: absolute; +} + +#example-element { + position: absolute; +} +``` 이 변환은 2차원 벡터의 특징을 가집니다. 벡터의 좌표들은 요소가 각 방향으로 얼마나 이동하는지를 정의합니다. diff --git a/files/ko/web/css/transform/index.md b/files/ko/web/css/transform/index.md index 5d036790582781..7147fa91c3c3f6 100644 --- a/files/ko/web/css/transform/index.md +++ b/files/ko/web/css/transform/index.md @@ -7,7 +7,41 @@ slug: Web/CSS/transform [CSS](/ko/docs/Web/CSS) **`transform`** 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. `transform`은 CSS [시각적 서식 모델](/ko/docs/Web/CSS/Visual_formatting_model)의 좌표 공간을 변경합니다. -{{EmbedInteractiveExample("pages/css/transform.html")}} +{{InteractiveExample("CSS Demo: transform")}} + +```css interactive-example-choice +transform: matrix(1, 2, 3, 4, 5, 6); +``` + +```css interactive-example-choice +transform: translate(120px, 50%); +``` + +```css interactive-example-choice +transform: scale(2, 0.5); +``` + +```css interactive-example-choice +transform: rotate(0.5turn); +``` + +```css interactive-example-choice +transform: skew(30deg, 20deg); +``` + +```css interactive-example-choice +transform: scale(0.5) translate(-100%, -100%); +``` + +```html interactive-example +
+ +
+``` `none`이 아닌 값을 지정하면 새로운 [쌓임 맥락](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)을 생성합니다. 이 경우, {{cssxref("position")}}이 `fixed`거나 `absolute`인 요소의 [컨테이닝 블록](/ko/docs/Web/CSS/Containing_block)으로서 작용합니다. diff --git a/files/ko/web/css/transition-duration/index.md b/files/ko/web/css/transition-duration/index.md index c9f1c3da453d18..a64726043791da 100644 --- a/files/ko/web/css/transition-duration/index.md +++ b/files/ko/web/css/transition-duration/index.md @@ -9,7 +9,51 @@ l10n: **`transition-duration`** [CSS](/ko/docs/Web/CSS) 속성은 트랜지션 애니메이션이 완료되는 데 걸리는 시간을 설정합니다. 기본값은 `0s` 로, 애니메이션이 발생하지 않습니다. -{{EmbedInteractiveExample("pages/css/transition-duration.html")}} +{{InteractiveExample("CSS Demo: transition-duration")}} + +```css interactive-example-choice +transition-duration: 500ms; +transition-property: margin-right; +``` + +```css interactive-example-choice +transition-duration: 2s; +transition-property: background-color; +``` + +```css interactive-example-choice +transition-duration: 2s; +transition-property: margin-right, color; +``` + +```css interactive-example-choice +transition-duration: 3s, 1s; +transition-property: margin-right, color; +``` + +```html interactive-example +
+
Hover to see
the transition.
+
+``` + +```css interactive-example +#example-element { + background-color: #e4f0f5; + color: #000; + padding: 1rem; + border-radius: 0.5rem; + font: 1em monospace; + width: 100%; + transition: margin-right 2s; +} + +#default-example:hover > #example-element { + background-color: #909; + color: #fff; + margin-right: 40%; +} +``` 여러 개의 지속 시간을 지정할 수 있으며, 각 지속 시간은 마스터 목록 역할을 하는 {{ cssxref("transition-property") }} 속성에 지정된 대로 해당 프로퍼티에 적용됩니다. 지정된 지속 시간 수가 마스터 목록보다 적으면 사용자 에이전트는 지속 시간 목록을 반복합니다. 지정된 기간의 수가 마스터 목록보다 많으면 목록이 적절한 크기로 잘립니다. 두 경우 모두 CSS 선언은 유효하게 유지됩니다. diff --git a/files/ko/web/css/transition-property/index.md b/files/ko/web/css/transition-property/index.md index 4c674c01c93b79..5eb56626cb36ef 100644 --- a/files/ko/web/css/transition-property/index.md +++ b/files/ko/web/css/transition-property/index.md @@ -9,7 +9,47 @@ l10n: **`transition-property`** [CSS](/ko/docs/Web/CSS) 속성은 [transition effect](/ko/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) 을 적용해야 하는 CSS 속성을 명시합니다. -{{EmbedInteractiveExample("pages/css/transition-property.html")}} +{{InteractiveExample("CSS Demo: transition-property")}} + +```css interactive-example-choice +transition-property: margin-right; +``` + +```css interactive-example-choice +transition-property: margin-right, color; +``` + +```css interactive-example-choice +transition-property: all; +``` + +```css interactive-example-choice +transition-property: none; +``` + +```html interactive-example +
+
Hover to see
the transition.
+
+``` + +```css interactive-example +#example-element { + background-color: #e4f0f5; + color: #000; + padding: 1rem; + border-radius: 0.5rem; + font: 1em monospace; + width: 100%; + transition: margin-right 2s; +} + +#default-example:hover > #example-element { + background-color: #909; + color: #fff; + margin-right: 40%; +} +``` 단축 속성을 지정하면 (e.g., {{cssxref("background")}}), 애니메이션 가능한 모든 세부 속성이 지정됩니다. diff --git a/files/ko/web/css/vertical-align/index.md b/files/ko/web/css/vertical-align/index.md index b3e47bf9aebb57..100984b49fb30c 100644 --- a/files/ko/web/css/vertical-align/index.md +++ b/files/ko/web/css/vertical-align/index.md @@ -7,7 +7,49 @@ slug: Web/CSS/vertical-align **`vertical-align`** [CSS](/ko/docs/Web/CSS) 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. -{{EmbedInteractiveExample("pages/css/vertical-align.html")}} +{{InteractiveExample("CSS Demo: vertical-align")}} + +```css interactive-example-choice +vertical-align: baseline; +``` + +```css interactive-example-choice +vertical-align: top; +``` + +```css interactive-example-choice +vertical-align: middle; +``` + +```css interactive-example-choice +vertical-align: bottom; +``` + +```css interactive-example-choice +vertical-align: sub; +``` + +```css interactive-example-choice +vertical-align: text-top; +``` + +```html interactive-example +
+

+ Align the star: + +

+
+``` + +```css interactive-example +#default-example > p { + line-height: 3em; + font-family: monospace; + font-size: 1.2em; + text-decoration: underline overline; +} +``` vertical-align 속성은 두 가지 상황에서 사용할 수 있습니다. diff --git a/files/ko/web/css/visibility/index.md b/files/ko/web/css/visibility/index.md index e1a058cfadc95d..6c25b44c540057 100644 --- a/files/ko/web/css/visibility/index.md +++ b/files/ko/web/css/visibility/index.md @@ -7,7 +7,51 @@ slug: Web/CSS/visibility **`visibility`** CSS 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. `visibility`로 {{htmlelement("table")}}의 행이나 열을 숨길 수도 있습니다. -{{EmbedInteractiveExample("pages/css/visibility.html")}} +{{InteractiveExample("CSS Demo: visibility")}} + +```css interactive-example-choice +visibility: visible; +``` + +```css interactive-example-choice +visibility: hidden; +``` + +```css interactive-example-choice +visibility: collapse; +``` + +```html interactive-example +
+
+
Hide me
+
Item 2
+
Item 3
+
+
+``` + +```css interactive-example +.example-container { + border: 1px solid #c5c5c5; + padding: 0.75em; + width: 80%; + max-height: 300px; + display: flex; +} + +.example-container > div { + background-color: rgba(0, 0, 255, 0.2); + border: 3px solid blue; + margin: 10px; + flex: 1; +} + +#example-element { + background-color: rgba(255, 0, 200, 0.2); + border: 3px solid rebeccapurple; +} +``` 문서를 숨기고, **레이아웃에서도 제외**하려면, `visibility`를 사용하는 대신 {{cssxref("display")}} 속성을 `none`으로 설정하세요. diff --git a/files/ko/web/css/white-space/index.md b/files/ko/web/css/white-space/index.md index 87c9f21680c391..5a1ca4831c0b2a 100644 --- a/files/ko/web/css/white-space/index.md +++ b/files/ko/web/css/white-space/index.md @@ -7,7 +7,59 @@ slug: Web/CSS/white-space CSS **`white-space`** 속성은 요소가 공백 문자를 처리하는 법을 지정합니다. -{{EmbedInteractiveExample("pages/css/white-space.html")}} +{{InteractiveExample("CSS Demo: white-space")}} + +```css interactive-example-choice +white-space: normal; +``` + +```css interactive-example-choice +white-space: pre; +``` + +```css interactive-example-choice +white-space: pre-wrap; +``` + +```css interactive-example-choice +white-space: pre-line; +``` + +```css interactive-example-choice +white-space: wrap; +``` + +```css interactive-example-choice +white-space: collapse; +``` + +```css interactive-example-choice +white-space: preserve nowrap; +``` + +```html interactive-example +
+
+

+ But ere she from the church-door stepped She smiled and told us why: 'It + was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and + smiled, and passed it off Ere from the door she stept— +

+
+
+``` + +```css interactive-example +#example-element { + width: 16rem; +} + +#example-element p { + border: 1px solid #c5c5c5; + padding: 0.75rem; + text-align: left; +} +``` > [!NOTE] > 단어 안에서 줄이 바뀌기를 원하는 경우 {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}}, {{CSSxRef("hyphens")}}를 사용하세요. diff --git a/files/ko/web/css/width/index.md b/files/ko/web/css/width/index.md index b6d2113d87dc36..ca2d6007b246a3 100644 --- a/files/ko/web/css/width/index.md +++ b/files/ko/web/css/width/index.md @@ -7,7 +7,42 @@ slug: Web/CSS/width CSS **`width`** 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, {{cssxref("box-sizing")}}이 `border-box`라면 테두리 영역의 너비를 설정합니다. -{{EmbedInteractiveExample("pages/css/width.html")}} +{{InteractiveExample("CSS Demo: width")}} + +```css interactive-example-choice +width: 150px; +``` + +```css interactive-example-choice +width: 20em; +``` + +```css interactive-example-choice +width: 75%; +``` + +```css interactive-example-choice +width: auto; +``` + +```html interactive-example +
+
+ This is a box where you can change the width. +
+
+``` + +```css interactive-example +#example-element { + display: flex; + flex-direction: column; + background-color: #5b6dcd; + height: 80%; + justify-content: center; + color: #ffffff; +} +``` {{cssxref("min-width")}}와 {{cssxref("max-width")}} 속성은 `width`를 덮어씁니다. diff --git a/files/ko/web/css/word-break/index.md b/files/ko/web/css/word-break/index.md index 6878e659fb9b95..dd1a2285451176 100644 --- a/files/ko/web/css/word-break/index.md +++ b/files/ko/web/css/word-break/index.md @@ -7,7 +7,42 @@ slug: Web/CSS/word-break [CSS](/ko/docs/Web/CSS) **`word-break`** 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. -{{EmbedInteractiveExample("pages/css/word-break.html")}} +{{InteractiveExample("CSS Demo: word-break")}} + +```css interactive-example-choice +word-break: normal; +``` + +```css interactive-example-choice +word-break: break-all; +``` + +```css interactive-example-choice +word-break: keep-all; +``` + +```css interactive-example-choice +word-break: break-word; +``` + +```html interactive-example +
+
+ Honorificabilitudinitatibus califragilisticexpialidocious + Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 +
+
+``` + +```css interactive-example +#example-element { + width: 80%; + padding: 20px; + text-align: start; + border: solid 1px darkgray; +} +``` ## 구문 diff --git a/files/ko/web/css/word-spacing/index.md b/files/ko/web/css/word-spacing/index.md index 424ae3b0f89337..c2a0f7f91774aa 100644 --- a/files/ko/web/css/word-spacing/index.md +++ b/files/ko/web/css/word-spacing/index.md @@ -7,7 +7,46 @@ slug: Web/CSS/word-spacing [CSS](/ko/docs/Web/CSS) **`word-spacing`** 속성은 단어와 단어 사이, 태그와 태그 사이의 거리를 설정합니다. -{{EmbedInteractiveExample("pages/css/word-spacing.html")}} +{{InteractiveExample("CSS Demo: word-spacing")}} + +```css interactive-example-choice +word-spacing: normal; +``` + +```css interactive-example-choice +word-spacing: 1rem; +``` + +```css interactive-example-choice +word-spacing: 4px; +``` + +```css interactive-example-choice +word-spacing: -0.4ch; +``` + +```html interactive-example +
+

+ As much mud in the streets as if the waters had but newly retired from the + face of the earth, and it would not be wonderful to meet a Megalosaurus, + forty feet long or so, waddling like an elephantine lizard up Holborn Hill. +

+
+``` + +```css interactive-example +@font-face { + src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); + font-family: Amstelvar; + font-style: normal; +} + +section { + font-size: 1.2em; + font-family: Amstelvar; +} +``` ## 구문 diff --git a/files/ko/web/css/z-index/index.md b/files/ko/web/css/z-index/index.md index a6ef6ddc00c8de..9af7312939df11 100644 --- a/files/ko/web/css/z-index/index.md +++ b/files/ko/web/css/z-index/index.md @@ -7,7 +7,118 @@ slug: Web/CSS/z-index [CSS](/ko/docs/Web/CSS) **`z-index`** 속성은 [위치 지정 요소](/ko/docs/Web/CSS/position)와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 `z-index` 값을 가진 요소가 작은 값의 요소 위를 덮습니다. -{{EmbedInteractiveExample("pages/css/z-index.html")}} +{{InteractiveExample("CSS Demo: z-index")}} + +```css interactive-example-choice +z-index: auto; +``` + +```css interactive-example-choice +z-index: 1; +``` + +```css interactive-example-choice +z-index: 3; +``` + +```css interactive-example-choice +z-index: 5; +``` + +```css interactive-example-choice +z-index: 7; +``` + +```html interactive-example +
+
Change my z-index
+
z-index: 6
+
z-index: 4
+
z-index: 2
+
z-index: auto
+
z-index: auto
+
z-index: auto
+
+``` + +```css interactive-example +#example-element { + top: 15px; + left: 15px; + width: 180px; + height: 230px; + position: absolute; + /* center the text so it is visible even when z-index is set to auto */ + line-height: 215px; + font-family: monospace; + background-color: #fcfbe5; + border: solid 5px #e3e0a1; + z-index: auto; + color: black; +} + +.container { + display: inline-block; + width: 250px; + position: relative; +} + +.block { + width: 150px; + height: 50px; + position: absolute; + font-family: monospace; + color: black; +} + +.blue { + background-color: #e5e8fc; + border: solid 5px #112382; + /* move text to the bottom of the box */ + line-height: 55px; +} + +.red { + background-color: #fce5e7; + border: solid 5px #e3a1a7; +} + +.position1 { + top: 0; + left: 0; + z-index: 6; +} + +.position2 { + top: 30px; + left: 30px; + z-index: 4; +} + +.position3 { + top: 60px; + left: 60px; + z-index: 2; +} + +.position4 { + top: 150px; + left: 0; + z-index: auto; +} + +.position5 { + top: 180px; + left: 30px; + z-index: auto; +} + +.position6 { + top: 210px; + left: 60px; + z-index: auto; +} +``` 위치 지정 요소(`position`이 `static` 외의 다른 값인 요소)의 박스에 대해, `z-index` 속성은 다음 항목을 지정합니다.