종속 계층 - Web 개발 학습하기

종속 계층
=====

* 이전
* Overview: Building blocks
* 다음

이 강의에서는 CSS 종속 (en-US)과 CSS 특정성의 기본 개념을 기반으로 하는 고급 기능인 종속 계층 (en-US)을 소개합니다.

CSS를 처음 사용하는 경우, 이 강의를 진행하는 것이 당장은 관련성이 적고 과정의 다른 부분보다 조금 더 학문적으로 보일 수 있습니다. 그러나 종속 계층이 무엇인지 기본 사항을 알고 있으면 프로젝트에서 종속 계층을 접하는 데 도움이 됩니다. CSS로 더 많이 작업할 수록 종속 계층을 이해하고 그 기능을 활용하는 방법을 알면 다양한 당사자, 플러그인 및 개발 팀의 CSS로 코드 기반을 관리하는 데 많은 어려움을 덜어낼 수 있습니다.

종속 계층은 여러 소스의 CSS로 작업할 때, 충돌하는 CSS 선택자와 경쟁하는 세부 사항이 있을 때 또는 `!important` (en-US) 사용을 고려할 때 가장 적합합니다.

|  |  |
| --- | --- |
| 전제조건: |
 종속 및 특정성을 포함하여 CSS 작동 방식에 대한 아이디어 (
 CSS 첫 단계 와 종속, 특정성, 상속을 공부하세요).
  |
| 목적: | 종속 계층이 작동하는 방식을 알아봅시다. |

요소에 적용된 각 CSS 속성에는, 하나의 값만 있을 수 있습니다. 브라우저의 개발자 도구에서 요소를 검사하여 요소에 적용된 모든 속성 값을 볼 수 있습니다. 도구의 "스타일" 패널에는 일치하는 선택자 및 CSS 소스 파일과 함께 검사 중인 요소에 적용된 모든 속성 값이 표시됩니다. 우선 순위가 있는 출처의 선택자는 일치하는 요소에 적용되는 값을 가집니다.

적용된 스타일 외에도 스타일 패널에는 선택한 요소와 일치하지만 종속, 특정성 또는 소스 순서로 인해 적용되지 않은 줄이 그어진 값이 표시됩니다. 줄이 그어진 스타일은 우선 순위가 같지만 특정성이 낮거나, 출처와 특정성이 일치하지만 코드 베이스에서 더 먼저 발견되었을 수 있습니다. 적용된 속성값에 대해 다양한 소스에서 여러 선언이 지워질 수 있습니다. 더 구체적인 선택자가 있는 스타일에 줄이 그어진 경우 해당 값의 출처나 중요도가 부족함을 의미합니다.

종종, 사이트의 복잡성이 증가함에 따라 스타일시트의 수가 증가하여 스타일시트의 소스 순서가 더 중요하고 복잡해집니다. 종속 계층은 이러한 코드 기반에서 스타일시트 유지 관리를 단순화합니다. 종속 계층은 궁극적으로 적용되는 CSS 선언에 대해 더 간단하고 더 나은 제어를 제공하는 명시적 특정성 컨테이너로, 웹 개발자가 특정성과 싸울 필요 없이 CSS 섹션의 우선 순위를 지정할 수 있도록 합니다.

종속 계층을 이해하려면, CSS 종속을 잘 이해해야 합니다. 아래 섹션에서는 중요한 종속 개념을 간략하게 요약합니다.

종속 개념에 대해 다시 보기
---------------

CSS의 C는 "Cascading"을 의미합니다. 스타일이 함께 계단식으로 배열되는 방법입니다. 사용자 에이전트는 모든 요소의 모든 속성에 할당되는 값을 결정하기 위해 매우 명확하게 정의된 여러 단계를 거칩니다. 여기에 이러한 단계를 간략하게 나열한 다음 여기에서 배우기 위해 온 단계인 종속 계층인 4단계에 대해 자세히 살펴보겠습니다.

1. **관련성:** 각 요소에 대해 선택자가 일치하는 모든 선언 블록을 찾습니다.
2. **중요도:** 일반 스타일인지 중요 스타일인지에 따라 규칙을 정렬합니다. 중요 스타일은 `!important` (en-US) 플래그가 설정된 스타일입니다.
3. **출처:** 두 개의 중요도 버킷 각각 내에서 작성자, 사용자 또는 사용자 에이전트 출처별로 규칙을 정렬합니다.
4. **계층:** 6개의 출처 중요도 버킷 각각 내에서, 종속 계층별로 정렬합니다. 일반 선언의 계층 순서는 생성된 첫 번째 계층부터 마지막 계층까지이며, 그 다음에는 레이어가 없는 일반 스타일이 있습니다. 이 순서는 중요한 스타일에 대해 반전되며 레이어가 없는 중요한 스타일의 우선 순위가 가장 낮습니다.
5. **특정성:** 우선 순위가 있는 출처 계층의 경쟁 스타일에 대해 특정성별로 선언을 정렬합니다.
6. **나타나는 순서:** 우선 순위가 있는 출처 계층의 두 선택자가 동일한 특정성을 갖는 경우 가장 높은 특정성을 가진 마지막으로 선언된 선택자의 속성 값이 우선합니다.

각 단계에서, "아직 실행 중" 선언만 다음 단계에서 "경쟁"으로 이동합니다. 하나의 선언만 실행 중인 경우 "승리"하고, 후속 단계는 문제가 됩니다.

### 출처과 종속

세 가지 종속 출처 유형 (en-US): 사용자 에이전트 스타일시트, 사용자 스타일시트 및 작성자 스타일시트가 있습니다. 브라우저는 각 선언을 출처과 중요도에 따라 6개의 출처 버킷으로 정렬합니다. 우선 순위에는 6개의 출처 버킷, 전환 중인 속성 및 애니메이션 중인 속성의 8가지 수준이 존재합니다. 우선 순위는 가장 낮은 우선 순위를 갖는 일반 사용자 에이전트 스타일부터, 현재 적용된 애니메이션 내의 스타일, 중요한 사용자 에이전트 스타일, 그리고 가장 높은 우선 순위를 갖는 전환 중인 스타일 순입니다.

1. 사용자 에이전트 일반 스타일
2. 사용자 일반 스타일
3. 작성자 일반 스타일
4. 애니메이션되는 스타일
5. 작성자 중요한 스타일
6. 사용자 중요 스타일
7. 사용자 에이전트 중요 스타일
8. 전환되는 스타일

"사용자 에이전트"는 브라우저입니다. "사용자"는 사이트 방문자입니다. "작성자"는 개발자인 당신입니다. `<style>` 요소가 있는 요소에 직접 선언된 스타일은 작성자 스타일입니다. 애니메이션 및 전환 스타일을 포함하지 않는 사용자 에이전트 일반 스타일은 우선 순위가 가장 낮습니다. 사용자 에이전트 중요 스타일이 가장 높습니다.

### 출처 및 특정성

 각 속성에 대해 "승리" 선언은 가중치(보통 또는 중요)를 기반으로 우선 순위가 있는 출처의 선언입니다. 잠시 동안 레이어를 무시하면 우선 순위가 가장 높은 출처의 값이 적용됩니다.
 우승 출처에 요소에 대한 속성 선언이 두 개 이상 있는 경우 이러한 경쟁 속성 값에 대한 선택자의 특정성이 비교됩니다. 특정성은 다른 출처의 선택자 간에 비교되지 않습니다.

아래 예에는, 두 개의 링크가 있습니다. 첫 번째는 작성자 스타일이 적용되지 않았으므로 사용자 에이전트 스타일만 적용됩니다(및 개인 사용자 스타일이 있는 경우). 두 번째는 작성자 스타일로 설정된 `text-decoration` and `color`입니다. 작성자 스타일 시트의 선택자의 특정성이 `0-0-0`인 경우에도 마찬가지입니다. 작성자 스타일이 "승리"하는 이유는 다른 출처에서 충돌하는 스타일이 있을 때, 우선 순위가 없는 출처의 특정성과 관계없이 우선순위가 있는 출처의 규칙이 적용되기 때문입니다.

이 글을 쓰는 시점에서 사용자 에이전트 스타일시트의 "경쟁" 선택자는 `0-1-1`의 특정성 가중치를 갖는 `a:any-link`입니다. 작성자 스타일시트의 `0-0-0` 선택자보다 크지만 현재 사용자 에이전트의 선택자가 다르더라도 상관없습니다. 작성자 및 사용자 에이전트 출처의 특정성 가중치는 절대 비교되지 않습니다. 특정성 가중치 계산 방법에 대해 자세히 알아보세요.

출처 우선 순위는 항상 선택자 특정성보다 우선합니다. 요소 속성이 여러 출처에서 일반 스타일 선언으로 스타일이 지정된 경우, 작성자 스타일 시트는 항상 사용자 또는 사용자 에이전트 스타일 시트에서 선언된 중복 일반 속성을 재정의합니다. 스타일이 중요한 경우 사용자 에이전트 스타일시트는 항상 작성자 및 사용자 스타일보다 우선합니다. 종속 출처 우선 순위는 출처 간의 특정성 충돌이 발생하지 않도록 합니다.

계속 진행하기 전에 마지막으로 주의해야 할 사항: 출현 순서는 우선 순위의 출처에서 경쟁하는 선언이 동일한 특정성을 가질 때만 관련이 있습니다.

종속 계층 개요
--------

"종속 출처 우선 순위"를 이해하지만, "종속 계층 우선 순위"란 무엇입니까? 종속 계층이 무엇인지, 순서가 어떻게 지정되는지, 스타일이 종속 계층에 어떻게 할당되는지를 설명함으로써, 이 질문에 대답할 것입니다. 일반 계층, 중첩 계층 및 익명 계층을 다룰 것입니다. 먼저 종속 계층이 무엇이고 어떤 문제를 해결하는지 논의해 봅시다.

### 종속 계층 우선 순위

출처과 중요도에 따라 6단계 우선 순위가 있는 것과 유사하게 종속 계층을 사용하면 해당 출처 내에서 하위 출처 우선 순위 수준을 만들 수 있습니다.

6개의 출처 버킷 각각 내에는 여러 종속 계층이 있을 수 있습니다. 계층 생성 순서 (en-US)는 매우 중요합니다. 출처 내 계층 간의 우선 순위를 설정하는 것은 생성 순서입니다.

일반 출처 버킷에서는, 계층이 생성된 순서대로 계층이 정렬됩니다. 우선 순위는 생성된 첫 번째 계층부터 마지막 계층까지이며 계층이 없는 일반 스타일이 그 뒤를 따릅니다.

이 순서는 중요한 스타일의 경우 반전됩니다. 계층화되지 않은 모든 중요한 스타일은 전환되지 않는 모든 일반 스타일보다 우선하는 암시적 계층으로 함께 종속됩니다. 계층이 없는 중요한 스타일은 중요한 계층이 있는 스타일보다 우선 순위가 낮습니다. 이전에 선언된 계층의 중요한 스타일은 동일한 출처 내에서 후속으로 선언된 레이어의 중요한 스타일보다 우선합니다.

이 사용 지침서의 나머지 부분에서는, 작성자 스타일에 대한 논의를 제한하지만 사용자 및 사용자 에이전트 스타일시트에도 계층이 존재할 수 있음을 명심하십시오.

### 종속 계층으로 해결할 수 있는 문제

대규모 코드 베이스에는 여러 팀, 컴포넌트 라이브러리, 프레임워크 및 타사에서 가져온 스타일이 있을 수 있습니다. 포함된 스타일시트의 수에 관계없이 이러한 모든 스타일은 단일 출처인 작성자 스타일시트에서 함께 계단식으로 배열됩니다.

여러 소스의 스타일, 특히 함께 작업하지 않는 팀의 스타일을 함께 사용하면 문제가 발생할 수 있습니다. 팀마다 방법론이 다를 수 있습니다. 하나는 특정성을 줄이는 모범 사례가 있는 반면, 다른 하나는 각 선택자에 `id`를 포함하는 표준이 있을 수 있습니다.

특정성 충돌은 빠르게 활대될 수 있습니다. 웹 개발자는 `!important` 플래그를 추가하여 "빠른 수정"을 만들 수 있습니다. 이것이 쉬운 해결책처럼 느껴질 수 있지만, 종종 특정성 전쟁을 일반적인 선언에서 중요한 선언으로 이동시킵니다.

종속 계층이 사용자, 사용자 에이전트 및 작성자 스타일 사이의 힘의 균형을 제공하는 것과 같은 방식으로, 종속 계층은 마치 출처의 각 계층이 하위 계층인 것처럼, 단일 출처 내에서 관심사를 구성하고 균형을 맞추는 구조화된 방법을 제공합니다. 계층 순서를 기반으로 스타일 우선 순위를 지정하여, 각 팀, 컴포넌트 및 타사에 대해 계층을 생성할 수 있습니다.

계층 외부의 스타일 규칙과 경쟁하지 않고 계층 내의 규칙이 함께 적용됩니다. 종속 계층을 사용하면 이러한 하위 출처 간의 특이성에 대해 걱정할 필요 없이 다른 스타일시트보다 전체 스타일시트의 우선 순위를 지정할 수 있습니다.

계층 우선 순위는 항상 선택자 특정성을 능가합니다. 우선 순위가 있는 계층의 스타일이 우선 순위가 낮은 계층보다 "우세"합니다. 손실 계층에서 선택자의 특정성은 관련이 없습니다. 특정성은 계층 내에서 경쟁 속성 값에 대해 여전히 중요하지만 각 속성에 대해 가장 높은 우선순위 계층만 고려되기 때문에 계층 간에 특정성 문제는 없습니다.

### 중첩 종속 계층으로 해결할 수 있는 문제

종속 계층을 사용하면 중첩 계층을 만들 수 있습니다. 각 종속 계층은 중첩 레이어를 포함할 수 있습니다.

예를 들어, 컴포넌트 라이브러리를 `components` 계층으로 가져올 수 있습니다. 일반 종속 계층은 컴포넌트 라이브러리를 작성자 출처에 추가하여 다른 작성자 스타일과의 특정성 충돌을 제거합니다. `components` 계층 내에서, 개발자는 각각 별도의 중첩 레이어로 다양한 테마를 정의하도록 선택할 수 있습니다. 중첩된 테마 계층의 순서는 viewport 크기 또는 방향 (en-US)과 같은 미디어 쿼리를 기반으로 정의할 수 있습니다. 이러한 중첩 레이어는 특정성에 따라 충돌하지 않는 테마를 만드는 방법을 제공합니다.

계층을 중첩하는 기능은 컴포넌트 라이브러리, 프레임워크, 타사 위젯 및 테마를 개발하는 작업을 하는 모든 사람에게 매우 유용합니다.

중첩된 계층을 생성하는 기능은 계층 이름이 충돌할 염려도 제거합니다. 중첩 계층 부분에서 이에 대해 다룰 것입니다.

>
> "작성자는 계층을 생성하여 요소 기본값, 타사 라이브러리, 테마, 컴포넌트, 재정의 및 기타 스타일링 문제를 나타낼 수 있으며 각 계층 내에서 선택자 또는 특정성을 변경하지 않고 명시적인 방식으로 계층의 종속을 재정렬할 수 있습니다. 또는 계층 간 충돌을 해결하기 위해 표시 순서에 의존합니다."
>
>
> —종속 및 상속 명세.
>
>
>

종속 계층 만들기
---------

다음 방법 중 하나를 사용하여 계층을 생성할 수 있습니다.

* 규칙에 따라 `@layer`문, `@layer` 뒤에 하나 이상의 계층 이름을 사용하여 계층을 선언합니다. 이렇게 하면 스타일을 지정하지 않고 명명된 계층이 생성됩니다.
* 블록 내의 모든 스타일이 이름 또는 이름이 지정되지 않은 레이어에 추가되는 `@layer` 블록 at-규칙.
* `@import` 규칙과 `layer` 키워드 또는 `layer()` 함수는 가져온 파일의 콘텐츠를 해당 계층에 할당합니다.

세 가지 방법 모두 해당 이름의 계층이 아직 초기화되지 않은 경우 계층을 생성합니다. `@layer` at-규칙 또는 `layer()`가 있는 `@import`에 계층 이름이 제공되지 않으면 새 익명(이름 없는) 계층이 생성됩니다.

>
> **Note:** 계층의 우선 순위는 계층이 생성되는 순서입니다. 계층에 없는 스타일 또는 "계층 없는 스타일"은 최종 암시적 레이블로 함께 계단식으로 배열됩니다.
>
>
>

중첩 계층에 대해 논의하기 전에 계층을 만드는 세 가지 방법을 좀 더 자세히 살펴보겠습니다.

### 명명된 계층에 대한 @layer 문 at-rule

계층 순서는 계층이 CSS에 나타나는 순서에 따라 설정됩니다. 스타일을 지정하지 않고 `@layer` 다음에 하나 이상의 계층 이름을 사용하여 계층을 선언하는 것은 계층 순서를 정의하는 한 가지 방법입니다.

`@layer` (en-US) CSS at-규칙은 계단식 계층을 선언하고 여러 계단식 계층이 있을 때 우선 순위를 정의하는 데 사용됩니다. 다음 at-규칙은 나열된 순서대로 세 개의 계층을 선언합니다.

```css
@layer theme, layout, utilities;
```

종종, 계층 순서를 완전히 제어하기 위해 CSS의 첫 번째 줄을 이 `@layer` 선언(물론 사이트에 적합한 계층 이름 포함)으로 지정하고 싶을 것입니다.

위의 문장이 사이트 CSS의 첫 번째 줄인 경우 계층 순서는 `theme`, `layout` 및 `utilities`입니다. 위의 명령문 이전에 일부 계층이 생성된 경우 이러한 이름을 가진 계층이 아직 존재하지 않는 한 이 세 계층이 생성되어 기존 계층 목록의 끝에 추가됩니다. 그러나 동일한 이름의 계층이 이미 존재하는 경우 위의 명령문은 두 개의 새 레이어만 생성합니다. 예를 들어, `layout`이 이미 존재한다면, `theme`과 `utilities`만 생성되지만, 이 경우 계층의 순서는 `layout`, `theme`, `utilties`가 됩니다.

### 명명된 계층과 익명 계층에 대한 @layer 블록 at-규칙

블록 `@layer` 규칙을 사용하여 계층을 생성할 수 있습니다. `@layer` at-규칙 다음에 식별자와 스타일 블록이 오는 경우, 식별자는 계층 이름을 지정하는 데 사용되며 이 at-규칙의 스타일은 계층 스타일에 추가됩니다. 지정된 이름의 계층이 아직 존재하지 않는 경우 새 계층이 생성됩니다. 지정한 이름의 계층이 이미 존재하는 경우 기존 계층에 스타일이 추가됩니다. `@layer`를 사용하여 스타일 블록을 생성하는 동안 이름을 지정하지 않으면, at-규칙의 스타일이 새 익명 계층에 추가됩니다.

아래 예에서는, 4개의 블록과 1개의 인라인 `@layer` at-규칙을 사용했습니다. 이 CSS는 나열된 순서대로 다음을 수행합니다.

1. 명명된 `layout` 계층 생성
2. 이름 없는, 익명 계층 생성
3. 세 개의 계층 목록을 선언하고 `layout`이 이미 존재하므로 `theme` 및 `utilities`라는 두 개의 새 계층만 만듭니다.
4. 기존 `layout` 레이어에 추가적인 스타일 추가
5. 이름이 지정되지 않은, 두 번째 익명 계층 생성

```css
/\* 파일: layers1.css \*/

/\* 계층화되지 않은 스타일 \*/
body {
  color: #333;
}

/\* 첫 번째 계층 생성: `layout` \*/
@layer layout {
  main {
    display: grid;
  }
}

/\* 두 번째 계층 생성: 이름이 지정되지 않은 익명 계층 \*/
@layer {
  body {
    margin: 0;
  }
}

/\* 세 번째 및 네 번째 : `theme` 및 `utilities` \*/
@layer theme, layout, utilities;

/\* 이미 존재하는 `layout` 계층에 스타일 추가 \*/
@layer layout {
  main {
    color: #000;
  }
}

/\* 다섯 번째 계층 생성: 이름이 지정되지 않은, 익명 계층 \*/
@layer {
  body {
    margin: 1vw;
  }
}
```

위의 CSS에서 우리는 `layout`, `<anonymous(01)>`, `theme`, `utilities`, 및 `<anonymous(02)>`의 5개 계층을 순서대로 생성했습니다. `body` 스타일 블록에 포함된 계층화되지 않은 스타일의 계층입니다. 계층 순서는 계층이 생성되는 순서이며 계층이 없는 스타일이 암시적 계층이 항상 마지막에 있습니다. 계층이 생성되면 계층 순서를 변경할 수 없습니다.

`layout`이라는 계층에 몇 가지 스타일을 할당했습니다. 명명된 계층이 아직 존재하지 않는 경우, 계층에 스타일을 할당하거나 할당하지 않고 `@layer` 규칙에 이름을 지정하면 계층이 생성됩니다. 이렇게 하면 일련의 기존 계층 이름 끝에 계층이 추가됩니다. 명명된 계층이 이미 존재하는 경우, 블록 내의 모든 스타일은 이전 기존 계층의 스타일에 추가됩니다. 기존 계층 이름을 재사용하여 블록의 스타일을 지정하면 새 계층이 생성되지 않습니다.

계층 이름을 지정하지 앟고 계층에 스타일을 지정하여 익명 계층을 만듭니다. 이름이 지정되지 않은 계층은 생성시에만 스타일을 추가할 수 있습니다.

**참고:** 이후에 계층 이름 없이 `@layer`를 사용하면 이름이 지정되지 않은 추가 계층이 생성됩니다. 이전에 이름이 지정되지 않은 기존 계층에 스타일을 추가하지 않습니다.

`@layer` at-규칙은 이름이 지정되었는지 여부에 관계없이 계층을 생성하거나 이름이 지정된 계층이 이미 있는 경우 계층에 스타일을 추가합니다. 우리는 첫 번째 익명 계층을 `<anonymous(01)>`, 두 번째 익명 계층을 `<anonymous(02)>`라고 불렀습니다. 이들은 실제로 이름이 지정되지 않은 계층입니다. 이를 참조하거나 추가적인 스타일을 추가할 방법이 없습니다.

계층 외부에서 선언된 모든 스타일은 암시적 계층에서 함께 결합됩니다. 위의 예제 코드에서, 첫 번째 선언은 `body`에 `color:#333` 속성을 설정합니다. 이것은 모든 계층 외부에서 선언되었습니다. 계층화되지 않은 스타일의 특정성이 낮고 나타나는 순서에서 첫 번째인 경우에도, 일반 비계층화 선언이 일반 계층화 선언보다 우선합니다. 이것은 비계층화된 CSS가 코드 블록에서 처음으로 선언되었음에도 불구하고, 이러한 비계층화 스타일을 포함하는 암시적 계층이 마치 마지막으로 선언된 계층인 것처럼 우선 순위를 갖는 이유를 설명합니다.

일련의 레이어가 선언된 `@layer theme, layout, utilities;` 행에서, `theme` 및 `utilities` 계층만 생성되었습니다. `layout`은 첫 번째 줄에 이미 생성되어 있습니다. 이 선언은 이미 생성된 계층의 순서를 변경하지 않습니다. 현재 계층이 선언되면 재정렬 할 수 있는 방법이 없습니다.

다음 대화형 예제에서는, 두 개의 계층에 스타일을 할당하고 프로세스에서 계층을 만들고 이름을 지정합니다. 이미 존재하기 때문에, 처음 사용할 때 생성되므로, 마지막 줄에 선언해도 아무 일도 일어나지 않습니다.

마지막 줄인 `@layer site, page;`를 이동하여 첫 번째 줄로 만들어보세요. 무슨 일이 일어나나요?

#### 계층 생성 및 미디어 쿼리

media 또는 feature (en-US) 쿼리를 사용하여 계층을 정의하고 미디어가 일치하지 않거나 기능이 지원되지 않으면 계층이 생성되지 않습니다. 아래 예는 장치 또는 브라우저의 크기를 변경하면 계층 순서가 어떻게 변경될 수 있는지 보여줍니다. 이 예에서는 더 넓은 브라우저에서만 `site` 레이어를 생성합니다. 그런 다음 `page` 및 `site` 계층에 순서대로 스타일을 지정합니다.

넓은 스크린에서, `site` 레이어는 첫 번째 줄에 선언되며, 이는 `site`가 `page`보다 우선 순위가 낮다는 것을 의미합니다. 그렇지 않으면, 좁은 화면에서 나중에 선언되기 때문에 `site`가 `page`보다 우선합니다. 그래도 작동하지 않으면 미디어 쿼리에서 `50em`을 `10em` 또는 `100em`으로 변경해 보세요.

