CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets

CSS 트랜지션 사용하기
=============

**CSS 트랜지션**은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.

![A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.](/files/4529/TransitionsPrinciple.png)

CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하게 합니다.

애니메이션 가능한 CSS 속성은?
------------------

웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 트랜지션을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, 애니메이션 가능한 속성의 집합 (en-US)은 유한한 집합으로 제한됩니다.

**참고:** 노트: 애니메이션 가능한 속성의 집합은 변할 수 있습니다. 개발자는 주의해서 진행해야 합니다.

**참고:** 또한, 종종 auto 값은 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 이는 브라우저와 버전에 따라 예상하지 못한 결과를 초래할 수 있으며 피해야 합니다.

### 다수의 애니메이션이 적용된 속성 예제

#### HTML 내용

```html
<body>
  <p>
    아래 박스는 width, height, background-color, transform을 위한 트랜지션을
    결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.
  </p>
  <div class="box"></div>
</body>
```

#### CSS 내용

```css
.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  -webkit-transition:
    width 2s,
    height 2s,
    background-color 2s,
    -webkit-transform 2s;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s;
}
.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
```

트랜지션 정의에 사용한 CSS 속성
-------------------

CSS 트랜지션은 단축(shorthand) 속성 `transition`을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.

여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다:

**(이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS `transition` 들은 시작에서 종료까지 어떤 속성의 변화만을 시각화합니다. 그 루프를 시각화하려면 CSS `animation` 속성을 살펴보세요.)**

`transition-property` (en-US)

트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.

`transition-duration` (en-US)

트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다.

`transition-duration: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transformv color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function` (en-US)

![](/files/3434/TF_with_output_gt_than_1.png)속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. *Timing functions*는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 타이밍 함수 (en-US)는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다.

`transition-timing-function: ease`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: linear`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: step-end`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: steps(4, end)`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay` (en-US)

속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다.

`transition-delay: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 1s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 1s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-delay: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 4s;
  transition-timing-function: ease-in-out;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-delay: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    color;
  transition-duration: 2s;
  transition-delay: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

다음과 같이 단축 CSS 문법을 사용합니다.

```css
div {
  transition: <property> <duration> <timing-function> <delay>;
}
```

트랜지션 완료 감지하기
------------

트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 `transitionend` 이며, `WebKit` 에서는 `webkitTransitionEnd` 입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. `transitionend` 이벤트는 두 속성을 제공합니다.

`propertyName`

트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열

`elapsedTime`

이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수. 이 값은 `transition-delay` (en-US) 값에 영향을 받지 않습니다.

평소대로 `element.addEventListener()` 메소드를 사용하여 이 이벤트를 모니터링할 수 있습니다.

```js
el.addEventListener("transitionend", updateTransition, true);
```

**참고:** **노트:** 트랜지션을 중단하면 `transitionend` 이벤트는 발생하지 않습니다. 트랜지션을 완료하기 전에 애니메이션하고 있는 속성의 값이 바뀌기 때문입니다.

속성값 목록이 다른 개수를 가진 경우
--------------------

어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
```

위는 아래와 같이 처리합니다.

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}
```

비슷하게, 어떤 속성의 값 목록이 `transition-property` (en-US) 목록보다 길다면, 그것은 끝을 잘라냅니다. 그래서, 아래의 CSS가 있다면,

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}
```

위를 아래와 같이 해석합니다.

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
```

간단한 예제
------

이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.

```css
#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}
```

메뉴 하이라이팅에 트랜지션 사용
-----------------

CSS의 흔한 사용은 사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다.

코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, (여러분의 브라우저가 트랜지션을 지원한다고 가정하면) 라이브 데모를 보고 싶을지도 모르겠습니다. 그것이 사용한 CSS를 직접 볼 수도 있습니다.

우선 HTML을 사용하여 메뉴를 설정합니다.

```html
<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>
```

그리고 우리 메뉴의 모습과 느낌(look and feel)을 CSS로 만듭니다. 관련 부분이 여기 있습니다.

```css
.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color: white;
  color: black;
  box-shadow: 2px 2px 1px black;
}
```

이 CSS는 그 요소가 `:hover` 상태일 때 배경과 텍스트 색상 모두를 변경하면서 메뉴의 모습을 설정합니다.

그 효과를 장황하게 설명하는 대신, 브라우저가 트랜지션을 지원한다면, 라이브 샘플을 살펴보세요.

트랜지션을 이용하여 JavaScript 기능 부드럽게 하기
--------------------------------

트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.

```html
<p>Click anywhere to move the ball</p>
<div id="foo"></div>
```

JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.

```js
var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.left = ev.clientX - 25 + "px";
    f.style.top = ev.clientY - 25 + "px";
  },
  false,
);
```

추가 노력 없이 CSS로 이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.

```css
p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
}
```

여기에서 확인할 수 있습니다. http://jsfiddle.net/RwtHn/5/

명세
--

| Specification |
| --- |
| CSS Transitions  |

같이 보기
-----

* CSS3 Dock Menu using CSS transitions
* The `TransitionEvent` (en-US) interface and the `transitionend` (en-US) event.


font-display - CSS: Cascading Style Sheets

font-display
============

**`font-display`** 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.

The font display timeline
-------------------------

font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.

폰트 차단 기간

font face가 로드되지 않은 경우 font face를 사용하려는 요소는 *보이지 않는* 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.

폰트 교체 기간

font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.

폰트 실패 기간

font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| 초기값 | `auto` |
| 계산 값 | as specified |

Syntax
------

```css
/\* Keyword values \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### Values

`auto`

font display 전략은 유저 에이전트에 의해 정의됩니다.

`block`

font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.

`swap`

font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.

`fallback`

font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.

`optional`

font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.

### Formal syntax
```

font-display =
  auto      |
  block     |
  swap      |
  fallback  |
  optional

```

Examples
--------

```css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

명세서
---

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `font-family` (en-US)
* `font-stretch` (en-US)
* `font-style` (en-US)
* `font-weight` (en-US)
* `font-variant` (en-US)
* `font-feature-settings`
* `font-variation-settings` (en-US)
* `src` (en-US)
* `unicode-range` (en-US)


CSS z-index 이해하기 - CSS: Cascading Style Sheets

CSS z-index 이해하기
================

우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다.

>
> *In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.*
>
>
>

(from CSS 2.1 Section 9.9.1 - Layered presentation)

위에 소개된 CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 `z-index` 속성 값을 설정함으로써 바꿀 수 있다.

엘리먼트의 Z축 위치를 결정하는 것은 굉장히 간단해 보인다. `z-index` 라는 하나의 프로퍼티를 사용하고 이 프로퍼티는 하나의 정수 값을 가진다. 그러나 `z-index` 속성이 복잡한 HTML 계층적 엘리먼트들에 지정되었을 때에는 동작을 이해하기 힘들고 심지어 예측하지 못할 때도 있다. 이것은 엘리먼트들의 쌓임 순서를 결정하는 규칙(이하 쌓임 규칙)이 복잡하기 때문이다. 오로지 이 규칙만을 설명하기 위한 CSS 명세 섹션이 있을 정도다. (CSS-2.1 Appendix E)

이 문서에서는 몇가지 간단한 예를 들어 쌓임 규칙에 대해 설명하려고 한다.

1. z-index가 없는 경우의 쌓임 : 기본 쌓임 규칙
2. floating 엘리먼트의 쌓임 : floating 엘리먼트들은 어떻게 다루어지는가
3. z-index 적용 : 기본 쌓임 순서를 변경하기 위해 z-index 사용하기
4. 쌓임 맥락(stacking context) 이야기 : 쌓임 맥락(stacking context) 이야기
5. 쌓임 맥락 예제1 : 2레벨 HTML 계층구조, 마지막 레벨에서 z-index가 지정된 경우
6. 쌓임 맥락 예제2 : 2레벨 HTML 계층구조, 모든 레벨에서 z-index가 지정된 경우
7. 쌓임 맥락 예제3 : 3레벨 HTML 계층구조, 두번째 레벨에서 z-index가 지정된 경우

*저자의 말: 검토를 해준 Wladimir Palant씨와 Rod Whiteley씨에게 감사의 말을 전합니다.*

### 원본 문서 정보

* 저자(s): Paolo Lombardi
* 이 문서는 YappY에 이탈리어로 게재된 문서의 영어 번역판입니다. Creative Commons: Attribution-Sharealike license 아래에서 공유할 수 있습니다.
* 마지막 수정일: July 9th, 2005


쌓임 맥락 예제 1 - CSS: Cascading Style Sheets

쌓임 맥락 예제 1
==========

« CSS « CSS z-index 이해하기

### 쌓임 맥락 예제1

기본 예제부터 시작하자. 쌓임 맥락의 뿌리에는 두개의 DIV #1과 DIV #3가 있다. 두 DIV는 모두 position 속성 값이 relative로 지정되었지만 z-index 속성 값은 지정되지 않았다. DIV #1 안에는 position 속성 값이 absolute로 지정된 DIV #2가 있고 DIV #3 안에도 position 속성 값이 absolute가 지정된 DIV #4가 있다. DIV #2와ㅏ DIV #4 모두 z-index 속성 값은 지정되지 않았다.

유일한 쌓임 맥락은 뿌리 엘리먼트다. z-index가 없는 엘리먼트들은 HTML 문서에서 등장 순서대로 쌓인다.

![쌓임 맥락 예제 1](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05a.png)

DIV #2의 z-index 속성 값을 0또는 auto가 아닌 양의 정수로 지정하면 다른 DIV들 보다 위에 렌더링된다.

![쌓임 맥락 예제 1](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05b.png)

DIV #4의 z-index 속성 값을 DIV #2의 z-index 속성 값보다 큰 값으로 지정하면 DIV #4는 DIV #2보다 위에 렌더링된다.

![Stacking context example 1](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1/understanding_zindex_05c.png)

마지막 예제에서 DIV #2와 DIV #4는 형제가 아니다. 왜냐하면 둘의 부모가 다르기 때문이다. 그럼에도 불구하고 DIV #2와 DIV #4의 쌓임 순서를 z-index 속성 값을 지정함으로써 바꿀 수 있었다. 왜냐하면 DIV #1과 DIV #3은 z-index 속성 값이 지정되지 않았고 따라서 쌓임 맥락을 만들지 않았기 때문이다. 따라서 DIV #2와 DIV #4는 둘 다 뿌리 엘리먼트의 쌓임 맥락에 속해있고, z-index 속성 값을 변경하여 쌓임 순서를 바꿀 수 있다.

쌓임 맥락의 용어로 설명하자면 DIV #1과 DIV #3은 뿌리 엘리먼트에 *동화되었다.* 이 예제의 DIV들은 다음과 같은 쌓임 맥락 계층 구조를 이룬다.

* 뿌리 쌓임 맥락
    + DIV #2 (z-index 1)
    + DIV #4 (z-index 2)

**참고:** DIV #1과 DIV #3은 투명하지 않다. 투명도를 1보다 적은 값으로 지정하게 되면 내부적으로 쌓임 맥락을 만든다는걸 기억하자. 이건 마치 z-index 값을 설정한 것과 비슷하다. 이 예제는 부모 엘리먼트들이 쌓임 맥락을 형성하지 않을 때 어떤 일이 일어나는지 보여준다.

예제
--

### HTML

```html
<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>
```

### CSS

```css
.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

