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

웹 개발에서의 **접근성**은 사람들의 능력이 어느 정도 제한되어 있더라도, 가능한 많은 사람이 웹사이트를 사용 할 수 있도록 하는 것 입니다.

많은 사람에게, 기술은 일을 더 쉽게 만들어줍니다. 장애를 가진 사람들에게, 기술은 일을 가능하게 만들어줍니다. 접근성은 개인의 신체적, 인지적 능력 및 웹에 접근하는 방법과 관계없이 가능한 한 접근할 수 있도록 콘텐츠를 개발하는 것을 의미합니다.

"웹은 사람들의 하드웨어, 소프트웨어, 언어, 문화, 장소, 혹은 신체적 물리적 능력과 관계없이 **모든 사람을 위해 작동하도록 설계되었습니다**. 웹이 이 목표를 달성할 때, 다양한 범위의 청각, 움직임, 시각, 그리고 인지 능력을 가진 사람들이 웹에 접근할 수 있습니다." (W3C - 접근성)

주요 자습서
------

MDN은(는) 접근성 학습 영역 접근성에 대한 현대적이고 최신의 자습서를 포함하고 있습니다:

접근성이란 무엇입니까?

이 글은 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작하며 - 여기에는 우리가 고려해야 하는 그룹의 사람들과 그 이유, 웹과 상호작용하기 위해 다른 사람들이 사용하는 도구, 그리고 접근성을 웹 개발 워크플로우의 일부로 어떻게 만들 수 있는지가 포함됩니다.

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

올바른 HTML 요소가 항상 올바른 목적으로 사용되는지 확인하는 것만으로도 웹 콘텐츠로 접근성을 만들 수 있습니다. 이 글에서 HTML이 최대 접근성을 보장하기 위해 어떻게 사용될 수 있는지 자세히 살펴봅니다.

CSS 그리고 JavaScript 접근성 모범 사례 (en-US)

CSS와 JavaScript 또한 적절하게 사용될 경우 접근 가능한 웹 경험을 허용할 수 있는 잠재력을 가지고 있습니다 ... 혹은 잘못 사용하면 접근성을 크게 해칠 수 있습니다. 이 글에서는 복잡한 콘텐츠도 최대한 접근 할 수 있도록 하기 위해 고려해야 하는 몇 가지 CSS 및 JavaScript 모범 사례에 대해 윤곽을 잡습니다.

WAI-ARIA 기초 (en-US)

이전 글에 따르면, 때때로 의미 없는 HTML과 동적 JavaScript 업데이트 콘텐츠를 포함하는 복잡한 UI 컨트롤을 만드는 것은 어려울 수 있습니다. WAI-ARIA은(는) 브라우저와 보조 기술이 인식하여 사용자에게 무슨 일이 일어나고 있는지 알리기 위해 사용할 수 있는 추가적인 의미를 추가함으로써 그러한 문제를 도와줄 수 있는 기술입니다. 여기서는 기본 수준에서 이 기능을 사용하여 접근성을 향상하는 방법을 보여 줍니다.

접근 가능한 멀티미디어 (en-US)

접근성 문제를 일으킬 수 있는 또 다른 콘텐츠 범주는 멀티미디어입니다 — 비디오, 오디오 및 이미지 콘텐츠는 보조 기술과 사용자에 의해 이해될 수 있도록 적절한 텍스트 대안이 제공되어야 합니다. 이 글은 어떻게 하는지 보여줍니다.

모바일 접근성 (en-US)

모바일에서의 웹 접근이 더욱더 대중적으로 되고, iOS 및 Android와 같은 인기 플랫폼이 완전한 접근성 도구를 가지게 됨에 따라, 이러한 플랫폼에서 웹 콘텐츠의 접근성을 고려하는 것은 중요합니다. 이 문서에서는 모바일에 특화된 접근 고려 사항에 대해서 살펴봅니다.

기타 문서
-----

웹 콘텐츠 접근성 지침 이해하기

