recursal/MDN huggingface dataset:
margin-left
===========

**`margin-left`** CSS 속성은 요소의 왼쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

시도해보기
-----

구문
--


```css
/\* <length> 값 \*/
margin-left: 20px; /\* 절대 길이 \*/
margin-left: 1em; /\* 글씨 크기에 상대적 \*/
margin-left: 5%; /\* 가장 가까운 블록 컨테이너의 너비에 상대적 \*/

/\* 키워드 값 \*/
margin-left: auto;

/\* 전역 값 \*/
margin-left: inherit;
margin-left: initial;
margin-left: unset;
```


`margin-left` 속성은 키워드 `auto`, `<length>`, `<percentage>`를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

### 값

`<length>`

바깥 여백 크기의 고정 값.

`<percentage>`

바깥 여백 크기와 블록 컨테이너 너비의 비율.

`auto`

사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. `margin-left`와 `margin-right`의 값이 모두 `auto`라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다.

| `display` (en-US) 값 | `float` 값 | `position` 값 | `auto`의 계산 값 | 설명 |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *any* | `static` or `relative` | `0` | 인라인 레이아웃 모드 |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *any* | `static` or `relative` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the element inside its parent. | 블록 레이아웃 모드 |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` or `right` | `static` or `relative` | `0` | 블록 레이아웃 모드 (플로팅 요소) |
| *any* `table-*`*, except* `table-caption` | *any* | *any* | `0` | 내부 `table-*` 요소는 바깥 여백을 가지지 않습니다. 대신 `border-spacing`을 사용하세요. |
| *any, except `flex`,* `inline-flex`*, or* `table-*` | *any* | *`fixed`* or `absolute` | `0`, except if both `margin-left` and `margin-right` are set to `auto`. In this case, it is set to the value centering the border area inside the available `width`, if fixed. | 절대위치 레이아웃 모드 |
| `flex`, `inline-flex` | *any* | *any* | `0`, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal `auto` margins. | 플렉스박스 레이아웃 모드 |

### 형식 구문
```

margin-left =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--


```css
.content {
  margin-left: 5%;
}
.sidebox {
  margin-left: 10px;
}
.logo {
  margin-left: -5px;
}
```

명세
--

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except elements with table `display` (en-US) types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| 계산 값 | the percentage as specified or the absolute length |
| Animation type | a length |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
user-select
===========

CSS **`user-select`** 속성은 사용자가 텍스트를 선택할 수 있는지 지정합니다.


```css
/\* 키워드 값 \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/\* 전역 값 \*/
user-select: inherit;
user-select: initial;
user-select: unset;
```

구문
--

`none`

이 요소와 아래 요소의 텍스트를 선택하지 못하도록 막습니다. 단 `Selection` (en-US) 객체는 `none`인 요소(와 그 아래)를 포함할 수 있습니다.

`auto`

`auto`의 사용값은 아래와 같이 결정됩니다.

* `::before`와 `::after` 의사 요소의 사용값은 `none`입니다.
* 편집 가능한 요소의 사용값은 `contain`입니다.
* 그렇지 않고, 부모 요소 `user-select`의 사용값이 `all`이면 이 요소의 사용값도 `all`입니다.
* 그렇지 않고, 부모 요소 `user-select`의 사용값이 `none`이면 이 요소의 사용값도 `none`입니다.
* 그렇지 않으면 사용값은 `text`입니다.

`text`

사용자가 텍스트를 선택할 수 있습니다.

`all`

요소의 콘텐츠가 원자적으로 선택됩니다. 즉 선택 범위는 이 요소와 그 아래의 자손 전체를 포함해야 하며 일부만 담을 수는 없습니다. 하위 요소에서 더블 클릭이나 콘텍스트 클릭이 발생한 경우, `all`을 지정한 조상 요소 중 제일 상위 요소를 선택합니다.

`contain`

선택의 시작을 이 요소 안에서 한 경우, 범위가 요소 바깥으로 벗어날 수 없습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `auto` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

형식 구문
-----
```

user-select =   
  auto     |  
  text     |  
  none     |  
  contain  |  
  all        
  
```

예제
--

### HTML


```html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
```

### CSS


```css
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

같이 보기
-----

* `::selection` (en-US) 의사 요소
* JavaScript `Selection` (en-US) 객체.
letter-spacing
==============

**`letter-spacing`** CSS 속성은 글자 사이의 간격을 조절합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값 \*/
letter-spacing: normal;

/\* <length> 값 \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/\* 전역 값 \*/
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
```

### 값

`normal`

현재 글꼴의 기본 간격. `0`과 달리, `auto`는 사용자 에이전트가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.