결과
--

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


z-index가 없는 경우의 쌓임 - CSS: Cascading Style Sheets

z-index가 없는 경우의 쌓임
==================

« CSS « CSS z-index 이해하기

### z-index가 없는 경우의 쌓임

만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.

1. 뿌리 엘리먼트의 배경과 테두리
2. 자식 엘리먼트들은 HTML에서 등장하는 순서대로
3. position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로

다음 예제에는 위의 쌓임 규칙을 설명하기 위한 적당한 크기의 엘리먼트들이 준비되어있다.

**참고:** **노트:**

* 주어진 동일한 엘리먼트들의 그룹은 모두 z-index가 설정되지 않았다. DIV #1 부터 DIV #4 까지는 position 속성이 설정되었다. 엘리먼트의 position속성 값과는 상관 없이 HTML 계층 구조대로 쌓임을 알 수 있다.
* position 속성이 지정되지 않은 블록(DIV #5)은 항상 position이 지정된 엘리먼트 이전에 렌더링 된다. 따라서 position이 지정된 엘리먼트 아래에 보인다. 설령 HTML 문서상에서 먼저 나오더라도 position이 지정되지 않은 엘리먼트는 지정된 엘리먼트보다 아래에 보인다.

예제
--

### HTML

```html
<div id="abs1" class="absolute">
  <strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
  <strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
  <strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
  <strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
  <strong>DIV #5</strong><br />position: static;
</div>
```

### CSS

```css
strong {
  font-family: sans-serif;
}

div {
  padding: 10px;
  border: 1px dashed;
  text-align: center;
}

.static {
  position: static;
  height: 80px;
  background-color: #ffc;
  border-color: #996;
}

.absolute {
  position: absolute;
  width: 150px;
  height: 350px;
  background-color: #fdd;
  border-color: #900;
  opacity: 0.7;
}

.relative {
  position: relative;
  height: 80px;
  background-color: #cfc;
  border-color: #696;
  opacity: 0.7;
}

#abs1 {
  top: 10px;
  left: 10px;
}

#rel1 {
  top: 30px;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  top: 15px;
  left: 20px;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  top: 10px;
  right: 10px;
}

#sta1 {
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

결과
--

### See also

* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


z-index 적용 - CSS: Cascading Style Sheets

z-index 적용
==========

« CSS « CSS z-index 이해하기

### `z-index` 적용

처음 예제에서(z-index가 없는 경우의 쌓임) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 `position` 속성을 지정하고 `z-index` 속성을 지정해야한다.

z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 만약 당신이 z축에 익숙하지 않다면 여러 레이어가 쌓여있는 페이지를 상상해보라. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다.

**다시한번 경고!** z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.

| 레이어 | 설명 |
| --- | --- |
| 바닥 레이어 | 사용자로부터 가장 멀다 |
| 레이어 -X | 음의 `z-index` 값을 가진 레이어 |
| 레이어 0 | 기본 렌더링 레이어 |
| 레이어 X | 양의 `z-index` 값을 가진 레이어 |
| 가장 위 레이어 | 사용자로부터 가장 가깝다 |

**참고:** **노트:**

* z-index 속성을 지정하지 않으면 엘리먼트는 기본 렌더링 레이어(레이어 0)에 렌더링된다.
* 만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지면 (엘리먼트들이 같은 레이어에 위치한다) z-index가 없는 경우의 쌓임 쌓임 규칙을 적용한다.

다음 예제에서는 레이어들의 쌓임 순서가 z-index를 이용하여 바뀌어있다. DIV#5는 position 속성이 지정되지 않았으므로 z-index 속성 값은 쌓임 순서를 결정하는데에 아무 영향을 미치지 않는다.

### 예제

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 opacity: 0.7;
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 #normdiv {
 z-index: 8;
 height: 70px;
 border: 1px dashed #999966;
 background-color: #ffffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv1 {
 z-index: 3;
 height: 100px;
 position: relative;
 top: 30px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #reldiv2 {
 z-index: 2;
 height: 100px;
 position: relative;
 top: 15px;
 left: 20px;
 border: 1px dashed #669966;
 background-color: #ccffcc;
 margin: 0px 50px 0px 50px;
 text-align: center;
 }

 #absdiv1 {
 z-index: 5;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 left: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }

 #absdiv2 {
 z-index: 1;
 position: absolute;
 width: 150px;
 height: 350px;
 top: 10px;
 right: 10px;
 border: 1px dashed #990000;
 background-color: #ffdddd;
 text-align: center;
 }
 </style>
  </head>

  <body>
    <br /><br />

    <div id="absdiv1">
      <br /><span class="bold">DIV #1</span> <br />position: absolute;
      <br />z-index: 5;
    </div>

    <div id="reldiv1">
      <br /><span class="bold">DIV #2</span> <br />position: relative;
      <br />z-index: 3;
    </div>

    <div id="reldiv2">
      <br /><span class="bold">DIV #3</span> <br />position: relative;
      <br />z-index: 2;
    </div>

    <div id="absdiv2">
      <br /><span class="bold">DIV #4</span> <br />position: absolute;
      <br />z-index: 1;
    </div>

    <div id="normdiv">
      <br /><span class="bold">DIV #5</span> <br />no positioning <br />z-index:
      8;
    </div>
  </body>
</html>
```

결과
--

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


쌓임 맥락 예제2 - CSS: Cascading Style Sheets

쌓임 맥락 예제2
=========

« CSS « CSS z-index 이해하기

### 쌓임 맥락 예제2

굉장히 간단하지만 *쌓임 맥락*을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다.

z-index 속성 값이 2인 DIV #2는 z-index 속성 값이 1인 DIV #3 위에 있다. 왜냐하면 DIV #2와 DIV #3은 같은 쌓임 맥락(루트 엘리먼트)에 속하고 DIV #2의 z-index 값이 더 크기 때문이다.

이상한 점은 z-index 속성 값이 2인 DIV #2가 z-index 속성 값이 10인 DIV #4보다 위에 있다는 점이다. 이것은 이 두 DIV가 같은 쌓임 맥락에 속해있지 않기 때문이다. DIV #4는 DIV #3이 만든 쌓임 맥락에 속해있고 DIV #3과 DIV #3의 모든 자식 엘리먼트는 DIV #2보다 아래에 있다.

이 상황을 더 잘 이해하기 위해서 쌓임 맥락 계층을 그려보자.

* 루트 엘리먼트 쌓임 맥락
    + DIV #2 (z-index 2)
    + DIV #3 (z-index 1)
        - DIV #4 (z-index 10)

**참고:** 일반적인 HTML 계층 구조가 쌓임 맥락 계층 구조와 다르다는걸 상기하자. 쌓임 맥락을 만들지 않는 엘리먼트들은 쌓임 맥락 계층 구조에서 사라진다.

예제
--

### HTML

```html
<div id="div1">
  <br />
  <span class="bold">DIV #1</span><br />
  position: relative;
  <div id="div2">
    <br />
    <span class="bold">DIV #2</span><br />
    position: absolute;<br />
    z-index: 2;
  </div>
</div>

<br />

<div id="div3">
  <br />
  <span class="bold">DIV #3</span><br />
  position: relative;<br />
  z-index: 1;
  <div id="div4">
    <br />
    <span class="bold">DIV #4</span><br />
    position: absolute;<br />
    z-index: 10;
  </div>
</div>
```

### CSS

```css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

결과
--

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


쌓임 맥락 - CSS: Cascading Style Sheets

쌓임 맥락
=====

**쌓임 맥락**(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.

설명
--

이전 글 z-index 사용하기에서 보았듯, 특정 요소의 렌더링 순서는 자신의 `z-index` 속성 값에 영향을 받습니다. 이는 그 요소들이 가진 특별한 속성으로 인해 **쌓임 맥락**이 생성되기 때문입니다.

쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성합니다.

* 문서의 루트 요소. (`<html>`)
* `position`이 `absolute` 또는 `relative`이고, `z-index`가 `auto`가 아닌 요소.
* `position`이 `fixed` 또는 `sticky`인 요소. (`sticky`는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)
* container queries (en-US)를 위한 `container-type` (en-US)이 `size` 또는 `inline-size`인 요소.
* 플렉스(`flexbox` (en-US)) 컨테이너의 자식 중 `z-index`가 `auto`가 아닌 요소.
* 그리드(`grid` (en-US)) 컨테이너의 자식 중 `z-index`가 `auto`가 아닌 요소.
* `opacity`가 1보다 작은 요소. (불투명도 명세 참고)
* `mix-blend-mode`가 `normal`이 아닌 요소.
* 다음 속성 중 하나라도 `none`이 아닌 값을 가진 요소.
    + `transform`
    + `filter`
    + `backdrop-filter`
    + `perspective` (en-US)
    + `clip-path`
    + `mask` / `mask-image` (en-US) / `mask-border` (en-US)
* `isolation`이 `isolate`인 요소.
* `will-change`의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.
* `contain`이 `layout`, `paint`, 또는 둘 중 하나를 포함하는 값(`strict`, `content` 등)인 요소.
* top layer에 배치된 요소와 이에 상응하는 `::backdrop` (en-US). fullscreen 및 popover 요소들을 예로 들 수 있습니다.

쌓임 맥락 안의 자식 요소는 이전에 설명했던 규칙을 동일하게 사용해 쌓입니다. 중요한 것은, 자식의 `z-index` 값은 부모에게만 의미가 있다는 점입니다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.

요약하면,

* 쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
* 쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.
* 각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.

**참고:** 모든 요소가 쌓임 맥락을 생성하는 건 아니므로, 쌓임 맥락의 계층 구조는 HTML 요소 계층 구조의 부분집합입니다. 자신의 쌓임 맥락을 만들지 않은 요소는 '부모 쌓임 맥락에 의해 **동화된다**'라고 표현할 수 있겠습니다.

예제
--

![Example of stacking rules modified using z-index](/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context/understanding_zindex_04.png)

위의 예시에서, 모든 요소는 각자의 포지션과 `z-index`로 인해 자신의 쌓임 맥락을 형성합니다. 쌓임 맥락의 계층 구조는 다음과 같습니다.

* 루트
    + DIV #1
    + DIV #2
    + DIV #3
        - DIV #4
        - DIV #5
        - DIV #6

DIV #4, DIV #5, DIV #6은 DIV #3의 자식이므로, DIV #3 내부에서만 셋의 쌓임을 처리했다는 것을 이해하는 게 중요합니다. DIV #3 내부의 요소의 쌓기와 렌더링이 끝난 후에는, 전체 DIV #3을 루트 요소의 쌓임 맥락 아래에서 형제 DIV와 쌓습니다.

DIV #4는 DIV #1보다 z-index 속성값이 더 크지만, DIV #1보다 아래에 렌더링 되었습니다. 왜냐하면 DIV #1의 z-index 속성값인 5는 루트 요소의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문입니다. 그러므로, DIV #4는 더 낮은 z-index 속성값을 갖는 DIV #3에 속하게 되어 DIV #1 아래에 위치합니다.

같은 이유로 DIV #2 (`z-index`: 2)는 DIV #5 (`z-index`: 1) 아래에 렌더링 되었습니다. DIV #5가 그보다 더 큰 z-index 속성값을 갖는 DIV #3에 속해있기 때문입니다.

DIV #3의 z-index 속성값인 4는 DIV #4, DIV #5, DIV #6의 z-index 속성값과 독립적입니다. 왜냐하면 다른 쌓임 맥락에 속해있기 때문입니다.

Z축 상에 쌓인 요소들의 렌더링 순서를 이해하는 쉬운 방법은 z-index를 "버전 번호" 처럼 생각하는 것입니다. 자식 요소는 부모 요소의 메이저 버전 번호 아래 마이너 버전 번호를 갖습니다. 이 방법은 왜 z-index가 1인 DIV #5가 z-index가 2인 DIV #2위에 쌓였는지, z-index가 6인 DIV #4가 z-index가 5인 DIV #1 아래에 쌓였는지 이해하기 쉽도록 만들어줍니다.

우리 예제는 다음과 같습니다. (최종 렌더링 순서에 따라 정렬됨)

* 루트
    + DIV #2: (`z-index`: 2)
    + DIV #3: (`z-index`: 4)
        - DIV #5: (`z-index`: 1), (`z-index`: 4)인 요소 아래에서 쌓였으므로 렌더링 순서는 4.1입니다.
        - DIV #6: (`z-index`: 3), (`z-index`: 4)인 요소 아래에서 쌓였으므로 렌더링 순서는 4.3입니다.
        - DIV #4: (`z-index`: 6), (`z-index`: 4)인 요소 아래에서 쌓였으므로 렌더링 순서는 4.6입니다.
    + DIV #1: (`z-index`: 5)
### HTML

```html
<div id="div1">
  <h1>Division Element #1</h1>
  <code
 >position: relative;<br />
    z-index: 5;</code
 >
</div>

<div id="div2">
  <h1>Division Element #2</h1>
  <code
 >position: relative;<br />
    z-index: 2;</code
 >
</div>

<div id="div3">
  <div id="div4">
    <h1>Division Element #4</h1>
    <code
 >position: relative;<br />
      z-index: 6;</code
 >
  </div>

  <h1>Division Element #3</h1>
  <code
 >position: absolute;<br />
    z-index: 4;</code
 >

  <div id="div5">
    <h1>Division Element #5</h1>
    <code
 >position: relative;<br />
      z-index: 1;</code
 >
  </div>

  <div id="div6">
    <h1>Division Element #6</h1>
    <code
 >position: absolute;<br />
      z-index: 3;</code
 >
  </div>
</div>
```

### CSS

```css
\* {
  margin: 0;
}
html {
  padding: 20px;
  font:
    12px/20px Arial,
    sans-serif;
}
div {
  opacity: 0.7;
  position: relative;
}
h1 {
  font: inherit;
  font-weight: bold;
}
#div1,
#div2 {
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
}
#div1 {
  z-index: 5;
  margin-bottom: 190px;
}
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4,
#div5 {
  border: 1px dashed #996;
  background-color: #ffc;
}
#div4 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
#div5 {
  z-index: 1;
  margin-top: 15px;
  padding: 5px 10px;
}
#div6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 125px;
  border: 1px dashed #009;
  padding-top: 125px;
  background-color: #ddf;
  text-align: center;
}
```

결과
--

같이 보기
-----

* z-index가 없는 경우의 쌓임 : 기본 쌓임 규칙
* floating 엘리먼트의 쌓임 : floating 엘리먼트들은 어떻게 다루어지는가
* z-index 적용 : 기본 쌓임 순서를 변경하기 위해 z-index 사용하기
* 쌓임 맥락 예제1 : 2레벨 HTML 계층구조, 마지막 레벨에서 z-index가 지정된 경우
* 쌓임 맥락 예제2 : 2레벨 HTML 계층구조, 모든 레벨에서 z-index가 지정된 경우
* 쌓임 맥락 예제3 : 3레벨 HTML 계층구조, 두번째 레벨에서 z-index가 지정된 경우
* Top layer


floating 엘리먼트의 쌓임 - CSS: Cascading Style Sheets

floating 엘리먼트의 쌓임
=================

« CSS « CSS z-index 이해하기

### floating 엘리먼트의 쌓임

floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다.

1. 뿌리 엘리먼트의 배경과 테두리
2. 자식 엘리먼트들은 HTML에서 등장하는 순서대로
3. floating 엘리먼트
4. position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로

사실 다음 예제에서 보는 것처럼 position이 지정되지 않은 엘리먼트(DIV #4)의 배경과 테두리는 floating 엘리먼트들에 의해 영향을 받지 않는다. 반면 컨텐츠는 영향을 받는다. 이것은 CSS 표준 float 명세에 따른 것이다.

위의 규칙 리스트를 수정하여 이 명세를 포함시켜보자.

1. 뿌리 엘리먼트의 배경과 테두리
2. 자식 엘리먼트들은 HTML에서 등장하는 순서대로
3. floating 엘리먼트
4. inline 자식 엘리먼트는 보통의 흐름대로
5. position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로

**참고:** **노트:** 아래 예제에서 position이 지정되지 않은 엘리먼트 이외에는 모든 엘리먼트가 쌓임 순서를 보여주기 위해 반투명하게 설정되었다. 만약 position이 지정되지 않은 엘리먼트 (DIV #4)의 투명도를 낮추면 이상한 일이 일어난다. 배경과 테두리가 (원래에는 floating 엘리먼트 아래에 있어야 함에도 불구하고) floating 엘리먼트와 position이 지정된 엘리먼트 사이에 보이는 것이다. 이것이 명세의 일부인지 아니면 버그인지 확실하지 않다. 투명도를 적용하는것이 새로운 쌓임 맥락(stacking context)를 만드는 것일까?

예제
--

### HTML

```html
<div id="abs1"><strong>DIV #1</strong><br />position: absolute;</div>