이 문서는 W3C 웹 콘텐츠 접근성 가이드라인 2.0(WCAG 2.0 또는 WCAG, 이 글의 목적상)에 기입된 권장 요약 사항을 준수하기 위해 취해야 할 단계를 이해하는 데 도움이 되는 빠른 예제를 제공합니다.

색상 및 접근성 소개 (en-US)

이 글에서는 빛과 색에 대한 우리의 인식을 논하고, 접근하기 쉬운 디자인에 색을 사용하는 기초를 제공하며, 시각적이고 읽을 수 있는 콘텐츠에 대한 모범 사례를 보여줍니다.

키보드 탐색 가능한 JavaScript 위젯 (en-US)

지금까지 스타일링 된 <div> 및 <span> 기반의 접근하기 쉬운 위젯들을 만들고자 하는 웹 개발자들은 적절한 기술이 부족했습니다. **키보드 접근성**은 개발자가 인지해야 할 최소 접근성 요구사항의 일부입니다.

ARIA

ARIA를 사용하여 HTML 문서를 더 접근성 있게 만들 방법을 학습하는 글 모음입니다.

모바일 접근성 점검표

이 문서는 모바일 앱 개발자를 위한 접근성 요구 사항에 대한 간단한 체크리스트를 제공합니다.

인지 접근성 (en-US)

웹 콘텐츠를 만들 때, 인지 장애가 있는 사람이 웹 콘텐츠에 접근할 수 있도록 하는 방법을 숙지해야 합니다.

발작 장애에 대한 접근성 (en-US)

어떤 종류의 시각적 웹 콘텐츠는 특정 뇌 질환을 가진 사람들에게 발작을 일으킬 수 있습니다. 문제가 될 수 있는 콘텐츠 유형을 이해하고, 이러한 문제를 방지할 수 있는 도구와 전략을 찾습니다.

함께 보기
-----

* WAI Interest Group
* 개발자 가이드
HTTP
====

\*\*하이퍼텍스트 전송 프로토콜 (HTTP)\*\*은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 계층 프로토콜입니다. 웹 브라우저와 웹 서버간의 통신을 위해 설계되었지만 다른 목적으로도 사용할 수 있습니다. HTTP는 클라이언트가 요청을 하기 위해 연결을 연 다음 응답을 받을때 까지 대기하는 전통적인 클라이언트-서버 모델을 따릅니다. HTTP는 무상태 프로토콜이며, 서버가 두 요청 간에 어떠한 데이터(상태)도 유지하지 않습니다.

자습서
---

가이드와 튜토리얼을 통해 HTTP를 사용하는 방법을 배워보세요.

HTTP 개요

클라이언트-서버 프로토콜의 기본 기능들입니다. HTTP로 할 수 있는 것과 의도된 용도를 알아보세요.

HTTP 캐시

캐싱은 빠른 웹 사이트를 위해 아주 중요합니다. 이 글은 여러 캐싱 방법과 HTTP 헤더를 사용하여 이를 제어하는 방법을 설명합니다.

HTTP 쿠키

쿠키가 동작하는 방식은 RFC 6265에서 정의합니다. HTTP 요청을 서버에 넘겨줄 때, 서버는 응답과 함께 `Set-Cookie` HTTP 헤더를 돌려줍니다. 그 다음에 클라이언트는 모든 요청과 함께 쿠키의 값을 `Cookie` 요청 헤더의 형태로 동일한 서버로 넘겨줍니다. 쿠키는 특정 날짜에 만료되도록 설정하거나, 특정 도메인 및 경로에 제한되도록 설정할수도 있습니다.

교차 출처 리소스 공유(CORS)