`<length>`

기본 간격에 **추가**할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.

### 형식 구문
```

letter-spacing =   
  normal    |  
  <length>    
  
```

예제
--

### HTML


```html
<p class="normal">글자 간격</p>
<p class="em-wide">글자 간격</p>
<p class="em-wider">글자 간격</p>
<p class="em-tight">글자 간격</p>
<p class="px-wide">글자 간격</p>
```

### CSS


```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

### 결과

접근성 고려사항
--------

`letter-spacing` 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.

글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

|  |  |
| --- | --- |
| 초기값 | `normal` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US) and `::first-line` (en-US). |
| 상속 | yes |
| 계산 값 | an optimum value consisting of either an absolute length or the keyword `normal` |
| Animation type | a length |

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

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

같이 보기
-----

* `font-kerning` (en-US)
outline
=======

CSS **`outline`** 단축 속성은 모든 외곽선 속성을 한꺼번에 지정합니다.

시도해보기
-----

구성 속성
-----

`outline`은 단축 속성으로서 다음의 하위 속성을 포함합니다.

* `outline-color` (en-US)
* `outline-style`
* `outline-width`
구문
--


```css
/\* style \*/
outline: solid;

/\* color | style \*/
outline: #f66 dashed;

/\* style | width \*/
outline: inset thick;

/\* color | style | width \*/
outline: green solid 3px;

/\* 전역 값 \*/
outline: inherit;
outline: initial;
outline: unset;
```


`outline` 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.

**참고:** 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 `none`이기 때문인데, 주목할만한 예외는 `<input>` (en-US) 요소로 브라우저의 기본 스타일이 적용됩니다.

### 값

`<'outline-color'>`

외곽선의 색을 설정합니다. 누락 시 기본값은 `currentcolor`입니다. `outline-color` (en-US)를 참고하세요.

`<'outline-style'>`

외곽선의 스타일을 설정합니다. 누락 시 기본값은 `none`입니다. `outline-style`을 참고하세요.

`<'outline-width'>`

외곽선의 두께를 설정합니다. 누락 시 기본값은 `medium`입니다. `outline-width`를 참고하세요.

설명
--

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.

* 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
* 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.

다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 초깃값으로 설정됩니다.

접근성 고려사항
--------

`outline`에 `0` 또는 `none` 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.

* How to Design Useful and Usable Focus Indicators
* WCAG 2.1: Understanding Success Criterion 2.4.7: Focus Visible
형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `outline-color` (en-US): `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `outline-color` (en-US): For the keyword `auto`, the computed value is `currentcolor`. For the color value, if the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
* `outline-width`: an absolute length; if the keyword `none` is specified, the computed value is `0`
* `outline-style`: as specified
 |
| Animation type | as each of the properties of the shorthand:* `outline-color` (en-US): a color
* `outline-width`: a length
* `outline-style`: by computed value type
 |

형식 구문
-----
```

outline =   
  <'outline-color'>  ||  
  <'outline-style'>  ||  
  <'outline-width'>    
  
```

예제
--

### 외곽선으로 포커스 스타일 설정

#### HTML


```html
<a href="#">This link has a special focus style.</a>
```


#### CSS


```css
a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-collapse
===============

**`border-collapse`** CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.

시도해보기
-----

분리(*separated*) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 `border-spacing` 속성에 의해 주어집니다.

상쇄(*collapsed*) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, `inset`의 `border-style` 값은 `groove`처럼, `outset`은 `ridge`처럼 행동합니다.

구문
--


```css
/\* Keyword values \*/
border-collapse: collapse;
border-collapse: separate;

/\* Global values \*/
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;
```

### 값

`separate`

분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.

`collapse`

상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.

### 형식 구문
```

border-collapse =   
  separate  |  
  collapse    
  
```

예제
--

### 브라우저 엔진의 다색 표

#### HTML


```html
<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ie">Internet Explorer</td>
      <td class="tr">Trident</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ie">Internet Explorer</td>
      <td class="tr">Trident</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