<div id="flo1"><strong>DIV #2</strong><br />float: left;</div>

<div id="flo2"><strong>DIV #3</strong><br />float: right;</div>

<br />

<div id="sta1"><strong>DIV #4</strong><br />no positioning</div>

<div id="abs2"><strong>DIV #5</strong><br />position: absolute;</div>

<div id="rel1"><strong>DIV #6</strong><br />position: relative;</div>
```

### CSS

```css
div {
  padding: 10px;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  position: absolute;
  width: 150px;
  height: 200px;
  top: 10px;
  right: 140px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  height: 100px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 10px 0px 10px;
  text-align: left;
}

#flo1 {
  margin: 0px 10px 0px 20px;
  float: left;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#flo2 {
  margin: 0px 20px 0px 10px;
  float: right;
  width: 150px;
  height: 200px;
  border: 1px dashed #090;
  background-color: #cfc;
}

#abs2 {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 80px;
  left: 100px;
  border: 1px dashed #990;
  background-color: #fdd;
}

#rel1 {
  position: relative;
  border: 1px dashed #996;
  background-color: #cff;
  margin: 0px 10px 0px 10px;
  text-align: left;
}
```

결과
--

### See also

* Stacking without z-index : Default stacking rules
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


쌓임 맥락 예제3 - CSS: Cascading Style Sheets

쌓임 맥락 예제3
=========

« CSS « CSS z-index 이해하기

쌓임 맥락 예제3
---------

마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다.

몇개의 position 속성 값이 지정된 3-레벨 계층 메뉴를 생각하자. 두번째 레벨과 세번째 레벨의 메뉴는 그들의 부모에 마우스를 갖다 대거나 클릭했을 때 보인다. 이 메뉴를 클래스 선택자를 통해 스타일링 해보자.

만약 세 메뉴가 부분적으로 겹친다면 쌓임을 해결하는 것이 문제가 된다.

첫번째 레벨 메뉴는 position 속성 값만이 relative로 지정되어있다. 따라서 이는 쌓임 맥락을 형성하지 않는다. (역자: z-index 속성 값을 지정하지 않았다.)

두번째 레벨 메뉴는 position 속성 값이 absolute로 지정되었다. 두번째 레벨 메뉴를 모든 첫번째 레벨 메뉴보다 위에 두기 위해서 z-index 속성 값이 사용되었다. 따라서 모든 두번째 레벨 메뉴에 쌓임 맥락이 생성되고 세번째 레벨 메뉴는 부모의 쌓임 맥락에 속하게 된다.

따라서 세번째 레벨 메뉴는 그 부모의 다음 두번째 레벨 메뉴 아래에 놓이게 된다. 왜냐하면 모든 두번째 레벨 메뉴는 같은 z-index 속성 값을 가지고 기본 쌓임 규칙을 적용받기 때문이다. (역자: 같은 z-index 속성 값을 가지는 형제 엘리먼트들은 HTML 문서상에서 나중에 등장한 것이 위에 쌓인다.)

이 상황을 더 잘 이해하기 위해 쌓임 맥락 계층 구조를 그려보자.

* 뿌리 엘리먼트 쌓임 맥락
    + LEVEL #1
        - LEVEL #2 (z-index: 1)
            * LEVEL #3
            * ...
            * LEVEL #3
        - LEVEL #2 (z-index: 1)
        - ...
        - LEVEL #2 (z-index: 1)
    + LEVEL #1
    + ...
    + LEVEL #1

이 문제를 해결하는 방법에는 1) 서로 다른 메뉴를 겹치지 않게 배치하기, 2) 클래스 선택자 뿐만 아니라 id 선택자를 이용하여 각각의 엘리먼트에 z-index 속성 값을 지정하기, 3) HTML 구조를 단순화하여 멀티 레벨 메뉴를 사용하지 않기 등이 있다.

**참고:** **노트:** 소스 코드에는 두번째 레벨 메뉴와 세번째 레벨 메뉴들이 position 속성이 absolute로 지정된 컨테이너에 싸여있는 것을 볼 수 있다. 이는 여러개의 엘리먼트들의 위치를 한꺼번에 지정하는데 유용하다.

예제
--

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style type="text/css">
 div {
 font: 12px Arial;
 }

 span.bold {
 font-weight: bold;
 }

 div.lev1 {
 width: 250px;
 height: 70px;
 position: relative;
 border: 2px outset #669966;
 background-color: #ccffcc;
 padding-left: 5px;
 }

 #container1 {
 z-index: 1;
 position: absolute;
 top: 30px;
 left: 75px;
 }

 div.lev2 {
 opacity: 0.9;
 width: 200px;
 height: 60px;
 position: relative;
 border: 2px outset #990000;
 background-color: #ffdddd;
 padding-left: 5px;
 }

 #container2 {
 z-index: 1;
 position: absolute;
 top: 20px;
 left: 110px;
 }

 div.lev3 {
 z-index: 10;
 width: 100px;
 position: relative;
 border: 2px outset #000099;
 background-color: #ddddff;
 padding-left: 5px;
 }
 </style>
  </head>

  <body>
    <br />

    <div class="lev1">
      <span class="bold">LEVEL #1</span>

      <div id="container1">
        <div class="lev2">
          <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;

          <div id="container2">
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
            <div class="lev3"><span class="bold">LEVEL #3</span></div>
          </div>
        </div>

        <div class="lev2">
          <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
        </div>
      </div>
    </div>

    <div class="lev1">
      <span class="bold">LEVEL #1</span>
    </div>

    <div class="lev1">
      <span class="bold">LEVEL #1</span>
    </div>

    <div class="lev1">
      <span class="bold">LEVEL #1</span>
    </div>
  </body>
</html>
```

