recursal/MDN huggingface dataset:
:first-of-type
==============

CSS **`:first-of-type`** 의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.


```css
/\* Selects any <p> that is the first element
 of its type among its siblings \*/
p:first-of-type {
  color: red;
}
```


**참고:** 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

구문
--

Error: could not find syntax for this item예제
--

### 첫 문단 스타일링

#### HTML


```html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
```


#### CSS


```css
p:first-of-type {
  color: red;
  font-style: italic;
}
```


#### 결과

### 중첩 요소

아래 코드는 중첩 요소를 선택하는 방법을 보입니다. 기본 선택자를 지정하지 않은 경우 전체 선택자(`*`)가 암시된다는 점도 볼 수 있습니다.

#### HTML


```html
<article>
  <div>This `div` is first!</div>
  <div>This <span>nested `span` is first</span>!</div>
  <div>
    This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
  </div>
  <div>This <span>nested `span` gets styled</span>!</div>
  <b>This `b` qualifies!</b>
  <div>This is the final `div`.</div>
</article>
```


#### CSS


```css
article :first-of-type {
  background-color: pink;
}
```


#### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # first-of-type-pseudo |

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

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

같이 보기
-----

* `:first-child`, `:last-of-type` (en-US), `:nth-of-type` (en-US)
::after (:after)
================

CSS에서, **`::after`** 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 `content` 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.


```css
/\* 링크 뒤에 화살표 추가 \*/
a::after {
  content: "→";
}
```


**참고:** `::before`와 `::after`로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, `<img>`나 `<br>` 등 대체 요소에 적용할 수 없습니다.

구문
--

Error: could not find syntax for this item

**참고:** 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터`::after` 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 `:after`도 허용합니다.

예제
--

### 간단한 사용법

평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.

#### HTML


```html
<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>
```


#### CSS


```css
.exciting-text::after {
  content: " <- 흥미진진!";
  color: green;
}

.boring-text::after {
  content: " <- 먼지풀풀";
  color: red;
}
```


#### 결과

### 장식 예제

`content` 속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.

#### HTML


```html
<span class="ribbon">마지막의 주황색 상자를 바라보세요.</span>
```


#### CSS


```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "멋진 주황색 상자입니다.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```


#### 결과

### 툴팁

다음 예제는 `::after`와 함께 CSS `attr()` (en-US) 표현식, `data-descr` 사용자 설정 데이터 속성을 사용해 툴팁을 구현합니다. JavaScript 없이요!

`tabindex="0"`을 추가해 각 `span`에 포커스가 갈 수 있도록 지정한 후, CSS `:focus` 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 요약과 세부 요소 (en-US)처럼 의미를 담은 요소를 활용하는 편이 좋습니다.

#### HTML


```html
<p>
  이 예제는
  <span tabindex="0" data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께
  약간의
  <span tabindex="0" data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을
  포함합니다.
</p>
```


#### CSS


```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

같이 보기
-----

* `::before` (en-US)
* `content`
CSS Generated Content
=====================

**CSS Generated Content**는 요소에 콘텐츠를 추가하는 방법을 정의하는 CSS 모듈입니다. 생성 콘텐츠는 익명의 대체 요소에 콘텐츠를 추가하거나 매우 제한된 상황에서 DOM 노드의 콘텐츠를 생성된 값으로 대체하는 데 사용될 수 있습니다.
 자세한 내용은 생성 콘텐츠에 대한 안내 방법 을 참조하고 구현 정보는 `content` 와 `quotes` (en-US) 속성을 참조하십시오.

참고서
---

### 속성

* `content`
* `quotes` (en-US)
명세서
---

| Specification |
| --- |
| CSS Generated Content Module Level 3  |

같이 보기
-----

* CSS 생성 콘텐츠의 사용
* `content`
* `quotes` (en-US)
* `::before` (en-US)
* `::after`
* `::marker` (en-US)
border-top-style
================

**`border-top-style`** CSS 속성은 요소 테두리의 위쪽 스타일을 지정합니다.

시도해보기
-----

**참고:** 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문
--


```css
/\* 키워드 값 \*/
border-top-style: none;
border-top-style: hidden;
border-top-style: dotted;
border-top-style: dashed;
border-top-style: solid;
border-top-style: double;
border-top-style: groove;
border-top-style: ridge;
border-top-style: inset;
border-top-style: outset;