### @import를 사용하여 이름이 지정된 계층과 익명 계층으로 스타일시트 가져오기

`@import` 규칙을 사용하면 사용자가 다른 스타일 시트의 스타일 규칙을 CSS 파일이나 `<style>` 요소 안으로 직접 가져올 수 있습니다.

스타일시트를 가져올 때, 스타일시트 또는 `<style>` 블록 내의 모든 CSS 스타일 앞에 `@import` 문을 정의해야 합니다. `@import` 문은 스타일보다 먼저 와야 하지만, 계층에 스타일을 할당하지 않고 하나 이상의 계층을 생성하는 `@layer` at-규칙이 선행될 수 있습니다(`@import` 앞에 `@charset` 규칙이 올 수도 있습니다).

스타일시트를 명명된 계층, 중첩된 명명 계층 또는 익명 계층으로 가져올 수 있습니다. 다음 계층은 스타일시트를 각각 `components` 계층, `components` 계층 내의 중첩된 `dialog` 계층 및 이름이 지정되지 않은 계층으로 가져옵니다.

```css
@import url("components-lib.css") layer(components);
@import url("dialog.css") layer(components.dialog);
@import url("marketing.css") layer();
```

둘 이상의 CSS 파일을 단일 계층으로 가져올 수 있습니다. 다음 선언은 두 개의 개별 파일을 단일 `social` 계층으로 가져옵니다.

```css
@import url(comments.css) layer(social);
@import url(sm-icons.css) layer(social);
```

미디어 쿼리 및 기능 쿼리 (en-US)를 사용하여 특정 조건에 따라 스타일을 가져오고 계층을 만들 수 있습니다. 다음은 브라우저가 `display: ruby`를 지원하고 가져오는 파일이 화면 너비에 따라 달라지는 경우에만 스타일 시트를 `international` 계층으로 가져옵니다.

```css
@import url("ruby-narrow.css") layer(international) supports(display: ruby) and
 (width < 32rem);
@import url("ruby-wide.css") layer(international) supports(display: ruby) and
 (width >= 32rem);
```

**참고:** 스타일시트를 연결하는 `<link>` 메소드와 동등한 것은 없습니다. 스타일시트 내에서 `@layer`를 사용할 수 없는 경우 `@import`를 사용하여 스타일시트를 계층으로 가져옵니다.

중첩 종속 계층 개요
-----------

중첩 계층은 명명된 계층 또는 익명 계층 내의 계층입니다. 각 종속 계층은 익명 계층이라도 중첩 계층을 포함할 수 있습니다. 다른 계층으로 가져온 계층은 해당 계층 내에서 중첩된 계층이 됩니다.

### 중첩 계층의 장점

계층 중첩 기능을 통해 팀은 다른 팀이 계층을 계층으로 가져올지 여부에 대해 걱정하지 않고 종속 계층을 생성할 수 있습니다. 마찬가지로 중첩을 사용하면 해당 스타일시트 자체에 계층이 있는지 걱정할 필요 없이 타사 스타일 시트를 계층으로 가져올 수 있습니다. 계층을 중첩할 수 있으므로 외부 스타일 시트와 내부 스타일 시트 간에 계층 이름이 충돌하는 것에 대해 걱정할 필요가 없습니다.

### 중첩 종속 계층 만들기

중첩 계층은 일반 계층에 대해 설명한 것과 동일한 방법을 사용하여 만들 수 있습니다. 예를 들어, 점 표기법을 사용하여 `@layer` at-규칙 다음에 하나 이상의 계층 이름을 사용하여 만들 수 있습니다. 다중 점과 계층 이름은 다중 중첩을 나타냅니다.

이름이 있든 없든 다른 블록 `@layer` at-규칙을 중첩하면 중첩된 블록이 중첩된 계층이 됩니다. 마찬가지로, `layer` 키워드 또는 `layer()` 함수를 포함하는 `@import` 선언으로 스타일 시트를 가져오면, 해당 스타일이 해당 명명된 계층 또는 익명 계층에 할당됩니다. `@import` 문에 계층이 포함된 경우, 해당 계층은 익명 또는 이름이 지정된 계층 내의 중첩 계층이 됩니다.

다음 예를 살펴보겠습니다.

```css
@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);
```

첫 번째 줄에서, `component-lib.css`를 `components` 계층으로 가져옵니다. 해당 파일에 이름이 지정되었는지 여부에 관계없이, 계층이 포함된 경우, 해당 계층은 `components` 계층 내에서 중첩된 계층이 됩니다.

두 번째 줄은 `narrowtheme.css`를 `components`의 하위 계층인 `narrow` 계층으로 가져옵니다. 중첩된 `components.narrow`는 `components` 계층 내의 마지막 계층으로 생성됩니다. 단, `components-lib.css`에 이미 `narrow` 계층이 포함되어 있으면 `narrowtheme.css`의 콘텐츠는 다음과 같습니다. `components.narrow` 중첩 계층에 추가됩니다. `components.<layerName>` 패턴을 사용하여 `components` 계층에 추가로 중첩된 명명된 계층을 추가할 수 있습니다. 앞에서 언급했듯이, 이름 없는 계층을 만들 수는 있지만 나중에 액세스할 수는 없습니다.

다음 명령문을 사용하여 이름이 지정된 계층으로 `layers1.css`를 가져오는 다른 예를 살펴보겠습니다.

```css
@import url(layers1.css) layer(example);
```

이렇게 하면 일부 선언과 5개의 중첩 계층(`example.layout`, `example.<anonymous(01)>`, `example.theme`, `example.utilities`, 및 `example.<anonymous(02)>`)이 포함된 `example`이라는 단일 계층이 생성됩니다.

명명된 중첩 계층에 스타일을 추가하려면, 점 표기법을 사용합니다.

```css
@layer example.layout {
  main {
    width: 50vw;
  }
}
```

계층의 순서에 따른 우선 순위 결정
-------------------

계층 순서에 따라 우선 순위가 결정됩니다. 따라서 계층의 순서가 매우 중요합니다. 종속이 출처와 중요도에 따라 정렬하는 것과 같은 방식으로, 종속은 각 CSS 선언을 출처 레이어와 중요도에 따라 정렬합니다.

### 일반 종속 계층의 우선 순위

```css
@import url(A.css) layer(firstLayer);
@import url(B.css) layer(secondLayer);
@import url(C.css);
```

위의 코드는 두 개의 명명된 계층과 하나의 명명되지 않은 계층을 생성합니다. 세 개의 파일(`A.css`, `B.css`, 및 `C.css`)에 추가 계층이 포함되어 있지 않다고 가정해 보겠습니다. 다음 목록은 이러한 파일 내부 및 외부에서 선언된 스타일이 최소(1) 우선 순위에서 가장 높은(10) 우선 순위로 정렬되는 위치를 보여줍니다.

1. firstLayer 일반 스타일 (`A.css`)
2. secondLayer 일반 스타일 (`B.css`)
3. 계층화되지 않은 일반 스타일 (`C.css`)
4. 인라인 일반 스타일
5. 애니메이션 스타일
6. 계층화되지 않은 중요 스타일 (`C.css`)
7. secondLayer 중요 스타일 (`B.css`)
8. firstLayer 중요 스타일 (`A.css`)
9. 인라인 중요 스타일
10. 전환 스타일

계층 내부에 선언된 일반 스타일은 가장 낮은 우선 순위를 받으며 계층이 생성된 순서대로 정렬됩니다. 처음 생성된 계층의 일반 스타일이 가장 낮은 우선 순위를 가지며, 마지막으로 생성된 계층의 일반 스타일이 가장 높은 우선 순위를 갖습니다. 즉, `firstLayer` 내에서 선언된 일반 스타일은 충돌이 있는 경우 목록의 후속 스타일로 재정의됩니다.

다음은 계층 외부에서 선언된 스타일입니다. `C.css`의 스타일은 계층으로 가져오지 않았으며, `firstLayer` 및 `secondLayer`에서 충돌하는 스타일을 재정의합니다. 계층에 선언되지 않은 일반 스타일은 일반적으로 중요한 계층 스타일보다 항상 우선 순위가 높습니다.

인라인 스타일은 `style` 속성을 사용하여 선언됩니다. 이 방법으로 선언된 일반 스타일은 계층이 없는 스타일 시트와 계층이 있는 스타일 시트(`firstLayer – A.css`, `secondLayer – B.css` 및 `C.css`)에 있는 일반 스타일보다 우선합니다.

애니메이션 스타일은 인라인 일반 스타일을 포함하여 모든 일반 스타일보다 우선 순위가 높습니다.

중요한 스타일, 즉 `!important` 플래그를 포함하는 속성 값은 목록에서 이전에 언급한 스타일보다 우선합니다. 일반 스타일의 역순으로 정렬됩니다. 계층 외부에서 선언된 중요한 스타일은 계층 내에서 선언된 스타일보다 우선 순위가 낮습니다. 계층 내에서 발견되는 중요한 스타일도 계층 생성 순서대로 정렬됩니다. 중요한 스타일의 경우 마지막으로 생성된 계층이 가장 낮은 우선 순위를 가지며, 처음 생성된 계층이 선언된 계층 중 가장 높은 우선 순위를 가집니다.

인라인 중요 스타일은 다른 곳에서 선언된 중요 스타일보다 다시 우선 순위가 높습니다.

전환 스타일이 가장 높은 우선 순위를 가집니다. 일반 속성 값이 전환될 때, 인라인 중요한 스타일을 포함하여 다른 모든 속성 값 선언보다 우선합니다(그러나 전환하는 동안에만).

이 예시에는, 스타일이 없는 두 개의 인라인 레이어 `A`와 `B`, 레이어가 없는 스타일의 블록, 이름이 지정된 레이어 `A`와 `B`에 있는 두 개의 스타일 블록이 있습니다.

`style` 속성을 사용하여 `h1` 요소에 추가된 인라인 스타일은 일반 `color`와 중요한 `background-color`를 설정합니다. 일반 인라인 스타일은 모든 계층 및 계층화되지 않은 일반 스타일을 재정의합니다. 중요한 인라인 스타일은 계층이 있거나 없는 일반 및 중요한 작성자 스타일을 모두 재정의합니다. 작성자 스타일이 중요한 인라인 스타일을 재정의할 방법이 없습니다.

일반적인 `text-decoration` 및 중요한 `box-shadow`는 `style` 인라인 스타일의 일부가 아니므로 재정의할 수 있습니다. 인라인이 아닌 일반 스타일의 경우 계층이 없는 스타일이 우선합니다. 중요한 스타일의 경우 계층 순서도 중요합니다. 계층이 없는 일반 스타일이 계층에 설정된 모든 일반 스타일을 무시하고 중요한 스타일을 사용하는 동안 우선 순위는 역순입니다. 계층이 없는 중요한 스타일은 계층이 있는 스타일보다 우선 순위가 낮습니다.

계층 내에서만 선언되는 두 가지 스타일은 일반적인 중요도를 갖는 `font-style`과 `!important` 플래그가 있는 `font-weight` 입니다. 일반 스타일의 경우, 마지막으로 선언된 `B` 계층이 이전에 선언된 계층 `A`의 스타일을 재정의합니다. 일반 스타일의 경우 이후 계층이 이전 계층보다 우선합니다. 중요한 스타일의 경우 우선 순위가 반대로 됩니다. 중요한 `font-weight` 선언의 경우, 먼저 선언된 계층 `A`가 마지막으로 선언된 계층 `B`보다 우선합니다.

첫 번째 줄을 `@layer A, B;`에서 `@layer B, A;`로 변경하여 계층 순서를 바꿀 수 있습니다. 그것을 시도하세요. 이로 인해 어떤 스타일이 변경되고, 어떤 스타일이 그대로 유지됩니까? 왜?

계층 순서는 계층이 CSS에 나타나는 순서에 따라 설정됩니다. 첫 번재 줄에서, `@layer`를 사용하여 계층 이름을 지정하고 세미콜론으로 끝나는, 계층 이름을 지정하지 않고 계층을 선언했습니다. 이 줄을 생략했다면, 결과는 같았을 것입니다. 왜? 명명된 @layer 블록에 A, B 순서로 스타일 규칙을 할당했습니다. 첫 번째 줄에 두 개의 계층이 생성되었습니다. 그렇지 않았다면 이러한 규칙 블록이 해당 순서대로 생성했을 것입니다.

두 가지 이유로 첫 번째 줄을 포함했습니다. 첫 번째는, 쉽게 줄을 편집하고 순서를 전환할 수 있고, 두 번째는 종종 순서 계층을 미리 선언하는 것이 계층 순서 관리를 위한 모범 사례임을 알 수 있기 때문입니다.

요약하면:

* 계층 우선 순위는 계층이 생성된 순서입니다.
* 한 번 생성된 계층은, 순서를 변경할 수 없습니다.
* 일반 스타일의 계층 우선 순위는 계층이 생성되는 순서입니다.
* 계층이 없는 일반 스타일은 일반 계층이 있는 스타일보다 우선합니다.
* 중요한 스타일에 대한 계층 우선 순위가 역전되어 이전에 생성된 계층이 우선합니다.
* 계층화된 모든 중요 스타일은 계층화되지 않은 중요(및 일반) 스타일보다 우선합니다.
* 일반 인라인 스타일은 계층화 여부에 관계엇이 모든 일반 스타일보다 우선합니다.
* 전환되는 스타일을 제외하고, 중요한 인라인 스타일은 다른 모든 스타일보다 우선합니다.
* 작성자 스타일이 중요한 인라인 스타일을 무시할 수 있는 방법이 없습니다(일시적인 전환은 제외).
### 중첩된 종속 계층의 우선 순위

중첩 계층의 종속 우선 순위는 일반 계층과 유사하지만, 계층 내에 포함됩니다. 우선 순위는 중첩 계층 생성 순서를 기반으로 합니다. 계층의 중첩되지 않은 스타일은 중첩된 일반 스타일보다 우선하며, 중요한 스타일의 경우 우선 순위가 반대입니다. 중첩된 계층 사이의 특정 가중치는 중요하지 않지만, 중첩된 계층 내에서 스타일이 충돌하는 경우에는 중요합니다.

다음은 `components` 계층과 `components.narrow` 중첩 계층에 스타일을 생성 및 추가하고 새로운 `components.wide` 계층에 스타일을 생성 및 추가합니다.

```css
@import url("components-lib.css") layer(components);
@import url("narrowtheme.css") layer(components.narrow);

@layer components {
  :root {
    --theme: red;
    font-family: serif !important;
  }
}
@layer components.narrow {
  :root {
    --theme: blue;
    font-family: sans-serif !important;
  }
}
@layer components.wide {
  :root {
    --theme: purple;
    font-family: cursive !important;
  }
}
```

계층이 없는 일반 스타일이 계층이 있는 일반 스타일보다 우선하고, 계층 내에서 중첩되지 않은 스타일이 일반 중첩 스타일보다 우선하므로, `빨간색`이 다른 `테마` 색상보다 우선합니다.

중요한 스타일의 경우, 계층화된 스타일이 계층화되지 않은 스타일보다 우선하며, 이전에 선언된 계층의 중요한 스타일이 나중에 선언된 계층보다 우선합니다. 이 예에서, 중첩 계층 생성 순서는 `components.narrow`, 그 다음이 `components.wide`이므로 `components.narrow`의 중요한 스타일이 `components.wide`의 중요한 스타일보다 우선하므로 `sans-serif`가 우선합니다.

실력을 시험해보세요
----------

이 기사의 끝에 도달했지만, 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인하는 추가 테스트를 찾을 수 있습니다. 실력을 시험해보세요: 종속, 2번째 작업 (en-US)을 참조하세요.

요약
--

이 기사의 대부분을 이해했다면, 잘 한 것입니다. 이제 CSS 종속 계층의 기본 메커니즘에 익숙해졌습니다. 다음으로 박스 모델을 자세히 살펴보겠습니다.

* 이전
* Overview: Building blocks
* 다음


CSS 에서 항목 크기 조정 - Web 개발 학습하기

CSS 에서 항목 크기 조정
===============

* 이전
* Overview: Building blocks
* 다음

지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서는 CSS 를 통해 요소의 크기를 결정하는 다양한 방법을 요약하고 크기 조정과 관련하여 향후 도움이 될 몇 가지 용어를 정의합니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계
 학습)
  |
| 목적: | CSS 로 크기를 조정할 수 있는 다양한 방법 이해하기. |

사물의 자연적 또는 본질적인 크기
------------------

HTML 요소는 CSS 의 영향을 받기 전에 설정한 자연스러운 크기입니다. 간단한 예는 이미지입니다. 이미지는 페이지에 포함된 이미지 파일에 정의된 너비와 높이를 갖습니다. 이 크기는 이미지 자체에서 나오는 — **고유 크기 (intrinsic size)** 로 설명됩니다.

페이지에 이미지를 배치하고 `<img>` 태그 또는 CSS 의 속성을 사용하여 높이와 너비를 변경하지 않으면, 고유 크기를 사용하여 이미지가 표시됩니다. 파일의 범위를 볼 수 있도록 아래 예제의 이미지에 테두리를 지정했습니다.

그러나 빈 `<div>` (en-US) 에는, 자체 크기가 없습니다. 내용이 없는 HTML 에 `<div>` (en-US) 를 추가한 다음 이미지와 마찬가지로 테두리를 지정하면, 페이지에 한 라인이 표시됩니다. 이것은 요소의 접힌 (collapsed) 테두리입니다 — 열려야 할 내용이 없습니다. 아래 예제에서, 이 테두리는 container 의 너비까지 확장됩니다. 이는 블록 레벨 요소이기 때문에 친숙해지기 시작해야 합니다. 내용이 없기 때문에 높이 (또는 블록의 크기) 가 없습니다.

위의 예에서, 빈 요소 안에 텍스트를 추가하십시오. 요소의 높이가 내용에 의해 정의되므로 테두리에 해당 텍스트가 포함됩니다. 따라서 블록 차원에서 이 `<div>` 의 크기는 내용의 크기에서 비롯됩니다. 다시 말하지만, 이것은 요소의 고유 크기입니다 — 크기는 내용에 의해 정의됩니다.

특정 크기 설정
--------

물론 디자인의 요소에 특정 크기를 줄 수 있습니다. 요소에 크기가 주어지면 (그리고 그 내용이 그 크기에 맞아야 함) 우리는 이것을 **외적인 크기 (extrinsic size)** 로 지칭합니다. 위의 예에서 `<div>` 를 가져와서 — 구체적인 `width` 및 `height` 값을 지정할 수 있으며, 이제 어떤 내용이 들어가든 해당 크기를 갖습니다. overflow 에 대한 이전 수업 에서 발견한 것처럼 요소에 맞는 공간보다 많은 콘텐츠가 있으면 설정된 높이로 인해 콘텐츠가 overflow 될 수 있습니다.

이 overflow 문제로 인해, 요소의 높이를 길이 또는 백분율로 고정하는 것은 웹에서 매우 신중하게 수행해야 하는 작업입니다.

### 백분율 사용하기

여러 방법으로 백분율은 길이 단위처럼 작동하며, 값과 단위에 대한 수업에서 논의한 것처럼, 종종 길이와 상호 교환적으로 사용될 수 있습니다. 백분율을 사용하는 경우 백분율이 ***얼마인지*** 알고 있어야 합니다. 다른 container 안에 있는 박스의 경우 자식 박스에 백분율 너비를 지정하면, 부모 container 너비의 백분율이 됩니다.

백분율을 포함하는 블록의 크기에 대해 결정되기 때문입니다. 백분율이 적용되지 않으면 `<div>` 는 블록 레벨 요소이므로 사용가능한 공간의 100% 를 차지합니다. 너비를 백분율로 지정하면, 일반적으로 채워지는 공간의 백분율이 됩니다.

### 백분율 마진 및 패딩

`margins` 과 `padding` 을 백분율로 설정하면 이상한 동작이 나타날 수 있습니다. 아래 예제에는 박스가 있습니다. 내부 박스에 `margin` 을 10% 로, `padding` 을 10% 로 지정했습니다. 박스 상단과 하단의 패딩과 마진은 왼쪽과 오른쪽의 마진과 크기가 같습니다.

예를 들어 상단 및 하단 마진 백분율이 요소 높이의 백분율이고, 왼쪽 및 오른쪽 마진 백분율이 요소 너비의 백분율일 것으로 예상할 수 있습니다. 그러나, 이것은 사실이 아닙니다!

백분율로 마진 및 패딩을 사용하는 경우, 값은 **인라인 크기 (inline size)** 에서 계산되므로 — horizontal 언어로 작업할 때의 너비입니다. 이 예에서 모든 마진과 패딩은 너비의 10% 입니다. 즉, 박스 전체에 같은 크기의 마진과 패딩을 둘 수 있습니다. 이 방법으로 백분율을 사용하면 기억할 가치가 있습니다.

min- 및 max- 크기
--------------

고정된 크기를 주는 것 외에도, CSS 에 요소에 최소 또는 최대 크기를 제공하도록 요청할 수 있습니다. 가변적인 양의 내용을 포함할 수 있는 박스가 있고, ***항상*** 특정 높이 이상이 되도록 하려면, `min-height` 속성을 설정할 수 있습니다. 박스는 항상 이 높이 이상이지만, 박스의 최소 높이에 대한 공간보다 더 많은 내용이 있으면 키가 더 커집니다.

아래 예에서 정의된 높이가 150 픽셀인 두 개의 박스를 볼 수 있습니다. 왼쪽의 박스는 키가 150 픽셀입니다; 오른쪽의 상자에는 더 많은 공간이 필요한 내용이 있으므로, 최소 150 픽셀 이상으로 키가 커졌습니다.

이는 overflow 를 피하면서 가변적인 양의 콘텐츠를 처리할 때 매우 유용합니다.

`max-width` 의 일반적인 용도는 이미지를 원래 너비로 표시할 공간이 충분하지 않으면 이미지의 크기를 줄이면서, 해당 너비보다 크게되지 않도록 하는것입니다.

예를 들어, 이미지에서 `width: 100%` 를 설정하고 이미지의 고유 (intrinsic) 너비가 container 보다 작으면, 이미지가 강제로 늘어나고 커져 픽셀화되어 나타납니다. 고유 너비가 container 보다 크면 overflow 됩니다. 두 경우 모두 여러분이 원하는 것이 아닙니다.

`max-width: 100%` 를 대신 사용하면, 이미지가 고유 크기보다 작아질 수 있지만, 크기의 100% 에서 멈춥니다.

아래 예에서는 동일한 이미지를 두 번 사용했습니다. 첫 번째 이미지에는 `width: 100%` 로 주어졌으며, 그보다 큰 container 에 있으므로 container 너비로 늘어납니다. 두 번째 이미지에는 `max-width: 100%` 로 설정되어 있으므로 container 를 채우기 위해 늘어나지 않습니다. 세 번째 박스에는 동일한 이미지가 다시 포함되며, `max-width: 100%` 로 설정됩니다; 이 경우 박스에 맞게 크기가 어떻게 축소되었는지 확인할 수 있습니다.

이 기술은 이미지를 반응형으로 만드는 데 사용되므로 더 작은 장치에서 볼 때 이미지가 적절하게 축소됩니다. 그러나 이 기술을 사용하여 실제로 큰 이미지를 로드한 다음 브라우저에서 축소하면 안됩니다. 이미지는 디자인에 표시되는 가장 큰 크기보다 커야합니다. 지나치게 큰 이미지를 다운로드하면, 사이트 속도가 느려질 수 있으며, 데이터 요금제인 경우 더 많은 비용이 발생할 수 있습니다.

**참고:** 반응형 이미지 기술 에 대해 자세히 알아보십시오.

Viewport 단위
-----------

Viewport — 사이트를 보는 데 사용하는 브라우저에서 페이지의 가시 영역 — 또한 크기가 있습니다. CSS 에는 viewport 의 크기와 관련된 단위가 있습니다 — viewport 너비의 경우 `vw` 단위, viewport 높이의 경우 `vh`. 이 단위를 사용하면 사용자의 viewport 에 상대적인 크기를 지정할 수 있습니다.

`1vh` 는 viewport 높이의 1% 와 같고, `1vw` 는 viewport 너비의 1% 와 같습니다. 이 단위를 사용하여 박스 크기 뿐만 아니라, 텍스트도 조정할 수 있습니다. 아래 예에서는 20vh 및 20vw 크기의 박스가 있습니다. 박스에는 문자 `A` 가 포함되어 있으며 `font-size` 에 10vh 가 지정되었습니다.