결과
--

### See also

* Stacking without z-index : Default stacking rules
* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
### Original Document Information

* Author(s): Paolo Lombardi
* This article is the english translation of an article I wrote in italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
* Last Updated Date: July 9th, 2005


접근성을 위한 미디어 쿼리 사용하기 - CSS: Cascading Style Sheets

접근성을 위한 미디어 쿼리 사용하기
===================

**미디어쿼리**(**Media Queries**)는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.

애니메이션 동작 축소하기(Reduced Motion)
-----------------------------

깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(ADHD)와 같은 인지 문제를 가진 사람들에게 문제가 될 수 있습니다. 이러한 종류의 애니메이션 동작들은 전정편두통, 뇌전증, 편두통과 광과민증을 유발할 수 있습니다.

또한, 이 애니메이션 동작을 줄이는 방법을 통해 배터리가 부족한 사람이나 보급형 스마트폰 및 컴퓨터를 사용하는 사람들에게 도음을 줄 수 있습니다.

### 문법

`no-preference`

사용자가 시스템에 관련된 설정을 하지 않았다는 것을 의미합니다.

`reduce`

사용자가 시스템에 애니메이션 동작을 최소화하도록 설정하였다는 것을 의미합니다. 가급적이면 필수적이지 않은 동작은 모두 제거됩니다.

### 예제

이 예제는 접근성 설정에서 동작 줄이기를 설정하지 않으면 난잡한 애니메이션이 실행됩니다.

#### HTML

```html
<div class="animation">animated box</div>
```

#### CSS

```css
.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}
```

고대비 모드 (High Contrast Mode)
---------------------------

**비표준:** 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

**-ms-high-contrast** CSS media 속성은 애플리케이션이 고대비 모드인지, 어떤 색상으로 강조되어 있는지를 정의하는 Microsoft 확장기능입니다.

저시력 사용자나 대비감도에 문제가 있는 사람뿐만 아니라 직사광선 아래에서 컴퓨터나 휴대폰을 사용하는 사람에게도 도움이 됩니다.

### 문법

**`-ms-high-contrast`** 미디어 속성(Media Feature)은 다음 값 중 하나를 지정하여 사용할 수 있습니다.

### 속성값

`active`

시스템이 색상과 관계없이 고대비 모드로 설정되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.

`black-on-white`

시스템이 흰 바탕에 검은 글씨 고대비 모드로 설정되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.

`white-on-black`

시스템이 검은 바탕에 흰 글씨 고대비 모드로 설정되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.

### 예제

다음 선언된 스타일들은 어플리케이션이 모든 종류의 색상, black-on-white 색상, white-on-black 색상의 고대비 모드로 표시되도록 합니다.

```css
@media screen and (-ms-high-contrast: active) {
  /\* 모든 고대비 모드에 대한 스타일 규칙입니다 \*/
}
@media screen and (-ms-high-contrast: black-on-white) {
  div {
    background-image: url("image-bw.png");
  }
}
@media screen and (-ms-high-contrast: white-on-black) {
  div {
    background-image: url("image-wb.png");
  }
}
```


미디어 쿼리 사용하기 - CSS: Cascading Style Sheets

미디어 쿼리 사용하기
===========

**미디어 쿼리**는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.

* CSS `@media`와 `@import` @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때.
* `<style>`, `<link>`, `<source>` (en-US), 기타 다른 HTML 요소에 `media` 특성을 사용해 특정 매체만 가리키게 할 때.
* `Window.matchMedia()`와 `MediaQueryList.addListener()` (en-US) JavaScript 메서드를 사용해 미디어 상태를 판별하고 관측 (en-US)할 때.

**참고:** 이 페이지의 CSS는 시연용으로 `@media`를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.

구문
--

미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.

미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.

**참고:** `<link>`의 미디어 쿼리가 거짓을 반환하더라도 스타일시트는 다운로드됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.

### 미디어 유형

미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 `not`이나 `only` 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 `all`을 사용합니다.

**`all`**

모든 장치에 적합합니다.

`print`

 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
 (인쇄 미디어 (en-US) 문서를 방문해 `print` 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)

`screen`

주로 화면이 대상입니다.

`speech`