/\* 전역 값 \*/
border-top-style: inherit;
border-top-style: initial;
border-top-style: unset;
```


`border-top-style` 속성은 `border-style` 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

### 형식 구문
```

border-top-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

예제
--

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-top-style example classes \*/
.b1 {
  border-top-style: none;
}
.b2 {
  border-top-style: hidden;
}
.b3 {
  border-top-style: dotted;
}
.b4 {
  border-top-style: dashed;
}
.b5 {
  border-top-style: solid;
}
.b6 {
  border-top-style: double;
}
.b7 {
  border-top-style: groove;
}
.b8 {
  border-top-style: ridge;
}
.b9 {
  border-top-style: inset;
}
.b10 {
  border-top-style: outset;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-style |

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-right-style`, `border-bottom-style`, `border-left-style`, `border-style`.
* 위쪽 테두리 관련 CSS 속성: `border-top`, `border-top-color`, `border-top-width`.
border-image-outset
===================

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

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

* Learn more
* See full compatibility
* Report feedback
**`border-image-outset`** CSS 속성은 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.

`border-image-outset`으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.

시도해보기
-----

구문
--


```css
/\* <length> 값 \*/
border-image-outset: 1rem;

/\* <number> 값 \*/
border-image-outset: 1.5;

/\* 세로방향 | 가로방향 \*/
border-image-outset: 1 1.2;

/\* 위 | 가로방향 | 아래 \*/
border-image-outset: 30px 2 45px;

/\* 위 | 오른쪽 | 아래 | 왼쪽 \*/
border-image-outset: 7px 12px 14px 5px;

/\* 전역 값 \*/
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: unset;
```


`border-image-outset` 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 `<length>`나 `<number>`입니다. 음수는 유효하지 않습니다.

* **한 개의 값**은 모든 네 면의 거리를 설정합니다.
* **두 개의 값**을 지정하면 첫 번째는 **위와 아래**, 두 번째는 **왼쪽과 오른쪽** 거리를 설정합니다.
* **세 개의 값**을 지정하면 첫 번째는 **위**, 두 번째는 **왼쪽과 오른쪽,** 세 번째 값은 **아래** 거리를 설정합니다.
* **네 개의 값**을 지정하면 각각 **상, 우, 하, 좌** 순서로 거리를 지정합니다. (시계방향)
### 값

`<length>`

테두리 거리의 크기로 고정값 사용.

`<number>`

테두리 거리의 크기로 `border-width`의 배수 사용.

### 형식 구문
```

border-image-outset =   
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}    
  
```

예제
--

### HTML


```html
<div id="outset">밖으로 나간 테두리를 가지고 있어요!</div>
```

### CSS


```css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* = 1.5 \* 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}
```

### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-outset |

|  |  |
| --- | --- |
| 초기값 | `0` |
| 적용대상 | all elements, except internal table elements when `border-collapse` is `collapse`. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as specified, but with relative lengths converted into absolute lengths |
| Animation type | by computed value type |

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

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

**`border-left-color`** CSS 속성은 요소의 왼쪽 테두리 색상을 지정합니다. `border-color` 또는 `border-left` 단축 속성으로도 지정할 수 있습니다.

시도해보기
-----

구문
--


```css
/\* <color> 값 \*/
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255, 0, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: currentColor;
border-left-color: transparent;

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


`border-left-color` 속성은 하나의 값을 사용해 지정합니다.

### 값