**교차 사이트 HTTP 요청**은 요청을 생성한 리소스의 도메인과 **다른 도메인**의 리소스에 대한 HTTP 요청입니다. 예를 들면, 도메인 A(`http://domaina.example/`)의 HTML 페이지가 `img` 요소를 통해 도메인 B(`http://domainb.foo/image.jpg`)의 이미지에 대한 요청을 생성하는 것입니다. 오늘날의 웹 페이지가 CSS 스타일시트, 이미지, 스크립트 등을 포함하는 교차-사이트 리소스을 로드하는 것을 아주 흔하게 볼 수 있습니다. CORS를 통해 웹 개발자는 그들의 사이트가 교차-사이트 요청에 대해 어떻게 반응할지 제어할 수 있습니다.

클라이언트 힌트

**클라이언트 힌트**는 서버가 클라이언트로부터 디바이스, 네트워크, 사용자 및 사용자 에이전트별 기본 설정에 대한 정보를 사전에 요청하기 위해 사용할 수 있는 응답 헤더의 집합입니다. 이에 따라 서버는 클라이언트가 제공하는 정보에 기반하여 전송할 리소스를 결정할 수 있습니다.

HTTP의 진화

초기 버전의 HTTP와 현대의 HTTP/2 및 새로 등장한 HTTP/3 이후 버전 간의 변경 사항에 대한 간략한 설명입니다.

Mozilla 웹 보안 가이드라인

안전한 웹 어플리케이션을 만들어주는 운영 팀에 도움이 될 만한 힌트 모음입니다.

HTTP 메시지

HTTP/1.x와 HTTP/2의 다양한 종류의 메시지 타입과 구조에 대해 설명합니다.

전형적인 HTTP 세션

일반적인 HTTP 세션의 흐름을 보여주고 설명합니다.

HTTP/1.x의 연결 관리

HTTP/1.x에서 사용가능한 세 가지 연결 관리 모델과 그 장단점을 설명합니다.

참고서
---

상세한 HTTP 참고서를 살펴보세요.

HTTP 헤더

HTTP 메시지 헤더는 리소스 또는 서버나 클라이언트의 동작을 설명하는데 사용됩니다. 헤더 필드는 IANA 레지스트리에서 유지 관리됩니다. IANA는 또한 제안된 새로운 HTTP 메시지 헤더의 레지스트리에서 유지 관리됩니다..

HTTP 요청 메서드

`GET`, `POST` 요청 및 덜 자주 사용되는 `OPTIONS`, `DELETE`, `TRACE` (en-US) 요청과 같이 다양한 작업을 HTTP로 수행할 수 있습니다.

HTTP 상태 응답 코드

HTTP 응답 코드는 지정한 HTTP 요청이 성공적으로 완료되었는지를 나타냅니다. 응답은 다섯 가지 클래스로 그룹핑됩니다. 정보성 응답, 성공 응답, 리다이렉트, 클라이언트 에러, 서버 에러.

CSP 지시문 (en-US)

`Content-Security-Policy` (en-US) 응답 헤더 필드는 주어진 페이지를 로드하기 위해 유저 에이전트가 허용한 리소스를 웹 사이트 관리자가 제어할 수 있도록 해줍니다. 몇 가지 예외를 제외하고, 대부분의 정책은 서버 오리진과 스크립트 엔드포인트 지정을 포함합니다.

도구 & 리소스
--------

HTTP를 이해하고 디버깅하는데 도움이 되는 도구와 리소스입니다.

Firefox 개발자 도구

네트워크 모니터

Mozilla Observatory

개발자, 시스템 관리자, 보안 전문가가 사이트를 안전하게 구성하는 것을 돕기위해 고안된 프로젝트입니다.

RedBot

캐시 관련 헤더를 확인하는 도구입니다.

브라우저가 동작하는 방식(2011)

브라우저 내부와 HTTP 프로토콜을 통한 요청 흐름에 대한 아주 이해하기 쉬운 문서입니다.
MathML
======

**MathML**(**Mathematical Markup Language**)은 수학 표기를 기술하고 그 구조와 내용을 모두 담고 있는 XML (en-US) 마크 업 언어이다. 여기에는 이 강력한 기술을 사용하게 해주는 문서와 예제, 도구에 대한 링크를 제공하고 있다.

MathML 레퍼런스
-----------