음성 합성장치 대상입니다.

**참고:** **사용하지 않는 미디어 유형:** CSS2.1과 Media Queries 3 모듈은 여러가지 추가 유형(`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`)을 정의했으나 Media Queries 4에서 제거됐으므로 사용해선 안됩니다. `aural`은 유사한 유형인 `speech`로 대체됐습니다.

### 미디어 특성

미디어 특성은 사용자 에이전트, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.

| 이름 | 요약 | 참고 |
| --- | --- | --- |
| `any-hover` (en-US) | 사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가? | Media Queries Level 4에서 추가 |
| `any-pointer` (en-US) | 사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가? | Media Queries Level 4에서 추가 |
| `aspect-ratio` (en-US) | 뷰포트의 가로세로비 |  |
| `color` (en-US) | 출력 장치의 색상 채널별 비트 수, 흑백일 땐 0 |  |
| `color-gamut` (en-US) | 사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위 | Media Queries Level 4에서 추가 |
| `color-index` (en-US) | 출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0 |  |
| `device-aspect-ratio` (en-US)
지원이 중단되었습니다
 | 출력 장치의 가로세로비 | Media Queries Level 4에서 제거 |
| `device-height` (en-US)
지원이 중단되었습니다
 | 출력 장치 렌더링 표면의 높이 | Media Queries Level 4에서 제거 |
| `device-width` (en-US)
지원이 중단되었습니다
 | 출력 장치 렌더링 표면의 너비 | Media Queries Level 4에서 제거 |
| `display-mode` (en-US) | 웹 앱 매니페스트의 `display` 항목이 정의한 애플리케이션의 표시 모드 | Web App Manifest 명세에서 정의 |
| `forced-colors` (en-US) | 사용자 에이전트가 색상 팔레트를 제한하는지 여부 | Media Queries Level 5에서 추가 |
| `grid` (en-US) | 장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나? |  |
| `height` (en-US) | 뷰포트의 높이 |  |
| `hover` (en-US) | 주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가? | Media Queries Level 4에서 제거 |
| `inverted-colors` (en-US) | 사용자 에이전트나 운영 체제가 색상을 반전 중인가? | Media Queries Level 5에서 추가 |
| `light-level` | 주변 환경의 광도 | Media Queries Level 5에서 추가 |
| `monochrome` (en-US) | 출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0 |  |
| `orientation` (en-US) | 뷰포트의 방향 |  |
| `overflow-block` (en-US) | 콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가? | Media Queries Level 4에서 추가 |
| `overflow-inline` (en-US) | 콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가? | Media Queries Level 4에서 추가 |
| `pointer` (en-US) | 주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가? | Media Queries Level 4에서 추가 |
| `prefers-color-scheme` | 라이트/다크 색채 조합 중 사용자가 선호하는 것 | Media Queries Level 5에서 추가 |
| `prefers-contrast` (en-US) | 사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지 | Media Queries Level 5에서 추가 |
| `prefers-reduced-motion` (en-US) | 사용자가 줄어든 움직임을 선호함 | Media Queries Level 5에서 추가 |
| `prefers-reduced-transparency` (en-US) | 사용자가 줄어든 투명도를 선호함. | Media Queries Level 5에서 추가 |
| `resolution` (en-US) | 출력 장치의 픽셀 밀도 |  |
| `scan` | 출력 장치의 스캔 절차 |  |
| `scripting` (en-US) | JavaScript 등 스크립트 사용 가능 여부 탐지 | Media Queries Level 5에서 추가 |
| `update` (en-US) | 출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기 | Media Queries Level 4에서 추가 |
| `width` (en-US) | 스크롤바를 포함한 뷰포트 너비 |  |

### 논리 연산자

`not`, `and`, `only` 와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.

#### `and`

`and` 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.

#### `not`

`not` 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. `not` 연산자를 사용할 경우 **반드시** 미디어 유형도 지정해야 합니다.

**참고:** Level 3 모듈에서는 `not` 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.

#### `only`

`only` 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. `only`를 사용하지 않은 `screen and (max-width: 500px)` 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 `screen`으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. `only` 연산자를 사용할 경우 **반드시** 미디어 유형도 지정해야 합니다.

#### `,` (쉼표)

쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 `or` 연산자처럼 동작합니다.

미디어 유형 특정하기
-----------

미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.

```css
@media print { ... }
```

다수의 장치를 특정할 수도 있습니다. 예컨대 아래 `@media` 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.

```css
@media screen, print { ... }
```

미디어 유형 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.

미디어 기능 특정하기
-----------

미디어 기능은 주어진 사용자 에이전트, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.

```css
@media (hover: hover) { ... }
```

많은 미디어 기능은 **범위 기능**으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 뷰포트 너비가 12450px 이하인 경우에만 스타일을 적용합니다.

```css
@media (max-width: 12450px) { ... }
```

미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 `0`이 아닐 때 (Level 4부터는 `0`과 `none`이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.

```css
@media (color) { ... }
```

어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.

```css
@media speech and (aspect-ratio: 11/5) { ... }
```

미디어 특성 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.

복잡한 미디어 쿼리 생성
-------------

때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : `not`, `and`, 그리고 `only`를 사용하면 됩니다. 더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.

앞서 예와 같이, `and` 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 `and` 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 `not` 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. `only` 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.

**참고:** 대부분의 경우, `all` 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 `not` 이나 `only` 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.

### 다수의 유형과 기능 조합하기

The `and` 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:

```css
@media (min-width: 30em) and (orientation: landscape) { ... }
```

화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 `screen` 미디어유형에 미디어기능을 연결합니다:

```css
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
```

### 다수의 쿼리 판별

쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:

```css
@media (min-height: 680px), screen and (orientation: portrait) { ... }
```

위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.

### 쿼리의 뜻 반전하기

`not` 키워드는 미디어쿼리 전체의 의미를 반전시킵니다. 이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) `not` 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다. `not` 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:

```css
@media not all and (monochrome) { ... }
```

... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:

```css
@media not (all and (monochrome)) { ... }
```

... 다음과 같이 되는 것이 아닙니다:

```css
@media (not all) and (monochrome) { ... }
```

다른 예를 보자면, 다음의 미디어 쿼리는:

```css
@media not screen and (color), print and (color) { ... }
```

... 이렇게 평가됩니다:

```css
@media (not (screen and (color))), print and (color) { ... }
```

### 구형 브라우저와의 호환성 향상하기

`only` 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. *신형브라우저에는 아무런 영향을 주지 않습니다.*

```css
@media only screen and (color) { ... }
```

Level 4의 구문 향상
--------------

미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a *range context* for writing such queries. 폭을 표현하기 위해 `max-` 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:

**참고:** 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만, 몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 `@media` browser compatibility table 를 참조해 주십시요.

```css
@media (max-width: 30em) { ... }
```

미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:

```css
@media (width <= 30em) { ... }
```

`min-` 과 `max-` 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:

```css
@media (min-width: 30em) and (max-width: 50em) { ... }
```

Level 4 구문에서는 이렇게 표현할 수 있습니다:

```css
@media (30em <= width <= 50em ) { ... }
```

Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 **and**, **not**, **or**.연산자를 결합할 수 있습니다.

### `not`으로 기능 부정

미디어기능에 `not()` 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 `not(hover)` 를 사용할 수 있습니다.

```css
@media (not(hover)) { ... }
```

### `or`로 다수의 기능 판별

`or` 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 `true` 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.

```css
@media (not (color)) or (hover) { ... }
```

같이 보기
-----

* 프로그래밍으로 미디어 쿼리 판별하기 (en-US)
* Mozilla 미디어 기능 확장 (en-US)
* WebKit 미디어 기능 확장 (en-US)


Color picker tool - CSS: Cascading Style Sheets

Color picker tool
=================

이 도구를 사용하면 웹용 사용자 정의 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다. 또한 HEXA 색상, RGB (빨강 / 녹색 / 파랑) 및 HSL (색조 / 채도 / 밝기)를 비롯하여 CSS 에서 지원하는 다양한 색상 형식 간에 쉽게 변환 할 수 있습니다 . RGB (rgba) 및 HSL (hsla) 형식에서도 알파 채널을 제어 할 수 있습니다.

색상을 정의하는 매개 변수를 조정하면 세 가지 표준 웹 CSS 형식으로 모두 표시됩니다. 또한 현재 선택한 색상을 기반으로 HSL 및 HSV 용 팔레트와 알파가 생성됩니다. "스포이드"스타일 색상 선택 도구 상자는 HSL 또는 HSV 형식으로 전환 할 수 있습니다. 도구의 바닥에있는 상자로 색상을 드래그하고 서로 위로 움직여 색상을 비교할 수 있습니다. 상대 Z 색인 값을 조정하여 서로를 앞뒤로 이동하십시오.

이 도구는 HTML 에 적용 할 완벽한 CSS 색상을 식별하는 데 도움을줍니다 .

위에서 작성한 생성 된 색상은 달리 명시하지 않는 한 CSS 및 HTML에서 색상이 사용되는 모든 위치에서 사용할 수 있습니다.

See also
--------

For more on using color, see:

* Applying color to HTML elements using CSS (en-US)
* Fundamental text and font styling
* Styling borders using CSS (en-US)
* Changing background styles using CSS
* Color and color contrast (en-US)


대열 레이아웃과 쓰기 모드 - CSS: Cascading Style Sheets

대열 레이아웃과 쓰기 모드
==============

어떻게 일반 대열이 동작하는지 자세히 설명하는 CSS 2.1 규격은 가로쓰기 모드라고 가정한다. 레이아웃 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 레이아웃이 어떻게 작동하는지 살펴 봅니다.