`<color>`

왼쪽 테두리의 색상.

### 형식 구문
```

border-left-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--

### 테두리를 가진 간단한 상자

#### HTML


```html
<div class="mybox">
  <p>
    This is a box with a border around it. Note which side of the box is
    <span class="redtext">red</span>.
  </p>
</div>
```


#### CSS


```css
.mybox {
  border: solid 0.3em gold;
  border-left-color: red;
  width: auto;
}

.redtext {
  color: red;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

|  |  |
| --- | --- |
| 초기값 | `currentcolor` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | computed color |
| Animation type | a color |

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

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

같이 보기
-----

* 테두리 관련 CSS 단축 속성: `border`, `border-left`, `border-color`.
* 다른 방향 테두리의 색상 관련 CSS 단축 속성: `border-top-color`, `border-right-color`, `border-bottom-color`.
* 왼쪽 테두리 관련 CSS 속성: `border-left-style`, `border-left-width`.
미디어 쿼리
======

**미디어 쿼리**는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.

미디어 쿼리는 반응형 디자인의 핵심 구성 요소입니다. 예를 들어, 미디어 쿼리는 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드(portrait mode)일 때 단락의 패딩 값을 증가시킬 수도 있습니다. 혹은 터치 스크린에서 버튼 사이즈를 키울 수도 있습니다.

CSS에서는 `@media` @규칙을 사용해서 스타일 시트의 일부를 조건부로 적용합니다. 이 스타일 시트는 미디어 쿼리의 결과에 기반한 스타일 시트입니다. `@import`를 사용해서 조건부로 전체 스타일시트를 적용해보세요.

### HTML에서의 미디어 쿼리

HTML에서 미디어 쿼리는 다양한 요소에 적용될 수 있습니다.:

* `<link>` 요소의 `media` 속성에서는, 링크된 리소스 (일반적으로 CSS)가 적용되어야하는 미디어를 정의합니다.
* `<source>` (en-US) 요소의 `media` (en-US) 속성에서는, 해당 소스가 적용되어야하는 미디어를 정의합니다. (이건 `<picture>` (en-US) 요소 안에서만 유효합니다.)
* `<style>` 요소의 `media` 속성에서는, 스타일이 적용되어야하는 미디어를 정의합니다.
### JavaScript에서의 미디어 쿼리

JavaScript에서는, `Window.matchMedia()` 메소드로 미디어 쿼리를 테스트할 수 있습니다. `MediaQueryList.addListener()` (en-US) 메소드를 사용하면 쿼리가 변경될 때마다 사이트나 앱에서 알림을 받을 수도 있습니다. 이러한 기능을 사용하면, 사이트나 앱이 기기 구성, 방향 또는 상태의 변화에 따라 응답할 수도 있습니다.

Testing media queries (en-US)에서 프로그래밍 방식으로 미디어 쿼리를 사용하는 방법에 대해 자세히 배워보세요.

참고서
---

### @규칙

* `@import`
* `@media`
안내서
---

미디어 쿼리 사용하기

미디어 쿼리 표현식을 구성하는데 사용되는 미디어 쿼리, 구문 및 연산자와 미디어 기능을 소개합니다.

프로그래밍 방식으로 미디어 쿼리 테스트하기 (en-US)

JavaScript 코드에서 어떻게 미디어 쿼리를 사용해 디바이스의 상태를 확인하는지, 그리고 미디어 쿼리가 변경될 때(사용자가 화면을 회전시키거나 브라우저를 리사이즈 할 때와 같은 상황)마다 알림을 보내기 위해 어떻게 리스너를 설정하는지에 대해 설명합니다.

접근성을 위한 미디어 쿼리

미디어 쿼리를 사용해 사용자가 웹사이트를 더 잘 이해할 수 있게 만들어보세요.

명세
--

| Specification |
| --- |
| Media Queries Level 4  |
| CSS Conditional Rules Module Level 3  |

같이 보기
-----

* `@supports` 를 사용하면 브라우저가 지원하는 다양한 CSS 기술들에 대한 스타일을 적용할 수 있습니다.
border-bottom-style
===================

**`border-bottom-style`** CSS 속성은 요소 테두리의 아래쪽 스타일을 지정합니다.

시도해보기
-----

**참고:** 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.

구문
--


```css
/\* 키워드 값 \*/
border-bottom-style: none;
border-bottom-style: hidden;
border-bottom-style: dotted;
border-bottom-style: dashed;
border-bottom-style: solid;
border-bottom-style: double;
border-bottom-style: groove;
border-bottom-style: ridge;
border-bottom-style: inset;
border-bottom-style: outset;

/\* 전역 값 \*/
border-bottom-style: inherit;
border-bottom-style: initial;
border-bottom-style: unset;
```


`border-bottom-style` 속성은 `border-style` 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

### 형식 구문
```

border-bottom-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

예제
--

#### HTML


```html
<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>
```


#### CSS


```css
/\* Define look of the table \*/
table {
  border-width: 2px;
  background-color: #52e385;
}
tr,
td {
  padding: 3px;
}

/\* border-bottom-style example classes \*/
.b1 {
  border-bottom-style: none;
}
.b2 {
  border-bottom-style: hidden;
}
.b3 {
  border-bottom-style: dotted;
}
.b4 {
  border-bottom-style: dashed;
}
.b5 {
  border-bottom-style: solid;
}
.b6 {
  border-bottom-style: double;
}
.b7 {
  border-bottom-style: groove;
}
.b8 {
  border-bottom-style: ridge;
}
.b9 {
  border-bottom-style: inset;
}
.b10 {
  border-bottom-style: outset;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

|  |  |
| --- | --- |
| 초기값 | `none` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | discrete |

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-top-style`, `border-right-style`, `border-left-style`, `border-style`.
* 아래쪽 테두리 관련 CSS 속성: `border-bottom`, `border-bottom-color`, `border-bottom-width`.
object-position
===============

CSS **`object-position`** 속성은 대체 요소의 콘텐츠 정렬 방식을 지정합니다. 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.

대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 `object-fit` 속성으로 지정할 수 있습니다.

시도해보기
-----

구문
--


```css
/\* <position> 값 \*/
object-position: center top;
object-position: 100px 50px;

/\* 전역 값 \*/
object-position: inherit;
object-position: initial;
object-position: unset;
```

### 값

`<position>`

객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.


**참고:** 콘텐츠가 대체 요소의 박스 바깥으로 나가도록 지정할 수도 있습니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `50% 50%` |
| 적용대상 | replaced elements |
| 상속 | yes |
| Percentages | refer to width and height of element itself |
| 계산 값 | as specified |
| Animation type | a repeatable list |

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

object-position =   
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

예제
--

### 이미지 콘텐츠 위치 지정

#### HTML

두 개의 `<img>` 요소가 MDN 로고를 가리키는 코드입니다.


```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```


#### CSS

다음 CSS는 두 `<img>` 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 `object-position` 속성도 지정하고 있습니다.


```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```


첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.

#### 결과

명세
--

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

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

같이 보기
-----

* 이미지 관련 다른 CSS 속성: `object-fit`, `image-orientation` (en-US), `image-rendering`, `image-resolution` (en-US).
border-bottom
=============

**`border-bottom`** CSS 단축 속성은 요소의 아래쪽 테두리를 설정합니다. `border-bottom-width`, `border-bottom-style`, `border-bottom-color`의 값을 지정합니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, `border-bottom`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.


```css
border-bottom-style: dotted;
border-bottom: thick green;
```



```css
border-bottom-style: dotted;
border-bottom: none thick green;
```


따라서 `border-bottom`보다 먼저 지정한 `border-bottom-style`의 값은 무시됩니다. `border-bottom-style`의 기본값은 `none`이므로, `border-style`을 명시하지 않으면 테두리를 만들지 않습니다.

구문
--


```css
border-bottom: 1px;
border-bottom: 2px dotted;
border-bottom: medium dashed green;
```


`border-bottom`은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

### 값

`<br-width>`

`border-bottom-width`.

`<br-style>`

`border-bottom-style`.

`<color>`

`border-bottom-color`.

### 형식 구문
```

border-bottom =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

예제
--


```html
<div>아래쪽 테두리를 가진 요소입니다.</div>
```



```css
div {
  border-bottom: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-bottom-width`: `medium`
* `border-bottom-style`: `none`
* `border-bottom-color`: `currentcolor`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
* `border-bottom-style`: as specified
* `border-bottom-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-bottom-color`: a color
* `border-bottom-style`: discrete
* `border-bottom-width`: a length
 |

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

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

**`border-top`** CSS 단축 속성은 요소의 위쪽 테두리를 설정합니다. `border-top-width`, `border-top-style`, `border-top-color`의 값을 지정합니다.

시도해보기
-----

다른 단축 속성과 마찬가지로, `border-top`는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.


```css
border-top-style: dotted;
border-top: thick green;
```



```css
border-top-style: dotted;
border-top: none thick green;
```


따라서 `border-top`보다 먼저 지정한 `border-top-style`의 값은 무시됩니다. `border-top-style`의 기본값은 `none`이므로, `border-style`을 명시하지 않으면 테두리를 만들지 않습니다.

구문
--


```css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
```


`border-top`은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

### 값

`<br-width>`

`border-top-width`.

`<br-style>`

`border-top-style`.

`<color>`

`border-top-color`.

### 형식 구문
```

border-top =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

예제
--


```html
<div>위쪽 테두리를 가진 요소입니다.</div>
```



```css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}
```

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-shorthands |

|  |  |
| --- | --- |
| 초기값 | as each of the properties of the shorthand:* `border-top-width`: `medium`
* `border-top-style`: `none`
* `border-top-color`: `currentcolor`
 |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | as each of the properties of the shorthand:* `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden`
* `border-top-style`: as specified
* `border-top-color`: computed color
 |
| Animation type | as each of the properties of the shorthand:* `border-top-color`: a color
* `border-top-style`: discrete
* `border-top-width`: a length
 |

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

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

CSS **`border-left-width`** 속성은 요소의 왼쪽 테두리 너비를 지정합니다.

시도해보기
-----

구문
--


```css
/\* 키워드 값 \*/
border-left-width: thin;
border-left-width: medium;
border-left-width: thick;

/\* <length> 값 \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

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

### 값

`<line-width>`

테두리의 너비입니다. 0 이상의 `<length>` 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다.

| `thin` |  | 얇은 테두리 |
| --- | --- | --- |
| `medium` |  | 중간 테두리 |
| `thick` |  | 굵은 테두리 |

**참고:** 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 `thin ≤ medium ≤ thick`이고, 하나의 문서 내에서 동일합니다.

형식 정의
-----

|  |  |
| --- | --- |
| 초기값 | `medium` |
| 적용대상 | all elements. It also applies to `::first-letter` (en-US). |
| 상속 | no |
| 계산 값 | the absolute length or `0` if `border-left-style` is `none` or `hidden` |
| Animation type | a length |

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

border-left-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

예제
--

### 테두리의 너비 비교

#### HTML


```html
<div>Element 1</div>
<div>Element 2</div>
```


#### CSS


```css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-left-width: thick;
}
div:nth-child(2) {
  border-left-width: 2em;
}
```


#### 결과

명세
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

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

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

같이 보기
-----

* 테두리 너비 관련 CSS 속성: `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-width`.
* 왼쪽 테두리 관련 CSS 속성: `border`, `border-left`, `border-left-style`, and `border-left-color`.