MathML 요소 레퍼런스 (en-US)

MathML 요소에 대한 상세 내용과 데스크톱 및 모바일 브라우저에 대한 호환성 정보를 담고 있다.

MathML 속성 레퍼런스 (en-US)

요소의 모양이나 동작을 변경하는 MathML 속성에 대한 정보를 제공한다.

MathML 예제 (en-US)

MathML 작동 방식에 대한 이해를 돕는 샘플과 예제를 소개한다.

MathML 작성 (en-US)

MathML 편집기와 결과를 웹에 적용하는 방법이 포함된 MathML을 작성하는데 도움이 되는 추천과 팁을 소개한다.

커뮤니티
----

* IRC 채널
* Wiki used by Mozilla 공헌자 위키
* W3C Math Home
* www-math w3.org 메일 아카이브
도구
--

* W3C Validator
* FireMath Firefox 부가기능
* Mathzilla Firefox 부가기능 모음
* LaTeXML - Convert LaTeX 문서를 HTML+MathML 웹페이지로 변경
* Web Equation - 손으로 작성한 공식을 MathML이나 LaTeX로 변환
* MathJax - 크로스 브라우징 JavaScript 수학 출력 엔진. See also the MathJax Native MathML add-on.
관련 항목
-----

* CSS
* HTML
* SVG
브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SVG: Scalable Vector Graphics
=============================

SVG 시작하기
--------

**SVG**(**Scalable Vector Graphics**)는 2차원 벡터 그래픽을 서술하는
 XML 기반의 마크업 언어입니다.
 SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며
 CSS, DOM,
 JavaScript, SMIL (en-US) 등 다른
 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를
 그래픽에 적용한 것입니다.

 SVG 이미지와 그 동작 방식은 XML 텍스트 파일로 정의합니다. 따라서 검색, 색인, 스크립트
 적용, 그리고 압축이 가능하며, 그래픽 도구 외에도 아무 텍스트 편집기로 생성 및 편집이 가능합니다.

JPEG와 PNG 등 고전적인 비트맵 이미지 형식과 비교했을 때, SVG 형식의 벡터 이미지는
 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하며 현지화 역시 그래픽 편집기 없이도 파일 내의 텍스트를 수정해서
 쉽게 처리할 수 있습니다. 적절한 라이브러리를 함께 사용하면 SVG 파일을 필요에 따라 즉각 현지화하는 것도 가능합니다.

SVG는 World Wide Web Consortium(W3C)가 1999년부터 개발하고 있습니다.

SVG 자습서도 방문해보세요.

문서
--

SVG 요소 참고서

각각의 SVG 요소에 대한 세부 정보입니다.

SVG 특성 참고서 (en-US)

각각의 SVG 특성에 대한 세부 정보입니다.

SVG DOM 인터페이스 참고서

JavaScript 상호작용을 위한 SVG DOM 인터페이스의 세부 정보입니다.

HTML 콘텐츠에 SVG 효과 적용하기 (en-US)

 SVG는 HTML, CSS, JavaScript와 사용할 수 있습니다. SVG를 사용해서
 평범한 HTML 페이지나 웹 어플리케이션을 향상하세요.


도구
--

* SVG 테스트 도구모음
* 마크업 검증기
예제
--

* SVG 저작 가이드라인
* 이미지로서의 SVG (en-US)
* SMIL을 사용한 SVG 애니메이션 (en-US)
* SVG 아트 갤러리
* D3 (JavaScript를 사용해서 데이터를 HTML, SVG, CSS로 시각화하는 라이브러리)
EXSLT
=====

**XSLT/XPath 참고 문서**: XSLT 요소, XPath 함수, XPath 축
 EXSLT는 XSLT의 확장입니다. 많은 모듈이 있으며, Firefox에서 지원되는 것들은 다음과 같습니다.

Common (`exsl`)

기본적인 확장 요소와 함수를 제공합니다.

Math (`math`)

노드를 비교하는 기능을 제공합니다.

Regular expressions (`regexp`)