```


#### CSS


```css
.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px;
  border-width: 6px;
}
table th,
table td {
  border: solid 3px;
}
.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ie {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}
```


#### 결과

명세
--

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-border-collapse |

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

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

같이 보기
-----

* `border-spacing`, `border-style`
* The `border-collapse` property alters the appearance of the `<table>` (en-US) HTML element.
CSS counter styles
==================

**CSS counter styles** 모듈을 사용하면 사용자 정의 카운터 스타일을 정의할 수 있습니다.

참고서
---

### 속성

* `counter-increment` (en-US)
* `counter-reset` (en-US)
### 함수

* `symbols()` (en-US)
### 규칙 지시자

* `@counter-style` (en-US)
    + `system` (en-US)
    + `additive-symbols` (en-US)
    + `negative` (en-US)
    + `prefix` (en-US)
    + `suffix` (en-US)
    + `range` (en-US)
    + `pad` (en-US)
    + `speak-as` (en-US)
    + `fallback` (en-US)
안내서
---

CSS 카운터 사용하기

CSS 카운터 속성을 사용하여 목록 카운터를 제어하는 방법을 설명합니다.

명세서
---

| Specification |
| --- |
| CSS Counter Styles Level 3  |

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

{{Compat}}
flex-wrap
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
CSS **`flex-wrap`** property는 `flex-item` 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.

시도해보기
-----

여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. Using CSS flexible boxes

Syntax
------


```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/\* Global values \*/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
```


`flex-wrap` 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.

### Values

아래는 사용 가능한 속성값들입니다:

`nowrap`

기본 설정값으로, `flex-container` 부모요소 영역을 벗어나더라도 `flex-item` 요소들을 **한 줄**에 배치합니다. 시작점은 `flex-direction` 에 의해 결정된 방향으로 적용됩니다.

`wrap`

`flex-item` 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. `nowrap` 속성과 마찬가지로 요소가 배치되는 시작점은 `flex-direction` 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.

`wrap-reverse`

`wrap` 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.

### Formal syntax
```

flex-wrap =   
  nowrap        |  
  wrap          |  
  wrap-reverse    
  
```

Examples
--------

### HTML


```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```

### CSS


```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 50%;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```

### Results

명세서
---

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |

|  |  |
| --- | --- |
| 초기값 | `nowrap` |
| 적용대상 | flex containers |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Mastering wrapping of flex items (en-US)*
유형 선택자
======

CSS **유형 선택자**는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.


```css
/\* All <a> elements. \*/
a {
  color: red;
}
```

구문
--
```

element { style properties }
```

예제
--

### CSS


```css
span {
  background-color: DodgerBlue;
  color: #ffffff;
}
```

### HTML


```html
<span>텍스트를 가진 span입니다.</span>
<p>텍스트를 가진 p입니다.</p>
<span>또 다시 텍스트를 가진 span입니다.</span>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # type-selectors |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-line-clamp
==================

**`-webkit-line-clamp`** CSS 속성은 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.

`display` (en-US) 속성을 `-webkit-box` 또는 `-webkit-inline-box`로, 그리고 `-webkit-box-orient` (en-US) 속성을 `vertical`로 설정한 경우에만 동작합니다.

`-webkit-line-clamp`만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 `overflow` 속성 또한 `hidden`으로 설정해야 합니다.

앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.

**참고:** `-webkit-line-clamp`는 원래 WebKit이 구현했었으며 몇몇 문제점을 가지고 있으나 레거시 지원을 위해 표준화를 거쳤습니다. CSS Overflow Module Level 3 명세의 `line-clamp`가 `-webkit-line-clamp`를 대체하기 위해 정의된 속성입니다.

구문
--


```css
/\* 키워드 값 \*/
-webkit-line-clamp: none;

/\* <integer> 값 \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* 전역 값 \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
```


`none`

콘텐츠를 자르지 않습니다.

`<integer>`

몇 줄 뒤에 콘텐츠를 자를지 지정합니다. 0보다 커야 합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | by computed value type |

형식 구문
-----
```

-webkit-line-clamp =   
  none             |  
  <integer [1,∞]>    
  
```

예제
--

### 문단 자르기

#### HTML


```html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>
```


#### CSS


```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

같이 보기
-----

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`
CSS Masking
===========

**CSS Masking**은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.

참고서
---

### 속성

* `clip` (en-US) 
지원이 중단되었습니다
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border` (en-US)
* `mask-border-mode` (en-US)
* `mask-border-outset` (en-US)
* `mask-border-repeat` (en-US)
* `mask-border-slice` (en-US)
* `mask-border-source` (en-US)
* `mask-border-width` (en-US)
* `mask-clip` (en-US)
* `mask-composite` (en-US)
* `mask-image` (en-US)
* `mask-mode` (en-US)
* `mask-origin` (en-US)
* `mask-position` (en-US)
* `mask-repeat` (en-US)
* `mask-size` (en-US)
* `mask-type` (en-US)
명세서
---

| Specification |
| --- |
| CSS Masking Module Level 1  |
CSS 배경 및 테두리
============

**CSS Backgrounds and Borders** 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다. (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)

참고서
---

### 속성

* `background`
* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position` (en-US)
* `background-position-x` (en-US)
* `background-position-y` (en-US)
* `background-repeat`
* `background-size` (en-US)
* `border`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius` (en-US)
* `border-bottom-right-radius` (en-US)
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius` (en-US)
* `border-top-right-radius` (en-US)
* `border-top-style`
* `border-top-width`
* `border-width`
* `box-shadow` (en-US)
도구
--