이것은 CSS에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 레이아웃이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 참조 항목과 외부 리소스 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.

쓰기 모드 규격
--------

CSS 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 레이아웃에 미치는 영향을 정의한다. CSS 쓰기 모드 소개란에서 전하는 규격은 다음과 같다.

>
> CSS에 포함되는 쓰기 모드는 `writing-mode` (en-US), `direction` (en-US), and `text-orientation` (en-US) 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."
>
>
>

쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 *인라인 기준 방향*을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.

*블록 대열 방향*은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. CSS 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 `vertical-lr`로 변경하고 싶다면, 대상 요소에 `writing-mode: vertical-lr`를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.

특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.

`writing-mode` 속성 및 블록 대열
-------------------------

`writing-mode` (en-US) 속성은 `horizontal-tb`과 `vertical-rl`, `vertical-lr`를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 `horizontal-tb,`로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 `horizontal-tb`이다.

다음 예는 `horizontal-tb`를 사용하는 블록을 보여준다.

속성값 `vertical-rl`는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.

마지막 예는 `vertical-lr`로써 세번 째로 가능한 `writing-mode` 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.

부모와 다른 쓰기 모드를 가진 상자
-------------------

중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 `display: inline-block`이 적용된 듯이 표시된다.

블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 `flow`일 경우 계산에 따른 디스플레이 유형인 `flow-root`를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 `horizontal-tb` 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.

대체 요소
-----

이미지와 같은 대체 요소는 `writing-mode`에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.

논리적 속성 및 속성값
------------

당신이 `horizontal-tb` 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 `horizontal-tb`일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 `vertical-lr`일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.

따라서 우리에게 `블록 크기` 및 `인라인 크기`라는 새로운 속성이 주어진다. 당해 블록에 `inline-size`를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, `inline-size`일 경우 항상 인라인 방향의 크기를 의미하게 된다.

CSS 논리적 속성 (en-US) 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.

요약정리
----

대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 레이아웃이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 레이아웃하거나 독창적 표현을 이유로 사용할 수 있다. CSS는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.

참조 항목
-----

* 쓰기 모드
외부 리소스
------

* *CSS 쓰기 모드*, 젠 시몬스가 소개하는 24가지 방식


대열과 탈대열 - CSS: Cascading Style Sheets

대열과 탈대열
=======

이전 안내서에서 제가 일반 대열 속 블록 및 인라인 레이아웃에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.

다음 예제에서는 머리글, 단락, 목록 및 `strong` 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, `strong` 요소는 인라인입니다. 목록은 플렉스박스를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 레이아웃에도 참여하고 있습니다. 컨테이너는 외곽에 `display` 유형이 `block` 대열에 참여하고 있습니다.

요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. HTML 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.

항목을 대열 밖으로 빼내기
--------------

대열에 속한 모든 요소는 다음과 구분된다:

* 부동 항목
* `position: absolute` 속성이 부여된 항목 (아울러 `position: fixed` 속성이 딸린 항목도 마찬가지로 동작합니다.)
* 뿌리 요소(`html`)

대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 레이아웃으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.

### 부동 항목

이 예제에서 나는 `div`를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 `div` 요소를 왼쪽으로 부동시켰다. 이제 `div`는 대열에서 벗어났다.

부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.

여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.

### 절대 위치잡기

어떤 항목에 `position: absolute`나 `position: fixed`를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 `position`와 `absolute`임에 더해 간격띄우기 값이 `top: 30px`에 `right: 30px` 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.

`position: fixed`를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.

위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.

### 상대 위치잡기와 대열

어떤 항목에 `position: relative` 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.

일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 `position: absolute`가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.

요약정리
----

이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 서식 상황 해설 (en-US) 가운데에서 블록 서식 상황 (en-US)을 생성하는 등의 관련 이슈를 살펴볼 겁니다.

참조 항목
-----

* 서식 학습하기: *위치잡기*


서식 상황 입문서 - CSS: Cascading Style Sheets

서식 상황 입문서
=========

이 문서는 서식 상황의 개념을 소개합니다. 서식 상황에는 블록 서식 상황과 인라인 서식 상황, 가변 서식 상황을 포함한 여러 유형이 있습니다. 그들이 어떻게 동작하고 어떻게 그러한 동작을 활용할 수 있는지에 대한 기본 사항도 소개합니다.

페이지의 모든 것은 서식 상황(**formatting context**)의 일부이거나 특정 방식으로 콘텐츠를 배치하도록 정의된 영역입니다. 블록 서식 상황(**block formatting context**)은 블록 레이아웃 규칙에 따라 자식 요소를 배치하고, 가변 서식 상황(**flex formatting context**)은 자식을 flex items로 취급해 배치합니다. 각 서식 상황은 해당 상황에 속했을 때 레이아웃이 어떻게 동작하는지에 대한 특정 규칙을 가지고 있습니다.

블록 서식 상황
--------

문서의 최외각 요소는 우선 블록 레이아웃 규칙을 수립합니다. 이를 일컬어 초기 블록 서식 상황(**initial block formatting context**)이라고 합니다. 이는 `<html>` 요소 블록 내부의 모든 요소는 블록 및 인라인 레이아웃 규칙을 따르는 일반 대열에 따라 배치됨을 의미합니다. 블록 서식 상황(BFC)에 참여하는 요소는 CSS 상자 모델에 의해 윤곽이 제시된 규칙을 사용합니다. 이 모델은 요소의 여백, 테두리 및 패딩이 동일한 서식 상황에서 서로 다른 블록과 상호 작용하는 방법을 정의합니다.

### 새로운 블록 서식 상황 생성하기

단지 `<html>` 요소만이 블록 서식 상황을 생성할 능력을 갖춘 것은 아닙니다. 기본값으로 블록 레이아웃인 모든 요소는 역시 자기 자손 요소에 대한 블록 서식 상황을 생성합니다. 또한 기본값으로 주어지지 않아도 블록 서식 상황을 생성하도록 할 수 있는 CSS 속성이 있습니다. 동 속성이 유용한 까닭은 새로운 블록 서식 상황이 자체적으로 주 레이아웃 내부의 소형 레이아웃이 된다는 점에서 최외곽 문서와 매우 유사하게 작동하기 때문입니다. 블록 서식 상황은 그 내부에 모든 요소를 포함하고, `float` 및 `clear`는 동일한 서식 상황에 속한 항목에만 적용되며, 여백 축소는 동일한 서식 상황 요소 사이에만 이뤄집니다.

우리 문서의 뿌리 요소인 (`<html>`) 이 외에도 새로운 블록 서식 상황은 다음과 같은 경우에 생성됩니다.

* `float`를 사용으로 요소가 부동체가 되는 경우
* 절대 위치잡기한 요소, 여기에는 `position: fixed` 혹은 `position: sticky`가 포함됩니다.
* `display: inline-block` (en-US)이 적용된 요소
* `display: table-cell`이 적용된 테이블 셀 또는 요소, 여기에는 `display: table-*` 속성 무리를 사용한 익명 테이블 셀도 포함됩니다.
* `display: table-caption`이 적용된 테이블 캡션이나 요소
* `visible`이외의 대열이탈 값을 갖는 블록 요소
* `display: flow-root` 혹은 `display: flow-root list-item` 가 적용된 요소
* `contain: layout`, `content`, 또는 `strict`가 적용된 요소
* flex items
* 격자 항목
* 다단 컨테이너 (en-US)
* `column-span` (en-US)이 `all`로 설정된 요소

블록 서식 상황(BFC)을 생성하는 효과를 확인하기 위해 이들 중 몇 가지를 살펴봅시다.

아래 예제에서, 우리는 테두리가 적용된 `<div>` 내부에 부동체 요소 하나를 가지고 있습니다. 해당 `div`의 콘텐츠는 부동체 요소와 나란히 부동해왔습니다. 동 부동체의 콘텐츠가 자기 옆에 있는 콘텐츠보다 키가 크기 때문에 하위 `<div>`의 테두리는 이제 부동체에 전체에 걸쳐 진행하고 있습니다. 대열 요소와 탈대열 요소에 관한 안내서에서 설명했듯이, 동 부동체는 대열에서 제외되어 `<div>` 요소의 배경과 테두리는 콘텐츠만 포함하지 부동체는 포함하지 않습니다.

새로운 블록 서식 상황(BFC)을 생성하면 동 부동체를 포함할 겁니다. 그러려면 전형적인 방법은 `overflow: auto`를 설정하거나, 초깃값인 `overflow: visible` 이외의 다른 값을 설정하는 식이었습니다.

`overflow: auto`를 지정하여 동 부동체를 포함하는 새로운 블록 서식 상황(BFC)을 생성했습니다. 우리의 `div`가 이제는 우리 레이아웃 내부에 소형 레이아웃이 되었습니다. 모든 자식 요소는 소형 레이아웃 내부에 포함되게 됩니다.

대열이탈(`overflow`)을 사용하여 새로운 블록 서식 상황(BFC)을 생성하는 것이 문제가 되는 것은 대열이탈(`overflow`) 속성이 대열이탈 콘텐츠를 어떻게 다루고 싶은지 브라우저에 알려주기 위한 것입니다. 이 속성을 순수하게 블록 서식 상황을 생성할 목적으로 사용할 경우 원치 않는 스크롤 막대 또는 잘려 나간 그림자를 생기는 경우도 있습니다. 또한, 그 경우는 후진 개발자가 왔을 때 판독의 여지가 많지 않을 수 있습니다. 왜냐면 대열이탈을 무슨 목적으로 사용했는지 이유가 분명하지 않을 수 있기 때문입니다. 다음과 같이 하면 코드를 설명하는 데 좋은 아이디어가 될 것입니다.