JavaScript 구문 형식의 정규 표현식을 사용할 수 있는 기능을 제공합니다.

Sets (`set`)

집합을 처리하는 기능을 제공합니다.

Strings (`str`)

문자열을 처리하는 함수를 제공합니다.

### EXSLT 사용하기

EXSLT 확장을 사용하려면 스타일시트에 사용할 확장 기능의 이름공간(namespace)을 선언해야 합니다. 다음 예제에서는 정규 표현식 꾸러미를 사용하는 경우입니다.


```xml
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:regexp="http://exslt.org/regular-expressions"
 extension-element-prefixes="regexp">

<xsl:import href="regexp.xsl" />

...

</xsl:stylesheet>
```

### Common

EXSLT Common 꾸러미는 XSLT의 기능을 확장하는 기본적인 함수들을 제공합니다. Common 꾸러미의 이름공간은 `http://exslt.org/common`입니다.

#### 함수

* exsl:node-set
* exsl:object-type
### Math

EXSLT Math 꾸러미는 숫자 값들에 대한 처리와 노드를 비교하는 일들을 수행하는 함수를 제공합니다. Math 꾸러미의 이름공간은 `http://exslt.org/math`입니다.

#### 함수

* math:highest
* math:lowest
* math:max
* math:min
### Regular expressions

EXSLT 정규 표현식 꾸러미는 JavaScript 스타일의 정규 표현식을 사용하여 텍스트의 검사, 일치, 치완 등을 수행하는 함수를 제공합니다.

EXSLT 정규 표현식의 이름공간은 `http://exslt.org/regular-expressions`입니다.

#### 함수

* regexp:match
* regexp:replace
* regexp:test
### Sets

EXSLT Sets 꾸러미는 집합 연산을 수행하는 함수를 제공합니다. 이 함수들의 이름공간은 `http://exslt.org/sets`입니다.

#### 함수

* set:difference
* set:distinct
* set:intersection
* set:has-same-node
* set:leading
* set:trailing
### Strings

EXSLT Strings 꾸러미는 문자열을 처리하는 함수를 제공합니다. Strings 꾸러미의 이름공간은 `http://exslt.org/sets`입니다.

#### 함수

* str:concat
* str:split
* str:tokenize
### 참고

* EXSLT web site
CSS: Cascading Style Sheets
===========================