**`vh` 및 `vw` 값을 변경하면 박스 또는 글꼴의 크기가 변경됩니다; viewport 크기를 변경하면 viewport 를 기준으로 크기가 조정되므로 크기도 변경됩니다. viewport 크기를 변경할 때 예제 변경 사항을 보려면 크기를 조정할 수 있는 새 브라우저 창에 예제를 로드해야 합니다 (위에 표시된 예제가 포함된 `<iframe>` 이 viewport 임). 예제를 열고, 브라우저 창의 크기를 조정한 후 박스와 텍스트의 크기에 어떤 영향이 있는지 관찰하십시오.**

viewport 에 따라 크기를 조정하면 디자인에 유용할 수 있습니다. 예를 들어, 전체 콘텐츠 페이지 섹셩을 콘텐츠의 나머지 부분보다 먼저 표시하려면, 페이지의 해당 부분을 100vh 높이로 설정하면 나머지 콘텐츠가 viewport 아래로 밀려서 문서가 스크롤 된 후에만 표시됩니다.

요약
--

이번 수업에서는 웹에서 크기를 조정할 때 발생할 수 있는 몇 가지 주요 문제에 대해 설명합니다. CSS 레이아웃 으로 이동할 때, 크기 조정은 다양한 레이아웃 방법을 익히는 데 매우 중요하므로 계속 진행하기 전에 여기에서 개념을 이해하는 것이 좋습니다.

* 이전
* Overview: Building blocks
* 다음


CSS 디버깅 - Web 개발 학습하기

CSS 디버깅
=======

* 이전
* Overview: Building blocks
* 다음  (en-US)

때로는 CSS를 작성할 때 CSS가 예상한 대로 동작하지 않는 문제가 발생합니다. 아마도 특정 선택자가 요소와 일치해야 하지만, 아무 일도 일어나지 않거나 박스의 크기가 예상과 다릅니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고 모든 최신 브라우저에 포함된 개발자 도구가 진행 상황을 찾는 데 어떻게 도움이 되는지 보여줍니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계
 학습)
  |
| 목표: | 브라우저 개발자 도구의 기본 사항과 CSS의 간단한 검사 및 편집방법 배우기. |

브라우저 개발자 도구 사용 방법
-----------------

브라우저 개발자 도구란 (en-US) 기사는 다양한 브라우저 및 플랫폼에서 도구를 사용하는 방법을 설명하는 최신 안내서입니다. 대부분 특정 브라우저에서 개발하도록 선택할 수 있으므로, 해당 브라우저에 포함된 도구에 가장 익숙해지지만, 다른 브라우저에서 해당 도구에 액세스하는 방법을 알아야 합니다. 여러 브라우저 간에 다른 렌더링이 표시되는 경우 도움이 됩니다.

또한 브라우저마다 개발자 도구에서 집중하는 부분이 다르다는 것을 알 수 있습니다. 예를 들어, Firefox에는 CSS 레이아웃으로 시각적으로 작업하기 위한 훌륭한 도구가 있으며, 그리드 레이아웃 (en-US), Flexbox (en-US) 및 Shapes (en-US)를 검사하고 편집할 수 있습니다. 그러나, 모든 브라우저마다 유사한 기본 도구가 있습니다. 이러한 기본 도구는 예를 들면 페이지의 요소에 적용된 속성 및 값을 검사하고 편집기에서 변경하는 데 사용됩니다.

이 수업에서는 CSS 작업을 위한 Firefox 개발자 도구의 유용한 기능을 살펴봅니다. 이를 위해 예제 파일을 사용하겠습니다. 따라하고 싶다면, 새 탭에 로드하고 위에 링크된 기사에 설명된 대로 개발자 도구를 여세요.

DOM vs 소스 보기
------------

새로운 사용자가 개발자 도구에서 혼동할 수 있는 것은 웹 페이지의 소스 보기 (en-US) 를 보거나 서버에 넣은 HTML 파일을 볼 때 표시되는 것과 개발자 도구의 HTML 창에서 보이는 것의 차이입니다. 소스 보기를 통해 볼 수 있는 것과 거의 비슷해 보이지만 몇 가지 차이점이 있습니다.

렌더링 된 DOM에서 브라우저가 잘못 작성된 HTML을 수정했을 수 있습니다. `<h2>`를 열고 `</h3>`로 닫는 등의 요소를 잘못 닫은 경우, 브라우저는 수행하려는 작업을 파악하고 DOM의 HTML은 `<h2>`를 `</h2>`로 올바르게 닫습니다. 또한 브라우저에서는 모든 HTML을 표준화하고, DOM은 JavaScript로 변경한 내용도 표시합니다.

소스 보기는 서버에 저장된 HTML 소스 코드입니다. 개발자 도구의 HTML tree (en-US)는 특정 시점에 브라우저가 렌더링하는 내용을 정확하게 보여주므로, 실제로 어떤 일이 일어나고 있는지 파악할 수 있습니다.

적용된 CSS 검사
----------

페이지에서 요소를 마우스 오른쪽/ctrl 키를 누른 채 클릭하고 **검사(Inspect)** 를 선택하거나, 개발자 도구 디스플레이 왼쪽의 HTML tree에서 요소를 선택하세요. `box1` 클래스의 요소를 선택하세요. 이것은 테두리 박스가 그려진 페이지의 첫 번째 요소입니다.

![개발자 도구가 열려 있는 이 튜토리얼의 예제 페이지](/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting1.png)

HTML 오른쪽의 Rules view를 보면 해당 요소에 적용된 CSS 속성과 값을 볼 수 있습니다. `box1` 클래스에 직접 적용된 규칙과 상자가 조상으로부터 상속받은 CSS(이 경우 `<body>`)를 볼 수 있습니다. 이것은 예상하지 못한 일부 CSS가 적용되는 경우에 유용합니다. 아마도 부모 요소에서 상속되고 있고 이 요소의 컨텍스트에서 덮어쓰는 규칙을 추가해야 합니다.

또한 단축 속성을 확장하는 기능도 유용합니다. 이 예에서는 `margin` 단축 속성이 사용되었습니다.

**보기를 확장하려면 작은 화살표를 클릭하여 다양한 속성과 해당 값을 표시합니다.**

**해당 패널이 활성 상태일 때 규칙 보기에서 값을 켜고 끌 수 있습니다. 이 패널 위에 마우스를 가져가면 확인란이 나타납니다. `border-radius`와 같은 규칙의 확인란을 선택 취소하면 CSS가 적용을 중지합니다.**

예를 들어 레이아웃이 잘못되어 어떤 속성이 문제일 때 이것을 사용하여 A/B 비교를 수행하여 규칙을 적용했을 때 더 나은지 여부를 결정하고 디버그에 도움을 줄 수 있습니다.

다음 비디오는 Firefox 개발자 도구를 사용하여 CSS를 디버그하는 데 유용한 팁을 제공합니다.

값 편집
----

속성을 켜고 끄는 것 외에도 해당 값을 편집할 수 있습니다. 다른 색상이 더 잘 보이는지 확인하고 싶거나 크기를 조정하고 싶으신가요? 개발자 도구를 사용하면 스타일시트를 편집하고 페이지를 다시 로드하는 데 많은 시간을 절약할 수 있습니다.

**`box1`을 선택한 상태에서 테두리에 적용된 색상을 표시하는 견본(색상이 지정된 작은 원)을 클릭합니다. 색상 선택자가 열리고 몇 가지 다른 색상을 시도할 수 있습니다. 페이지에서 실시간으로 업데이트됩니다. 비슷한 방식으로 테두리의 너비나 스타일을 변경할 수 있습니다.**

![색상 선택자가 열린 개발자 도구](/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting2-color-picker.png)

새 속성 추가
-------

개발자 도구를 사용하여 속성을 추가할 수 있습니다. 상자가 `<body>` 요소의 글꼴 크기를 상속하는 것을 원하지 않고 고유한 특정 크기를 설정하기를 원하시나요? CSS 파일에 추가하기 전에 개발자 도구에서 시도할 수 있습니다.

**규칙에서 닫는 중괄호를 클릭하여 새 선언 입력을 시작할 수 있습니다. 이 시점에서 새 속성 입력을 시작할 수 있으며 개발자 도구는 일치하는 속성의 자동 완성 목록을 표시합니다. `font-size`를 선택한 후 시도하려는 값을 입력합니다. + 버튼을 클릭하여 동일한 선택자로 규칙을 추가하고 거기에 새 규칙을 추가할 수도 있습니다.**

![개발자 도구 패널, 규칙에 새 속성을 추가하고, 폰트 자동 완성을 열고 있습니다.](/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting3-font-size.png)

**참고:** 규칙 보기에는 다른 유용한 기능도 있습니다. 예를 들어 유효하지 않은 값이 있는 선언에는 줄이 그어 표시됩니다. 자세한 내용은 CSS 검사 및 수정 (en-US)에서 확인할 수 있습니다.

박스 모델 이해
--------

이전 강의에서 박스 모델과 변경되는 대체 박스 모델이 있다는 사실에 대해 논의했습니다. 요소의 크기가 요소에 제공한 크기와 패딩 및 테두리를 기반으로 계산되는 방식입니다. 개발자 도구는 요소의 크기가 어떻게 계산되는지 이해하는 데 실제로 도움이 될 수 있습니다.

레이아웃 보기는 선택한 요소의 박스 모델 다이어그램과 함께 요소가 배치되는 방식을 변경하는 속성 및 값에 대한 설명이 표시됩니다. 여기에는 요소에 명시적으로 사용하지 않았지만, 초기 값이 설정된 속성에 대한 설명이 포함됩니다.

이 패널에서 세부 속성 중 하나는 요소가 사용하는 박스 모델을 제어하는 `box-sizing` 속성입니다.

**`box1` 및 `box2` 클래스가 있는 두 상자를 비교합니다. 둘 다 동일한 너비(400px)가 적용되지만 `box1`이 시각적으로 더 넓습니다. 레이아웃 패널에서 `content-box`를 사용하고 있는 것을 볼 수 있습니다. 이것은 요소에 지정한 크기에 패딩 및 테두리 너비를 추가하는 값입니다.**

`box2` 클래스가 있는 요소는 `border-box`를 사용하므로 여기에서 요소에 지정한 크기에서 패딩과 테두리를 뺍니다. 즉, 상자가 페이지에서 차지하는 공간이 지정한 정확한 크기(이 경우 `width: 400px`)입니다.

![개발자 도구의 레이아웃 섹션](/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting4-box-model.png)

**참고:** 박스 모델 검사 (en-US)에서 자세히 알아보십시오.

특이성 문제 해결
---------

개발 중에, 특히 기존 사이트에서 CSS를 편집해야 하는 경우 일부 CSS를 적용하는 데 어려움을 겪을 수 있습니다. 무엇을 하든지 요소는 CSS를 사용하지 않는 것 같습니다. 여기에서 일반적으로 발생하는 것은 보다 구체적인 선택자가 변경 사항을 재정의한다는 것입니다. 여기서 개발자 도구가 정말 도움이 될 것입니다.

예제 파일에는 `<em>` 요소로 래핑된 두 단어가 있습니다. 하나는 주황색으로 표시되고 다른 하나는 핫핑크로 표시됩니다. 우리가 적용한 CSS는 다음과 같습니다.

```css
em {
  color: hotpink;
  font-weight: bold;
}
```

스타일시트의 그 위에는 `.special` 선택자가 있는 규칙이 있습니다.

```css
.special {
  color: orange;
}
```

특이성에 대해 논의한 캐스케이드 및 상속 강의에서 기억하시겠지만, 클래스 선택자는 요소 선택자보다 더 구체적입니다. 따라서 클래스 선택자가 적용됩니다. 개발자 도구는 특히 정보가 거대한 스타일시트의 어딘가에 묻혀 있는 경우 이러한 문제를 찾는 데 도움이 될 수 있습니다.

**`.special` 클래스로 `<em>`을 검사하면 개발자 도구에서 주황색이 적용되는 색상임을 보여주고 또한 em에 적용된 `color` 속성은 그어진 선으로 표시됩니다. 이제 클래스가 요소 선택자를 재정의하는 것을 볼 수 있습니다.**

![em을 선택하고 개발자 도구에서 색상을 재정의](/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting5-specificity.png)

Firefox 개발자 도구에 대해 자세히 알아보기
---------------------------

여기 MDN에 Firefox 개발자 도구에 대한 많은 정보가 있습니다. 주요 개발자 도구 섹션을 살펴보고 이 강의에서 간략하게 다룬 내용에 대한 자세한 내용은 방법 안내를 참조하세요.

CSS의 디버깅 문제
-----------

개발자 도구는 CSS 문제를 해결할 때 큰 도움이 될 수 있으므로 CSS가 예상대로 작동하지 않는 상황에 처했을 때 어떻게 해결해야 할까요? 다음 단계가 도움이 될 것입니다.

### 문제에서 한발 물러나서

코딩 문제, 특히 CSS 문제는 좌절감을 줄 수 있습니다. 솔루션을 찾는 데 도움이 되는 온라인 검색 오류 메시지가 표시되지 않는 경우가 많기 때문입니다. 답답해지면 잠시 문제에서 한 발짝 떨어져 보세요. 산책을 하거나, 술을 마시거나, 동료와 이야기를 나누거나, 잠시 동안 다른 일을 해보세요. 문제에 대한 생각을 멈추면 솔루션이 마술처럼 나타나는 경우가 있고, 그렇지 않더라도 기분이 상쾌할 때 작업하기가 훨씬 수월합니다.

### 유효한 HTML과 CSS가 있습니까?

브라우저는 CSS와 HTML이 올바르게 작성되기를 기대하지만, 브라우저도 매우 관대하며 마크업이나 스타일시트에 오류가 있는 경우에도 웹페이지를 표시하기 위해 최선을 다할 것입니다. 코드에 실수가 있는 경우 브라우저는 의도한 바를 추측해야 하며 사용자가 염두에 둔 것과 다른 결정을 내릴 수 있습니다. 또한 두 가지 다른 브라우저가 두 가지 다른 방법으로 문제에 대처할 수 있습니다. 따라서 좋은 첫 번째 단계는 유효성 검사기를 통해 HTML 및 CSS를 실행하여 오류를 찾아 수정하는 것입니다.

* CSS Validator
* HTML validator
### 테스트 중인 브라우저에서 속성과 값을 지원하나요?

브라우저는 이해하지 못하는 CSS를 무시합니다. 사용 중인 속성이나 값이 테스트 중인 브라우저에서 지원되지 않으면 아무것도 중단되지 않지만, 해당 CSS는 적용되지 않습니다. 개발자 도구는 일반적으로 어떤 방식으로든 지원되지 않는 속성과 값을 강조 표시합니다. 아래 스크린샷에서 브라우저는 `grid-template-columns`의 하위 그리드 값을 지원하지 않습니다.

![grid-template-columns: subgrid 값이 지원되지 않아 subgrid가 제외된 브라우저 개발자 도구의 이미지](/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS/no-support.png)

또한 MDN의 각 속성 페이지 하단에 있는 브라우저 호환성 표를 볼 수 있습니다. 이것들은 해당 속성에 대한 브라우저 지원을 보여주며, 속성의 일부 사용에 대한 지원이 있고 다른 것은 지원하지 않는 경우 종종 세분화됩니다. `shape-outside` 속성의 호환성 표를 참조하세요 (en-US).

### 다른 요소가 CSS를 재정의하고 있나요?

여기서 특이성에 대해 배운 정보가 매우 유용할 것입니다. 당신이 하려고 하는 것을 재정의하는 더 구체적인 무언가가 있다면, 당신은 무엇을 하려고 하는지 알아내려는 매우 좌절감을 주는 게임에 빠질 수 있습니다. 그러나 위에서 설명한 대로, 개발자 도구는 적용되는 CSS를 보여주며, 새 선택자를 충분히 구체적으로 만들어 재정의할 수 있도록 할 수 있습니다.

### 문제의 축소된 테스트 사례 만들기

위 단계를 수행해도 문제가 해결되지 않으면 추가 조사가 필요합니다. 이 시점에서 가장 좋은 것은 축소된 테스트 케이스로 알려진 것을 만드는 것입니다. "문제를 줄인다"는 것은 정말 유용한 기술입니다. 자신과 동료의 코드에서 문제를 찾는 데 도움이 되며 버그를 보고하고 더 효과적으로 도움을 요청할 수 있습니다.

축소된 테스트 사례는 관련 없는 주변 콘텐츠와 스타일이 제거된 가장 간단한 방법으로 문제를 보여주는 코드 예제입니다. 이는 종종 레이아웃에서 문제가 있는 코드를 제거하여 해당 코드나 기능만 보여주는 작은 예제를 만드는 것을 의미합니다.

축소된 테스트 케이스를 만드는 방법은 다음과 같습니다.

1. 마크업이 동적으로 생성되는 경우(예: CMS를 통해) 문제를 보여주는 출력의 정적 버전을 만드세요. CodePen과 같은 코드 공유 사이트는 축소된 테스트 사례를 호스팅하는 데 유용합니다. 그러면 온라인에서 액세스할 수 있고 동료와 쉽게 공유할 수 있기 때문입니다. 페이지에서 소스 보기를 수행하고 HTML을 CodePen에 복사한 다음 관련 CSS 및 JavaScript를 가져와서 포함할 수 있습니다. 그 후에도 문제가 여전히 분명한지 확인할 수 있습니다.
2. JavaScript를 제거해도 문제가 해결되지 않으면 JavaScript를 포함하지 마세요. JavaScript를 제거해도 문제가 *해결되지 않는* 경우 가능한 한 많은 JavaScript를 제거하고 문제의 원인은 그대로 두세요.
3. 문제의 원인이 되지 않는 HTML을 제거하세요. 구성 요소 또는 레이아웃의 주요 요소를 제거합니다. 다시 말하지만, 여전히 문제를 보여주는 가장 작은 양의 코드를 찾아보세요.
4. 문제에 영향을 주지 않는 CSS를 제거하세요.

이 작업을 수행하는 과정에서 문제의 원인을 발견하거나 최소한 특정 항목을 제거하여 문제를 켜고 끌 수 있습니다. 무언가를 발견할 때 코드에 몇 가지 주석을 추가할 가치가 있습니다. 도움을 요청해야 하는 경우 이미 시도한 내용을 도움을 주는 사람에게 보여줄 것입니다. 이렇게 하면 들리는 문제와 해결 방법을 검색할 수 있는 충분한 정보를 얻을 수 있습니다.

여전히 문제를 해결하는 데 어려움을 겪고 있다면 테스트 케이스를 축소하여 포럼에 게시하거나 동료에게 보여줌으로써 도움을 요청할 수 있습니다. 도움을 요청하기 전에 문제를 줄이고, 문제가 발생한 위치를 정확히 식별하는 작업을 완료했음을 보여줄 수 있다면 도움을 받을 가능성이 훨씬 더 높습니다. 경험이 더 많은 개발자는 문제를 신속하게 찾아내고 올바른 방향으로 안내할 수 있으며, 그렇지 않더라도 축소된 테스트 사례를 통해 빠르게 살펴보고 최소한 도움을 줄 수 있을 것입니다.

문제가 실제로 브라우저의 버그인 경우 축소된 테스트 사례를 사용하여 관련 브라우저 공급업체에 버그 보고서를 제출할 수도 있습니다(예: Mozilla의 bugzilla 사이트).

CSS에 대한 경험이 많을수록 문제를 더 빨리 파악하게 될 것입니다. 그러나 우리 중 가장 경험이 많은 사람들조차도 때때로 도대체 무슨 일이 일어나고 있는지 궁금해합니다. 체계적인 접근 방식을 취하고 축소된 테스트 사례를 만들고 다른 사람에게 문제를 설명하면 일반적으로 수정 사항을 찾을 수 있습니다.

요약
--

이렇게 CSS 디버깅에 대한 소개를 마쳤습니다. 이를 통해 나중에 당신의 경력에서 CSS 및 다른 유형의 코드를 디버깅할 때 유용한 기술을 얻을 수 있습니다.

이 과정의 마지막 글에서는 CSS를 구성하는 방법 (en-US)을 살펴보겠습니다.

* 이전
* Overview: Building blocks
* 다음  (en-US)


CSS 값과 단위 - Web 개발 학습하기

CSS 값과 단위
=========

* 이전
* Overview: Building blocks
* 다음

CSS에 사용된 모든 속성에는 해당 속성에 허용되는 값이 있으며, MDN의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값과 사용 단위를 살펴보겠습니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계
 학습)
  |
| 목적: | CSS 속성에 사용되는 다양한 유형의 값과 단위에 대해 배우기. |

CSS 값이란 무엇인가?
-------------

CSS 사양과 MDN의 속성 페이지에서 `<color>` 또는 `<length>`. 와 같이 꺾쇠괄호로 묶여 있는 값을 찾을 수 있습니다. `<color>` 값이 특정 속성에 유효한 것으로 표시되면, `<color>` 참조 페이지에 나열된 대로 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다.

**참고:** CSS 값을 *데이터 유형* 이라고 합니다. 용어는 기본적으로 상호 교환이 가능합니다. CSS에서 데이터 유형이라고 하는 것을 볼 때, 실제로 가치를 말하는 멋진 방법입니다.

**참고:** 예, CSS 값은 CSS 속성과 구별하기 위해, 꺾쇠괄호를 사용하여 표시되는 경향이 있습니다 (예: `color` 속성, `<color>` 데이터 형식). CSS 데이터 형식과 HTML 요소도 꺾쇠괄호를 사용하므로 혼동될 수 있지만, 이는 매우 다른 상황에서 사용됩니다.

다음 예제에서는 키워드를 사용하여 머리글의 색상을 설정하고, `rgb()` 함수를 사용하여 배경을 설정했습니다:

```css
h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}
```

CSS 값은 허용가능한 하윗값 모음을 정의하는 방법입니다. 즉, `<color>` 가 유효한 것으로 표시되면 — 키워드, 16진수 값, `rgb()` 함수 등 어떤 색상 값을 사용할 수 있는지 궁금할 필요가 없습니다. 사용 가능한 `<color>` 값은 브라우저에서 지원한다고 가정합니다. 각 값에 대한 MDN 페이지는 브라우저 지원에 대한 정보를 제공합니다. 예를 들어 `<color>` 페이지를 보면 브라우저 호환성 섹션에 다양한 색상 값 유형과 지원이 나열되어 있습니다.

여러가지 가능한 값을 시험해 볼 수 있도록 예를 들어 자주 접할 수 있는 몇 가지 유형의 값과 단위를 살펴보겠습니다.

숫자, 길이 및 백분율
------------

CSS에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다.

| 데이터 형식 | 설명 |
| --- | --- |
| `<integer>` | `<integer>` 은 `1024` 또는`-55`와 같은 정수입니다. |
| `<number>` | `<number>` 는 10진수를 나타냅니다. 소수점 이하의 소수 자릿수 (예: `0.255`, `128` 또는 `-1.2`) 가 있을 수도 있고 없을 수도 있습니다. |
| `<dimension>` (en-US) | `<dimension>` 은 예를 들어 `45deg`, `5s` 또는 `10px`. 과 같은 단위가 붙어있는 `<number>` 입니다. `<dimension>` 은 `<length>`, `<angle>`, `<time>` 및 `<resolution>` (en-US) 의 종류를 포함하는 카테고리입니다. (en-US) |
| `<percentage>` | `<percentage>` 는 다른 값의 일부, 예를 들어 `50%`를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다. |

### 길이

가장 자주 사용되는 숫자 형식은 `<length>` 입니다. 예를 들면 `10px` (픽셀) 또는 `30em`. CSS에서 사용되는 길이는 상대 및 절대의 두 가지 유형이 있습니다. 얼마나 커질지 알기 위해서는 차이를 이해하는 것이 중요합니다.

#### 절대 길이 단위

다음은 모두 **절대** 길이 단위이며 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.

| 단위 | 이름 | 다음과 동일함 |
| --- | --- | --- |
| `cm` | 센티미터 | 1cm = 37.8px = 25.2/64in |
| `mm` | 밀리미터 | 1mm = 1/10th of 1cm |
| `Q` | 4분의 1밀리미터 | 1Q = 1/40th of 1cm |
| `in` | 인치 | 1in = 2.54cm = 96px |
| `pc` | Picas | 1pc = 1/6th of 1in |
| `pt` | 포인트 | 1pt = 1/72nd of 1in |
| `px` | 픽셀 | 1px = 1/96th of 1in |

이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 예를 들어 일반적으로 화면에 `cm` (센티미터)를 사용하지 않습니다. 보통 사용하는 유일한 값은 `px` (픽셀)입니다.

#### 상대 길이 단위

상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기)와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있습니다.