### display: flow-root을 사용하며 명시적으로 블록 서식 상황을 생성하기

`display: flow-root` (또는 `display: flow-root list-item)`)를 컨테이너 블록상에 사용하면 잠재적인 문제가 될 수 있는 여타 부작용 없이 새로운 블록 서식 상황(BFC)을 생성합니다.

`<div>` (en-US)에 요소상에 `display: flow-root`을 적용하면, 컨테이너 내부의 모든 요소는 해당 컨테이너의 블록 서식 상황에 참여하게 되며, 부동체 무리는 동 요소 밑으로 돌출하지 않게 됩니다.

대열뿌리(`flow-root`)라는 키워드 명명은 (마치 `<html>`의 경우처럼) 본질적으로 새로운 뿌리 요소와 같은 기능하는 어떤 것을 생성한다는 사실을 말해줍니다. 새로운 상황이 어떻게 생성되었으며 어떻게 해당 대열 레이아웃이 기능하는지를 고려하면 그렇습니다.

인라인 서식 상황
---------

인라인 서식 상황은 다른 서식 상황 내부에 존재하며 하나의 단락 상황처럼 생각될 수 있습니다. 단락은 텍스트상에 사용되는 `<strong>` (en-US), `<a>` 또는 `<span>` 등이 내부적으로 사용되는 인라인 서식 상황을 생성합니다.

상자 모델은 인라인 서식 상황에 참여하는 항목에 100% 적용되지 않습니다. 가로쓰기 모드 라인에서 수평 패딩, 테두리 및 여백이 요소에 적용되고 텍스트를 왼쪽과 오른쪽으로 밀어냅니다. 그러나, 해당 요소 위와 아래에 여백은 적용되지 않습니다. 수직 패딩 및 테두리는 적용되지만 인라인 서식 상황에서 라인 상자가 패딩 및 테두리에 의해 밀려나지 않음으로 위와 아래에 내용이 겹칠 수 있습니다.

기타 서식 상황
--------

이 안내서는 대열 레이아웃을 다루므로 여타 가능한 서식 상황을 참조하지 않습니다. 따라서 어떤 유형의 서식 상황을 만드는 것이 서식 상황 속에 포함된 요소 무리가 작동하는 방식을 변화시킬 것인지 파악하는 것이 유용합니다. 이런 동작은 항상 HTML 규격에 기술되어 있고, 또한 이곳 Mozilla 개발자 네트워크(MDN)에도 기술되어 있습니다.

요약정리
----

이번 안내서에서는 블록 및 인라인 서식 상황과 블록 서식 상황(BFC)을 생성하는 중요한 주제를 자세히 살펴보았습니다. 다음 안내서에서는 어떻게 일반 대열과 서로 다른 쓰기 모드가 상호 작용하는지에 대해 알아보겠습니다.

참조 항목
-----

* 불록 서식 상황 (en-US)
* 시각적 서식 모델
* CSS 기본 상자 모델


대열 레이아웃과 대열이탈 - CSS: Cascading Style Sheets

대열 레이아웃과 대열이탈
=============

컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

오버플로은 무엇인가?
-----------

어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.

내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 `visible`로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.

오버플로 통제
-------

오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 `hidden` 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.

`scroll` 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.

`auto` 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 `overflow: scroll` 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 `overflow scroll`의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 `auto` 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.

이미 배운 바와 같이 기본값인 `visible` 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.

참고: 작업 초안 오버플로 수준 3을 보면 추가적인 속성 값으로 `overflow: clip`이 있다. 이것은 `overflow: hidden`와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.

오버플로 속성은 실제로는 `overflow-x` (en-US)와 `overflow-y` (en-US) 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 `overflow-x`를 수평 방향 값으로 두번째 경우에는 `overflow-y`를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 `overflow-y: scroll`만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.

상대적 플로우 속성
----------

우리는 쓰기 모드와 플로우 레이아웃 안내서에서 `block-size`와 `inline-size`라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들`overflow-block` (en-US)와 `overflow-inline` (en-US)도 포함되어 있다. 그것들은 `overflow-x`와 `overflow-y`에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.

이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.

오버플로 표시
-------

수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.

### 인라인축 오버플로

`text-overflow` 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. `clip`의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, `ellipsis`의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.

### 블록축 오버플로

이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, `block-overflow`란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.

이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.

요약정리
----

웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 플렉스박스 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.


일반 대열 속 블록 및 인라인 레이아웃 - CSS: Cascading Style Sheets

일반 대열 속 블록 및 인라인 레이아웃
=====================

이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.

일반 대열은 CSS 2.1규격에 정의되어 있으며, 이는 일반 대열에 소속된 상자가 *서식 상황*의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 *블록 서식 상황*에 참여하는 것으로, 인라인 수준 상자는 *인라인 서식 상황*에 참여하는 것으로 기술한다.

블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:

>
>
>  블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.
>  블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1
>
>
>
>

인라인 서식 상황에 해당하는 요소의 경우:

>
> 인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2
>
>
>

CSS 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 레이아웃과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.

블록 서식 상황에 참여하는 요소
-----------------

영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.

![](/ko/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/mdn-horizontal.png)

세로 쓰기 모드에서는 수평으로 배치된다.

![](/ko/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/mdn-vertical.png)

이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.

CSS 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 레이아웃에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.

단락 요소의 여백을 `0`으로 설정하면, 테두리는 접촉한다.

기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.

### 여백 축소

CSS 규격에 따라 블록 요소 사이의 여백이 *축소*된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.

아래의 예에 포함된 단락들은 `20px`의 상부 여백과 `40px`의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 `40px`이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.

여백 축소에 관해선 여백 축소 정복 안내서에서 자세한 내용을 파악할 수 있다.

**참고:** 참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.

![](/ko/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow/box-model.png)

인라인 서식 상황에 참여하는 요소
------------------

인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 CSS에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.

다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.

`strong` 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.

블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.

블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 시각적 서식 모델 안내서를 찾아보십시요.

`display`속성 및 대열 레이아웃
---------------------

CSS 2.1에 존재하는 규칙 외에도 새로운 수준의 CSS는 블록 및 인라인 상자의 동작을 추가로 기술한다. `display` 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. CSS 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.

요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (CSS 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 레이아웃를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 `display: flex`를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 `block`의 외부 디스플레이 유형이다.

그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.

따라서 CSS에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 *대열* 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.

외부 및 내부 디스플레이 유형이란 개념은 Flexbox(`display: flex`)와 Grid Layout(`display: grid`)과 같은 레이아웃 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 `block`인 관계로 블록 및 인라인 레이아웃에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.

### 하나의 요소가 참여하는 대상의 서식 상황 변경

브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 `strong` 요소에 `display: block`를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 CSS를 사용하여 표시되는 방식을 변경할 수 있다.

요약정리
----

이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 CSS 스타일 지정이 전혀 없는 HTML 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 레이아웃이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.

참조 항목
-----

* CSS 기본 상자 모델
* *일반 대열* - 레이아웃 살펴보기
* 인라인 요소
* 블락 수준 요소


CSS 카운터 사용하기 - CSS: Cascading Style Sheets

CSS 카운터 사용하기
============

**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.

Counters 사용하기
-------------

### 카운터 값 조작하기

CSS counter를 사용하려면 먼저 `counter-reset` (en-US) 속성(초깃값 `0`)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 `counter-increment` (en-US)에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

### 카운터 표시하기

Counter의 값은 `content` 속성에서 `counter()` (en-US)나 `counters()` (en-US) 함수를 사용하여 표시할 수 있습니다.

`counter()` 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수`decimal`)으로 뿌려집니다.

`counters()` 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수`decimal`)로 렌더링 됩니다.

### 기본 예제

여기서는 제목 앞에 숫자를 붙여봅니다.

#### CSS

```css
body {
  counter-reset: section; /\* counter 이름을 'section'으로 지정합니다.
 초깃값은 0입니다. \*/
}

h3::before {
  counter-increment: section; /\* section의 카운터 값을 1씩 증가시킵니다. \*/
  content: "Section " counter(section) ": "; /\* section의 카운터 값을 표시합니다. \*/
}
```

#### HTML

```html
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
```

#### 결과

### 더 정교한 예시

카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.

#### CSS

```css
:root {
  counter-reset: link;
}

a[href] {
  counter-increment: link;
}

a[href]:empty::after {
  content: "[" counter(link) "]";
}
```

#### HTML

```html
<p>See <a href="https://www.mozilla.org/"></a></p>
<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
<p>See also <a href="https://developer.mozilla.org/"></a></p>
```

#### Result

중첩 카운터
------

CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. `counters()` (en-US) 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.

### 중첩 카운터 예제

#### CSS

```css
ol {
  counter-reset: section; /\* ol 요소마다
 이름이 section인
 새 인스턴스를 생성합니다. \*/
  list-style-type: none;
}

li::before {
  counter-increment: section; /\* 해당 인스턴스 안에서
 section 카운터 값 증가 \*/
  content: counters(section, ".") " "; /\* section 카운터 값을
 마침표(.)로 구분해 결합하여
 표시합니다. \*/
}
```

#### HTML

```html
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.4.1 -->
          <li>item</li>  <!-- 2.4.2 -->
          <li>item</li>  <!-- 2.4.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>
```

#### 결과

명세서
---

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

See also
--------