**Cascading Style Sheets**(**CSS**)는 HTML이나
 XML(XML의 방언인 SVG,
 XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한
 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에
 어떻게 렌더링되어야 하는지 지정합니다.

 CSS는 **오픈 웹**의 핵심 언어 중 하나이며, W3C 명세가 다양한
 브라우저의 표준으로 작동하고 있습니다. 과거에는 CSS 명세의 다양한 부분을 순차적으로 개발했으므로 CSS1, CSS2.1,
 CSS3처럼 버전을 붙이는 것이 가능했습니다. 그러나 공식 버전이 CSS4로 올라가지는 않을 것입니다.

 CSS3 이후, CSS 명세의 범위가 엄청나게 넓어짐에 따라 여러 CSS 모듈 사이의 차이도 너무나 커졌습니다. 그래서 이제는
 권고안을 모듈별로 개발하고 공개하는 것이 더 효과적인
 상황입니다. 이제 W3C는 CSS 명세의 버전을 올리지 않고, 대신 주기적으로
 CSS 명세 안정판의 스냅샷을 생성하고 있습니다.

중요한 자료
------

CSS 소개

 웹 개발이 처음이시라면 CSS 기본 문서에서 CSS란
 무엇인지, 그리고 CSS의 사용법을 배워보세요.


CSS 자습서

 MDN의 CSS 학습지는 기초 수준부터 숙련 레벨까지, 모든 기초를 망라하는 방대한
 자습서를 포함하고 있습니다.


CSS 참고서

 MDN의 CSS 전체 참고서는 숙련된 개발자를 위해 CSS의 모든 속성과 개념의
 설명을 제공합니다.



#### 프런트엔드 웹 개발자가 되고자 하시나요?목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.**시작하기**

자습서
---

 MDN CSS 학습지는 CSS를 처음부터 알려주는 모듈로 구성되어 있습니다. 사전 지식도
 필요하지 않습니다.

CSS 첫걸음

 CSS(Cascading Style Sheets)는 웹 페이지에 스타일과 레이아웃을 적용할 때 사용합니다. 예시를 몇 가지 들자면 글꼴,
 색상, 크기를 조절하고, 콘텐츠의 간격을 조정하고, 페이지를 여러개의 열로 나누고, 애니메이션 등 장식을 추가할 수도
 있습니다. 이 모듈에서는 CSS의 기본적인 작동 원리와 구문의 생김새, HTML에 실제로 적용하는 법을 배우면서 다음 과정으로
 가는 길을 닦습니다.


CSS의 구성 블록

 이 모듈은 CSS 첫걸음이 끝난 곳부터 시작합니다. 이제 언어와 구문에
 익숙해졌고, 기본적인 사용법도 익혀봤으니 약간 더 깊게 들어갈 차례입니다. 이 모듈에서는 종속과 상속, 사용할 수 있는
 모든 선택자 유형, 단위와 크기, 배경과 테두리 스타일, 디버깅 등등 많은 것을 알아봅니다.


 여기의 목표는 여러분이 훌륭한 CSS를 작성할 수 있도록 도구를 제공하고,
 텍스트 스타일링나
 CSS 레이아웃처럼 더 상세한 주제로 들어가기 전에 알고 있어야 할 필수
 이론을 익히는 것입니다.


텍스트 스타일링

 CSS 언어 기초를 다뤘으니, 다음 주제는 대표적인 CSS의 영역인 텍스트 스타일링에 집중합니다. 여기서는 글꼴 설정, 굵기,
 기울임꼴, 행간과 자간, 그림자 등 다양한 텍스트 기능을 배웁니다. 그 후 사용자 지정 글꼴을 페이지에 적용하는 법,
 그리고 리스트와 링크 스타일로 모듈을 마무리합니다.


CSS 레이아웃

 여기까지 왔으면 이미 CSS 기초, 텍스트 스타일링, 그리고 콘텐츠가 들어갈 박스를 조작하고 스타일을 적용하는 법을
 다뤘으니, 이번엔 박스를 뷰포트나 다른 박스에 상대적인 위치에 원하는 대로 배치하는 법을 알아봅니다. 필요한 사전
 지식은 모두 학습했으니 서로 다른 `display` 설정과 플렉스박스, CSS 그리드처럼 최신 레이아웃 방식, 위치
 조정처럼 CSS 레이아웃을 더 자세히 살펴보겠습니다. 마지막으로, 오래됐지만 여전히 알고 있으면 도움이 될만한 레이아웃
 방법도 몇 가지 둘러봅니다.


일반적인 CSS 문제 해결하기

이 모듈은 웹 페이지를 만들 때의 일반적인 문제를 CSS를 사용해서 해결하는 법을 설명합니다.

참고서
---

* CSS 참고서: 숙련된 웹 개발자를 위해 CSS의 모든 속성과 개념을 설명합니다.
* CSS 핵심 개념
    + 언어 구문과 형태
    + 명시도, 상속,
     종속 (en-US)
    + CSS 단위와 값,
     CSS 함수 표기법 (en-US)
    + 박스 모델과
     여백 상쇄
    + 컨테이닝 블록
    + 쌓임 맥락과
     블록 서식 맥락 (en-US)
    + 초기 값, 계산 값,
     사용 값, 실제 값 (en-US)
    + CSS 단축 속성
    + CSS 플렉스박스 레이아웃
    + CSS 그리드 레이아웃
    + CSS 선택자
    + 미디어 쿼리
    + 애니메이션
쿡북
--

CSS 레이아웃 쿡북 (en-US)은 여러분의 웹 사이트에서도 사용할 일이 생길지 모르는,
 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트에서 사용할 기초 코드에 더해, 레이아웃 명세를 사용하는 각기
 다른 방법과 개발자로서 결정할 수 있는 선택지도 제공합니다.

CSS 개발 도구
---------

* CSS가 유효한지 검사하는
 W3C CSS Validation 서비스. 매우 유용한 디버깅 도구입니다.
* Firefox 개발자 도구를 사용하면 검사기와
 스타일 편집기 (en-US)를 통해 페이지의 CSS를 살펴보고, 실시간으로 편집할 수
 있습니다.
* Firefox의 Web Developer 확장을 사용해서
 주시하는 사이트의 CSS를 추적하고 실시간으로 편집할 수 있습니다.
* 웹 커뮤니티에서는 다른 여러 가지 CSS 도구 (en-US)도 만들었습니다.
같이 보기
-----

* CSS 데모 (en-US): 최신 CSS 기술을 사용한 데모를 탐색하며
 영감을 얻어보세요.
* CSS를 많이 적용하는 웹 언어: HTML, SVG,
 XHTML, XML
* Stack Overflow의 CSS 질문 목록
opacity
=======

**`opacity`** CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

시도해보기
-----

`opacity`는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.

`opacity` 값이 `1`이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

자식 요소는 불투명하게 유지하고 싶다면 `background` 속성을 대신 사용하세요.


```css
background: rgba(0, 0, 0, 0.4);
```

구문
--

### 값

`<alpha-value>`

채널의 불투명도(알파 채널의 값)를 나타내는 `0.0` 이상 `1.0` 이하의 `<number>`, 또는 0% 이상 100% 이하의 `<percentage>`. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다.

| 값 | 뜻 |
| --- | --- |
| `0` | 요소가 완전히 투명해 보이지 않음. |
| `0`과 `1` 사이의 아무 `<number>` | 요소가 반투명해 뒤의 내용을 볼 수 있음. |
| `1` (기본값) | 요소가 불투명함. |

### 형식 구문
```

opacity =   
  <alpha-value>    
  
<alpha-value> =   
  <number>      |  
  <percentage>    
  
```

예제
--

### 기본 예제


```css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /\* 배경 위로 겨우 볼 수 있음 \*/
}
.medium {
  opacity: 0.5; /\* 배경 위로 조금 더 잘 보임 \*/
}
.heavy {
  opacity: 0.9; /\* 배경 위로 뚜렷하게 보임 \*/
}
```



```html
<div class="light">겨우 보이는 글</div>
<div class="medium">좀 더 잘 보이는 글</div>
<div class="heavy">쉽게 보이는 글</div>
```

### `:hover` 시 다른 불투명도 적용


```css
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
```



```html
<img
 src="https://developer.mozilla.org/mdn-social-share.png"
 alt="MDN logo"
 width="128"
 height="146"
 class="opacity" />
```

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

글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| CSS Color Module Level 4 # transparency |

|  |  |
| --- | --- |
| 초기값 | `1` |
| 적용대상 | all elements |
| 상속 | no |
| Percentages | map to the range `[0,1]` |
| 계산 값 | The same as the specified value after clipping the `number` to the range [0.0, 1.0]. |
| Animation type | by computed value type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS Writing Modes
=================

**CSS Writing Modes**는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.

참고서
---

### 속성

* `direction` (en-US)
* `glyph-orientation-horizontal`
* `text-combine-upright` (en-US)
* `text-orientation` (en-US)
* `unicode-bidi` (en-US)
* `writing-mode` (en-US)
명세
--

| Specification |
| --- |
| CSS Writing Modes Level 4  |
@media
======

**`@media`** CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. `@media`를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

**참고:** JavaScript에서는 `@media`를 `CSSMediaRule` CSS 객체 모델 인터페이스로 접근할 수 있습니다.

구문
--

`@media` @규칙은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있습니다.


```css
/\* 최상위 코드 레벨 \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* 다른 조건부 @규칙 내에 중첩 \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
```


미디어 쿼리 구문에 관한 내용은 미디어 쿼리 사용하기 문서를 참고하세요.

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

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 `<length>` 자리에는 `em`을 사용하는게 좋습니다.

`em`과 `px` 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 `em`이 더 자연스럽게 동작합니다.

Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 `prefers-reduced-motion` 쿼리를 사용하면 사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다 (en-US).

보안
--

미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.

그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.

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

@media =   
  @media <media-query-list> { <rule-list> }    
  
```

예제
--

### 출력과 화면 미디어 타입 판별


```css
@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}
```


Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.


```css
@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}
```


더 많은 예제는 미디어 쿼리 사용하기를 참고하세요.

명세
--

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

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

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

같이 보기
-----

* 미디어 쿼리 사용하기
* JavaScript에서 `@media`에 접근할 때 사용할 수 있는 CSS 객체 모델 인터페이스 `CSSMediaRule`
* Mozilla 미디어 특성 확장 (en-US)
* WebKit 미디어 특성 확장 (en-US)
border-bottom-color
===================

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

시도해보기
-----

구문
--


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

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


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

### 값

`<color>`

아래쪽 테두리의 색상.

### 형식 구문
```

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