| 단위 | 관련 사항 |
| --- | --- |
| `em` | 요소의 글꼴 크기. |
| `ex` | 요소 글꼴의 x-height. |
| `ch` | 요소 글꼴의 glyph "0"의 사전 길이 (너비)입니다. |
| `rem` | 루트 요소의 글꼴 크기. |
| `lh` | 요소의 라인 높이. |
| `rlh` | 루트 요소의 라인 높이. 루트 요소의 `font-size` 또는 `line-height` 속성에 사용될 때 속성의 초깃값을 참조합니다. |
| `vw` | 뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다. |
| `vh` | 뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다. |
| `vmin` | viewport의 작은 치수의 1%. |
| `vmax` | viewport의 큰 치수의 1%. |
| `vb` | 초기 컨테이닝 블록의 블록 축 (en-US) 크기 1%와 같습니다. |
| `vi` | 초기 컨테이닝 블록의 인라인 축 (en-US) 크기 1%와 같습니다. |
| `svw, svh` | 작은 뷰포트 각각의 너비 및 높이 1%. |
| `lvw, lvh` | 큰 뷰포트 각각의 너비 및 높이 1%. |
| `dvw, dvh` | 동적인 뷰포트 각각의 너비 및 높이 1%. |

#### 예제 살펴보기

아래 예에서 일부 상대 및 절대 길이 단위의 동작을 확인할 수 있습니다. 첫 번째 박스에는 `width` 픽셀 단위로 설정되어 있습니다. 절대 단위로서 이 너비는 다른 사항에 관계없이 동일하게 유지됩니다.

두 번째 박스의 너비는 `vw` (viewport 너비) 단위로 설정됩니다. 이 값은 viewport 너비를 기준으로 하므로, 10vw 는 viewport 너비의 10%입니다. 브라우저 창의 너비를 변경하면, 박스의 크기가 변경되지만, 이 예제는 `<iframe>` (en-US) 을 사용하여 페이지에 포함되므로 작동하지 않습니다. 이 기능을 실제로 보려면 브라우저 탭에서 예제를 연 후에 시도 해야 합니다.

세 번째 박스는 `em` 단위를 사용합니다. 글꼴 크기에 상대적입니다. `.wrapper` class를 포함하는 `<div>` (en-US) 를 포함하여 글꼴 크기를 `1em` 으로 설정했습니다. 이 값을 `1.5em` 으로 변경하면 모든 요소의 글꼴 크기가 증가하지만, 너비가 해당 글꼴 크기에 비례하므로 마지막 항목만 넓어집니다.

위의 지침을 따른 후 다른 방법으로 값을 실습하여 얻은 것을 확인하세요.

#### ems 및 rems

`em` 과 `rem`은 박스에서 텍스트로 크기를 조정할 때 가장 자주 발생하는 두 개의 상대 길이입니다. 텍스트 스타일링 또는 CSS 레이아웃 과 같은 보다 복잡한 주제를 시작할 때, 이러한 작동 방식과 차이점을 이해하는 것이 좋습니다. 아래 예제는 데모를 제공합니다.

HTML은 중첩된 목록의 집합입니다. 총 3개의 목록이 있으며 두 예제 모두 동일한 HTML을 갖습니다. 유일한 차이점은 첫 번째는 ***ems*** class이고 두 번째는 ***rems*** class입니다.

먼저, `<html>` 요소에서 글꼴 크기로 16px 를 설정합니다.

**다시 말해서, em 단위는 "부모 요소의 글꼴 크기"를 의미합니다**. `ems` `class`가 있는 `<ul>` 내부의 `<li>` 요소는 부모로부터 크기를 가져옵니다. 따라서 각 중첩 부분은 글꼴 크기가 부모 글꼴 크기의 `1.3em`, 1.3 배로 설정되므로 점점 더 커집니다.

**다시 말해서, rem 단위는 "루트 요소의 글꼴 크기"를 의미합니다**. ("root em" 의 rem 표준입니다.) `rems` `class`가 있는 `<ul>` 내부의 `<li>` 요소는 루트 요소는 (`<html>`) 에서 크기를 가져옵니다. 이것은 각각의 연속적인 중첩 부분이 계속 커지는 것을 의미합니다.

그러나, CSS에서 `<html>` `font-size` 를 변경하면 다른 모든 텍스트가 변경되는 것을 볼 수 있습니다. `rem` 및 `em` 크기 텍스트.

### 백분율

많은 경우 백분율은 길이와 같은 방식으로 처리됩니다. 백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것입니다. 예를 들어, 요소의 `font-size` 를 백분율로 설정하면 요소 부모의 글꼴 크기에 대한 백분율이 됩니다. `width` 값에 백분율을 사용하면, 부모 너비의 백분율이 됩니다.

아래 예제에서 두 개의 백분율 크기 박스와 두 개의 픽셀 크기 박스는 동일한 class이름을 갖습니다. 두 세트의 너비는 각각 200px 및 40%입니다.

차이점은 두 박스의 두 번째 세트가 너비가 400 픽셀 안에 있다는 것입니다. 두 번째 200px 너비의 박스는 첫 번째 너비와 동일한 너비이지만, 두 번째 40% 박스는 이제 400px의 40%이므로 첫 번째 박스보다 훨씬 좁습니다!

**너비 또는 백분율 값을 변경하여 작동 방식을 확인합니다.**

다음 예제에서는 글꼴 크기가 백분율로 설정되어 있습니다. 각 `<li>` 의 `font-size` 는 80%이므로, 중첩된 목록 항목은 부모로부터 크기를 상속함에 따라 점차 작아집니다.

많은 값이 길이 또는 백분율을 허용하지만, 길이만 허용하는 값도 있습니다. MDN 속성 참조 페이지에서 어떤 값이 허용되는지 확인할 수 있습니다. 허용된 값에 `<length-percentage>` 가 포함된 경우 길이 또는 백분율을 사용할 수 있습니다. 허용된 값에 `<length>` 만 포함된 경우, 백분율을 사용할 수 없습니다.

### 숫자

일부 값은 단위를 추가하지 않고 숫자를 허용합니다. 단위가 없는 숫자를 허용하는 속성의 예는 요소의 불투명도 (투명한 정도)를 제어하는 `opacity` 속성입니다. 이 속성은 `0` (완전 투명)과 `1` (완전 불투명) 사이의 숫자를 허용합니다.

**아래 예제에서, `opacity` 값을 `0` 과 `1` 사이의 다양한 10진수 값으로 변경하고 박스와 그 내용이 어떻게 붙투명하게 되는지 확인하세요.**

**참고:** CSS에서 숫자를 값으로 사용하는 경우 따옴표로 묶지 않아야합니다.

색상
--

CSS에서 색상을 지정하는 방법은 여러 가지가 있으며, 그중 일부는 다른 것 보다 최근에 구현되었습니다. 텍스트 색상, 배경 색상 등을 지정하든 상관없이 CSS의 모든 위치에서 동일한 색상 값을 사용할 수 있습니다.

최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit이며, 채널당 256개의 서로 다른 값 (256 x 256 x 256 = 16,777,216) 을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만 개의 고유한 색상을 표시할 수 있습니다. CSS에서 색상을 지정할 수 있는 몇 가지 방법을 살펴보겠습니다.

**참고:** 이 자습서에서는 브라우저 지원 기능이 우수한 색상을 지정하는 일반적인 방법을 살펴봅니다. 다른 것도 있지만, 지원 기능이 뛰어나지 않고 덜 일반적입니다.

### 색상 키워드

여기의 학습 섹션이나 MDN 의 다른 예에서 색상 키워드를 지정하는 간단하고 이해하기 쉬운 방법인 색상 키워드를 볼 수 있습니다. 이 키워드에는 여러 가지가 있으며 그중 일부는 상당히 재미있는 이름을 가지고 있습니다! `<color>` 값에 대한 전체 목록을 페이지에서 볼 수 있습니다.

**아래의 라이브 예제에서 다른 색상 값을 사용하여 작동하는 방법에 대한 아이디어를 얻으십시오.**

### 16진수 RGB 값

다음 형식의 색상 값은 16진수 코드입니다. 각 16진수 값은 hash/pound 기호 (#) 와 6개의 16진수로 구성되며, 각 16진수는 0과 f (15를 나타냄) 사이의 16개 값 중 하나를 사용할 수 있으므로 `0123456789abcdef` 입니다. 각 값 쌍은 채널 중 하나 빨강, 녹색 및 파랑을 나타내며 각각에 대해 256개의 사용 가능한 값 (16 x 16 = 256) 을 지정할 수 있습니다.

이 값은 좀 더 복잡하고 이해하기 쉽지 않지만, 키워드보다 훨씬 더 다양합니다. 16진수 값을 사용하여 색상표에 사용하려는 색상을 나타낼 수 있습니다.

**다시 한번, 값을 변경하여 색상이 어떻게 다른지 확인하세요.**

### RGB 및 RGBA 값

여기서 이야기할 세 번째 방식은 RGB입니다. RGB 값은 `rgb()` 함수입니다. 이 값은 16진수 값과 거의 같은 방식으로 색상의 빨강, 녹색 및 파랑 채널 값을 나타내는 세 개의 매개 변수가 제공됩니다. RGB와의 차이점은 각 채널이 2개의 16진수가 아니라 0~255 사이의 10진수로 표현되어 다소 이해하기 쉽다는 것입니다.

RGB 색상들을 사용하기 위해 우리의 마지막 예시를 다시 작성해봅시다.

RGBA 색상을 사용할 수도 있습니다. 이 색상은 RGB 색상과 정확히 같은 방식으로 작동하므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity)를 제어합니다. 이 값을 `0`으로 설정하면 색상이 완전히 투명해지는 반면, `1`이면 완전히 불투명하게 됩니다. 그 사이의 값은 다른 수준의 투명성을 제공합니다.

**참고:** 색상에 알파 채널을 설정하면 앞에서 살펴본 `opacity` 속성을 사용하는 것과 한 가지 중요한 차이점이 있습니다. 불투명도를 사용하면 요소와 그 안에 있는 모든 것을 불투명하게 만드는 반면, RGBA 색상을 사용하면 불투명하게 지정한 색상만 만들어집니다.

아래 예제에서 나는 색상 박스가 포함된 블록에 배경 이미지를 추가했습니다. 그런 다음 박스에 다른 불투명도 값을 갖도록 설정했습니다. 알파 채널 값이 작을 때 배경이 더 잘 나타나는지 확인하세요.

**이 예에서는, 알파 채널 값을 변경하여 색상 출력에 어떤 영향을 미치는지 확인하세요.**

**참고:** 구형 버전의 CSS에서는 `rgb()` 문법이 알파 매개변수를 지원하지 않았기 때문에 `rgba()` 라는 다른 함수를 호출해야 했습니다. 요즘에는 알파 매개변수를 `rgb()`에 넘길 수 있습니다. 하지만 구형 웹사이트와의 하위 호환성을위해 여전히 `rgba()` 문법은 지원되고 있습니다. 그리고 `rgb()`와 정확히 같은 동작을 수행합니다.

### HSL 및 HSLA 값

RGB보다 약간 덜 지원되는 HSL 색상은 (이전 버전의 IE에서는 지원되지 않음) 디자이너의 관심을 끈 후에 구현되었습니다. `hsl()` 함수는 빨강, 녹색 및 파랑 값 대신 색조 (hue), 채도 (saturation) 및 명도(lightness) 값을 받아들입니다. 이 값은 1670만 가지 색상을 구별하는 데 사용되지만, 다른 방식으로 사용됩니다.

* **색조 (Hue)**: 색상의 기본 음영입니다. 0에서 360 사이의 값을 사용합니다.
* **채도 (Saturation)**: 색상이 얼마나 포함되어 있습니까? 0–100% 사이의 값을 취합니다. 여기서 0은 색상이 없고 (회색 음영으로 표시됨), 100%는 전체 색상 채도입니다.
* **명도 (Lightness)**: 색상이 얼마나 밝습니까? 0–100%의 값을 받습니다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨), 100%는 완전한 빛 (완전히 흰색으로 표시됨)입니다.

다음과 같이 HSL 색상을 사용하도록 RGB 예제를 업데이트할 수 있습니다.

`rgb()`처럼 불투명도를 명시하기 위해 `hsl()`에 알파 매개변수를 넘길 수 있습니다.

**참고:** 구형 버전의 CSS에서는 `hsl()` 문법이 알파 매개변수를 지원하지 않았기 때문에 `hsla()` 라는 다른 함수를 호출해야 했습니다. 요즘에는 알파 매개변수를 `hsl()`에 넘길 수 있습니다. 하지만 구형 웹사이트와의 하위 호환성을위해 여전히 `hsla()` 문법은 지원되고 있습니다. 그리고 `hsl()`와 정확히 같은 동작을 수행합니다.

여러분의 프로젝트에서 이러한 색상 값을 사용할 수 있습니다. 대부분의 프로젝트에서 색상 팔레트를 결정한 다음 전체 프로젝트에서 해당 색상과 선택한 색상 지정 방법을 사용합니다. 색상 모델을 혼합하고 일치시킬 수 있지만, 일관성을 유지하려면 전체 프로젝트에서 동일한 모델을 사용하는 것이 가장 좋습니다!

이미지
---

`<image>` 값 형식은 이미지가 유효한 값인 경우 사용됩니다. 이것은 `url()` 함수 또는 gradient를 통해 가리키는 실제 이미지 파일일 수 있습니다.

아래 예제에서 CSS `background-image` 속성의 값으로 사용되는 이미지와 gradient를 보여주었습니다.

**참고:** `<image>` 에 대해 가능한 다른 값이 있지만 이 값은 최신이며 최신 브라우저 지원이 좋지 않습니다. <image> 데이터 형식을 읽으려면 MDN 페이지에서 `<image>` 데이터 형식을 확인하세요.

위치 (Position)
-------------

`<position>` 값 형식은 배경 이미지 (`background-position` (en-US) 를 통해) 와 같은 항목을 배치하는 데 사용되는 2D 좌표를 나타냅니다. `top`, `left`, `bottom`, `right` 및 `center`와 같은 키워드를 사용하여 항목을 2D 박스의 특정 범위에 맞춰 길이와 함께 박스의 위쪽 및 왼쪽 가장자리에서 offset을 나타냅니다.

일반적인 position 값은 두 가지 값으로 구성됩니다. 첫 번째는 위치를 가로로 설정하고, 두 번째는 세로로 설정합니다. 한 축의 값만 지정하면 다른 축은 `center` 으로 설정됩니다.

다음 예제에서는 키워드를 사용하여 컨테이너의 위쪽과 오른쪽에서 40px의 배경 이미지를 배치했습니다.

**이 값을 가지고 놀면서 이미지를 어떻게 밀어낼 수 있는지 확인하세요.**

문자열 및 식별자 (identifiers)
-----------------------

위의 예에서, 키워드가 값으로 (예: `red`, `black`, `rebeccapurple` 및 `goldenrod`와 같은 `<color>` 키워드) 사용되는 위치를 확인했습니다. 이러한 키워드는 CSS 가 이해하는 특수한 값인 ***식별자 (identifiers)***로 보다 정확하게 설명됩니다. 따라서 인용되지 않으며 문자열로 취급되지 않습니다.

CSS에서 문자열을 사용하는 장소가 있습니다. 예를 들면, 생성된 콘텐츠를 지정할 때. 이 경우 값은 문자열임을 보여주기 위해 인용됩니다. 아래 예제에서는 인용되지 않은 색상 키워드와 인용된 생성된 콘텐츠 문자열을 사용합니다.

함수 (Functions)
--------------

우리가 살펴볼 마지막 값의 형식은 함수로 알려진 값의 그룹입니다. 프로그래밍에서 함수는 개발자와 컴퓨터 모두에서 최소한의 노력으로 반복적인 작업을 완료하기 위해 여러 번 실행할 수 있는 재사용 가능한 코드 섹션입니다. 함수는 일반적으로 JavaScript, Python 또는 C++과 같은 언어와 관련이 있지만, 속성값으로 CSS에도 존재합니다. `rgb()`, `hsl()` 등의 색상 섹션에서 작동하는 함수를 이미 보았습니다. 파일에서 이미지를 반환하는 데 사용되는 값인 `url()`도 함수입니다.

전통적인 프로그래밍 언어에서 찾아볼 수 있는 것과 비슷한 값은 `calc()` CSS 함수입니다. 이 함수를 사용하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 프로젝트의 CSS를 작성할 때 정의할 수 없는 값을 계산하고 런타임에 브라우저가 작동해야 하는 경우 특히 유용합니다.

예를 들어, 아래에서는 `calc()` 를 사용하여 박스를 `20% + 100px` 너비로 만듭니다. 20% 는 부모 container `.wrapper` 의 너비에서 계산되므로 너비가 변경되면 변경됩니다. 우리는 부모 요소의 20% 가 무엇인지 알지 못하기 때문에, 이 계산을 미리 수행할 수 없으므로 `calc()` 를 사용하여 브라우저에 지시합니다.

스킬을 테스트하세요!
-----------

이 글의 가장 마지막까지 읽었지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기 전에 이 정보를 기억하는지 확인할 수 있는 몇 가지 추가 테스트가 있습니다. 스킬 테스트하기: 값 및 단위 (en-US)를 확인해 주세요.

요약
--

지금까지 가장 일반적인 형식의 값과 단위를 빠르게 살펴보았습니다. CSS 값 및 단위 참조 페이지에서 다양한 유형을 모두 볼 수 있습니다. 이 수업을 진행하면서 사용 중인 많은 것들을 보게 될 것입니다.

기억해야 할 중요한 점은 각 속성에 정의된 값 목록이 있고 각 값에는 하윗값이 무엇인지 설명하는 정의가 있다는 것입니다. 그런 다음 MDN 에서 세부 사항을 찾을 수 있습니다. 예를 들어, `<image>` 를 사용하면 색상 gradient를 만들 수 있다는 점을 이해하는 것은 유용하지만 당연하지 않은 지식일 수 있습니다.

다음 기사에서는 CSS로 어떻게 항목의 크기를 조절하는지 알아보겠습니다.

* 이전
* Overview: Building blocks
* 다음


텍스트 표시 방향 제어하기 - Web 개발 학습하기

텍스트 표시 방향 제어하기
==============

* 이전
* Overview: Building blocks
* 다음

CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되는 콘텐츠에 매우 깔끔하게 매핑되며, 기본적으로 웹은 오른쪽에서 왼쪽으로 쓰는 언어 (예: 아랍어) 보다 왼쪽에서 오른쪽으로 쓰는 언어 (예: 영어 또는 프랑스어) 를 더 잘 지원하는 경향이 있습니다.

그러나 최근 몇 년 동안, CSS 는 오른쪽에서 왼쪽 뿐만 아니라 위에서 아래로 오는 콘텐츠 (예: 일본어) 를 포함하여 다른 내용의 방향성을 더 잘 지원하기 위해 발전했습니다 — 이러한 다른 방향을 **쓰기 모드 (writing modes)** 라고 합니다. 학습 과정을 진행하고 레이아웃 작업을 시작함에 따라 쓰기 모드에 대한 이해가 도움이 될 것이므로 지금 소개하겠습니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계
 학습)
  |
| 목적: | 최신 CSS 에 대한 쓰기 모드의 중요성을 이해하기. |

쓰기 모드 (writing modes)란 무엇인가?
----------------------------

CSS 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타냅니다. `writing-mode` (en-US) 속성을 사용하면 쓰기 모드에서 다른 쓰기 모드로 전환할 수 있습니다. 이를 위해 세로 쓰기 모드를 사용하는 언어로 작업할 필요는 없습니다 — 창의적 목적으로 레이아웃 일부의 쓰기 모드를 변경할 수도 있습니다.

아래 예에서는 `writing-mode: vertical-rl` 를 사용하여 표시되는 제목이 있습니다. 이제 텍스트가 세로로 나타납니다. 세로 텍스트는 그래픽 디자인에서 일반적이며, 웹 디자인에서 보다 흥미로운 모양과 느낌을 추가할 수 있습니다.

`writing-mode` (en-US) 속성에 가능한 세 가지 값은 다음과 같습니다:

* `horizontal-tb`: 블록의 표시 방향은 위에서 아래 입니다. 문장은 가로로 표시됩니다.
* `vertical-rl`: 블록의 표시 방향은 오른쪽에서 왼쪽입니다. 문장은 수직으로 표시됩니다.
* `vertical-lr`: 블록의 표시 방향은 왼쪽에서 오른쪽입니다. 문장은 수직으로 표시됩니다.

따라서 `writing-mode` 속성은 실제로 페이지에서 블록 수준 요소가 표시되는 방향을 설정합니다 — 위에서 아래로, 오른쪽에서 왼쪽으로 또는 왼쪽에서 오른쪽으로. 그러면 문장의 텍스트 방향이 지시됩니다.

쓰기 모드 와 블록 및 인라인 레이아웃
---------------------

우리는 이미 블록 및 인라인 레이아웃 과 일부는 블록 요소로 표시되고 다른 것은 인라인 요소로 표시된다는 사실에 대해 이미 논의했습니다. 위에서 설명한 것처럼 블록과 인라인은 실제 화면이 아니라 문서의 쓰기 모드와 연결되어 있습니다. 영어와 같이 텍스트를 가로로 표시하는 쓰기 모드를 사용하는 경우 블록은 페이지의 맨 위에서 아래로만 표시됩니다.

예제를 보면 더 명확해집니다. 이 다음 예제에서는 제목과 단락을 포함하는 두 개의 박스가 있습니다. 첫 번째 쓰기 모드는 페이지 상단에서 하단으로 수평으로 표시되는 `writing-mode: horizontal-tb` 를 사용합니다. 두 번째 쓰기 모드는 세로로 오른쪽에서 왼쪽으로 표시되는 `writing-mode: vertical-rl` 를 사용합니다.

쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. `horizontal-tb` 쓰기 모드에서 블록 방향은 위에서 아래로 진행됩니다. `vertical-rl` 쓰기 모드에서 블록 방향은 오른쪽에서 왼쪽으로 수평으로 표시됩니다. 따라서 **블록 크기**는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. **인라인 크기**는 항상 문장이 표시되는 방향입니다.

이 그림은 가로 쓰기 모드에 있을 때 2 차원 모양을 보여줍니다.
 ![가로 쓰기 모드에 대한 블록 및 인라인 축을 표시](/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/horizontal-tb.png)

이 그림은 세로 쓰기 모드에서 2 차원 모양을 보여줍니다.

![수직 쓰기 모드에 대한 블록 및 인라인 축을 표시](/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/vertical.png)

CSS 레이아웃, 특히 최신 레이아웃 방법을 살펴보기 시작하면, 블록 및 인라인에 대한 이 아이디어가 매우 중요해 집니다. 나중에 다시 방문하겠습니다.

### 방향 (Direction)

쓰기 모드 외에 텍스트 방향도 있습니다. 위에서 언급한 것처럼, 아랍어와 같은 일부 언어는 가로로 작성되지만, 오른쪽에서 왼쪽으로 작성됩니다. 이것은 창의적 의미에서 사용할 가능성이 있는 것이 아닙니다 — 단순히 오른쪽에 무언가를 정렬하려면 다른 방법이 있습니다 — 그러나 CSS 의 특성의 일부로 이것을 이해하는 것이 중요합니다. 웹은 왼쪽에서 오른쪽으로 표시되는 언어만을 위한 것이 아닙니다!

쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 *시작* 과 *끝* 에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다.

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

그러나 이 시점의 학습에서 쓰기 모드와 방향에 대해 이야기하는 이유는 우리가 이미 화면의 크기와 관련된 많은 속성을 보았고, 수평 쓰기 모드에 있을 때 가장 의미가 있기 때문입니다.

두 개의 박스를 다시 살펴 보겠습니다 — 하나는 `horizontal-tb` 쓰기 모드이고 다른 하나는 `vertical-rl` 입니다. 이 두 박스 모두 `width` 를 제공했습니다. 박스가 세로 쓰기 모드일 때 여전히 너비가 있으며, 이로 인해 텍스트가 overflow 되는 것을 알 수 있습니다.

이 시나리오에서 우리가 정말로 원하는 것은 쓰기 모드와 함께 높이와 너비를 본질적으로 바꾸는 것입니다. 세로 쓰기 모드인 경우 박스를 가로 쓰기 모드에서와 같이 블록 크기로 확장하려고 합니다.

이를 쉽게하기 위해, CSS 는 최근에 매핑된 속성 세트를 개발했습니다. 이것들은 본질적으로 — `width` 및 `height` — 와 같은 물리적 속성을 **논리적** 또는 **flow relative** 버전으로 대체합니다.

가로 쓰기 모드인 경우 `width` 에 매핑된 속성을 `inline-size` (en-US) 라고 합니다 — 인라인의 크기를 나타냅니다. `height` 의 속성 이름은 `block-size` (en-US) 이며 블록의 크기입니다. `width` 가 `inline-size` 로 대체된 아래 예에서 이것이 어떻게 작동하는지 볼 수 있습니다.

### 논리적 마진, 테두리 및 패딩 속성