* `counter-reset` (en-US)
* `counter-increment` (en-US)
* `@counter-style` (en-US)


prefers-color-scheme - CSS: Cascading Style Sheets

prefers-color-scheme
====================

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

사용자는 운영체제 설정(라이트 모드 또는 다크 모드)이나 사용자 에이전트 설정에서 선호하는 테마를 나타낼 수 있습니다.

구문
--

`light`

사용자가 시스템에 라이트 테마를 사용하는 것을 선호하거나 선호하는 테마를 알리지 않았음을 나타냅니다.

`dark`

사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.

예제
--

요소들에게 초기 색상을 설정합니다. 이 요소들이 사용자의 선호 테마에 따라 다른 스타일로 나타나도록 할 수 있습니다.

### HTML

```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS

```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### 결과

명세서
---

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* Simulate prefers-color-scheme in Firefox (Firefox Page Inspector > Examine and edit CSS)
* Video tutorial: Coding a Dark Mode for your Website
* Redesigning your product and website for dark mode
* Windows, macOS, Android, or 다른 플랫폼에서 색상 변경하기


translate() - CSS: Cascading Style Sheets

translate()
===========

**`translate()`** CSS 함수 (en-US) 는 요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경합니다.
 실행 결과로 `<transform-function>` 데이터 유형을 반환합니다.

시도해보기
-----

이 변환은 2차원 벡터의 특징을 가집니다. 벡터의 좌표들은 요소가 각 방향으로 얼마나 이동하는지를 정의합니다.

구문
--

```css
/\* 단일 <length-percentage> 값 \*/
transform: translate(200px);
transform: translate(50%);

/\* 이중 <length-percentage> 값 \*/
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
```

### 값

* 단일 `<length-percentage>` 값
    + 이 값은 변환하는 벡터의 가로축(수평, x축)을 나타내는 `<length>` 또는 `<percentage>` 입니다.
     변환하는 벡터의 세로축(수직, y축)은 `0`으로 설정됩니다. 예를 들어, `translate(2px)`은 `translate(2px, 0)`과 동일합니다.
     백분율 값은 `transform-box` (en-US) 속성에 의해 정의된 참조 상자의 너비를 나타냅니다.
* 이중 `<length-percentage>` 값
    + 이 값은 변환하는 벡터의 가로축(수평, x축)과 세로축(수직, y축)을 모두 나타내는 두 개의
     `<length>` 또는 `<percentage>` 를 설명합니다.
     백분율 값의 첫 번째는 `transform-box` (en-US) 속성에 의해 정의된 참조 상자의 너비를 나타내며, 두 번째는 높이를 나타냅니다.

| ℝ^2의 데카르트 좌표(Cartesian coordinates) | ℝℙ^2의 동차좌표(Homogeneous coordinates) | ℝ^3의 데카르트 좌표(Cartesian coordinates) | ℝℙ^3의 동차좌표(Homogeneous coordinates) |
| --- | --- | --- | --- |
|
 변환은 ℝ^2의 선형 변환이 아니며,
 데카르트 좌표 행렬을 사용해 나타낼 수 없습니다.
  |

(

1

0

tx

0

1

ty

0

0

1

)

 |

(

1

0

tx

0

1

ty

0

0

1

)

 |

(

1

0

0

tx

0

1

0

ty

0

0

1

0

0

0

0

1

)

 |
| `[1 0 0 1 tx ty]` |

### 형식 구문

```css
translate(<length-percentage>, <length-percentage>?)
```

예제
--

### 단일 축 변환

#### HTML

```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /\* translateX(10px) 또는 translate(10px, 0)과 동일 \*/
  transform: translate(10px);
  background-color: pink;
}
```

#### 결과

### x축과 y축 변환

#### HTML

```html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
```

#### CSS

```css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}
```

#### 결과

명세서
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-translate |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `transform`
* `<transform-function>`
* `translate` (en-US)


scaleX() - CSS: Cascading Style Sheets

scaleX()
========

CSS 함수인 **`scaleX()`** x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는 `<transform-function>` 데이터 타입 입니다.

![](/ko/docs/Web/CSS/transform-function/scaleX/scalex.png)

스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.`scaleX(-1)` 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다 ( `transform-origin` (en-US) 속성의해 지정되어집니다).

**참고:** `scaleX(sx)` 는 `scale(sx, 1)` 또는 `scale3d(sx, 1, 1)` 와 같습니다.

Syntax
------
```

scaleX(s)
```

### Values

`s`

요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 `<number>` 입니다.

| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
|

s
0

0
1

 |

s
 0
0

0
 1
0

0
0
1

 |

s
 0
0

0
 1
0

0
0
1

 |

s
 0
0
0

0
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[s 0 0 1 0 0]` |

Examples
--------

### HTML

```html
<div>Normal</div>
<div class="scaled">Scaled</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scaleX(0.6);
  background-color: pink;
}
```

### Result

명세서
---

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-scalex |

See also
--------

* `transform`
* `<transform-function>`


matrix() - CSS: Cascading Style Sheets

matrix()
========

**`matrix()`** CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 `<transform-function>` 데이터 타입입니다.

**참고:** **주의:** `matrix(a, b, c, d, tx, ty)` 는 `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` 를 짧게 쓴 것입니다.

Syntax
------

`matrix()` 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

**참고:** **주의:** Firefox 16까지, Gecko(엔진) `tx`, `ty` 에`<length>` 값을 허용했습니다.
```

matrix(a, b, c, d, tx, ty)
```

### Values

`a` `b` `c` `d`

`<number>`는 선형 변환(linear transformation)을 설명합니다.

`tx` `ty`

`<number>`는 적용 할 이동(translation)을 설명합니다.

| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
|

a
c

b
d

 |

a
c
tx

b
d
ty

0
0
1

 |

a
c
tx

b
d
ty

0
0
1

 |

a
c
0
tx

b
d
0
ty

0
0
1
0

0
0
0
1

 |
| `[a b c d tx ty]` |

Examples
--------

### HTML

```html
<div>Normal</div>
<div class="changed">Changed</div>
```

### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}
```

### Result

Browser compatibility
---------------------

호환성 정보는 `<transform-function>` 데이터 타입을 확인하세요.

See also
--------

* `transform`
* `<transform-function>`
* `matrix3d()` (en-US)
* Understanding the CSS Transforms Matrix


일관성있는 리스트 들여쓰기 - CSS: Cascading Style Sheets

일관성있는 리스트 들여쓰기
==============

가장 흔하게 리스트에 적용되는 스타일 변경은 들여쓰기(indentation)거리의 변경입니다. 즉, 리스트 아이템을 오른쪽으로 얼마나 멀리 들여 쓸 것인가하는 것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.

왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.

리스트 만들기
-------

먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.

![Figure 1](/ko/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure1.gif)

빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.

![Figure 2](/ko/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure2.gif)

이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, `<ul>`) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.

![Figure 3](/ko/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure3.gif)

여기서, 푸른 점선 경계선은 `<ul>`엘리먼트의 내용물 지역의 경계를 보여줍니다. `<ul>`엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.

이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.

![Figure 4](/ko/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure4.gif)

보여지는 것으론, 마커들은 `<ul>`의 내용물-지역의*바깥* 에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 `<li>`엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 `<lt>`의 내용물-지역의 밖에 매달려 있으나 여전히 `<li>`에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.

바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 `<li>`엘리먼트에 지정된 보더밖에 놓이며, `list-sytle-position`값으로 `outside`를 취하게 되는 것입니다. 만일 값이 `inside`로 바뀌게 되면, 마커들은, 비록 `<li>`의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, `<li>` 안쪽으로 옯겨지게 됩니다.

두번 들여쓰기
-------

그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.
```

ul, li {margin-left: 0; padding-left: 0;}
```

만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.

이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.

1. 각 `<li>` 엘리먼트에 왼쪽 마진을 준다.
2. `<ul>` 엘리먼트에 왼쪽 마진을 준다.
3. `<ul>` 엘리먼트에 왼쪽 패딩을 준다.

결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.

이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 `<ul>`에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 `<ul>` 엘리먼트에 배경색을 적용하고 리스트 아이템과 `<ul>` 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.

![Figure 5](/ko/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure5.gif)

반면, Gecko는 `<ul>` 엘리먼트에 대해서 40픽셀의 왼쪽*패딩* 을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.

![Figure 6](/ko/docs/Web/CSS/CSS_lists/Consistent_list_indentation/consistent-list-indentation-figure6.gif)

보이는 바와 같이, 마커들은, 어디에 있게 되건간에, `<li>` 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 `<ul>`가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 `<ul>` 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.

일관성 찾기
------

모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, `<ul>` 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩*둘다* 지정해야 한다는 것입니다. 이런 목적으로 `<li>` 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:
```

ul {margin-left: 0; padding-left: 40px;}
```

만약, 익스플로러/오페라 모델을 따르길 원한다면:
```

ul {margin-left: 40px; padding-left: 0;}
```

라고 쓰면 됩니다.

물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 `1.25em`로 정해 줄 수도 있습니다 — 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.
```

ul {margin-left: 0; padding-left: 0;}
```

하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 `body`가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.

결론
--

결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.

권장 사항
-----

* 리스트의 들여쓰기간격을 바꿀때에는 패딩과 마진 둘다 지정하는 것을 잊지마세요.
Original Document Information
-----------------------------

* Author(s): Eric A. Meyer, Netscape Communications
* Last Updated Date: Published 30 Aug 2002
* Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
* Note: This reprinted article was originally part of the DevEdge site.