다수의 배경 사용하기

하나의 요소에 여러 배경을 적용하는 법을 배웁니다.

배경 이미지 크기 조정하기

배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.

CSS로 HTML 요소에 색 입히기 (en-US)

HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.

Border-image 생성기

테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.

Border-radius 생성기

둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.

Box-shadow 생성기 (en-US)

요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3  |
CSS Fonts
=========

**CSS Fonts**은 글꼴 관련 속성과 글꼴 리소스가 로드되는 방식을 정의하는 CSS 모듈입니다. 패밀리, 크기 및 굵기, 행의 높이, 한 문자에 여러 글자를 사용할 수 있을 때 사용하는 자형(glyph) 변형과 같은 글꼴 스타일을 정의할 수 있습니다.

기본 예제
-----

다음 예제에서는 기본 글꼴 속성을 사용하여 텍스트 단락의 스타일을 지정하는 간단한 예제를 보여줍니다.


```css
p {
  width: 600px;
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  font-weight: 100;
  font-variant-ligatures: normal;
  font-size: 2rem;
  letter-spacing: 1px;
}
```



```html
<p>
  Three hundred years ago<br />
  I thought I might get some sleep<br />
  I stretched myself out on an antique bed<br />
  An' my spirit did a midnite creep
</p>
```


결과는 다음과 같습니다.

가변 글꼴 예제들
---------

v-fonts.com 와 axis-praxis.org에서 다양한 가변 글꼴 예제를 찾을 수 있습니다. 또한, 자세한 정보와 사용법은 가변 글꼴 가이드 (en-US)를 참조하십시오.

참고서
---

### 속성

* `font`
* `font-family` (en-US)
* `font-feature-settings`
* `font-kerning` (en-US)
* `font-language-override` (en-US)
* `font-optical-sizing` (en-US)
* `font-size`
* `font-size-adjust` (en-US)
* `font-stretch` (en-US)
* `font-style` (en-US)
* `font-synthesis`
* `font-variant` (en-US)
* `font-variant-alternates` (en-US)
* `font-variant-caps` (en-US)
* `font-variant-east-asian` (en-US)
* `font-variant-ligatures` (en-US)
* `font-variant-numeric` (en-US)
* `font-variant-position` (en-US)
* `font-variation-settings` (en-US)
* `font-weight`
* `line-height` (en-US)
### @-규칙

* `@font-face`
* `@font-feature-values` (en-US)
가이드
---

* 기본적인 텍스트 및 글꼴 스타일링
    + 초보자를 위한 이 학습 기사에서는 텍스트/글꼴의 스타일링에 있어 기본적인 부분을 상세하게 설명하고 있습니다. 글꼴의 굵기, 패밀리, 스타일링의 설정, 글꼴의 일괄 지정, 텍스트의 배치 등의 효과, 행과 문자의 간격 설정 등을 포함합니다.
* OpenType 글꼴 특성 가이드 (en-US)
    + 글꼴의 특성 혹은 변형은 OpenType 글꼴에 포함된 다양한 자형(glyphs)이나 문자 스타일을 나타냅니다. 이것에는 합자(ligatures)('fi'나 'ffl'와 같은 특수한 형태의 문자 조합), 커닝(kerning)(특정 글자꼴 쌍 사이의 간격 조정), 분수, 숫자의 스타일, 외에도 다양한 것이 포함됩니다.이러한 기능은 모두 OpenType 특성(OpenType Features)이라고 하며, 특정 속성과 낮은 수준의 제어 속성인 — `font-feature-settings`을 통하여 웹에서 사용할 수 있습니다. 이 기사에서는 CSS에서 OpenType 글꼴 특성을 사용하는 것에 있어 알아야 할 모든 것들을 소개합니다.
* 가변 글꼴 가이드 (en-US)
    + **가변 글꼴**은 모든 너비, 굵기, 스타일별로 각각의 글꼴 파일을 사용하는 대신 서체의 다양한 변형을 단일 파일로 통합하는 것이 가능해지도록 하는 OpenType 글꼴 사양의 진화입니다. 이 기사에서는 가변 글꼴을 사용하기 위해서 필요한 모든 것을 제공합니다.
명세서
---

| Specification |
| --- |
| CSS Fonts Module Level 4  |