recursal/MDN huggingface dataset:
접근성
===

웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다. 이를 위하여 모범 사례(HTML, CSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 (en-US) 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.

선결조건
----

이 문서를 최대한 활용하려면 최소한 HTML, CSS 및 JavaScript 항목 중 처음 두 문서를 통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다.

**참고:**

당신은 당신이 당신의 자신의 파일을 생성 할 수 있는 기능이 없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은 JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할 수 있습니다.

가이드
---

접근성이란?

이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.

HTML: 접근성을 위한 좋은기초

항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.

CSS 와 JavaScript의 접근성 모범 사례 (en-US)

또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.

WAI-ARIA 기초 (en-US)

이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는 컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.

멀티미디어 접근성 (en-US)

접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.

모바일 접근성 (en-US)

모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.

평가
--

접근성 문제 해결 (en-US)

평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.

참고 항목
-----

* Start Building Accessible Web Applications Today — an excellent series of video tutorials by Marcy Sutton.
* Deque University resources — includes code examples, screen reader references, and other useful resources.
* WebAIM resources — includes guides, checklists, tools, and more.
HTML
====

웹사이트를 만들기 위해서는 웹 페이지 구조 정의의 토대가 되는 기술인 HTML에 대해 알아야 합나다. HTML은 작성하고자 하는 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지인지, 멀티미디어 플레이어인지, 폼 요소인지 아니면 기타 사용 가능한 다른 요소들 중의 하나인지, 혹은 새롭게 정의한 요소인지를 명확하기 인지할 수 있도록 하는데 사용됩니다.

학습 방향
-----

HTML을 배우면서 시작하는 것이 가장 이상적입니다. HTML에 대한 소개를 읽는 것부터 시작하세요. 그러면, 아래와 같은 고급 주제에 대해 배울 수 있게 될 것입니다.

* CSS, 그리고 HTML에 스타일을 적용하는 방법 (예를 들어, 사용된 텍스트 크기나 폰트를 변경하고, 테두리 선, 그림자 효과를 추가하고, 페이지의 레이아웃을 다단으로 편집하고, 애니메이션이나 다른 시각적인 효과를 추가할 수 있습니다.)
* JavaScript, 그리고 웹 페이지에 동적인 기능을 추가하는 방법 (예를 들어, 현재 위치를 찾아 지도 위에 표시하고, 버튼을 누를 때 마다 UI 요소를 노출하거나 숨길 수 있고, 사용자의 데이터를 로컬 시스템에 저장하는 것 등의 방법을 알 수 있습니다.)

이 주제를 학습하기에 앞서, 최소한 콘텐츠를 보면서 웹서핑하는 정도의 기초적인 컴퓨터 사용에 익숙해야 합니다. 기본적인 소프트웨어를 설치하여 작업환경의 기초를 설정하고, 파일을 다뤄보면서 파일을 생성하고 관리하는 방법을 이해해야 합니다. 이 두 가지가 모두 초보자가 웹을 정복하기 위한 기본이 됩니다.

이 주제를 공부하기 전에 웹에 대한 기본 학습을 추천하지만, 필수는 아닙니다. HTML의 기본에서 다루는 대부분의 내용이 우리가 배우게 될 HTML 소개에도 포함되어 있기는 하지만 좀 더 자세하게 다루고 있습니다.

구성
--

이 주제는 각 단계를 통해 배울 수 있도록 미리 마련해 둔 아래와 같은 순서로 구성되어 있습니다. 첫 단계부터 순서대로 진행하길 바랍니다.

HTML 소개

이 과정은 중요한 컨셉과 구문을 배우게 되는 단계로 텍스트에 HTML을 적용하고, 파이퍼 링크를 추가하는 방법, HTML을 이용하여 웹 페이지의 구조를 작성하는 방법을 알아봅니다.

멀티미디어 요소 추가하기(embedding)

이 과정은 웹페이지에 HTML을 이용하여 멀티미디어 요소를 추가하는 방법, 이미지를 추가할 수 있는 다른 방법들, 그리고 비디오, 오디오, 혹은 다른 웹페이지를 삽입하는 방법을 살펴봅니다.

HTML 폼 요소

폼 요소는 웹에서 굉장히 중요합니다. 폼 요소는 회원가입, 로그인, 피드백 보내기, 물건 구입과 같이 웹사이트와 상호작용하는데 필요한 굉장히 많은 기능을 제공합니다. 이 과정은 폼 요소의 클라이언트 측 요소를 만드는 것으로 시작됩니다.

HTML 테이블

웹페이지에 표 형태의 데이터를 이해 가능하고, 접근할 수 있는 방법으로 표현하는 것은 도전이 될 수 있습니다. 이 과정은 좀 더 세부적인 기능인 캡션(caption)과 요약(summary)를 적용하는 방법과 함께 테이블 마크업의 기본을 다룹니다.

일반적인 HTML 문제 해결하기
-----------------

타이틀 다루기, 이미지, 비디오 강조된 콘텐츠, 기본 폼 요소 만들기 등 웹페이지를 만들때 생기는 일반적인 문제들을 해결하기 위해 HTML을 이용 (en-US)하는 방법을 설명하고 있는 콘텐츠 링크를 제공합니다.

함께 보기
-----

MDN HTML (HyperText Markup Language)

요소와 속성에 대한 상세한 설명을 담고 있는 MDN의 HTML 문서를 참고하는 것은 좋은 출발점입니다. 요소가 어떤 속성을 가지고 있는지, 어떤 값과 속성을 사용할 수 있는지를 알고 싶다면, 큰 도움이 될 것입니다.
CSS 첫 번째 단계
===========

CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 모듈은 작동 방식, 구문의 모양 및 HTML에 스타일을 추가하기 위해, 이를 사용하는 방법에 대한 기본 사항을 통해 CSS 를 마스터 하는 과정을 부드럽게 시작합니다.

전제 조건
-----

이 모듈을 시작하기 전에, 다음이 있어야 합니다:

1. 컴퓨터를 사용하고 웹을 수동적으로 사용하는 것에 대한 기본적인 친숙성 (예: 콘텐츠를 보는 것) 입니다.
2. 기본 소프트웨어 설치 에서 자세히 설명한 대로 설정된 기본 작업 환경과 파일 다루기 에서 자세히 설명한 대로 파일을 생성하고 관리하는 방법을 이해합니다.
3. HTML 소개 에서 설명한 바와 같이 HTML에 대한 기본적인 친숙성입니다.

**참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, JSBin 또는 Glitch 와 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.

안내
--

이 모듈에서는 CSS 의 모든 기본 이론을 익히고, 몇 가지 기술을 테스트 할 수 있는 기회를 제공하는 다음과 같은 기사가 포함되어 있습니다.

* CSS 란 무엇인가?
    + **: CSS** (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS 가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.
* CSS 로 시작하기
    + : 이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.
* CSS 의 구조
    + : CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 헷갈리는 개념을 발견하면 다시 이 개념으로 돌아와서 요약 할 수 있습니다.
* CSS 작동 방식
    + : CSS 의 기본 사항, 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.
* 새로운 지식 사용
    + : 지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하고 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 기사는 그렇게 할 수 있는 기회를 제공합니다.
참고 항목
-----

* 중급자 웹 활용 능력 1: CSS 소개
    + *: CSS 소개* 모듈에서 이야기 한 많은 기술을 탐구하고 테스트하는 훌륭한 Mozilla 기초 과정입니다. 웹 페이지, CSS 선택자, 속성 및 값의 HTML 요소 스타일 지정에 대해 학습합니다.
텍스트 스타일링
========

CSS 기초가 어느 정도 완성되었다면, 여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 글꼴 과 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 사용자 정의 글꼴을 설정하고 리스트와 링크를 꾸며줌으로써 이 강의를 끝마칩니다.

전제 조건
-----

이 강의를 시작하기 전에, HTML 소개 에서 설명한대로 이미 HTML 에 대해 잘 알고 있어야하며, CSS 소개 에서 설명한대로 CSS 기본 사항에 익숙해야합니다.

**참고:** 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, JSBin, CodePen 또는 Thimble 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.

안내
--

이 강의에는 다음 기사가 포함되어 있으며, HTML 텍스트 콘텐츠를 스타일링하는 데 필요한 모든 기본 사항을 알려줍니다.

기본적인 텍스트 및 글꼴 스타일

이 기사에서는 글꼴 굵기, 종류 및 스타일 설정, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여 텍스트/글꼴 스타일의 모든 기본 사항을 자세히 설명합니다.

목록 스타일링

목록은 대부분 다른 텍스트처럼 작동하지만, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야 할 모범 사례가 있습니다. 이 기사는 모든 것을 설명합니다.

링크 스타일링

링크를 스타일링 할 때, pseudo-classes 를 사용하여 링크 상태를 효과적으로 스타일링하는 방법과 네비게이션 메뉴 및 탭과 같은 일반적인 다양한 인터페이스 기능을 사용하기 위해 링크를 스타일링하는 방법을 이해하는 것이 중요합니다. 이 기사에서는 이러한 모든 주제를 살펴볼 것입니다.

웹 글꼴

여기에서는 웹 글꼴을 자세하게 살펴볼 것입니다 — 웹 글꼴과 함께 사용자 정의 글꼴을 다운로드하여, 보다 다양한 사용자 정의 텍스트 스타일을 지정할 수 있습니다.

평가
--

다음 평가는 위의 안내에서 다루는 텍스트 스타일링 기술에 대한 이해를 테스트합니다.

커뮤니티 스쿨 홈페이지 typesetting

이 평가에서는 커뮤니티 스툴 홈페이지의 텍스트 스타일을 지정함으로써 스타일 텍스트에 대한 이해를 테스트합니다.
일반적인 CSS 문제 해결하기
================

다음 링크들은 일반적인 CSS 문제들에 대한 해결방법을 제공합니다.

일반적인 사례
-------

### Basics

* How to apply CSS to HTML
* How to use whitespace in CSS
* How to write comments in CSS
* How to select elements via element name, class or ID
* How to select elements via attribute name and content
* How to use pseudo-classes
* How to use pseudo-elements
* How to apply multiple selectors to the same rule
* How to specify colors in CSS
* How to debug CSS in the browser
### CSS and text

* How to style text
* How to customize a list of elements
* How to style links
* How to add shadows to text
### Boxes and layouts

* How to size CSS boxes
* How to control overflowing content
* How to control the part of a CSS box that the background is drawn under
* How do I define inline, block, and inline-block?
* How to create fancy boxes (en-US) (also see the Styling boxes module, generally).
* How to use `background-clip` to control how much of the box your background image covers.
* How to change the box model completely using `box-sizing`
* How to control backgrounds
* How to control borders
* How to style an HTML table
* How to add shadows to boxes
Uncommon and advanced techniques
--------------------------------

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

### General

* How to calculate specificity of a CSS selector
* How to control inheritance in CSS
### Advanced effects

* How to use filters in CSS
* How to use blend modes in CSS
### Layout

* Using CSS flexible boxes (en-US)
* Using CSS multi-column layouts (en-US)
* Using CSS generated content (en-US)
See also
--------

CSS FAQ (en-US) — A variety of topics: from debugging to selector usage.
CSS 선택자
=======

* 이전
* Overview: Building blocks
* 다음

CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 글와 하위 글에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: | 
 기본 컴퓨터 활용 능력,
 기본 소프트웨어 설치,
 파일 작업
 에 대한 기본 지식, HTML 기본 사항 (HTML 소개
 학습) 및 CSS 작동 방식에 대한 이해 (CSS 첫 단계
 학습)
  |
| 목표: | CSS 선택자 작동 방식에 대해 자세히 알아보기. |

선택자란 무엇인가요?
-----------

CSS 선택자는 CSS 규칙의 첫 번째 부분입니다. 선택자는 규칙 내부의 CSS 속성 값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택되는 요소를 선택자의 대상이라고 합니다.

![h1이 강조된 코드](/ko/docs/Learn/CSS/Building_blocks/Selectors/selector.png)

다른 글에서 몇 가지 다른 선택자를 만나보셨습니다. 예를 들어 `h1` 과 같은 요소 또는 `.special` 과 같은 클래스를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.

CSS에서 선택자는 CSS 선택자 사양에 정의되어 있으며, CSS의 다른 부분과 마찬가지로 브라우저에서 지원되어야 작동합니다. 여러분이 접하게 될 대부분의 선택자는 성숙한 사양인 레벨 3 선택자 사양과 레벨 4 선택자 사양에 정의되어 있으며, 따라서 이러한 선택자에 대한 브라우저 지원은 훌륭합니다.

선택자 목록
------

동일한 CSS를 사용하는 항목이 두 개 이상 있는 경우 개별 선택자를 *선택자 목록* 으로 결합하여 규칙이 모든 개별 선택자에 적용되도록 할 수 있습니다. 예를 들어 `h1`에 대해 동일한 CSS와 `.special` 클래스가 있는 경우 이를 두 개의 개별 규칙으로 작성할 수 있습니다.


```css
h1 {
  color: blue;
}

.special {
  color: blue;
}
```


또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.


```css
h1, .special {
  color: blue;
}
```


쉼표 앞이나 뒤에 공백을 사용할 수 있습니다. 선택자를 새 줄에 배치하면 가독성을 높일 수도 있습니다.


```css
h1,
.special {
  color: blue;
}
```


아래 라이브 예제에서 선언이 동일한 두 선택자를 결합해 보십시오. 결합 후 시각적 표시가 동일해야 합니다.

이러한 방식으로 선택자를 그룹화할 때 선택자 중 구문적으로 유효하지 않은 선택자가 있으면 전체 규칙이 무시됩니다.

다음 예제에서는 잘못된 클래스 선택자 규칙이 무시되지만 `h1`의 스타일은 계속 유지됩니다.


```css
h1 {
  color: blue;
}

..special {
  color: blue;
}
```


그러나 결합하면 전체 규칙이 유효하지 않은 것으로 간주되므로 `h1`이나 클래스 모두 스타일이 지정되지 않습니다.


```css
h1,
..special {
  color: blue;
}
```

선택자의 유형
-------

선택자에는 몇 가지 다른 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는 데 도움이 됩니다. 이 글의 하위 문서에서는 다양한 선택자 그룹에 대해 더 자세히 살펴보겠습니다.

### 유형, 클래스 및 ID 선택자

이 그룹에는 `<h1>` 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.


```css
h1 {
}
```


또한 클래스를 대상으로 하는 선택자가 포함됩니다.


```css
.box {
}
```


또는 ID


```css
#unique {
}
```

### 속성 선택자

이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를 선택하는 다른 방법을 제공합니다.


```css
a[title] {
}
```


또는 특정 값을 가진 속성의 존재 여부에 따라 선택할 수도 있습니다.


```css
a[href="https://example.com"]
{
}
```

### 의사 클래스 및 의사 요소

이 선택자 그룹에는 요소의 특정 상태 스타일을 지정하는 의사 클래스가 포함됩니다. 예를 들어 `:hover` 의사 클래스는 마우스 포인터로 요소를 가리키고 있을 때만 요소를 선택합니다.


```css
a:hover {
}
```


또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 의사 요소도 포함됩니다. 예를 들어 `::first-line`은 항상 요소 내부의 첫 번째 텍스트 줄(아래 사례에서는 `<p>`)을 선택하며, 마치 형식이 지정된 첫 번째 줄을 `<span>`으로 감싼 다음 선택한 것처럼 작동합니다.


```css
p::first-line {
}
```

### 결합자

최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 하위 결합자(`>`)를 사용하여 `<article>` 요소의 직접 자식인 단락을 선택합니다:


```css
article > p {
}
```

요약
--

이 글에서는 특정 HTML 요소를 타겟팅할 수 있는 CSS 선택자를 소개했습니다. 다음에는 타입, 클래스 및 ID 선택자에 대해 자세히 살펴보겠습니다.

전체 선택자 목록은 CSS 선택자 참조를 참고하세요.

* 이전
* Overview: Building blocks
* 다음
멋지게 보이는 박스
==========

* 이전
* Overview: Building blocks

이 평가에서는, 눈길을 사로잡는 박스를 만들어보면서 멋지게 보이는 박스를 만드는 것을 더 많이 연습하게 될 것입니다.

|  |  |
| --- | --- |
| 필요한 사전 지식 | 이 평가에 앞서 이 모듈의 모든 문서를 이미 작업해 보셨어야 합니다. |
| 목표 | CSS 박스 모델과 테두리 및 배경과 같은 다른 박스 관련 기능에 대한 이해를 테스트합니다. |

시작점
---

이 평가를 시작하려면, 다음을 수행해야 합니다.

* HTML 와 CSS 의 시작 로컬 복사본을 만듭니다. — 그것들을 `index.html` 과 `style.css` 로 새로운 디렉토리에 저장합니다.

또는 JSBin 이나 Glitch와 같은 사이트를 이용하여 평가를 수행할 수 있습니다. 이러한 온라인 편집기 중 하나에 HTML을 붙여넣고 CSS를 채워넣을 수 있습니다. 사용하는 온라인 편집기에 별도의 CSS 패널이 없는 경우 문서의 `<style>` 요소에 넣어도 괜찮습니다.

> 
> **참고** 곤란에 빠지면, 도움을 요청하세요 — 이 페이지 맨 아래에 있는 Assessment or further help 섹션을 참조하세요 .
> 
> 
> 

프로젝트 요약
-------

작업 내용은 멋지고 화려한 박스를 만들고 CSS로 어떤 재미를 즐길 수 있는지 살펴보는 것입니다.

### 전반적인 과제

* CSS를 HTML에 적용합니다.
### 박스 스타일

주어진 `<div>` (en-US)를 다음과 같이 스타일링해보세요.

* 큰 박스에 적합한 너비(예: 약 200픽셀).
* 큰 박스에 적합한 높이, 텍스트를 수직으로 가운데 정렬합니다.
* 박스를 수평으로 가운데 정렬합니다.
* 박스스 내부의 텍스트를 가운데로 정렬합니다.
* 상대적인 크기를 사용하여 약 17-18픽셀의 폰트 크기를 약간 키웁니다. rem 단위를 사용하세요. 값을 어떻게 계산했는지에 대한 설명을 적어보세요.
* 디자인에 기본 색상을 지정합니다. 박스에 이 색상을 배경색으로 지정하세요.
* 텍스트에 대비되는 색상과 검은색 텍스트 그림자를 지정하세요.
* 약간 미묘한 경계 반경을 지정하세요.
* 비슷한 베이스 색상을 가진 1픽셀 두께의 실선 테두리를 지정하세요. 단, 살짝 더 어두운 색상으로 지정하세요.
* 하단 오른쪽 모서리 방향으로 선형 반투명 검은색 그라데이션을 지정하세요. 시작 시 완전히 투명하고 30% 지점까지 약 0.2의 불투명도로 점진적으로 증가하다가 끝까지 같은 색상을 유지합니다.
* 여러 개의 박스 그림자를 지정하세요. 페이지에서 박스가 약간 들어온 듯한 효과를 주기 위해 하나의 표준 박스 그림자를 지정하세요. 나머지 두 개는 상단 왼쪽 근처에 반투명 흰색 그림자와 하단 오른쪽 근처에 반투명 검은색 그림자를 지정하세요. 이러한 그림자들이 박스스에 멋진 듯한 3D 효과를 더해줄 것입니다.
도움말
---

* CSS에서 실수를 잡고 수정하는 데 W3C CSS Validator를 사용하세요.
예제
--

다음 스크린샷은 완성된 디자인 예시를 보여줍니다.

![A big red box with rounded corners. White text with drop shadow reads 'this is a cool box'.](/ko/docs/Learn/CSS/Building_blocks/A_cool_looking_box/fancy-box2.png)

평가 또는 추가 도움말
------------

작업 내용을 평가 받거나 도움이 필요한 경우

1. CodePen, jsFiddle, Glitch와 같은 온라인 공유가능한 편집기에 작업 내용을 넣어주세요.
2. MDN Discourse forum Learning category에서 평가 또는 도움 요청용 게시물을 작성하세요. 게시물에는 다음과 같은 내용이 포함되어야 합니다.
    * "멋지게 보이는 박스"와 같이 설명적인 제목.
    * 이미 시도한 내용과 원하는 도움이나 평가에 대한 세부 정보. 예를 들어, 도움이 필요하거나 평가를 원하는 상황을 설명하세요.
    * 온라인 공유 가능한 편집기(위의 단계 1에서 언급한 사이트)에 작업 내용을 공유하는 링크. 다른 사람의 코드를 보지 못하면 코딩 문제를 도와드리기 어려울 수 있으므로 이 점을 유의하세요.
    * 도움이 필요한 작업 또는 평가 페이지에 대한 링크
* 이전
* Overview: Building blocks
멋진 편지지 양식 만들기
=============

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

좋은 인상을 남기고 싶다면, 멋진 편지지 양식에 편지를 쓰는 것이 좋은 시작이 될 수 있습니다. 이번 평가에서는 좋은 느낌을 줄 수 있는 온라인 템플릿을 만들어 보도록 하겠습니다.

|  |  |
| --- | --- |
| 전제 조건: | 이 평가를 시도하기 전에 이 과정의 모든 문서를 살펴봐야 합니다. |
| 목표: | CSS 박스 모델 및 배경 구현과 같은 기타 박스 관련 기능에 대한 이해도를 테스트합니다. |

시작 지점
-----

이 평가를 시작하려면 다음과 같이 해야 합니다.

* HTML과 CSS의 복사본을 만들어 새로운 디렉터리에 `index.html` 및 `style.css`로 각각 저장합니다.
* 상단, 하단 및 로고 이미지의 복사본을 코드 파일과 동일한 디렉터리에 저장합니다.

또는, JSBin이나 Glitch와 같은 사이트를 이용하여 평가를 수행할 수도 있습니다. 이러한 온라인 편집기 중 하나에 HTML을 붙여 넣고 CSS를 채울 수 있습니다. 사용 중인 온라인 편집기에 별도의 CSS 패널이 없는 경우 문서 head의 `<style>`요소에 자유롭게 넣어도 됩니다.

**참고:** 만약 문제가 해결되지 않으면, 이 페이지 하단의 평가 및 추가적인 도움말 섹션을 참조하여 도움을 요청하세요.

프로젝트 개요
-------

편지지 템플릿을 만드는 데 필요한 파일이 제공되었습니다. 파일을 조합하기만 하면 됩니다. 그러기 위해서는 다음과 같이 해야 합니다.

### 편지지의 메인 부분

* HTML에 CSS를 적용합니다.
* 편지지에 배경 선언을 추가합니다.
    + 상단 이미지를 편지지의 상단에 고정합니다.
    + 하단 이미지를 편지지의 하단에 고정합니다.
    + 이전 두 배경의 상단에 반투명 그라데이션을 추가하여 글자에 약간의 질감을 더하세요. 상단과 하단 주변은 약간 어둡게 하고, 중앙의 대부분은 완전히 투명하게 만들어야 합니다.
* 이전 선언을 지원하지 않는 브라우저를 위한 대안으로 편지지의 상단에 상단 이미지에만 추가되는 다른 배경 선언을 추가합니다.
* 편지지에 흰 배경 색을 추가합니다.
* 나머지 색 구성표와 일치하는 색상으로 편지지의 상단과 하단에 1mm의 단색 테두리를 추가합니다.
### 로고 부분

* h1에 로고를 배경 이미지로 추가합니다.
* 로고에 필터를 추가하여 미세한 그림자를 만듭니다.
* 이제 필터를 주석 처리하고, 둥근 이미지의 모양을 따르는 다른 방식(브라우저 간 호환성이 약간 더 나은 방식)으로 그림자를 구현합니다.
힌트 및 팁
------

* 선언의 대안 버전을 먼저 배치한 다음, 최신 브라우저에서만 작동하는 버전을 배치하여 구형 브라우저에 대한 대안을 만들 수 있다는 것을 기억하세요. 구형 브라우저는 첫 번째 선언을 적용하고, 두 번째 선언을 무시하는 반면, 최신 브라우저는 첫 번째 선언을 적용한 다음 두 번째 선언으로 재정의합니다.
* 원하는 경우, 평가를 위한 그래픽을 직접 만들어도 됩니다.
예시
--

다음 스크린샷은 완성된 디자인이 어떤 모습일지 보여주는 예시입니다.

![A4 용지 한 장 전체가 왼쪽 상단에 두 개의 삼각형 모양(첫 번째는 녹색, 두 번째는 빨간색, 오른쪽 상단에 진한 빨간색 사다리꼴 모양)으로 구성되어 있습니다. 녹색 삼각형 아래에는 흰색 텍스트(AwesomeCompany)가 있는 녹색 별이 그려진 빨간색 원이 있습니다. 페이지 왼쪽 하단에는 진한 빨간색 사다리꼴 모양이 있고, 그다음에는 빨간색 삼각형 모양과 녹색 삼각형 모양 두 개가 있습니다. 녹색 삼각형 모양 위에는 우편 주소를 표시하는 검은색 텍스트가 있습니다.](/ko/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper/letterhead.png)

평가 또는 추가적인 도움
-------------

작업에 대한 평가를 받고 싶거나 막혀서 도움을 요청하는 경우 아래와 같이 하세요.

1. CodePen, jsFiddle, 또는 Glitch와 같은 공유 가능한 온라인 편집기에 작업을 입력합니다.
2. MDN 담론 포럼 학습 카테고리에서 평가 및 도움을 요청하는 게시물을 작성합니다. 게시물에는 아래 사항이 포함되어야 합니다.
    * "멋진 편지지 양식 만들기에 대한 평가 요청"과 같은 설명이 포함된 제목을 입력합니다.
    * 이미 시도해 본 부분과, 궁금한 부분에 대한 세부 정보에 대해 포함하세요. 예를 들어, 막히거나 평가를 원하는 부분을 써넣으세요.
    * 평가받거나 도움이 필요한 예제에 대한 온라인 공유 가능 편집기 링크(위 1단계에서 설명한 대로)를 포함하세요. 코드를 볼 수 없다면 코딩 문제가 있는 사람을 도와주기 어렵기 때문에 이 방법을 사용하는 것이 좋습니다.
    * 실제 과제 또는 평가 페이지로 연결되는 링크를 통해 도움을 원하는 문제를 찾을 수 있습니다.
* 이전  (en-US)
* Overview: Building blocks
* 다음
결합자
===

* 이전
* 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
* 다음
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
* 다음
속성 선택자
======

* 이전
* 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
* 다음