예제
--

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

#### HTML


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


#### CSS


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

.redtext {
  color: red;
}
```


#### 결과

명세
--

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

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

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

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

같이 보기
-----

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

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

시도해보기
-----

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

구문
--


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

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


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

### 형식 구문
```

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

예제
--

#### HTML


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


#### CSS


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

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


#### 결과

명세
--

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

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

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

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

같이 보기
-----

* 테두리 스타일 관련 CSS 속성: `border-top-style`, `border-right-style`, `border-bottom-style`, `border-style`.
* 왼쪽 테두리 관련 CSS 속성: `border-left`, `border-left-color`, `border-left-width`.
일반 형제 결합자
=========

**일반 형제 결합자**(`~`)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.


```css
/\* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 \*/
img ~ p {
  color: red;
}
```

구문
--
```

former_element ~ target_element { style properties }
```

예제
--

### CSS


```css
p ~ span {
  color: red;
}
```

### HTML


```html
<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>
```

### 결과

명세
--

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

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

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

같이 보기
-----

* 인접 형제 결합자
Alternative style sheets
========================

 Firefox는
 *대체 스타일시트*
 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 **보기>페이지 스타일** 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.

link 요소를 사용하여 웹 페이지에 대체 스타일시트를 제공할 수 있습니다.

예제:
```

 <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
 <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
 <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
```