지난 두 가지 수업에서 CSS 박스 모델과 CSS 테두리에 대해 배웠습니다. 마진, 테두리 및 패딩 속성에는 `margin-top`, `padding-left` 및 `border-bottom` 과 같은 여러 물리적 속성 인스턴스가 있습니다. 너비와 높이에 대한 매핑과 같은 방식으로 이러한 속성에 대한 매핑도 있습니다.

`margin-top` 속성은 `margin-block-start` (en-US) 에 매핑됩니다 — 이것은 항상 블록 크기의 시작에서 마진을 나타냅니다.

`padding-left` 속성은 인라인 방향의 시작 부분에 적용되는 패딩 `padding-inline-start` (en-US) 에 매핑됩니다. 이것은 쓰기 모드에서 문장이 시작되는 곳입니다. `border-bottom` 속성은 블록 크기의 끝의 경계인 `border-block-end` (en-US) 에 매핑됩니다.

아래에서 물리적 속성과 논리적 속성을 비교할 수 있습니다.

**`.box` 의 쓰기 모드 속성을 `vertical-rl` 로 전환하여 박스의 `writing-mode` 를 변경하면 물리적 속성이 물리적 방향과 연결되어 있는 반면, 논리적 속성은 쓰기 모드로 전환됩니다.**

**또한 `<h2>` 에 검은색 `border-bottom` 이 있음을 알 수 있습니다. 아래쪽 테두리가 항상 두 쓰기 모드에서 텍스트 아래로 이동하는 방법을 알아낼 수 있습니까?**

모든 개별 테두리를 고려할 때 많은 속성이 있으며, 논리 속성 및 값 (en-US) 에 대한 MDN 페이지에서 매핑된 속성을 모두 볼 수 있습니다.

### 논리적 값

지금까지 논리적 속성 이름을 살펴보았습니다. `top`, `right`, `bottom` 및 `left` 의 물리적 값을 취하는 속성도 있습니다 — 이러한 값에는 `block-start`, `inline-end`, `block-end` 및 `inline-start` 과 같은 논리값에 대한 매핑도 있습니다.

예를 들어, 이미지를 왼쪽으로 띄워서 텍스트가 이미지를 감싸도록 할 수 있습니다. 아래 예와 같이 `left` 을 `inline-start` 으로 바꿀 수 있습니다.

**이 예제에서 쓰기 모드를 `vertical-rl` 로 변경하여 이미지에 어떤 일이 발생하는지 확인하십시오. float 를 변경하려면 `inline-start` 를 `inline-end` 로 변경하십시오.**

여기에서는 쓰기 모드가 무엇이든 상관없이 논리 마진값을 사용하여 마진이 올바른 위치에 있는지 확인합니다.

### 물리적 또는 논리적 속성을 사용해야 합니까?

논리적 속성과 값은 물리적 속성보다 최신이므로, 브라우저에서만 최근에 구현되었습니다. 브라우저 지원이 얼마나 돌아가는지 보려면, MDN 의 속성 페이지를 확인할 수 있습니다. 여러 쓰기 모드를 사용하지 않는 경우, 지금은 실제 버전을 사용하는 것이 좋습니다. 그러나 궁극적으로 사람들은 flexbox 및 grid 와 같은 레이아웃 방법을 다루기 시작하면, 많은 의미가 있기 때문에 사람들이 대부분의 경우 논리적 버전으로 전환할 것으로 기대합니다.

요약
--

이 학습에서 설명 개념은 CSS 에서 점점 중요해지고 있습니다. 블록과 인라인 방향에 대한 이해와 쓰기 모드의 변화에 따른 텍스트 방향의 변화는 앞으로 매우 유용할 것입니다. 가로 이외의 쓰기 모드를 사용하지 않아도 CSS 를 이해하는 데 도움이 됩니다.

다음 학습에서는 CSS 의 overflow 를 자세히 살펴볼 것입니다.

* 이전
* Overview: Building blocks
* 다음


이미지, 미디어 및 양식 요소 - Web 개발 학습하기

이미지, 미디어 및 양식 요소
================

* 이전
* Overview: Building blocks
* 다음

이번 수업에서는 특별한 요소들을 CSS에서 어떻게 다루는지 살펴볼 것입니다. 이미지, 기타 미디어 및 양식 요소는 일반 박스와 다르게 CSS를 사용해서 스타일을 지정할 수 있다는 특징 덕분에 약간 다르게 작동합니다. 무엇이 가능하고 불가능한지 이해하는 것은 약간의 불편함을 줄이는 데 도움이 될 수 있으며, 이 수업에서는 여러분이 알아야 할 주요 사항들을 다룰 것입니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계
 학습)
  |
| 목적: |
 CSS 로 스타일을 지정할 때 일부 요소가 비정상적으로 동작하는 방식을
 이해하기.
  |

대체 (Replaced) 요소
----------------

이미지와 비디오는 **대체 요소** 로 설명됩니다. 즉, CSS 는 이러한 요소의 내부 레이아웃에 영향을 줄 수 없으며 — 다른 요소중에서 페이지의 위치에만 영향을 줍니다. 그러나 우리가 볼 수 있듯이 CSS 는 이미지로 할 수 있는 다양한 일들이 있습니다.

이미지 및 비디오와 같은 특정 대체 요소도 **종횡비 (aspect ratio)** 를 갖는 것으로 설명됩니다. 이는 가로 (x) 및 세로 (y) 크기를 가지며, 기본적으로 파일의 고유 크기를 사용하여 표시됨을 의미합니다.

이미지 크기 조정
---------

이 수업을 수행하여 이미 알고 있듯이 CSS 의 모든 것은 박스를 생성합니다. 이미지 파일의 고유 크기보다 작거나 큰 박스 안에 이미지를 배치하면, 박스보다 작게 나타나거나 박스가 overflow 됩니다. overflow 로 인해 발생하는 일에 대해 결정해야 합니다.

아래 예에서는 크기가 200 픽셀인 두 개의 박스가 있습니다:

* 하나는 200 픽셀보다 작은 이미지를 포함합니다 — 이미지는 박스보다 작으며 이미지를 채우기 위해 늘어나지 않습니다.
* 다른 하나는 200 픽셀보다 커서 박스를 넘칩니다.

overflow 문제에 대해 우리는 무엇을 할 수 있습니까?

이전 수업 에서 배운 것처럼 일반적인 기술은 이미지의 `max-width` 를 100% 로 만드는 것입니다. 이렇게하면 이미지가 박스보다 작지만 커질 수 없습니다. 이 기술은 `<video>` 또는 `<iframe>` (en-US) 과 같은 다른 대체 요소와 함께 작동합니다.

**위 예에서 `<img>` 요소에 `max-width: 100%` 를 추가하십시오. 작은 이미지는 변경되지 않지만, 큰 이미지는 박스에 맞게 작아집니다.**

container 내부의 이미지에 대해 다른 선택을 할 수 있습니다. 예를 들어, 박스 크기를 완전히 덮을 수 있도록 이미지 크기를 조정할 수 있습니다.

`object-fit` 속성이 도움이 될 수 있습니다. `object-fit` 를 사용할 때 대체 요소의 크기를 다양한 방식으로 박스에 맞게 조정할 수 있습니다.

아래에서는 값 `cover` 를 사용하여 이미지의 크기를 줄이며, 화면 비율을 유지하여 박스를 깔끔하게 채웁니다. 종회비가 유지되면 이미지의 일부가 박스에 의해 잘립니다.

`contain` 을 값으로 사용하면 이미지가 박스 안에 들어갈만큼 작아질 때까지 이미지가 축소됩니다. 박스와 종횡비가 다르면 "letterbox" 가 됩니다.

박스를 채우지만 종횡비는 유지하지 않는 `fill` 값을 사용해 볼 수도 있습니다.

대체 요소 레이아웃
----------

대체 요소에 다양한 CSS 레이아웃 기술을 사용하면, 다른 요소와 약간 다르게 동작할 수 있습니다. 예를 들어, flex 또는 grid 레이아웃에서 요소는 기본적으로 전체 영역을 채우기 위해 확장됩니다. 이미지가 늘어나지 않고 grid 영역 또는 flex container 의 시작 부분에 맞춰 정렬됩니다.

아래 예에서 두 개의 열, 두 개의 행 grid container 가 있으며, 여기에는 네 개의 항목이 있습니다. 모든 `<div>` 요소는 배경색을 가지며 행과 열을 채우기 위해 확장됩니다. 그러나, 이미지가 늘어나지 않습니다.

이 수업을 순서대로 따르는 경우 레이아웃을 아직 보지 않았을 수 있습니다. 대체 요소는 grid 또는 flex 레이아웃의 일부가 될 때, 기본 동작이 서로 다르다는 점을 유념해 주십시오. 기본적으로 배치로 인해 이상하게 늘어나지 않도록 하기 위해서입니다.

grid 셀을 채우도록 이미지를 늘리려면, 다음과 같은 작업을 수행해야 합니다.

```css
img {
  width: 100%;
  height: 100%;
}
```

그러나 이것은 이미지를 늘릴 것이기 때문에, 아마 당신이 하고 싶지 않을 것입니다.

양식 (Form) 요소
------------

CSS 로 스타일링 할 때, 양식 요소는 까다로운 문제가 될 수 있으며 웹 양식 모듈 에는 약식 요소의 까다로운 측면에 대한 자세한 안내서가 포함되어 있습니다. 이 기사에서 강조할 가치가 있는 몇 가지 기본 사항이 있습니다.

`<input>` (en-US) 요소를 통해 많은 양식 컨트롤이 페이지에 추가됩니다 — 텍스트 입력과 같은 간단한 양식 필드를 정의하고 색상 및 날짜 선택자와 같은 HTML5 에 추가된 보다 복잡한 필드를 통해 정의합니다. 여러줄로 된 텍스트 입력을 위한 `<textarea>` (en-US) 와 같은 일부 추가 요소와 `<fieldset>` 및 `<legend>` 와 같은 양식의 일부를 포함하고 레이블을 지정하는 데 사용되는 요소가 있습니다.

HTML5 에는 또한 웹 개발자가 어떤 필드가 필요한지, 심지어 입력해야하는 콘텐츠 유형을 표시할 수 있는 속성이 포함되어 있습니다. 사용자가 예기치 않은 것을 입력하거나 필수 필드를 비워두면, 브라우저에 오류 메시지가 표시될 수 있습니다. 다른 브라우저는 이러한 항목에 대해 얼마나 많은 스타일과 사용자 정의가 허용되는지에 일관성이 없습니다.

### 텍스트 입력 요소 스타일링

`<input type="text">` 와 같은 텍스트 입력을 허용하는 요소, `<input type="email">`, 과 같은 특정 유형 및 `<textarea>` 요소는 스타일이 매우 쉽고 다른 박스처럼 동작하는 경향이 있습니다. 귀하의 페이지에 이러한 요소의 기본 스타일은 사용자가 사이트를 방문하는 운영체제 및 브라우저에 따라 다릅니다.

아래 예에서는 CSS 를 사용하여 일부 텍스트 입력의 스타일을 지정했습니다. 테두리, 마진 및 패딩과 같은 항목이 모두 예상대로 적용되는 것을 볼 수 있습니다. 속성 선택자를 사용하여 다양한 입력 유형을 대상으로 하고 있습니다. 테두리를 조정하고, 필드에 배경색을 추가하고, 글꼴 및 패딩을 변경하여 이 양식의 모양을 변경하십시오.

**경고:** **중요** 양식 요소의 스타일을 변경할 때 양식 요소임을 사용자에게 확실히 알 수 있도록 주의해야 합니다. 테두리와 배경이 없는 양식 입력을 작성할 수 있습니다. 이 입력 양식은 주변 내용과 거의 구분할 수 없습니다. 이로 인해 인식하고 채우기가 매우 어려워집니다.

이 과정의 HTML 부분에서 양식 스타일 (en-US) 에 대한 강의에서 설명한대로, 보다 복잡한 입력 유형 중 많은 부분이 운영체제에서 렌더링되며 스타일에 액세스할 수 없습니다. 따라서 항상 방문자마다 양식이 크게 달라지고 여러 브라우저에서 복잡한 양식을 테스트한다고 가정해야합니다.

### 상속 과 양식 요소

일부 브라우저에서 양식 요소는 기본적으로 글꼴 스타일을 상속하지 않습니다. 따라서 양식 필드가 본문 또는 상위 요소에 정의된 글꼴을 사용하도록 하려면, 이 규칙을 CSS 에 추가해야 합니다.

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}
```

### 양식 요소 및 박스 크기 조정

여러 브라우저 양식 요소는 서로 다른 위젯에 다른 박스 크기 조정 규칙을 사용합니다. 박스 모델 학습 에서 `box-sizing` 속성에 대해 학습했으며 양식을 스타일링할 때 이 지식을 사용하여 양식 요소에서 너비와 높이를 설정할 때 일관된 경험을 보장할 수 있습니다.

일관성을 유지하려면 모든 요소에서 마진과 패딩을 `0` 으로 설정한 다음 특정 컨트롤을 스타일링할 때 다시 마진을 추가하는 것이 좋습니다.

```css
button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```

### 다른 유용한 설정

위에서 언급한 규칙 외에도 `<textarea>` 에서 `overflow: auto` 를 설정하여 스크롤 막대가 필요하지 않은 경우 IE 에 스크롤 막대가 표시되지 않도록 설정해야 합니다.

```css
textarea {
  overflow: auto;
}
```

### 모든 것을 "재설정" 으로 통합

마지막 단계로, 위에서 설명한 다양한 속성을 다음 "양식 재설정" 으로 마무리하여 일관된 작업 기반을 제공할 수 있습니다. 여기에는 마지막 세 섹션에서 언급한 모든 항목이 포함됩니다.

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}
```

**참고:** Normalizing 스타일 시트는 많은 개발자가 모든 프로젝트에 사용할 일련의 기본 스타일을 작성하는 데 사용됩니다. 일반적으로 이것들은 위에서 설명한 것과 비슷한 기능을 수행하므로, CSS 에 대한 작업을 수행하기 전에 브라우저마다 다른것이 일관된 기본값으로 설정되어 있는지 확인하십시오. 브라우저는 일반적으로 과거보다 일관성이 높기 때문에, 예전만큼 중요하지 않습니다. 그러나 하나의 예를 살펴보려면 많은 프로젝트에서 기본으로 사용되는 매우 인기있는 스타일 시트인 Normalize.css 를 확인하십시오.

스타일링 양식에 대한 자세한 내용은 이 안내의 HTML 섹션에 있는 두 기사를 살펴보십시오.

* 웹 양식 스타일링 (en-US)
* 고급 양식 스타일링 (en-US)
요약
--

이 수업에서는 CSS 에서 이미지, 미디어 및 기타 특이한 요소로 작업할 때 발생할 수 있는 몇 가지 차이점을 강조했습니다. 다음 기사에서는 HTML 표의 스타일을 지정해야할 때 유용한 몇 가지 팁을 살펴보겠습니다.

* 이전
* Overview: Building blocks
* 다음


배경 및 테두리 - Web 개발 학습하기

배경 및 테두리
========

* 이전
* Overview: Building blocks
* 다음

이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 , CSS 작동 방식 이해 (CSS 첫 번째 단계
 학습)
  |
| 목적: | 박스의 배경과 테두리 스타일을 지정하는 방법 배우기. |

CSS 의 스타일링 배경
-------------

CSS `background` 속성은 이 수업에서 만나게 될 많은 background longhand 속성의 줄임말 입니다. 스타일 시트에서 복잡한 배경 속성을 발견하면, 한 번에 많은 값을 전달할 수 있으므로 이해하기 어려울 수 있습니다.

```css
.box {
  background:
    linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}
```

이 자습서의 뒷부분에서 속기 (shorthand) 작동 방식으로 돌아가지만, 먼저 개별 배경 속성을 보고, CSS 에서 배경으로 수행할 수 있는 다양한 작업을 살펴보겠습니다.

### 배경 색상

`background-color` 속성은 CSS 의 모든 요소에 대한 배경색을 정의합니다. 이 속성은 유효한 `<color>` 를 허용합니다. `background-color` 는 요소의 내용 및 패딩 박스 아래로 확장됩니다.

아래 예에서는 다양한 색상 값을 사용하여 박스, 제목 및 `<span>` 요소에 배경색을 추가했습니다.

**사용 가능한 <color> 값을 사용하여, 이것들을 가지고 놀아보십시오.**

### 배경 이미지

`background-image` 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있습니다. 아래 예에는 두 개의 박스가 있습니다 — 하나는 박스보다 큰 배경 이미지이고 다른 하나는 별 모양의 작은 이미지 입니다.

이 예제는 배경 이미지에 대한 두 가지를 보여줍니다. 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는 박스를 채우기 위해 바둑판 식으로 배열됩니다. 이 경우 실제 이미지는 단일 별 입니다.

**배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시됩니다. 위 예제에 `background-color` 속성을 추가하여 실제 상태를 확인하십시오.**

#### 배경 이미지 반복 제어

`background-repeat` 속성은 이미지의 타일링 동작을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같습니다:

* `no-repeat` — 배경이 반복되지 않도록 합니다.
* `repeat-x` — 수평으로 반복합니다.
* `repeat-y` — 수직으로 반복합니다.
* `repeat` — 기본값; 양방향으로 반복합니다.

**아래 예에서 이러한 값을 사용해 보십시오. 값이 `no-repeat` 로 설정되어 별 하나만 표시됩니다. 다른 값 — `repeat-x` 및 `repeat-y` — 를 사용하여 그 효과가 무엇인지 확인하십시오.**

#### 배경 이미지 크기 조정

위의 예에서 배경의 요소보다 커서, 이미지가 크게 잘립니다. 이 경우 길이 나 백분율 값을 취할 수 있는 `background-size` (en-US) 속성을 사용하여 이미지 크기를 배경 안에 맞출 수 있습니다.

키워드를 사용할 수도 있습니다:

* `cover` — 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.
* `contain` — 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.

아래 예제에서는 위 예제의 큰 이미지를 사용했으며, 박스 안에 길이 단위를 사용하여 크기를 조정했습니다. 이미지가 왜곡된 것을 볼 수 있습니다.

다음을 시도해 보십시오.

* 배경 크기를 수정하는 데 사용되는 길이 단위를 변경 하십시오.
* 길이 단위를 제거하고 `background-size: cover` 또는 `background-size: contain` 을 사용할 때 어떻게 되는지 확인 하십시오.
* 이미지가 박스보다 작으면, `background-repeat` 의 값을 변경하여 이미지를 반복할 수 있습니다.

#### 배경 이미지 배치

`background-position` (en-US) 속성을 사용하면 적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있습니다. 박스의 왼쪽 상단 모서리가 `(0,0)` 이고, 박스가 가로 (`x`) 및 세로 (`y`) 축을 따라 위치하는 좌표계를 사용합니다.

**참고:** `background-position` 의 기본값은 `(0,0)` 입니다.

가장 일반적인 `background-position` 값은 — 수평 값과 수직 값의 두 가지 개별 값을 갖습니다.

`top` 및 `right` (`background-image` 페이지에서 다른 키워드를 찾으십시오) 와 같은 키워드를 사용 할 수 있습니다:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}
```

그리고 길이 및 백분율:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}
```

키워드 값을 길이 또는 백분율과 혼합할 수도 있습니다. 예를 들면:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px;
}
```

마지막으로, 박스의 특정 모서리로 부터의 거리를 나타내기 위해 4 값 구문을 사용할 수도 있습니다 — 이 경우 길이 단위는 앞에 오는 값과의 offset 입니다. 아래 CSS 에서 우리는 배경을 위쪽에서 20px, 오른쪽에서 10px 로 배치합니다:

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}
```

**아래 예제를 사용하여 이러한 값을 가지고 실습하면서 박스 안에서 별을 움직이십시오.**

**참고:** `background-position` 은 `background-position-x` (en-US) 및 `background-position-y` (en-US) 의 줄임말로, 다른 축 위치 값을 개별적으로 설정할 수 있습니다.

### 그라데이션 (Gradient) 배경

배경에 사용될 때 — Gradient — 는 이미지 처럼 작동하며 `background-image` 속성을 사용하여 설정 됩니다.

`<gradient>` 데이터 유형에 대한 MDN 페이지에서 다양한 유형의 그라디언트 및 그라디언트로 수행 할 수 있는 작업에 대한 자세한 내용을 읽을 수 있습니다. 그라디언트를 재생하는 재미있는 방법은 웹에서 사용할 수 있는 많은 CSS 그라디언트 생성기 중 하나 를 사용하는 것입니다. 그라디언트를 생성한 다음 이를 생성하는 소스 코드를 복사하여 붙여 넣을 수 있습니다.

아래 예제에서 다른 그라디언트를 사용해 보십시오. 두 개의 박스에는 각각 전체 박스에 걸쳐 펼쳐지는 선형 그라디언트와 설정된 크기의 방사형 그라디언트가 있습니다. 따라서 반복됩니다.

### 여러 배경 이미지

여러 개의 배경 이미지를 가질 수도 있습니다 — 하나의 속성 값으로 여러 개의 `background-image` 값을 지정하고, 각 이미지를 쉼표로 구분합니다.

이렇게 하면 배경 이미지가 서로 겹칠 수 있습니다. 배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께 쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓입니다.

**참고:** 그라디언트는 일반 배경 이미지와 혼합될 수 있습니다.

다른 `background-*` 속성은 `background-image` 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다:

```css
background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;
```

다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, `image1` 의 `background-repeat` 값은 `no-repeat` 입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 `background-position` 값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — `image3` 에는 첫 번째 위치값이 제공되고, `image4` 에는 두 번째 위치값이 제공됩니다.

**해봅시다. 아래 예에서는 두 개의 이미지를 포함했습니다. 쌓인 순서를 설명하려면, 목록에서 어떤 배경 이미지가 먼저 나오는지 전환해 보십시오. 또는 다른 속성을 사용하여 위치, 크기 또는 반복 값을 변경하십시오.**

### 배경 첨부 (attachment)

배경에 사용할 수 있는 또 다른 옵션은 내용이 스크롤될 때 스크롤하는 방법을 지정하는 것입니다. 이는 `background-attachment` 속성을 사용하여 제어되며, 다음 값을 사용할 수 있습니다:

* `scroll`: 페이지가 스크롤될 때 요소의 배경이 스크롤 되도록 합니다. 요소 내용이 스크롤되면, 배경이 움직이지 않습니다. 실제로 배경은 페이지에서 동일한 위치로 고정되므로, 페이지가 스크롤될 때 스크롤 됩니다.
* `fixed`: 요소의 배경을 viewport 에 고정시켜, 페이지나 요소 내용을 스크롤할 때 스크롤되지 않도록 합니다. 항상 화면에서 동일한 위치에 유지됩니다.
* `local`: 이 값은 나중에 추가 되었습니다 (Explorer 9 이상에서만 지원되지만, 다른 값은 IE4 이상에서 지원됨). 왜냐하면 `scroll` 값이 다소 혼란스럽고 많은 경우 실제로 원하는 것을 수행하지 않기 때문입니다. `local` 값은 배경을 설정된 요소로 고정하므로, 요소를 스크롤하면 배경과 함께 스크롤 됩니다.

`background-attachment` 속성은 스크롤할 내용이 있을 때만 영향을 미치므로, 세 가지 값의 차이점을 보여주는 데모를 만들었습니다 — background-attachment.html 을 살펴보십시오 (여기에서 소스 코드 를 참조하십시오).

### 배경 속기 (shorthand) 속성 사용

이 수업 시작 부분에서 언급했듯이, `background` 속성을 사용하여 지정된 배경을 자주 볼 수 있습니다. 이 속기 기능을 사용하면 모든 다른 속성을 한 번에 설정할 수 있습니다.

여러 배경을 사용하는 경우, 첫 번째 배경에 대한 모든 속성을 지정한 다음, 쉼표 뒤에 다음 배경을 추가해야 합니다. 아래 예에서는 크기와 위치가 있는 그라디언트, `no-repeat` 및 이미지 위치가 있는 이미지 배경, 색상이 있습니다.

배경 이미지 속기 값을 쓸 때 따라야 할 몇 가지 규칙이 있습니다. 예를 들면:

* `background-color` 는 마지막 쉼표 뒤에만 지정할 수 있습니다.
* `background-size` 의 값은 `background-position`, 직후에 포함되며 `center/80%` 와 같이 '/' 문자로 구분됩니다.

모든 고려 사항을 보려면 MDN 페이지의 `background` 를 살펴보십시오.

### 배경이 있는 접근성 고려 사항

배경 이미지나 색상 위에 텍스트를 배치 할 때, 방문자가 텍스트를 읽을 수 있도록 contrast 를 충분히 유지해야 합니다. 이미지를 지정하고 해당 이미지 위에 텍스트를 배치하는 경우, 이미지가 로드되지 않은 경우 텍스트를 읽을 수 있는 `background-color` 도 지정해야 합니다.

