recursal/MDN huggingface dataset:
CSS 기본 박스 모델 입문
===============

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 **CSS 기본 박스 모델**에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.

하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.

![CSS Box model](/ko/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model/boxmodel.png)

콘텐츠 영역
------

**콘텐츠 영역**(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.

`box-sizing` 속성의 값이 기본 값인 `content-box`이며 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 `width`, `min-width`, `max-width`, `height`, `min-height`, `max-height` 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.

안쪽 여백(패딩) 영역
------------

**안쪽 여백 영역**(패딩 영역, padding area)은 안쪽 여백 경계(padding edge)가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.

안쪽 여백의 두께는 `padding-top`, `padding-right`, `padding-bottom`, `padding-left`와 단축 속성인 `padding`이 결정합니다.

테두리 영역
------

**테두리 영역**(border area)은 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.

테두리의 두께는 `border-width`와 단축 속성인 `border`가 결정합니다. `box-sizing` 속성의 값이 `border-box`라면 테두리 영역의 크기를 `width`, `min-width`, `max-width`, `height`, `min-height`, `max-height` 속성을 사용해 명시적으로 설정할 수 있습니다. 박스의 배경(`background-color` 또는 `background-image`)은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려집니다. 이 기본동작 방식은 `background-clip` 속성으로 바꿀 수 있습니다.

바깥 여백(마진) 영역
------------

**바깥 여백 영역**(마진 영역, margin area)은 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.

바깥 여백 영역의 크기는 `margin-top`, `margin-right`, `margin-bottom`, `margin-left`와 단축 속성인 `margin`이 결정합니다. 여백 상쇄가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.

끝으로, 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는 요소 주위에 테두리와 안쪽 여백이 표시되더라도 `line-height` (en-US) 속성으로 결정한다는 점을 주의하세요.

같이 보기
-----

* 컨테이닝 블록의 모든 것
* 종속 (en-US)
* 계단식 및 상속
* CSS 주요 개념:
    + CSS 문법
    + @규칙
    + 주석
    + 명시도
    + 상속
    + 레이아웃 모드
    + 시각적 서식 모델
    + 마진 중첩
    + 값
        - 초기 값
        - 계산 값
        - 사용 값
        - 실제 값 (en-US)
    + 값 정의 구문
    + 단축 속성
    + 대체 요소
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 이해하기
================

우리들은 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
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
쌓임 맥락 예제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
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
접근성을 위한 미디어 쿼리 사용하기
===================

**미디어쿼리**(**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");
  }
}
```
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 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가지 방식
대열과 탈대열
=======

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

다음 예제에서는 머리글, 단락, 목록 및 `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에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

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

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

내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 `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와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 플렉스박스 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.