위의 세 가지 스타일 시트를 제공하면, 페이지 스타일 메뉴에 "Default Style", "Fancy", "Basic" 스타일 목록이 출력됩니다. 사용자가 특정 스타일을 선택하면 페이지는 해당 스타일로 바로 다시 렌더링 됩니다.

`link` 또는 `style` 요소에 `title` 속성이 포함되어 있을 경우 해당 제목(title)은 사용자에게로 노출되어 사용자가 선택할 수 있게 됩니다. 동일한 제목을 가진 스타일시트가 여럿 존재할 경우 해당 스타일시트들은 모두 적용되며, `title` 속성이 없는 스타일시트는 항상 적용됩니다.

기본 스타일시트에는 `rel="stylesheet"` 속성을 사용하고 대체 스타일시트에는 `rel="alternate stylesheet"`를 사용하세요. 이를 통해 Firefox는 어떤 스타일시트 제목을 처음 선택해야 할지 알 수 있으며, 대체 스타일시트를 지원하지 않는 브라우저에게 기본 스타일시트가 무엇인지를 알려줍니다.

실제 예제
-----

실제로 동작하는 예제는 여기에서 볼 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # rel-alternate |
| HTML Standard # the-link-is-an-alternative-stylesheet |
| HTML Standard # attr-style-title |
| HTML Standard # attr-meta-http-equiv-default-style |
| CSS Object Model (CSSOM) # css-style-sheet-collections |

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

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