화면 판독기는 배경 이미지를 구문 분석할 수 없으므로 순전히 장식이어야 합니다. 중요한 내용은 HTML 페이지의 일부여야 하며, 배경에 포함되지 않아야 합니다.

테두리
---

박스 모델에 대해 알아볼 때, 테두리가 박스 크기에 어떤 영향을 미치는지 알아 냈습니다. 이 수업에서는 테두리를 창의적으로 사용하는 방법을 살펴봅니다. 일반적으로 CSS 를 사용하여 요소에 테두리를 추가할 때는, CSS 의 한 라인에 테두리의 색상, 너비 및 스타일을 설정하는 속기 속성을 사용합니다.

`border` 를 사용하여 박스의 네 면 모두에 테두리를 설정할 수 있습니다:

```css
.box {
  border: 1px solid black;
}
```

또는 박스의 한쪽 가장자리를 대상으로 지정할 수 있습니다. 예를 들면:

```css
.box {
  border-top: 1px solid black;
}
```

이러한 속기의 개별 속성은 다음과 같습니다:

```css
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
```

그리고 longhands 는 다음과 같습니다:

```css
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}
```

**참고:** 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리 속성에는 문서의 쓰기 모드 (예: 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 텍스트 또는 위에서 아래로) 와 관련된 논리적 속성이 매핑되어 있습니다. 다음 수업에서는 다양한 텍스트 방향 처리 에 대해 다룰것입니다.

**테두리에 사용할 수 있는 다양한 스타일이 있습니다. 아래 예에서 우리는 박스의 네 면에 다른 테두리 스타일을 사용했습니다. 테두리 스타일, 너비 및 색상으로 실습하여 테두리의 작동 방식을 확인 하십시오.**

### 둥근 테두리

박스의 둥근 테두리는 `border-radius` 속성 과 박스의 각 모서리와 관련되 관련 longhands 를 사용하여 수행됩니다. 두 개의 길이 또는 백분율을 값으로 사용할 수 있습니다. 첫 번째 값은 가로 반경을 정의하고 두 번째 값은 세로 반경을 정의합니다. 많은 경우에 하나의 값만 전달하면 둘 다에 사용됩니다.

예를 들어, 박스의 네 모서리를 모두 10px radius 로 만들려면:

```css
.box {
  border-radius: 10px;
}
```

또는 오른쪽 상단 모서리의 가로 반경이 1em 이고, 세로 반경이 10% 가 되도록 하려면:

```css
.box {
  border-top-right-radius: 1em 10%;
}
```

아래 예에서 네 모서리를 모두 설정한 다음, 오른쪽 위 모서리의 값을 변경하여 다르게 만들었습니다. 값을 사용하여 모서리를 변경할 수 있습니다. 사용 가능한 구문 옵션을 보려면 `border-radius` 의 속성 페이지를 살펴보십시오.

배경과 테두리로 실습하기
-------------

새로운 지식을 테스트하려면 아래 예제를 시작점으로 사용하여 배경과 테두리를 사용하여 다음을 작성하십시오:

1. 박스에 둥근 모서리가 10px 인, 5px 검은색 단색 테두리를 지정하십시오.
2. 배경 이미지를 추가하고 (URL `balloons.jpg` 사용) 박스를 덮도록 크기를 조정하십시오.
3. `<h2>` 에 반투명 검정색 배경색을 지정하고 텍스트를 흰색으로 만듭니다.

**참고:** 여기에서 해결책을 살펴 보기 할 수 있지만 — 먼저 스스로 알아보십시오!

요약
--

여기서는 많은 내용을 다루었으며, 박스에 배경이나 데두리를 추가하는 것이 상당히 많다는 것을 알 수 있습니다. 논의한 기능에 대해 더 자세히 알고 싶다면, 다른 속성 페이지를 살펴보십시오. MDN 의 각 페이지에는 지식을 가지고 실습하고 향상시키기 위한 더 많은 사용 예제가 있습니다.

다음 수업에서는 문서의 쓰기 모드가 CSS 와 어떻게 상호 작용하는지 알아봅니다. 텍스트가 왼쪽에서 오른쪽으로 표시되지 않으면 어떻게 됩니까?

* 이전
* Overview: Building blocks
* 다음


결합자 - Web 개발 학습하기

결합자
===

* 이전
* Overview: Building blocks
* 다음

우리가 살펴볼 최종 선택자는 결합자라고 합니다. 다른 선택자를 서로 유용한 관계와 문서의 콘텐츠 위치를 제공하는 방식으로 결합하기 때문입니다.

|  |  |
| --- | --- |
| 전제 조건: |
 기본 컴퓨터 활용 능력,
 설치된 기본 소프트웨어,
 파일 작업에 대한 기본 지식, HTML 기초 (
 HTML 입문 학습), CSS 작동 방식에 대한 아이디어 (
 CSS 첫 번째 단계 학습)
  |
| 목적: | CSS에서 사용할 수 있는 다양한 결합자 선택자에 대해 알아봅시다. |

후손 결합자
------

**후손 결합자** - 일반적으로 단일 공백(" ") 문자로 표시됩니다 - 첫 번째 선택자와 일치하는 조상(부모, 부모의 부모, 부모의 부모의 부모 등) 요소가 있는 경우 두 번째 선택자와 일치하는 요소가 선택되도록 두 선택자를 결합합니다. 후손 결합자를 활용하는 선택자를 하위 선택자라고 합니다.

```css
body article p
```

아래 예에서는, `.box` 클래스가 있는 요소 내부에 있는 `<p>` 요소만 일치시킵니다.

자식 결합자
------

**자식 결합자**(`>`)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째와 일치하는 요소의 직계 자식인 두 번째 선택자와 일치하는 요소만 일치합니다. 계층 구조에서 더 아래에 있는 하위 요소는 일치하지 않습니다. 예를 들어, `<article>` 요소의 직계 자식인 `<p>` 요소만 선택하려면 다음을 수행하세요.

```css
article > p
```

다음 예제에는, 정렬되지 않은 목록이 있으며, 내부에 정렬된 목록이 중첩되어 있습니다. 자식 결합자는 `<ul>`의 직계 자식인 `<li>` 요소만 선택하고 위쪽 테두리로 스타일을 지정합니다.

이것을 자식 결합자로 지정하는 `>`를 제거하면, 후손 선택자가 되고 모든 `<li>` 요소는 빨간색 테두리를 갖게 됩니다.

인접 형제 결합자
---------

인접한 형제 선택자 (`+`)는 두 CSS 선택자 사이에 배치됩니다. 첫 번째 선택자의 다음 형제 요소인 두 번째 선택자와 일치하는 요소만 일치합니다. 예를 들어, `<p>` 요소 바로 앞에 있는 모든 `<img>` 요소를 선택하려면 다음을 수행하세요.

```css
p + img
```

일반적인 사용 사례는 아래 예와 같이 제목 뒤에 오는 단락으로 작업을 수행하는 것입니다. 이 예에서, 우리는 부모 요소를 `<h1>`과 공유하고 `<h1>` 바로 다음에 오는 모든 단락을 찾고 있습니다.

`<h1>`과 `<p>` 사이에 `<h2>`와 같은 다른 요소를 삽입하면 단락이 더 이상 선택기와 일치하지 않으므로 요소가 인접할 때 적용되는 배경 및 전경색을 얻지 못합니다.

일반 형제 결합자
---------

요소의 형제 요소가 바로 인접하지 않더라도 선택하려면 일반 형제 연결자(`~`)를 사용할 수 있습니다. `<p>` 요소 다음에 오는 모든 `<img>` 요소를 선택하려면 다음을 수행합니다.

```css
p ~ img
```

아래 예에서는 `<h1>` 뒤에 오는 모든 `<p>` 요소를 선택하고 있으며 문서에도 `<div>`가 있지만 그 뒤에 오는 `<p>`가 선택됩니다.

결합자 사용
------

문서의 일부를 선택하기 위해 이전 수업에서 배운 선택자를 연결자와 결합할 수 있습니다. 예를 들어 `<ul>`의 직계 자식인 "a" 클래스가 있는 목록 항목을 선택하려면, 다음을 시도하세요.

```css
ul > li[class="a"] {
}
```

그러나, 문서의 특정 부분을 선택하는 큰 선택자 목록을 만들 때는 주의하세요. 마크업에서 해당 요소의 위치에 매우 특정한 선택자를 만들었기 때문에 CSS 규칙을 재사용하기 어려울 것입니다.

간단한 클래스를 만들고 해당 요소에 적용하는 것이 더 나은 경우가 많습니다. 즉, 결합자에 대한 지식은 문서에서 스타일을 지정해야 하고 HTML이 CMS에 의해 생성되기 때문에 HTML에 액세스할 수 없는 경우 매우 유용할 것입니다.

능력을 시험해보세요
----------

이 기사의 끝에 도달했지만, 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인하는 추가 테스트를 찾을 수 있습니다. - Test your skills: Selectors (en-US)를 참조하세요.

요약
--

이 부분은 선택자에 대한 강의 마지막 세션입니다. 다음으로 CSS의 또 다른 중요한 부분인 cascade, specificity, and inheritance으로 이동합니다.

* 이전
* Overview: Building blocks
* 다음


의사 클래스와 의사 요소 - Web 개발 학습하기

의사 클래스와 의사 요소
=============

* 이전
* Overview: Building blocks
* 다음

다음으로 살펴볼 선택자의 종류는 **의사 클래스** 및 **의사 요소**라고 합니다. 여러 개가 있으며, 종종 매우 특정한 목적을 위해 사용됩니다. 사용 방법을 알게 되면 목록을 보고 달성하려는 작업에 적합한 것이 있는지 확인할 수 있습니다. 다시 한 번 각 선택자에 대한 관련 MDN 페이지는 브라우저 지원을 설명하는 데 도움이 됩니다.

|  |  |
| --- | --- |
| 전제 조건: |
 기본 컴퓨터 활용 능력,
 설치된 기본 소프트웨어,
 파일 작업에 대한 기본 지식, HTML 기초 (
 HTML 입문 학습), CSS 작동 방식에 대한 아이디어 (
 CSS 첫 번째 단계 학습).
  |
| 목적: | 의사 클래스 및 의사 요소 선택자에 대해 알아봅시다. |

의사 클래스란 무엇입니까?
--------------

의사 클래스는 특정 상태에 있는 요소를 선택하는 선택자입니다. 해당 유형의 첫 번째 요소이거나 마우스 포인터로 가리키고 있습니다. 그들은 마치 문서의 일부에 클래스를 적용한 것처럼 행동하는 경향이 있으며, 종종 마크업에서 과도한 클래스를 줄이는 데 도움이 되고, 더 유연하고 유지관리 가능한 코드를 만들어 줄 수 있습니다.

의사 클래스는 콜론으로 시작하는 키워드입니다. 예를 들어, `:hover`는 의사 클래스입니다.

### 간단한 의사-클래스 예

간단한 예를 살펴보겠습니다. 기사의 첫 번째 단락을 더 크고 굵게 만들고 싶다면 아래 첫 번째 예와 같이 해당 단락에 클래스를 추가한 다음 해당 클래스에 CSS를 추가할 수 있습니다.

그러나, 이 방법은 유지하기가 귀찮을 수 있습니다 - 문서 상단에 새 단락이 추가되면 어떻게 될까요? 클래스를 새 단락으로 이동해야 합니다. 클래스를 추가하는 대신 `:first-child` 의사 클래스 선택자를 사용할 수 있습니다 - 이것은 *항상* 문서의 첫 번째 하위 요소를 대상으로 하며 더 이상 HTML을 편집할 필요가 없습니다(어쨌든 CMS에서 생성되기 때문에 항상 가능한 것은 아닙니다).

모든 의사 클래스는 이와 같은 방식으로 작동합니다. HTML에 클래스를 추가한 것처럼 동작하여 특정 상태에 있는 문서의 일부를 대상으로 합니다. MDN의 다른 예를 살펴보십시오.

* `:last-child`
* `:only-child` (en-US)
* `:invalid` (en-US)

**참고:** 앞에 요소 선택자가 없는 의사 클래스와 요소를 작성하는 것은 유효합니다. 위의 예에서 `:first-child`를 작성할 수 있으며 규칙은 단락 첫 번째 자식이 아니라(`:first-child`는 `*:first-child`와 동일합니다), `<article>` 요소의 첫 번째 자식인 *any* 요소에 적용됩니다. 그러나 일반적으로 그보다 더 많은 제어를 원하므로, 더 구체적이어야 합니다.

### 사용자-행동 유사 클래스

일부 의사 클래스는 사용자가 어떤 방식으로든 문서와 상호 작용할 때만 적용됩니다. **동적 의사 클래스**라고도 하는 이러한 **사용자 행동** 의사 클래스는 사용자가 요소와 상호 작용할 때 클래스가 요소에 추가된 것처럼 작동합니다. 예를 들면, 다음과 같습니다.

* `:hover` — mentioned above; this only applies if the user moves their pointer over an element, typically a link.
* `:focus` — only applies if the user focuses the element by clicking or using keyboard controls.

의사-요소란 무엇인가요?
-------------

의사 요소는 유사한 방식으로 동작합니다. 그러나 기존 요소에 클래스를 적용하는 것이 아니라 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동합니다.

의사 요소는 이중 콜론 `::`으로 시작합니다. `::before`는 의사 요소의 예입니다.

**참고:** 일부 초기 의사 요소는 단일 콜론 구문을 사용했기 때문에 코드나 예제에서 이를 볼 수 있습니다. 최신 브라우저는 이전 버전과의 호환성을 위해 단일 또는 이중 콜론 구문으로 초기 의사 요소를 지원합니다.

예를 들아, 단락의 첫 줄을 선택하려면 `<span>` 요소로 감싸고 요소 선택자를 사용할 수 있습니다. 그러나 래핑한 단어 수가 부모 요소의 너비보다 길거나 짧으면 실패합니다. 한 줄에 얼마나 많은 단어가 들어갈지 모르는 경향이 있고 - 화면 너비나 글꼴 크기가 변경되면 변경되고 - HTML을 추가하여 이를 강력하게 수행하는 것은 불가능합니다.

`::first-line` 의사 요소 선택자는 이 작업을 안정적으로 수행합니다. - 단어 수가 증가하거나 감소하더라도 여전히 첫 번째 행만 선택합니다.

마치 `<span>`이 첫 번째 서식이 지정된 줄을 마법처럼 감싸고 줄 길이가 변경될 때마다 업데이트되는 것처럼 작동합니다.

 You can see that this selects the first line of both paragraphs.
 이렇게 하면 두 단락의 첫 번째 줄이 선택되는 것을 볼 수 있습니다.

의사 클래스와 의사 요소들의 혼합
------------------

첫 번째 단락의 첫 줄을 굵게 만들고 싶다면 `:first-child` 및 `::first-line` 선택자를 함께 연결할 수 있습니다. 다음 CSS를 사용하도록 이전 라이브 예제를 편집해 보세요. `<article>` 요소 안에 있는 첫 번째 `<p>` 요소의 첫 번째 줄을 선택하려고 합니다.

```css
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}
```

::before 및 ::after로 콘텐츠 생성
--------------------------

CSS를 사용하여 문서에 콘텐츠를 삽입하기 위해 `content` 속성과 함께 사용되는 몇 가지 특수 의사 요소가 있습니다.

이를 사용하여 아래의 실제 예와 같이 텍스트 문자열을 삽입할 수 있습니다. `content` 속성의 텍스트 값을 변경해고 출력에서 변경되는 것을 확인해보세요. 또한 `::before` 의사 요소를 `::after`로 변경하고 요소의 시작 부분 대신 끝에 삽입된 텍스트를 볼 수 있습니다.

CSS에서 텍스트 문자열을 삽입하는 것은 실제로 웹에서 매우 자주 수행하는 작업이 아닙니다. 해당 텍스트는 일부 스크린 리더에서 액세스할 수 없고 나중에 다른 사람이 찾아서 편집하기 어려울 수 있기 때문입니다.

이러한 의사 요소를 보다 효과적으로 사용하는 방법은 아이콘을 삽입하는 것입니다. 예를 들어 아래 예에 추가된 작은 화살표는 스크린 리더에서 읽지 않기를 바라는 시각적 표시기입니다.

이러한 의사 요소는 빈 문자열을 삽입하는 데 자주 사용되며, 그런 다음 페이지의 모든 요소처럼 스타일을 지정할 수 있습니다.

다음 예제에서는, `::before` 의사 요소를 사용하여 빈 문자열을 추가했습니다. 너비와 높이로 스타일을 지정할 수 있도록 이것을 `display: block`으로 설정했습니다. 그런 다음 CSS를 사용하여 다른 요소처럼 스타일을 지정합니다. CSS를 가지고 놀면서 모양과 작동 방식을 변경할 수 있습니다.

`content` 속성과 함께 `::before` 및 `::after` 의사 요소를 사용하는 것을 CSS에서는 "생성된 콘텐츠"라고 하며, 이 기술이 다양한 작업에 사용되는 것을 자주 볼 수 있습니다. 좋은 예는 CSS로 화살표를 생성하는 데 도움이 되는 CSS Arrow Please 사이트입니다. 화살표를 만들 때 CSS를 보면 `::before` (en-US) 및 `::after` 의사 요소가 사용 중인 것을 볼 수 있습니다. 이러한 선택자를 볼 때마다 `content` 속성을 살펴보고 HTML 요소에 추가되는 항목을 확인하세요.

요약
--

이 기사에서는 특별한 유형의 선택자인 CSS 의사 클래스와 의사 요소를 소개했습니다.

의사 클래스를 사용하면 해당 상태에 대한 클래스를 DOM에 추가한 것처럼 특정 상태에 있는 요소를 대상으로 지정할 수 있습니다. 의사 요소는 DOM에 완전히 새로운 요소를 추가한 것처럼 작동하며 스타일을 지정할 수 있습니다. `::before` 및 `::after` 의사 요소를 사용하면 CSS를 사용하여 문서에 콘텐츠를 삽입할 수 있습니다.

다음 글에서는 combinators에 대해 알아보겠습니다.

See also
--------

* Pseudo-classes reference
* Pseudo-elements reference
* 이전
* Overview: Building blocks
* 다음


Type, class, and ID selectors - Web 개발 학습하기

Type, class, and ID selectors
=============================

* 이전
* Overview: Building blocks
* 다음

이 단원에서는, 일을 하면서 가장 자주 사용하게 될 가장 간단한 선택자 중 일부를 살펴봅니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 설치된 기본 소프트웨어,
 파일 작업에 대한 기본 지식, HTML 기초 (
 HTML 소개를 공부하세요), CSS 작동 방식에 대한 아이디어 (
 CSS 첫 단계를 공부하세요)
  |
| 목적: | 문서에 CSS를 적용하는 데 사용할 수 있는 다양한 CSS 선택자에 대해 알아봅시다. |

유형 선택자
------

**유형 선택자**는 문서에서 HTML 태그/요소를 선택하기 때문에 태그 이름 선택자 또는 요소 선택자라고도 합니다. 아래 예에서는, `span`, `em` 및 `strong` 선택자를 사용했습니다.

**CSS 규칙을 추가하여 `<h1>` 요소를 선택하고 색상을 파란색으로 변경해보세요**

범용 선택자
------

범용 선택기는 별표(`*`)로 표시됩니다. 문서의 모든 항목을 선택합니다(또는 다른 요소 및 하위 연결자와 함께 연결된 경우 상위 요소 내부). 다음 예제에서는 범용 선택기를 사용하여 모든 요소의 여백을 제거합니다. 브라우저에서 추가한 기본 스타일이 제목과 단락의 간격을 두는 것과 반면, 모든 것이 서로 가깝습니다.

이러한 종류의 동작은 모든 브라우저 스타일을 제거하는 "스타일시트 재설정"에서 가끔 볼 수 있습니다. 범용 선택기는 전역 변경을 수행하므로 아래 설명된 것과 같은 매우 특정한 상황에 사용합니다.

### 범용 선택자를 사용하여 선택자를 더 쉽게 읽을 수 있도록 만들기

범용 선택자의 한 가지 용도는 선택자를 더 읽기 쉽게 만들고 수행하는 작업의 측면에서 더 명확하게 만드는 것입니다. 예를 들어, 직계 자식을 포함하여 부모의 첫 번째 자식인 `<article>` 요소의 자손 요소를 선택하고 굵게 표시하려면, `:first-child` 의사 클래스를 사용할 수 있습니다. 이것에 대해서는 `<article>` 요소 선택자와 함께 하위 선택자로 의사 클래스와 의사 요소에 대한 강의에서 자세히 알아볼 것입니다.

```css
article :first-child {
  font-weight: bold;
}
```

그러나, 이 선택자는 다른 요소의 첫 번째 자식인 `<article>` 요소를 선택하는 `article:first-child`와 혼동될 수 있습니다.

이러한 혼란을 피하기 위해 `:first-child` 의사 클래스에 범용 선택자를 추가할 수 있으므로 선택자가 수행하는 작업이 더 명확해집니다. `<article>` 요소의 첫 번째 자식인 어떤 요소 또는 `<article>`의 모든 하위 요소의 첫 번째 자식인 어떤 요소를 선택합니다.

```css
article \*:first-child {
  font-weight: bold;
}
```

둘 다 동일한 작업을 수행하지만, 가독성이 크게 향상되었습니다.

클래스 선택자
-------

클래스 선택자는 점(`.`) 문자로 시작합니다. 해당 클래스가 적용된 문서의 모든 항목이 선택됩니다. 아래 라이브 예제에서 우리는 `highlight`라는 클래스를 만들고 내 문서의 여러 위치에 적용했습니다. 클래스가 적용된 모든 요소가 강조 표시됩니다.

### 특정 요소에 대한 타켓팅 클래스

클래스가 적용된 특정 요소를 대상으로 하는 선택자를 만들 수 있습니다. 다음 예에서는, `highlight` 클래스가 있는 `<h1>` 제목과 다르게 `highlight` 클래스가 있는 `<span>`을 강조 표시합니다. 대상으로 지정하려는 요소의 유형 선택자를 사용하고, 사이에 공백 없이 점을 사용하여 추가된 클래스를 사용하여 이 작업을 수행합니다.

이 접근 방식은 규칙의 범위를 줄입니다. 규칙은 특정 요소와 클래스 조합에만 적용됩니다. 규칙을 다른 요소에도 적용해야 한다고 결정한 경우 다른 선택자를 추가해야 합니다.

### 하나 이상의 클래스가 적용된 경우 요소를 대상으로 지정

요소에 여러 클래스를 적용하고 개별적으로 대상을 지정하거나 선택자의 모든 클래스가 있는 경우에만 요소를 선택할 수 있습니다. 이는 사이트에서 다양한 방식으로 결합할 수 있는 컴포넌트를 구축할 때 유용할 수 있습니다.

아래 예시에는, 메모가 포함된 `<div>`가 있습니다. 상자에 `notebox` 클래스가 있는 경우 회색 테두리가 적용됩니다. `warning` 또는 `danger` 클래스도 있는 경우 `border-color`를 변경합니다.

우리는 요소 사이에 공백 없이 함께 연결하여 적용된 두 개의 클래스가 있는 경우에만 요소를 일치시키길 원한다고 브라우저에 알릴 수 있습니다. 마지막 `<div>`에는 `danger`클래스만 있기 때문에 스타일이 적용되지 않는 것을 볼 수 있습니다. 무엇이든 적용하려면 `notebox`도 필요합니다.

ID 선택자
------

ID 선택자는 점 문자가 아닌 `#`으로 시작하지만, 클래스 선택자와 동일한 방식으로 사용됩니다. 그러나 ID는 페이지 당 한 번만 사용할 수 있으며, 요소에는 하나의 `id`값만 적용할 수 있습니다. `id`가 설정된 요소를 선택할 수 있으며, 요소와 ID가 모두 일치하는 경우에만 요소를 대상으로 하는 유형 선택자를 ID 앞에 둘 수 있습니다. 다음 예에서 이 두 가지 용도를 모두 볼 수 있습니다.

**경고:** 문서에서 동일한 ID를 여러 번 사용하면 스타일을 지정하기 위해 작동하는 것처럼 보일 수 있지만, 이렇게 하지 마십시오. 이로 인해 잘못된 코드가 생성되고 여러 곳에서 이상한 동작이 발생합니다.

**참고:** 특이성 강의에서 배웠듯이, ID는 특이성이 높습니다. 대부분의 다른 선택자를 무시합니다. 대부분의 경우 ID 대신 요소에 클래스를 추가하는 것이 좋습니다. 그러나 ID를 사용하는 것이 요소를 대상으로 지정하는 유일한 방법인 경우 - 아마도 마크업에 대한 액세스 권한이 없고 편집할 수 없기 때문에 - 이 방법이 작동합니다.

요약
--

유형, 클래스 및 ID 선택자를 마무리합니다. 계속해서 속성 선택자를 살펴봄으로써 선택자를 자세히 탐구해봅시다.

* 이전
* Overview: Building blocks
* 다음


속성 선택자 - Web 개발 학습하기

속성 선택자
======

* 이전
* Overview: Building blocks
* 다음

HTML에 대한 연구에서 알 수 있듯이, 요소에는 마크업되는 요소에 대한 자세한 정보를 제공하는 속성이 있을 수 있습니다. CSS에서는 속성 선택자를 사용하여 특정 속성이 있는 요소를 대상으로 지정할 수 있습니다. 이 과정에서는 이러한 매우 유용한 선택자를 사용하는 방법을 보여줍니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 설치된 기본 소프트웨어,
 파일 작업에 대한 기본 지식, HTML 기초 (HTML 소개 학습), CSS 작동 방식에 대한 아이디어 (CSS 첫 단계 공부)
  |
| 목적: | 속성 선택자가 무엇이고 어떻게 사용하는지 알아봅시다. |

존재 및 값 선택자
----------

이러한 선택기는 속성의 존재 여부(예: `href`) 또는 속성 값에 대한 다양한 일치 항목을 기준으로 요소를 선택할 수 있습니다.

| 선택자 | 예시 | 설명 |
| --- | --- | --- |
| `[*attr*]` | `a[title]` | *attr* 속성이 있는 요소와 일치합니다(이름은 대괄호 안의 값). |
| `[*attr*=*value*]` | `a[href="https://example.com"]` | 값이 정확히 *value*(따옴표 안의 문자열)인 *attr* 속성이 있는 요소와 일치합니다. |
| `[*attr*~=*value*]` | `p[class~="special"]` | 값이 정확히 *value*이거나 (공백으로 구분된) 값 목록에 *value*가 포함된 *attr* 속성이 있는 요소와 일치합니다. |
| `[*attr*|=*value*]` | `div[lang|="zh"]` | 값이 정확히 *value*이거나 바로 뒤에 하이픈이 오는 *value*로 시작하는 *attr* 속성이 있는 요소와 일치합니다. |

아래 예에서 이러한 선택자가 사용되는 것을 볼 수 있습니다.

* `li[class]`를 사용하여 클래스 속성이 있는 모든 목록 항목을 일치시킬 수 있습니다. 이것은 첫 번째 항목을 제외한 모든 목록 항목과 일치합니다.
* `li[class="a"]`는 클래스가 `a`인 선택자와 일치하지만 값의 일부로 공백으로 구분된 다른 클래스가 있는 `a` 클래스가 있는 선택자는 일치하지 않습니다. 두 번째 목록 항목을 선택합니다.
* `li[class~="a"]`는 `a` 클래스와 일치하지만 공백으로 구분된 목록의 일부로 `a` 클래스를 포함하는 값과도 일치합니다. 두 번째 및 세 번째 목록 항목을 선택합니다.

하위 문자열 일치 선택자
-------------

이러한 선택자는 속성 값 내에서 하위 문자열의 고급 일치를 허용합니다. 예를 들어 `box-warning` 및 `box-error` 클래스가 있고 문자열 "box-"로 시작하는 모든 항목을 일치시키려는 경우, `[class^="box-"]`를 사용하여 둘 다 선택할 수 있습니다(또는 위 섹션에서 설명한 `[class|="box"]`).

| 선택자 | 예시 | 설명 |
| --- | --- | --- |
| `[attr^=value]` | `li[class^="box-"]` | 값이 *value*로 시작하는 *attr* 속성이 있는 요소와 일치합니다. |
| `[attr$=value]` | `li[class$="-box"]` | 값이 *value*로 끝나는 *attr* 속성이 있는 요소와 일치합니다. |
| `[attr*=value]` | `li[class*="box"]` | 값이 문자열 내에서 *value*를 포함하는 *attr* 속성이 있는 요소와 일치합니다. |

(참고: `^` 및 `$`는 소위 정규식에서 각각 시작 및 종료를 의미하는 닻으로 오랫동안 사용되어 왔다는 점에 유의하는 것이 도움이 될 수 있습니다.)

다음 예는 이 선택자의 사용법을 보여줍니다:

* `li[class^="a"]`는 `a`로 시작하는 모든 속성 값과 일치하므로 처음 두 목록 항목과 일치합니다.
* `li[class$="a"]`는 `a`로 끝나는 모든 속성 값과 일치하므로 첫 번째 및 세 번째 목록 항목과 일치합니다.
* `li[class*="a"]`는 문자열에서 `a`가 나타나는 모든 속성 값과 일치하므로 모든 목록 항목과 일치합니다.

대소문자 구분
-------

대소문자를 구분하지 않고 속성 값을 일치시키려면 닫는 괄호 앞에 `i`값을 사용할 수 있습니다. 이 플래그는 대소문자를 구분하지 않고 ASCII 문자와 일치하도록 브라우저에 지시합니다. 플래그가 없으면 문서 언어의 대소문자 구분에 따라 값이 일치합니다. - HTML의 경우 대소문자를 구분합니다.

아래 예에서, 첫 번째 선택자는 `a`로 시작하는 다른 값과 일치합니다. 다른 두 목록 항목은 대문자 A로 시작하기 때문에 첫 번째 목록 항목에만 일치합니다. 두 번째 선택자는 대소문자를 구분하지 않는 플래그를 사용하므로 모든 목록 항목과 일치합니다.

**참고:** 새 값 `s`도 있습니다. 이 값은 일반적으로 일치가 대소문자를 구분하지 않는 컨텍스트에서 대소문자 구분 일치를 강제하지만 브라우저에서는 잘 지원되지 않으며 HTML 컨텍스트에서는 그다지 유용하지 않습니다.

요약
--

이제 속성 선택자가 완료되었으므로, 다음 문서로 이동하여 의사 클래스와 의사 요소 선택자에 대해 읽어볼 수 있습니다.

* 이전
* Overview: Building blocks
* 다음


CSS 의 구조 - Web 개발 학습하기

CSS 의 구조
========

* 이전
* Overview: First steps
* 다음

CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 혼란스러워 하는 개념을 발견하면, 이 개념으로 돌아와서 요약할 수 있습니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본적인 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및
 CSS 작동 방식
 이해
  |
| 목적: | CSS 의 기본 구문 구조를 자세히 배우기. |

HTML 에 CSS 적용하기
---------------

가장 먼저 살펴볼 것은 CSS 를 문서에 적용하는 세 가지 방법입니다.

### 외부 스타일 시트

CSS 시작하기 에서 외부 스타일 시트를 페이지에 연결했습니다. CSS 를 여러 페이지에 연결할 수 있으므로, CSS 를 문서에 첨부하는 가장 일반적이고 유용한 방법이며, 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있습니다. 대부분의 경우 사이트의 다른 페이지는 모두 거의 동일하게 보이기 때문에 기본 모양과 느낌에 동일한 규칙을 사용할 수 있습니다.

외부 스타일 시트는 CSS 확장자가 `.css` 인 별도의 파일로 작성되고, HTML `<link>` 요소에서 참조하는 경우입니다:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>나의 CSS 실험</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>헬로우 월드!</h1>
    <p>이것은 나의 첫 번째 CSS 예제입니다</p>
  </body>
</html>
```

CSS 파일은 다음과 같습니다:

```css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}
```

`<link>` 요소의 `href` 속성은 여러분의 파일 시스템 파일을 참조해야 합니다.

위의 예에서, CSS 파일은 HTML 문서와 동일한 폴더에 있지만, 다른 곳에 저장 한다면, 지정된 경로를 다음과 같이 조정할 수 있습니다:

```html
<!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css" />

<!-- 현재 폴더의 styles 라는 하위 폴더에 있는 general 이라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
<link rel="stylesheet" href="../styles/style.css" />
```

### 내부 스타일 시트

내부 스타일 시트는 외부 CSS 파일이 없는 대신, HTML `<head>` 안에 포함된 `<style>` 요소 내부에 CSS 를 배치합니다.

따라서 HTML 은 다음과 같습니다:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>나의 CSS 실험</title>
    <style>
 h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
 }

 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <h1>헬로우 월드</h1>
    <p>이것은 나의 첫 번째 CSS 예제입니다</p>
  </body>
</html>
```

이는 일부 상황 (CSS 파일을 직접 수정할 수 없는 콘텐츠 관리 시스템을 사용하는 경우도 있지만) 에서 유용할 수 있지만, CSS 가 필요한 외부 스타일 시트 만큼 효율적이지 않습니다 — 웹 사이트에서, CSS 가 모든 페이지에서 반복되고 변경이 필요한 경우 여러 위치에서 업데이트 됩니다.

### 인라인 스타일

인라인 스타일은 `style` 속성 내에 포함된 한 요소에만 영향을 주는 CSS 선언입니다:

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>나의 CSS 실험</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      헬로우 월드!
    </h1>
    <p style="color:red;">이것은 나의 첫 번째 CSS 예제입니다</p>
  </body>
</html>
```

**당신이 정말로 필요하지 않는 한, 이것을 사용하지 마십시오!** 유지 관리가 실제로 좋지 않으며 (문서당 동일한 정보를 여러번 업데이트 해야할 수도 있음), 프리젠테이션 CSS 정보와 HTML 구조 정보를 혼합하여 코드를 읽고 이해하기 어렵게 만듭니다. 다른 유형의 코드를 분리하여 유지하면 코드 작업을 하는 모든 사람이 훨씬 쉽게 작업할 수 있습니다.

인라인 스타일이 더 일반적이거나 권장되는 곳이 몇 군데 있습니다. 작업 환경이 실제로 제한적인 경우 (CMS 로 HTML 본문만 편집할 수 있음), 이를 사용하는 것이 좋습니다. 또한 가능한 많은 전자 메일 클라이언트와 호환되도록 HTML 전자 메일에 많이 사용된 것을 볼 수 있습니다.

이 기사에서 CSS 로 실습
---------------

이 기사에는 많은 CSS 가 있습니다. 이렇게 하려면, 컴퓨터에 새 디렉토리/폴더 를 작성하고 그 안에 다음 두 파일의 복사본을 작성하는 것이 좋습니다:

**index.html:**

```html
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>나의 CSS 실험</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>여기에 테스트용 HTML 을 작성하십시오</p>
  </body>
</html>
```

**styles.css:**

```css
/\* 여기에 테스트용 CSS 를 작성하십시오 \*/

p {
  color: red;
}
```

그런 다음, 실험하려는 CSS 를 발견하면, HTML `<body>` 콘텐츠를 스타일을 지정할 HTML 로 바꾸고 CSS 를 추가하여 CSS 파일 내에서 스타일을 지정하십시오.

파일을 쉽게 만들 수 있는 시스템을 사용하지 않는 경우, 아래의 대화식 편집기를 사용하여 실험해 보십시오.

읽고, 재미있게 보내십시오!

선택자 (Selectors)
---------------

선택자를 만나지 않고 CSS 에 대해 이야기할 수 없으며, CSS 시작하기 자습서에서 이미 여러 가지 유형을 발견했습니다. 선택자는 스타일을 적용하기 위해 HTML 문서에서 무언가를 대상으로 하는 방법입니다. 스타일이 적용되지 않으면 선택자가 일치해야 하는 것과 동일하지 않을 수 있습니다.

각 CSS 규칙은 선택자 또는 선택자 목록으로 시작하여 규칙을 적용해야 하는 요소 또는 요소 규칙을 브라우저에게 알려줍니다. 다음은 모두 유효한 선택자 또는 선택자 목록의 예입니다.

```css
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro
```

**위의 선택자를 사용하는 CSS 규칙과 스타일을 적용할 일부 HTML 을 만들어 보십시오. 위 구문 중 일부가 무엇을 의미하는지 모르는 경우, MDN 에서 검색해 보십시오!**

**참고:** 다음 과목의 CSS 선택자 자습서에서, 선택자에 대해 자세히 학습합니다.

### 우선 순위 (Specificity)

두 선택자가 동일한 HTML 요소를 선택할 수 있는 경우가 종종 있습니다. 단락을 파란색으로 설정하는 `p` 선택자 및 선택한 요소를 빨간색으로 설정하는 class 가 있는 아래 스타일 시트를 고려하십시오.

```css
.special {
  color: red;
}

p {
  color: blue;
}
```

HTML 문서에 `special` class 가 있는 단락이 있다고 가정해 봅시다. 두 규칙이 모두 적용될 수 있으므로 어느 쪽이 이길까요? 우리의 문단은 어떤 색이 될 것이라고 생각합니까?

```html
<p class="special">나는 무슨 색입니까?</p>
```

CSS 언어에는 충돌시 어떤 규칙이 이기는지 제어하는 규칙이 있습니다 — 이러한 규칙을 **계단식(cascade)** 및 **우선 순위(specificity)** 라고 합니다. 아래 코드 블록에서 `p` 선택자에 대해 두 가지 규칙을 정의했지만, 단락이 파란색으로 표시됩니다. 파란색으로 설정한 선언은 스타일 시트에서 나중에 나타나고 이후 스타일은 이전 스타일을 재정의 하기 때문입니다. 이것은 실제의 계단식 (cascade) 입니다.

```css
p {
  color: red;
}

p {
  color: blue;
}
```

그러나, class 선택자 및 요소 선택자가 있는 이전 블록의 경우, class 가 이기고 단락이 빨간색으로 표시됩니다 — class 는 요소 선택자 보다 더 구체적이거나 더 우선 순위가 높은 것으로 설명되므로 이깁니다.

**위 실험을 직접해 보십시오 — 실험에 HTML 을 추가한 다음, 스타일 시트에 두 개의 `p { ... }` 규칙을 추가하십시오. 그런 다음 첫 번째 `p` 선택자를 `.special` 로 변경하여 스타일이 어떻게 되는지 확인하십시오.**

우선 순위 규칙과 계단식은 처음에는 약간 복잡해 보일 수 있으며 CSS 지식을 더 많이 쌓으면 이해하기 쉽습니다. 다음 과목에서 다룰 계단식 및 상속 기사에서, 우선 순위를 계산하는 방법을 포함하여 자세히 설명하겠습니다. 현재로서는 이것이 존재하며, 스타일 시트의 다른 요소가 더 높은 우선 순위를 가지기 때문에 CSS 가 예상한 대로 적용되지 않을 수도 있음을 기억하십시오. 하나 이상의 규칙이 요소에 적용될 수 있음을 식별하는 것이 이러한 문제를 해결하는 첫 번째 단계입니다.

속성 및 값
------

가장 기본적인 수준에서, CSS 는 두 가지 요소로 구성됩니다:

* **속성 (Properties)**: 변경할 스타일 기능 (예: `font-size`, `width`, `background-color`) 을 나타내는 식별자입니다.
* **값 (Values)**: 지정된 각 속성에는 값이 지정되어 있으며, 이는 해당 스타일 기능을 변경하는 방법 (예: 글꼴, 너비 또는 배경색을 변경하려는 항목) 을 나타냅니다.

아래 이미지는 단일 속성과 값을 강조 표시합니다. 속성 이름은 `color` 이고 값은 `blue` 입니다.

![A declaration highlighted in the CSS](/ko/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration.png)

값 과 쌍을 이루는 속성을 *CSS **선언 (declaration)*** 이라고 합니다. CSS 선언은 *CSS **선언 블록*** 안에 있습니다. 다음 이미지는 선언 블록이 강조 표시된 CSS 를 보여줍니다.

![A highlighted declaration block](/ko/docs/Learn/CSS/First_steps/How_CSS_is_structured/declaration-block.png)

마지막으로, CSS 선언 블록은 *선택자* 와 쌍을 이루어 *CSS Rulesets* (또는 **CSS 규칙**) 를 생성합니다. 이미지에는 `h1` 선택자 및 `p` 선택자의 두 가지 규칙이 있습니다. `h1` 의 규칙이 강조 표시됩니다.

![The rule for h1 highlighted](/ko/docs/Learn/CSS/First_steps/How_CSS_is_structured/rules.png)

CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. CSS 엔진은 페이지의 모든 단일 요소에 적용할 선언을 계산하여 적절하게 배치하고 스타일을 지정합니다. 기억해야 할 것은 CSS 에서 속성과 값이 모두 대소문자를 구분한다는 것입니다. 각 쌍의 속성 과 값은 콜론 (`:`) 으로 구분됩니다.

**다음 속성의 다른 값을 찾아 다른 HTML 요소에 적용하는 CSS 규칙을 작성하십시오:**

* **`font-size`**
* **`width`**
* **`background-color`**
* **`color`**
* **`border`**

**경고:** **중요**: 속성을 알 수 없거나 지정된 속성에 대해 값이 유효하지 않은 경우, 선언이 유효하지 않은 것으로 간주되어 브라우저의 CSS 엔진에서 완전히 무시됩니다.

**경고:** **중요**: CSS (및 기타 웹 표준) 에서, 언어의 불확실성이 발생하는 경우, 미국 맞춤법이 표준으로 합의 되었습니다. 예를 들어, `color` 는 *항상* `color` 여야 합니다. `colour` 는 작동하지 않습니다.

### 함수 (function)

대부분의 값은 비교적 간단한 키워드 또는 숫자 값이지만, 함수의 형태를 취하는 몇 가지 가능한 값이 있습니다. `calc()` 함수를 예로 들 수 있습니다. 이 함수를 사용하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 예를 들면 다음과 같습니다:

```html
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
```

```css
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}
```

이것은 다음과 같이 렌더링 됩니다:

함수는 함수 이름과 해당 함수에 허용된 값이 배치되는 괄호들로 구성됩니다. 위의 `calc()` 예제의 경우, 이 박스의 너비는 블록 너비의 90% 에서 30 px 을 뺀 값을 요구합니다. 이것은 90%가 무엇인지 알지 못하기 때문에 미리 계산하고 CSS 에 값을 입력할 수 있는 것이 아닙니다. 모든 값과 마찬가지로 MDN 의 관련 페이지에 사용법 예제가 있으므로 기능의 작동 방식을 확인할 수 있습니다.

또 다른 예는 `rotate()` 와 같은 `transform` 에 대한 다양한 값입니다.

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

```css
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}
```

위 코드의 결과는 다음과 같습니다:

**다음 속성의 다른 값을 찾아 다른 HTML 요소에 적용하는 CSS 규칙을 작성 하십시오:**

* **`transform`**
* **`background-image`, in particular gradient values**
* **`color`, in particular rgb/rgba/hsl/hsla values**
@rules
------

아직, 우리는 `@rules` ("at-rules" 로 발음) 가 발생하지 않았습니다. 이것들은 CSS 에 행동 방법에 대한 지침을 제공하는 특수 규칙입니다. 일부 `@rules` 는 규칙 이름과 값으로 단순합니다. 예를 들어, 추가 스타일 시트를 기본 CSS 스타일 시트로 가져오려면 `@import` 를 사용할 수 있습니다:

```css
@import "styles2.css";
```

접하게 될 가장 일반적인 `@rules` 중 하나는 `@media` 입니다. 이는 특정 조건이 참일 때만 (예: 화면 해상도가 일정 폭 이상이거나 화면이 일정 폭 보다 넓을 때) CSS 를 적용할 수 있는 미디어 쿼리 를 사용할 수 있습니다.

아래 CSS 에는, `<body>` 요소에 분홍색 배경색을 주는 스타일 시트가 있습니다. 그러나, `@media` 를 사용하여 30em 보다 넓은 viewport 가 있는 브라우저에만 적용되는 스타일 시트 섹션을 만듭니다. 브라우저가 30em 보다 넓은 경우 배경색이 파란색이 됩니다.

```css
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}
```

이 자습서를 통해 다른 `@rules` 를 접하게 될 것입니다.

**viewport 너비에 따라 스타일을 변경하는 미디어 쿼리를 CSS 에 추가할 수 있는지 확인 하십시오. 결과를 보려면 브라우저 창의 너비를 변경하십시오.**

속기 (shorthands)
---------------

`font`, `background`, `padding`, `border` 및 `margin` 등의 일부 속성은 **속기 속성** 이라고 불립니다 — 이는 여러 줄의 속성 값을 한 줄로 설정하여 시간을 절약하고 작업에서 코드를 깔끔하게 만들 수 있기 때문입니다.

예를 들어, 다음 행은:

```css
/\* 패딩 및 마진과 같은 4-값 속기에서는 위, 오른쪽, 아래, 왼쪽 (위에서 부터 시계방향) 순서로 값이 적용됩니다.
 위, 아래에 패딩 / 마진을 설정하고 왼쪽 / 오른쪽에 패딩 / 마진을 설정하는 다른 shorthand 유형 (예: 2-값 shorthands)도 있습니다. \*/
padding: 10px 15px 15px 5px;
```

이것들은 모두 이것과 똑같습니까?

```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
```

다음 행은:

```css
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
```

이 모든 것들과 같은 작업을 수행합니다:

```css
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
```

우리는 지금 이것들을 철저하게 가르치려고 하지 않을 것입니다 — 당신은 이 과정 후반에 많은 예제들을 보게 될 것입니다. 그리고 더 많은 정보를 얻기 위해, CSS 참조 에서 속기 속성 이름을 찾아 보는 것이 좋습니다.

**위의 선언을 CSS 에 추가하여 HTML 스타일에 어떤 영향을 미치는지 확인 하십시오. 다른 값으로 실험해 보십시오.**

**경고:** 속기는 종종 값을 놓칠 수 있지만, 포함하지 않은 값을 초기 값으로 재설정합니다. 이를 통해 합리적인 값 세트가 사용됩니다. 그러나, 속기에서 전달한 값만 변경하려는 경우에는 혼동 될 수 있습니다.

주석 (comments)
-------------

HTML 과 마찬가지로 CSS 에 주석을 달아 몇 달 후에 코드가 다시 작동 할 때, 코드 작동 방식을 이해하고 코드를 사용하는 다른 사람들이 이해하도록 도와주는 것이 좋습니다.

CSS 의 주석은 `/*` 로 시작하고 `*/` 로 끝납니다. 아래 코드 블록에서 주석을 사용하여 다른 고유 코드 섹션의 시작을 표시했습니다. 코드가 커질수록 코드를 탐색하는 데 유용합니다 — 코드 편집기에서 주석을 검색할 수 있습니다.

```css
/\* 기본 요소 스타일링 처리 \*/
/\* -------------------------------------------------------------------------------------------- \*/
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /\* 전역 글꼴 크기의 특수한 경우를 봅시다.
큰 화면이나 창에서 가독성을 높이기 위해,
글꼴 크기를 늘립니다. \*/
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/\* DOM 에 중첩된 특정 요소 처리 \*/
/\* -------------------------------------------------------------------------------------------- \*/
div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}
```

주석은 테스트 목적으로 코드의 특정 부분을 일시적으로 *주석 처리* 하는 경우에도 유용합니다. 예를 들어, 코드의 어느 부분에서 오류가 발생했는지 확인하려는 경우. 다음 예제에서는 `.special` 선택자에 대한 규칙을 주석 처리 했습니다.

```css
/\*.special {
 color: red;
}\*/

p {
  color: blue;
}
```

**CSS 에 주석을 추가하여 사용에 익숙해 지십시오.**

공백 (whitespace)
---------------

공백은 실제 공간, 탭 및 줄 바꿈을 의미합니다. HTML 과 같은 방식으로 브라우저는 CSS 내부의 많은 공백을 무시하는 경향이 있습니다. 가독성을 돕기위해 많은 공백이 있습니다.

아래 첫 번째 예에서는 각 선언 (및 규칙 시작/종료) 이 각 라인에 있습니다 — 이는 CSS 를 유지 관리하고 이해하기 쉽기 때문에 CSS 를 작성하는 좋은 방법입니다:

```css
body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but I'm sure you'll agree that it is somewhat harder to read:
```

```css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}
div p {
  margin: 0;
  padding: 1em;
}
div p + p {
  padding-top: 0;
}
```

대부분의 공백을 제거한 상태에서 정확히 동일한 CSS 를 작성할 수 있습니다. 이것은 첫 번째 예제와 기능적으로 동일하지만 읽기가 다소 어렵다는 데 동의합니다.

**경고:** CSS 에서 속성 과 값 사이의 공백은 주의해야 합니다.

예를 들어, 다음 선언은 유효한 CSS 입니다:

```css
margin: 0 auto;
padding-left: 10px;
```

그러나 다음은 유효하지 않습니다:

```css
margin: 0auto;
padding- left: 10px;
```

**경고:** `0auto` 는 `margin` 속성 (`0` 과 `auto` 는 두 개의 개별 값임)에 유효한 값으로 인식되지 않으며, 브라우저는 `padding-` 을 유효한 속성으로 인식하지 않습니다. 따라서 항상 공백으로 구분된 값을 구분해야 하지만 속성 이름과 속성 값을 하나의 끊김 없는 문자열로 유지해야 합니다.

**CSS 내부에서 공백을 사용하여 문제를 해결하고 그렇지 않은 것을 확인하십시오.**

다음은 뭐죠?
-------

브라우저가 HTML 과 CSS 를 가져와서 웹 페이지로 전환하는 방법에 대해 약간 이해하는 것이 유용합니다. 따라서 다음 기사 — CSS 작동 방식 — 에서 해당 작업을 살펴 보겠습니다.

* 이전
* Overview: First steps
* 다음


CSS 작동 방식 - Web 개발 학습하기

CSS 작동 방식
=========

* 이전
* Overview: First steps
* 다음

CSS 기본 사항, CSS 의 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본적인 컴퓨터 활용능력,
 기본 소프트웨어 설치,
 파일 작업의 기본 지식 및 HTML 기본 사항 (HTML 소개
 학습.)
  |
| 목적: |
 브라우저에서 CSS 와 HTML 을 구문 분석하는 방법의 기본 사항과
 브라우저에서 CSS 를 이해하지 못할 경우 어떻게 되는지 이해하기.
  |

CSS 는 실제로 어떻게 작동합니까?
--------------------

브라우저가 문서를 표시할 때, 문서의 콘텐츠와 해당 스타일 정보를 결합해야 합니다. 아래 나열된 여러 단계로 문서를 처리합니다. 이것은 브라우저가 웹 페이지를 로드할 때 발생하는 작업의 매우 단순화된 버전이며, 다른 브라우저가 다른 방식으로 작업을 처리한다는 점을 명심하세요. 하지만 대략적인 내용은 다음과 같습니다.

1. 브라우저는 HTML (예: 네트워크에서 HTML 을 수신) 을 로드합니다.
2. HTML 을 DOM (*Document Object Model*) 로 변환합니다. DOM 은 컴퓨터 메모리의 문서를 나타냅니다. DOM 은 다음 섹션에서 좀 더 자세히 설명됩니다.
3. 그러면 브라우저는 HTML 문서에 연결된 임베디드 이미지, 동영상, 링크된 CSS같은 대부분의 리소스들을 가져옵니다! JavaScript는 작업에서 나중에 처리되므로 더 간단하게 하기위해 여기에서는 다루지 않습니다.
4. 브라우저는 가져온 CSS를 구문 분석하고 선택자 유형별로 다른 규칙을 다른 "버킷" 으로 정렬합니다. 예: 요소, 클래스, ID 등 찾은 선택자를 기반으로 DOM의 어느 노드에 어떤 규칙을 적용해야 하는지 결정하고, 필요에 따라 스타일을 첨부합니다 (이 중간 단계를 렌더 트리라고 합니다).
5. 렌더 트리는 규칙이 적용된 후에 표시되어야 하는 구조로 배치됩니다.
6. 페이지의 시각적 표시가 화면에 표시됩니다 (이 단계를 페인팅 이라고 합니다).

다음 그림은 작업의 간단한 보기를 제공합니다.

![](/ko/docs/Learn/CSS/First_steps/How_CSS_works/rendering.svg)

DOM 정보
------

DOM은 트리와 같은 구조를 가지고 있습니다. 마크 업 언어의 각 요소, 속성 및 텍스트는 트리 구조에서 DOM node 가 됩니다. 노드는 다른 DOM 노드와의 관계에 의해 정의됩니다. 일부 요소는 자식 노드의 부모이고 자식 노드에는 형제가 있습니다.

DOM은 CSS와 문서의 내용이 만나는 곳이기 때문에 DOM 을 이해하면 CSS를 설계, 디버그 및 유지 관리하는 데 도움이 됩니다. 브라우저 DevTools로 작업을 시작하면, 적용할 규칙을 보기 위해 항목을 선택할 때 DOM을 탐색하게 됩니다.

실제 DOM 표현
---------

길고 지루한 설명이 아니라 실제 HTML이 DOM으로 변환되는 방법을 보여주는 예제를 살펴 보겠습니다.

다음 HTML 코드를 사용하십시오:

```html
<p>
  사용해 봅시다:
  <span>계단식</span>
  <span>스타일</span>
  <span>시트들</span>
</p>
```

DOM에서, `<p>` 요소에 해당하는 노드는 부모입니다. 자식은 텍스트 노드이고 `<span>` 요소에 해당하는 세 개의 노드입니다. `SPAN` 노드는 부모이며, 텍스트 노드는 자식입니다:
```

P
├─ "사용해 봅시다:"
├─ SPAN
|  └─ "계단식"
├─ SPAN
|  └─ "스타일"
└─ SPAN
   └─ "시트들"
```

브라우저가 이전 HTML을 해석하는 방법입니다. 위의 DOM 트리를 렌더링 한 다음 브라우저에서 다음과 같이 출력합니다:
```

p {
  margin: 0;
}
```

DOM에 CSS 적용하기
-------------

CSS를 문서에 추가하여 스타일을 지정했다고 가정해 봅시다. 다시 한 번, HTML은 다음과 같습니다:

```html
<p>
  사용해 봅시다:
  <span>계단식</span>
  <span>스타일</span>
  <span>시트들</span>
</p>
```

다음 CSS를 적용한다고 가정해 봅시다:

```css
span {
  border: 1px solid black;
  background-color: lime;
}
```

브라우저는 HTML을 구문 분석하고 그로부터 DOM을 생성하고, CSS를 구문 분석합니다. CSS에서 사용할 수 있는 유일한 규칙에는 `span` 선택자가 있으므로, 브라우저는 CSS를 매우 빠르게 정렬할 수 있습니다! 이 규칙을 세 개의 `<span>` 각각에 적용한 다음 최종 시각적 표현을 화면에 표시합니다.

업데이트 된 출력은 다음과 같습니다:

다음 과정의 CSS 디버깅 기사에서 브라우저 DevTools를 사용하여, CSS 문제를 디버깅하고 브라우저가 CSS를 해석하는 방법에 대해 자세히 알아 봅니다.

브라우저에서 인식하지 못하는 CSS를 발견하면 어떻게 됩니까?
----------------------------------

"CSS란 무엇인가" 기사의 "브라우저 지원 정보" 에서 브라우저가 모두 동시에 새로운 CSS를 구현하는 것은 아니라고 언급했습니다. 또한 많은 사람들이 최신 버전의 브라우저를 사용하지 않습니다. CSS는 항상 개발되고 있으므로 브라우저가 인식할 수 있는 것보다 앞서 있기 때문에, 브라우저가 CSS 선택자 또는 인식하지 못하는 선언을 발견하면 어떻게 될지 궁금할 수 있습니다.

대답은 아무것도 하지 않으며, CSS의 다음 단계로 넘어갑니다!

브라우저가 규칙을 구문 분석하고 이해하지 못하는 속성이나 값을 발견하면, 이를 무시하고 다음 선언으로 넘어갑니다. 오류가 발생하여 속성 또는 값의 철자가 틀렸거나 속성 또는 값이 너무 새롭고 브라우저가 아직 이를 지원하지 않는 경우, 다음 선언으로 넘어갑니다.

마찬가지로, 브라우저가 이해하지 못하는 선택자를 만나면, 전체 규칙을 무시하고 다음 규칙으로 넘어갑니다.

아래 예에서 나는 영국 영어 철자를 색상에 사용했는데, 그 속성은 인식되지 않기 때문에 유효하지 않습니다. 그래서 내 단락은 파란색으로 표시되지 않았습니다. 그러나 다른 모든 CSS 가 적용 되었습니다. 유효하지 않은 라인만 무시됩니다.

```html
<p>나는 이 텍스트를 크고 굵은 파란색으로 표시하고 싶습니다.</p>
```

```css
p {
  font-weight: bold;
  colour: blue; /\* color 속성의 잘못된 철자 \*/
  font-size: 200%;
}
```

이 동작은 매우 유용합니다. 이는 새로운 CSS를 향상된 기능으로 사용할 수 있음을 의미하며, 새 기능을 이해하지 못할 경우 오류가 발생하지 않습니다. 브라우저는 새로운 기능을 얻거나 얻지 못합니다. 새로운 기능을 얻지 못한 경우 기본 폴백 스타일링을 사용할 수 있습니다.

이것은 새롭고 모든 곳에서 지원되지 않는 값을 사용하려는 경우 특히 효과적입니다. 예를 들어, 구형 브라우저는 `calc()` 를 값으로 지원하지 않습니다. 박스에 대해 대체 너비를 픽셀 단위로 지정한 다음, `calc()` 값을 `100% - 50px` 로 너비를 지정하세요. 오래된 브라우저는 픽셀 버전을 사용하지만, 이해하지 못하는 `calc()` 에 대한 라인은 무시합니다. 새로운 브라우저는 픽셀을 사용하여 라인을 해석하지만, 나중에 다음 줄이 이어서 나타났을때 `calc()` 를 사용하여 라인을 재정의 합니다.

```css
.box {
  width: 500px;
  width: calc(100% - 50px);
}
```

우리는 이후 수업에서 다양한 브라우저를 지원하는 더 많은 방법을 다룰 것입니다.

요약
--

이 과정을 거의 끝냈습니다. 할 일이 하나 더 있습니다. 전기 페이지 스타일링 하기 에서는 예제의 스타일을 변경하여 작업의 일부 CSS를 테스트 합니다.

* 이전
* Overview: First steps
* 다음


CSS 로 시작하기 - Web 개발 학습하기

CSS 로 시작하기
==========

* 이전
* Overview: First steps
* 다음

이 글에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.

|  |  |
| --- | --- |
| 전제조건: |
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식 및 HTML 기본 지식 (HTML 소개
 학습)
  |
| 목적: |
 CSS 문서를 HTML 파일에 연결하는 기본 사항을 이해하고, CSS를 사용하여
 간단한 텍스트 형식을 지정하기
  |

HTML 로 시작합니다
------------

시작점은 HTML 문서입니다. 자신의 컴퓨터에서 작업하려는 경우에는 아래에서 코드를 복사할 수 있습니다. 아래 코드를 컴퓨터의 폴더에 `index.html` 로 저장하십시오.

```html
<!doctype html>
<html lang="ko-KR">
  <head>
    <meta charset="utf-8" />
    <title>CSS로 시작하기</title>
  </head>

  <body>
    <h1>레벨 1 제목입니다</h1>

    <p>
      이것은 단락입니다. 본문에는 <span>span 요소</span>와
      <a href="http://example.com">링크</a>가 있습니다.
    </p>

    <p>이것은 두 번째 단락입니다. <em>강조된</em> 요소를 포함합니다.</p>

    <ul>
      <li>항목 하나</li>
      <li>항목 둘</li>
      <li>항목 <em>셋</em></li>
    </ul>
  </body>
</html>
```

**참고:** 파일을 쉽게 만들 수 없는 장치나 환경에서 이 내용을 읽는 경우, 걱정하지 마십시오. 페이지의 바로 여기에 예제 코드를 작성할 수 있도록 라이브 코드 편집기가 제공됩니다.

문서에 CSS 추가하기
------------

가장 먼저 해야할 일은 HTML 문서에 사용하려는 CSS 규칙이 있다는 것을 알리는 것입니다. CSS 를 HTML 문서에 적용하는 방법에는 세 가지가 있지만, 지금은 문서의 head 에서 연결하는 가장 일반적이고 유용한 방법을 살펴 보겠습니다.

HTML 문서와 같은 폴더에 파일을 만들고 `styles.css` 로 저장하십시오. `.css` 확장자는 이것이 CSS 파일임을 보여줍니다.

`styles.css` 파일을 `index.html` 에 링크하려면, HTML 문서의 `<head>` 안에 다음 행을 추가하십시오:

```html
<link rel="stylesheet" href="styles.css" />
```

이 `<link>` 요소는 `rel` 속성을 사용하는 스타일 시트와 해당 스타일 시트의 위치를 `href` 속성의 값으로 브라우저에게 알려줍니다. `styles.css` 에 규칙을 추가하여 CSS 가 작동하는지 테스트 할 수 있습니다. 코드 편집기를 사용하여 CSS 파일에 다음을 추가하십시오:

```css
h1 {
  color: red;
}
```

HTML 및 CSS 파일을 저장하고 웹 브라우저에서 페이지를 다시 로드 하십시오. 문서 상단의 레벨 1 제목이 이제 빨간색이어야 합니다. 이 경우 축하합니다. 일부 CSS 를 HTML 문서에 성공적으로 적용했습니다. 그렇지 않으면 모든 것을 올바르게 입력했는지 주의 깊게 확인하십시오.

`styles.css` 에서 로컬로 계속 작업하거나, 아래의 대화식 편집기를 사용하여 이 자습서를 계속할 수 있습니다. 대화식 편집기는 위의 문서와 마찬가지로 첫 번째 패널의 CSS가 HTML 문서에 연결된 것처럼 작동합니다.

HTML 요소 스타일링
------------

제목을 빨간색으로 하여 이미 HTML 요소를 대상으로 스타일을 지정할 수 있음을 보여주었습니다. 이 작업은 요소 선택자 (HTML 요소 이름과 직접 일치하는 선택자) 를 대상으로 수행됩니다. 문서의 모든 단락을 대상으로 하려면 선택자 `p` 를 사용합니다. 모든 단락을 녹색으로 바꾸려면 다음을 사용하십시오.

```css
p {
  color: green;
}
```

선택자를 쉼표로 구분하여 여러 선택자를 한 번에 대상으로 지정할 수 있습니다. 모든 단락과 모든 목록 항목을 녹색으로 만들려면 규칙은 다음과 같습니다.

```css
p,
li {
  color: green;
}
```

아래의 대화식 편집기 (코드 박스 편집) 또는 로컬 CSS 문서에서 이를 시도하십시오.

요소 (elements) 의 기본 동작 변경하기
--------------------------

예제와 같이 간단한 HTML 문서를 살펴보면, 기본 스타일을 추가하여 브라우저가 HTML을 읽을 수 있게 만드는 방법을 알 수 있습니다. 제목은 크고 대담하며 목록에는 글머리 기호가 있습니다. 이는 브라우저에서 기본 스타일을 포함하는 내부 스타일 시트가 있기 때문에 기본적으로 모든 페이지에 적용됩니다. 그들 없이는 모든 텍스트가 한 덩어리로 모여서 처음부터 모든 것을 스타일링 해야합니다. 모든 최신 브라우저는 기본적으로 HTML 내용을 거의 같은 방식으로 표시합니다.

그러나, 종종 브라우저에서 선택한 것 이외의 것을 원할 것입니다. 변경하려는 HTML 요소를 선택하고 CSS 규칙을 사용하여 모양을 변경하면 됩니다. 좋은 예는 순서가 없는 목록인 `<ul>` 입니다. 목록 글머리 기호가 있으며, 그 글머리 기호를 원하지 않으면 다음과 같이 제거할 수 있습니다.

```css
li {
  list-style-type: none;
}
```

이것을 CSS 에 추가하십시오.

`list-style-type` 속성은 MDN 에서 지원되는 값을 확인하는 데 유용한 속성입니다. `list-style-type` (en-US) 에 대한 페이지를 살펴보면 페이지 상단에 몇 가지 다른 값을 시도하는 대화식 예제가 있으며, 허용 가능한 모든 값이 페이지 아래에 자세히 나와 있습니다.

이 페이지를 보면 목록 글머리 기호를 제거할 뿐만 아니라 목록 글머리 기호를 변경할 수 있음을 알 수 있습니다. `square` 값을 사용하여 정사각형 글머리 기호로 변경하십시오.

class 추가하기
----------

지금까지 HTML 요소 이름을 기반으로 요소의 스타일을 지정했습니다. 문서에서 해당 유형의 모든 요소가 동일하게 표시되기를 원하는 한 작동합니다. 대부분의 경우에 해당되지 않으므로 다른 요소를 변경하지 않고 요소의 하위 부분을 선택할 수 있는 방법을 찾아야 합니다. 이를 수행하는 가장 일반적인 방법은 HTML 요소에 class 를 추가하고 해당 class 를 대상으로 하는 것입니다.

* HTML 문서에서, 두 번째 목록 항목에 class 속성 을 추가하십시오. 이제 목록은 다음과 같습니다.

```html
<ul>
  <li>항목 하나</li>
  <li class="special">항목 둘</li>
  <li>항목 <em>셋</em></li>
</ul>
```

* CSS 에서 마침표 문자로 시작하는 선택자를 작성하여 `special` class 를 대상으로 할 수 있습니다. CSS 파일에 다음을 추가하십시오.

```css
.special {
  color: orange;
  font-weight: bold;
}
```

* 저장하고 새로 고침하여 결과를 확인하십시오.

이 목록 항목과 동일한 모양을 원하는 페이지의 모든 요소에 `special` class 를 적용할 수 있습니다. 예를 들어, 단락의 `<span>` 도 주황색과 굵게 표시할 수 있습니다. `special` `class` 를 추가한 다음, 페이지를 새로 고침하여 어떻게 되는지 확인하십시오.

때로는 HTML 요소 선택자 및 class 목록이 포함된 규칙이 표시됩니다.

```css
li.special {
  color: orange;
  font-weight: bold;
}
```

이 구문은 "spacial class 를 가진 모든 `li` 요소를 대상으로 함" 을 의미합니다. 이 작업을 수행하면, 단순히 class 를 추가하기만 하면 더 이상 class 를 `<span>` 또는 다른 요소에 적용할 수 없습니다. 해당 요소를 선택자 목록에 추가해야 합니다.

```css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}
```

당신이 상상할 수 있듯이, 일부 class 는 많은 요소에 적용될 수 있으며 새로운 스타일을 취해야 할 때마다 CSS 를 계속 편집하지 않아도 됩니다. 따라서 하나의 요소에 대해 특별한 규칙을 만들고 싶거나 다른 요소에 적용되지 않도록 하려는 경우가 아니라면 요소를 무시하고 class 를 참조하는 것이 가장 좋습니다.

문서에서의 위치에 따라 스타일 지정하기
---------------------

문서에서의 위치에 따라 무언가 다르게 보일 때가 있습니다. 여기에 당신을 도울 수 있는 선택자가 많이 있지만, 지금 몇 가지만 살펴 보겠습니다. 이 문서에는 두 개의 `<em>` 요소가 있습니다. 하나는 단락 안에 있고 다른 하나는 목록 항목 안에 있습니다. `<li>` 요소 안에 중첩된 `<em>` 만 선택하려면 **descendant combinator** 라는 선택자를 사용 할 수 있습니다. 이 선택자는 단순히 두 개의 다른 선택자 사이에 공백의 형태를 취합니다.

스타일 시트에 다음 규칙을 추가 하십시오.

```css
li em {
  color: rebeccapurple;
}
```

이 선택자는 `<li>` 의 하위 요소인 `<em>` 요소를 선택합니다. 따라서 예제 문서에서 세 번째 목록 항목의 `<em>` 은 이제 자주색 이지만, 단락 안의 항목은 변경되지 않았음을 알 수 있습니다.

HTML 의 동일한 계층 구조 수준에서 제목 바로 다음에 오는 단락의 스타일을 지정해 볼 수 있습니다. 이렇게 하려면 선택자 사이에 `+` (**adjacent sibling combinator**) 를 배치 하십시오.

이 규칙을 스타일 시트에도 추가하십시오.

```css
h1 + p {
  font-size: 200%;
}
```

아래의 라이브 예제에는 위의 두 규칙이 포함됩니다. 단락 내부에 있는 span 을 빨간색으로 만들려면 규칙을 추가하십시오. 첫 번째 단락의 span 이 빨간색 이므로 올바른 span 이 있는지 알 수 있지만, 첫 번째 목록 항목의 span 은 색이 변경되지 않습니다.

**참고:** 보시다시피, CSS 는 요소를 대상으로 하는 여러 가지 방법을 제공하며, 지금까지는 표면적인 부분만 살펴봤습니다! 이 과정의 뒷부분에 있는 CSS 선택자 관련 문서에서 이러한 모든 선택자와 더 많은 선택자에 대해 자세히 살펴볼 것입니다.

상태에 따른 스타일링
-----------

이 자습서에서 살펴볼 스타일링의 마지막 유형은 상태에 따라 스타일을 지정할 수 있는 기능입니다. 이에 대한 간단한 예제는 링크 스타일링 입니다. 링크의 스타일을 지정할 때 `<a>` (앵커) 요소를 대상으로 해야합니다. 방문되지 않았는지, 방문 중인지, 마우스 오버인지, 키보드를 통한 포커스 또는 클릭 (활성화) 여부에 따라 상태가 다릅니다. CSS 를 사용하여 이러한 다양한 상태를 대상으로 할 수 있습니다. 아래 CSS 는 방문하지 않은 링크는 분홍색이고 방문한 링크는 녹색입니다.

```css
a:link {
  color: pink;
}

a:visited {
  color: green;
}
```

사용자가 링크 위로 이동할 때 링크 모양을 변경할 수 있습니다. 예를 들어, 다음 규칙에서 밑줄을 제거합니다.

```css
a:hover {
  text-decoration: none;
}
```

아래 라이브 예제에서는 링크의 다양한 상태에 대해 다른 값으로 표시할 수 있습니다. 위의 규칙을 추가했으며, 이제 핑크 색상이 매우 가볍고 읽기 어렵다는 것을 알고 있습니다. 더 나은 색상으로 바꾸지 않겠습니까? 링크를 굵게 표시할 수 있습니까?

우리는 hover 링크에서 밑줄을 제거했습니다. 링크의 모든 상태에서 밑줄을 제거할 수 있습니다. 그러나 실제 사이트에서는 링크임을 방문자에게 알리고자 합니다. 밑줄을 제자리에 두면, 단락 내의 일부 텍스트를 클릭할 수 있다는 사실을 사람들이 인식할 수 있는 중요한 단서가 될 수 있습니다. CSS 의 모든 항목과 마찬가지로 변경 사항으로 인해 문서에 대한 접근성을 떨어뜨릴 수 있는 가능성이 있습니다. 적절한 장소에서 발생할 수 있는 잠재적 위험을 강조하는 것이 목표입니다.

**참고:** 이러한 교육 과정과 MDN 전반에 걸쳐 접근성 에 대한 언급이 자주 있을 것입니다. 접근성에 대해 이야기할 때 웹 페이지를 모든 사용자가 이해하고 사용할 수 있어야 한다는 요구 사항을 언급하고 있습니다.

방문자는 마우스나 trackpad 또는 터치스크린이 있는 스마트폰에 있을 수 있습니다. 또는 문서의 내용을 읽어내는 스크린 리더를 사용하거나 훨씬 큰 텍스트를 사용하거나 키보드만 사용하여 사이트를 탐색해야 할 수도 있습니다.

일반 HTML 문서는 일반적으로 모든 사용자가 접근할 수 있습니다. 해당 문서의 스타일을 지정하기 시작하면 접근성이 저하되지 않도록 하는 것이 중요합니다.

선택자와 결합자를 결합
------------

여러 선택자와 결합자를 함께 결합할 수 있습니다. 예를 들면 다음과 같습니다.

```css
/\* <article> 내부의 <p> 안에 있는 모든 <span> 을 선택합니다 \*/
article p span { ... }

/\* <h1> 바로 뒤에 오는 <ul> 바로 뒤의 모든 <p> 를 선택합니다 \*/
h1 + ul + p { ... }
```

여러 유형을 함께 결합 할 수도 있습니다. 코드에 다음을 추가 하십시오.

```css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}
```

이것은 `<body>` 안에 있는 `<h1>` 바로 뒤에 오는 `<p>` 안에 있는 `special` class 를 가진 요소를 스타일링 합니다. 아이고 복잡해라!

우리가 제공한 원본 HTML 에서 스타일이 지정된 유일한 요소는 `<span class="special">` 입니다.

현재 이것이 복잡해 보인다고 걱정하지 마십시오. CSS 를 더 많이 작성할수록 곧 요령을 터득하기 시작할 것입니다.

마무리
---

이 자습서에서는, CSS 를 사용하여 문서의 스타일을 지정할 수 있는 여러 가지 방법을 살펴 보았습니다. 우리는 나머지 수업을 진행 하면서 이 지식을 개발할 것입니다. 그러나 이제 텍스트 스타일을 지정하고 문서의 요소를 대상으로 하는 다양한 방법을 기반으로 CSS 를 적용하고 MDN 설명서에서 속성과 값을 검색할 수 있을 정도로 이미 알고 있습니다.

다음 수업에서는 CSS의 구조에 대해 살펴 볼 것입니다.

* 이전
* Overview: First steps
* 다음