상태 기계 (State machine) - MDN Web Docs 용어 사전: 웹 용어 정의

상태 기계 (State machine)
=====================

상태 기계는 알고리즘을 설계하는 데 사용되는 수학적 추상화 표현입니다. 상태 기계는 일련의 입력을 읽고 해당 입력에 따라 다른 상태로 변경됩니다.

상태는 전환을 실행하는 것을 기다리는 시스템 상태에 대한 설명입니다. 전환은 조건이 충족되거나 이벤트가 수신될 때 실행되는 일련의 작업입니다. 상태 다이어그램에서, 원은 가능한 각 상태를 나타내고 화살표는 상태 간에 전환을 나타냅니다.

최종 상태를 보면, 해당 상태로 이어지는 일련의 입력에 대해 식별할 수 있습니다.

기본 상태 기계에는 두 가지 유형이 있습니다.

결정론적 유한 상태 기계

이 종류는 허용된 입력에 대해 하나의 가능한 전환만 허용합니다. 이는 `if x then doThis else doThat`이 불가능 하다는 "if" 명령문과 같습니다. 컴퓨터는 두 가지 옵션 중 '하나'를 수행해야 합니다.

비결정적 유한 상태 기계

어떤 상태가 주어지면, 입력은 둘 이상의 다른 상태로 이어질 수 있습니다.

'그림 1: 결정론적 유한 상태 머신'

![기계는 입력 X에 대해 상태 1에서 상태 2로 전환하고 입력 Y에 대해 상태 1에서 상태 3으로 전환합니다](/ko/docs/Glossary/State_machine/statemachine1.png)

'그림 1'에서, 상태는 상태 1에서 시작됩니다. 상태는 입력 'X'가 주어지면 상태 2로 변경되거나 입력 'Y'가 주어지면 상태 3으로 변경됩니다.

'그림 2: 비결정적 유한 상태 머신'

![기계는 상태 1에 남아 자체적으로 전환되거나 입력 X에 대해 상태 1에서 상태 2로 전환될 수 있습니다](/ko/docs/Glossary/State_machine/statemachine2.png)

'그림 2'에서, 'X'를 입력하면 상태가 지속되거나 상태 2로 변경될 수 있습니다.

모든 정규 표현식은 상태 기계로 표현될 수 있습니다.

같이 보기
-----

* 위키백과의 유한 상태 기계
* 위키백과의 UML 상태 기계
* 위키백과의 무어 기계
* 위키백과의 밀리 기계


CSP - MDN Web Docs 용어 사전: 웹 용어 정의

CSP
===

CSP (콘텐츠 보안 정책Content Security Policy)는 XSS (en-US), clickjacking이나 데이터 주입과 같은 특정 웹사이트 관련 공격을 탐지 하거나 완화 하기 위해 사용됩니다.

기본적인 구현은 `Content-Security-Policy` (en-US)라고 불리는 HTTP 헤더를 기반으로 합니다.

같이 보기
-----

* 위키피디아의 콘텐츠 보안 정책
* MDN의 콘텐츠 보안 정책 문서 (en-US)


RAIL - MDN Web Docs 용어 사전: 웹 용어 정의

RAIL
====

**RAIL** 은 **Response, Animation, Idle, and Load** 의 축약어로, 2015년 Google Chrome 팀이 창안한 브라우저 내 사용자 경험과 성능에 중점을 둔 성능 모델입니다. RAIL의 성능의 핵심은 '사용자에게 초점을 맞추세요. 최종 목표는 사이트가 특정 장치에서 빠르게 작동하도록 만드는 것이 아니라 사용자를 행복하게 만드는 것'입니다. 상호 작용에는 페이지 로드, 유휴, 입력에 대한 응답, 스크롤 및 애니메이션의 4단계가 있습니다. 약어순으로 주요 원칙은 아래와 같습니다.

**응답(Response)**

**100ms** 이내에 사용자 입력을 승인하여 즉시 사용자에게 응답합니다.

**애니메이션(Animation)**

애니메이션을 적용할 때, 각 프레임을 **16ms** 미만으로 렌더링하여 일관성을 유지하고 버벅거림을 방지하세요.

**유휴(Idle)**

기본 JavaScript 스레드를 사용하는 경우, **50ms** 미만의 시간 동안 청크로 작업하여 사용자 상호작용을 위한 스레드를 확보합니다.

**로드(Load)**

**1초** 이내에 상호작용 가능한 콘텐츠를 제공합니다.

같이 보기
-----

* 권장 웹 성능 타이밍: 얼마나 길면 너무 길까요 (en-US)


비동기(Asynchronous) - MDN Web Docs 용어 사전: 웹 용어 정의

비동기(Asynchronous)
=================

**비동기**라는 용어는 둘 이상의 객체 또는 이벤트가 동시에 **존재하지 않거나 발생하지 않는 경우**(또는 이전 객체 또는 이벤트가 완료될 때까지 기다리지 않고 발생하는 여러 관련 작업)를 말합니다. 컴퓨팅에서 "비동기"라는 단어는 두 가지 주요 맥락에서 사용됩니다.

네트워크와 통신

비동기 통신은 둘 이상의 통신자 사이에서 메시지를 교환하는 방법으로 메시지를 받음과 동시에 처리할 필요 없이, 각자 처리할 수 있는 적절한 때에 메시지를 받고 처리하는 방식입니다. 또한, 문제가 발생하더라도 수신자가 따로 수정을 요청하거나 문제를 처리할 것이라는 가정하에 별도의 승인 없이 메시지를 보낼 수 있습니다.

이메일은 비동기 통신의 예시입니다. 발신자가 메일을 보내면 수신자는 받은 즉시 메일을 확인하지 않고 적당한 때에 메일을 읽고 답장을 보냅니다. 또한, 양쪽 모두 상대방의 시간에 맞출 필요 없이 아무 때나 메일을 주고받을 수 있습니다.

소프트웨어가 비동기적으로 통신한다면 프로그램은 서버와 같은 다른 프로그램에 정보를 요청하고 응답을 기다리면서 다른 작업을 할 수 있습니다. AJAX (en-US)(또는 ajax)라는 "비동기적인 JavaScript와 XML" 프로그래밍 기법이 있습니다(요즘에는 XML 보다 JSON을 더 많이 사용하긴 합니다). 이 기법은 서버에 HTTP를 사용하여 상대적으로 적은 양의 데이터를 요청하고, 결과를 사용 가능할 때에만 반환하는 메커니즘입니다.

소프트웨어 설계

비동기 소프트웨어 설계는 작업이 완료되는 걸 프로그램이 기다릴 필요 없이 기존의 작업과 함께 처리되도록 요청할 수 있게 코드를 작성하여 그 개념을 확장합니다. 보조 작업이 완료되면 기존 작업에 알림을 보내 작업을 완료시키고, 결과가 있는 경우에는 그 결과를 사용할 수 있음을 알립니다.

비동기 소프트웨어를 구현하는 여러 프로그래밍 기법이 있습니다. 이에 대한 소개는 비동기 JavaScript에서 볼 수 있습니다.

같이 보기
-----

* 서버에서 데이터 가져오기 (en-US) (Learning Area)
* Synchronous


AJAX - MDN Web Docs 용어 사전: 웹 용어 정의

AJAX
====

AJAX (Asynchronous JavaScript와 XML)는 XMLHttpRequest 기술을 사용해 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식입니다.

AJAX는 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해줍니다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있습니다. (동기적으로 움직이는 코드와 비교하자면 웹페이지가 로딩이 끝날 때 까지 당신의 코드는 움직이지 않습니다).

### 같이 보기

* Ajax (en-US)
* `XMLHttpRequest` 객체
* `Fetch API`
* 위키피디아 AJAX
* Synchronous vs. Asynchronous Communications (2014)


PNG - MDN Web Docs 용어 사전: 웹 용어 정의

PNG
===

**PNG**(Portable Network Graphics)는 무손실 데이터 압축을 지원하는 그래픽 파일 형식입니다.

같이 보기
-----

* 위키백과의 PNG


SDK - MDN Web Docs 용어 사전: 웹 용어 정의

SDK
===

**소프트웨어 개발 키트 (Software Development Kit, SDK)** 는 개발자가 특정 프레임워크, 운영 체제 또는 기타 플랫폼 전용 소프트웨어를 만드는 데 사용할 수 있는 통합 도구 모음입니다. SDK에는 아래와 같은 부분들이 포함됩니다.

* 편집기
* 컴파일러
* 디버거
* 프로그램을 만드는 플랫폼과 사용되는 플랫폼이 다른 경우 쓰이는 에뮬레이터 또는 시뮬레이터
* 배포용 프로그램을 테스트하고 패키징하는 데 도움이 되는 도구입니다.

SDK는 일반적으로 소프트웨어 플랫폼 소유자가 플랫폼 기반으로 하는 개발자를 지원하기 위해 제공합니다. 예를 들어, Google은 Android 앱 개발자를 위해 Android SDK를 제공합니다.

여러 측면에서, 최신 웹 브라우저에 내장된 개발자 도구는 웹 개발자에게 유사한 기능을 제공합니다.


서비스 거부 (Denial of Service) - MDN Web Docs 용어 사전: 웹 용어 정의

서비스 거부 (Denial of Service)
==========================

서비스 거부 (Denial of Service, DoS)는 일반적으로 서버에 요청이 너무 많아, 사용가능한 서버 리소스를 소모하는 네트워크 공격 범주입니다. 그러면 서버가 느려지거나 인증된 사용자가 사용할 수 없게 됩니다.

더 많은 정보는 DoS 공격을 참조하세요.


유효 최상위 도메인 (eTLD) - MDN Web Docs 용어 사전: 웹 용어 정의

유효 최상위 도메인 (eTLD)
=================

**eTLD**라는 용어는 "유효 최상위 도메인"을 의미하며 단일 조직이 등록할 수 있는 도메인입니다.

최상위 도메인 (TLD)은 도메인 네임에서 마지막 점 다음에 오는 부분입니다. 예를 들어, `crookedtimber.org`의 최상위 도메인은 `org`입니다.

단일 조직에서는 최상위 도메인 바로 아래의 도메인만 등록할 수 있다고 가정합니다. 그러면 다음 도메인이 모두 동일한 조직에 속해 있다는 것을 알 수 있습니다.
```

    xyz.org
abc.xyz.org
def.xyz.org
```

그러나 많은 등록 기관이 최상위 수준보다 낮은 수준에서 도메인을 등록하도록 허용하기 때문에, 이는 일반적인 규칙으로 운용되지 않습니다. 예를 들어, `sussex.ac.uk` 및 `aber.ac.uk`가 서로 다른 조직의 소유라는 것을 의미합니다.

이것은 등록기관의 정책에 따른 문제이므로, 특정 도메인 이름 접미사(예,`ac.uk`)가 공개적으로 등록 가능한지 여부를 알고리즘적으로 판단하는 것을 불가능합니다. 공용 접미사 목록은 조직이 이름을 직접 등록할 수 있는 모든 접미사 목록입니다. 즉, eTLD 목록입니다.

관련된 개념 **eTLD+1**은 eTLD와 도메인 이름의 다음 부분을 의미합니다. eTLD는 등록 가능하기 때문에, 동일한 eTLD+1을 가진 모든 도메인은 동일한 조직이 소유합니다.

예를 들어, 아래는 모두 eTLD+1 도메인입니다.

* crookedtimber.org
* theguardian.com
* sussex.ac.uk
* aber.ac.uk

이것은 각 도메인 아래의 모든 도메인이 동일한 조직에 속함을 의미합니다. 예를 들어,
```

 film.theguardian.com
music.theguardian.com
```

```
      news.sussex.ac.uk
      blog.sussex.ac.uk
admissions.sussex.ac.uk
```

같이 보기
-----

* 공용 접미사 목록


CardDAV - MDN Web Docs 용어 사전: 웹 용어 정의

CardDAV
=======

**CardDAV** (vCard WebDAV에 대한 vCard 확장)는 IETF에서 표준화한 프로토콜로, 서버를 통해 연락처 정보를 원격으로 접근하거나 공유하는 데 사용됩니다.

같이 보기
-----

* 위키백과의 CardDAV
* RFC 6352: 웹 분산 작성 및 관리를 위한 vCard 확장 (WebDAV)


웹 어셈블리 (WebAssembly) - MDN Web Docs 용어 사전: 웹 용어 정의

웹 어셈블리 (WebAssembly)
====================

**웹 어셈블리(Wasm, WebAssembly)** 는 성능에서 이득을 보거나 웹 페이지에 새로운 기능을 제공하기 위해 최신 웹 브라우저에서 실행할 수 있는 개방형 바이너리 프로그래밍 형식입니다.

같이 보기
-----

* 위키백과의 웹어셈블리
* 공식 웹사이트
* MDN의 웹어셈블리


왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR) - MDN Web Docs 용어 사전: 웹 용어 정의

왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR)
=====================================

\*\*왼쪽에서 오른쪽으로 읽는 특성 (Left To Right, LTR)\*\*은 텍스트가 왼쪽에서 오른쪽으로 작성되어 있다는 것을 나타내는 locale 속성입니다. 예를 들어, `en-US` locale 속성 (미국 영어의 경우) 왼쪽에서 오른쪽으로 지정합니다.

대부분의 서양 언어와, 전세계의 많은 언어는 LTR로 작성됩니다.

LTR의 반대인, RTL (오른쪽에서 왼쪽으로 읽는 특성)은 아랍어 (`ar`) 및 히브리어 (`he`)를 포함한 다른 언어들에서 사용됩니다.

같이 보기
-----

* MDN 웹 문서 용어 사전
    + locale
    + Localization
    + LTR
    + RTL
* HTML 전역 속성
    + dir
    + lang
* CSS
    + `:dir` (en-US)
    + `direction` (en-US)
    + `unicode-bidi` (en-US)
    + `writing-mode` (en-US)


확장 (Expando) - MDN Web Docs 용어 사전: 웹 용어 정의

확장 (Expando)
============

확장 속성은 JavaScript를 사용하여 DOM 노드에 추가된 속성입니다. 여기서 해당 속성은 object의 DOM 명세서의 일부가 아닙니다.

```js
window.document.foo = 5; // foo는 확장속성입니다.
```

이 용어는 배열에 추가된 숫자가 아닌 이름이 있는 속성과 같이, 객체의 원래 의도를 고려하지 않고 객체에 추가된 속성에 적용될 수도 있습니다.


Boolean attribute (ARIA) - MDN Web Docs 용어 사전: 웹 용어 정의

Boolean attribute (ARIA)
========================

ARIA의 **불리언 속성**은 열거 목록에 `true` 또는 `false`를 포함하는 열거 속성입니다.

ARIA에서, 불리언은 `"true"` 및 `"false"` 문자열 형식으로만 제공됩니다.

같이 보기
-----

* 동작의 세부 정보와 ARIA 불리언 속성의 예를 포함하는 열거형


Boolean (JavaScript) - MDN Web Docs 용어 사전: 웹 용어 정의

Boolean (JavaScript)
====================

JavaScript에서의 **불리언**은 `true` 또는 `false`일 수 있는 원시 값입니다.

`Boolean` 객체는 불리언 원시 값의 wrapper 객체입니다.

같이 보기
-----

* JavaScript 전역 객체
* JavaScript 데이터 타입과 자료구조


Boolean attribute (HTML) - MDN Web Docs 용어 사전: 웹 용어 정의

Boolean attribute (HTML)
========================

HTML의 **불리언 속성** 은 `true` 또는 `false`일 수 있는 속성입니다.

불리언 속성이 있으면 `true`이고, 없으면 `false`라는 점에 유의하세요.

다음은 HTML의 불리언 속성 `checked`의 예입니다.

```html
<!-- 초기 렌더링 시, 아래 checkbox들이 체크된 상태로 표시됩니다. -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="any value" />

<!-- 아래 checkbox들는 체크된 상태로 표시되지 않습니다. -->
<input type="checkbox" />
```

같이 보기
-----

* 열거 속성


미디어 (Media) (CSS) - MDN Web Docs 용어 사전: 웹 용어 정의

미디어 (Media) (CSS)
=================

종속 스타일 시트 (Cascading Style Sheets,CSS)의 맥락에서, \*\*미디어(media)\*\*라는 용어는 렌더링 엔진에 의해 문서가 그려질 대상을 나타냅니다.

일반적으로, 미디어는 화면이지만, 프린터, 점자 디스플레이 또는 다른 종류의 장치일 수도 있습니다.

CSS는 미디어 **타입**(예, 스크린 또는 인쇄 등 두 가지를 들 수 있음) 또는 미디어 **기능**(예, 너비, 해상도 또는 기타 값)에 따라 문서 스타일을 조정할 수 있거나 심지어 다른 스타일을 제공할 수 있는 여러 기능을 제공합니다.

같이 보기
-----

* 미디어 쿼리 사용하기
* 미디어 쿼리
* `@media` at-rule: 미디어 쿼리 결과를 바탕으로, 스타일시트의 일부를 조건부로 적용할 수 있습니다.
* `Window.matchMedia()`: 미디어 쿼리에 대해 시청 장치 테스트


미디어 (Media) (시청각 자료, Audio-visual presentation) - MDN Web Docs 용어 사전: 웹 용어 정의

미디어 (Media) (시청각 자료, Audio-visual presentation)
===============================================

**미디어(media)** (더 정확히는 **멀티미디어(multimedia)**)라는 용어는 오디오, 비디오 또는 음악, 녹음된 연설, 영화, TV 프로그램 또는 일정 기간 동안 제공되는 기타 모든 형태의 콘텐츠와 같은 시청각 결합 자료를 말합니다.

보다 광범위하게, 미디어에는 사진이나 기타 정지 이미지와 같은 움직임이 없는 이미지가 포함될 수 있습니다.

미디어 콘텐츠는 다양한 방식으로 기록, 재생, 제공될 수 있으며 상호 작용도 가능합니다.

같이 보기
-----

* 위키백과의 멀티미디어
* 웹 미디어 기술: 웹 콘텐츠에서 미디어를 사용할 수 있는 모든 방법에 대한 안내서
* MDN 학습 범위 :멀티미디어 및 임베딩
* HTML 문서에서 미디어를 보여주는 데 사용되는 `<audio>` (en-US) 및 `<video>` 요소


Block (scripting) - MDN Web Docs 용어 사전: 웹 용어 정의

Block (scripting)
=================

JavaScript에서, 블록문은 중괄호("{}")로 묶인 statements문의 집합입니다. 예를 들어, `if (condition)` 블록 뒤에 블록으로 감싼 실행 코드들을 배치하여, 인터프리터가 조건이 참이면, 블록 안에서 코드를 실행해야 함을 나타낼 수 있습니다. 조건이 거짓이면 전체 블록을 건너뜁니다.

같이 보기
-----

* JavaScript block 문


블록 (CSS) - MDN Web Docs 용어 사전: 웹 용어 정의

블록 (CSS)
========

웹페이지의 **블록**은 HTML 요소로 새 줄에 표시됩니다. 즉, 가로 쓰기 모드에 속한 선행 요소 아래나 ("블록 수준 요소"로 통용되는) 후속 요소 위에 표시됩니다. 예를 들면, `<p>`는 기본적으로 블록 수준 요소지만, `<a>`는 "인라인 요소"이다. 당신의 HTML 소스에서 여러 링크를 상대 요소 옆에 위치시킬 수 있고, 그것들을 렌더링 된 출력 형태로 상대 요소와 동일 선상에 놓는다.

`display` (en-US) 속성을 사용하면 요소가 (여러 다양한 옵션 중) 인라인으로 표시되는지 아니면 블록으로 표시되는지를 변경할 수 있으며, **블록** 역시 포지셔닝 체계의 영향과 `position` 속성 사용의 영향을 받습니다.

같이 보기
-----

* 시각적 서식 모델


Property (JavaScript) - MDN Web Docs 용어 사전: 웹 용어 정의

Property (JavaScript)
=====================

**JavaScript 속성**은 키와 값을 연결하는 객체의 구성원입니다. JavaScript 객체는 속성 모음을 저장하는 데이터 구조입니다.

속성은 다음 부분으로 구성됩니다.

* 문자열이나 Symbol인 "키" 또는 "이름".
* 임의의 JavaScript 값이 될 수 있는 "값". 함수를 값으로 가지는 속성은 메서드라고 할 수 있습니다.
* 속성을 읽고 쓰는 방법을 지정하는 일부 "속성". 속성은 `configurable`, `enumerable`, 그리고 `writable` 속성을 가질 수 있습니다.

접근자 속성에는 실제 "값"이 없습니다. 값은 값을 읽을 때 호출되는 하나 (getter), 그리고 값을 설정할 때 호출되는 하나 (setter)로 한 쌍의 함수를 통해 간접적으로 표현됩니다. 그러나 접근자 속성은 표면적으로는 일반적인 데이터 속성처럼 동작하는데, getter와 setter 함수가 자동으로 호출되고 숨겨져 있기 때문입니다.

속성값 (getter와 setter를 포함하는) 그리고 속성은 "속성 설명자"로 불리는 데이터 레코드에 저장됩니다. `Object.getOwnPropertyDescriptor()`와 `Object.defineProperty()` 같은 많은 메서드는 속성 설명자와 함께 동작합니다.

"속성" 이라는 용어 자체는 모든 JavaScript 값과 일치하는 것은 아닙니다. 이것은 추상적인 개념입니다. 예를 들어, 아래와 같은 코드를 따릅니다.

```js
const obj = {
  a: 1,
  b() {},
};
```

`obj` 객체는 두 개의 속성을 가집니다. 첫 번째는 키인 `"a"`와 값인 `1`을 가집니다. 두 번째는 메서드 구문을 사용하여 키인 `"b"`와 값으로 함수를 가집니다. `"a"` – `1`, `"b"` – `function` 조합은 객체의 속성입니다.

클래스 속성 맥락은 각 인스턴스가 소유하는 "인스턴스 속성"과 클래스가 소유하고 모든 인스턴스에 공통 데이터를 보유하는 "정적 속성"으로 나눌 수 있습니다. 상속 맥락에서 속성은 객체 자체가 소유하는 "고유 속성"과 객체의 프로토타입 체인에 있는 객체가 소유하는 "상속 속성"으로 나눌 수 있습니다.

읽기와 쓰기 속성에 대한 더 많은 정보는 객체로 작업하기를 참조하세요.

같이 보기
-----

* 속성 (프로그래밍) on Wikipedia
* 객체 지향 JavaScript 소개
* 객체 속성
* 속성의 열거 가능성 및 소유권 (en-US)


Property (CSS) - MDN Web Docs 용어 사전: 웹 용어 정의

Property (CSS)
==============

**CSS 특성**은 연관된 값이 어떻게 브라우저가 요소를 표시하는지 한 측면을 정의하는 특성(색상처럼)입니다.

아래는 CSS 규칙의 예시입니다.

```css
/\* "div"는 모든 나누는 요소를 나타내는 선택자입니다 \*/
/\* 문서 내에서 해당 규칙에 따라 스타일이 지정됩니다 \*/
div {
  /\* 값이 "black"인 속성 "color"는 다음을 나타냅니다\*/
  /\* 텍스트 색상은 검은색이 될 것입니다\*/
  color: black;

  /\* 값이 "white"인 속성 "background-color"은 다음을 나타냅니다\*/
  /\* 배경 색상 요소는 하얀색이 될 것입니다\*/
  background-color: white;
}
```

같이 보기
-----

* CSS 배우기
* MDN에서 CSS 참조
* CSS 작업 그룹의 현재 작업


노드 (networking) - MDN Web Docs 용어 사전: 웹 용어 정의

노드 (networking)
===============

네트워크에서, **노드** 는 네트워크의 연결 지점입니다. 물리적 네트워크에서 노드는 일반적으로 컴퓨터나 라우터와 같은 장치입니다.

같이 보기
-----

* 위키백과의 노드


노드 (DOM) - MDN Web Docs 용어 사전: 웹 용어 정의

노드 (DOM)
========

DOM 맥락에서는, **노드(node)** 는 노드 트리의 단일 지점입니다. 노드가 되는 요소는 문서 자체, 요소, 텍스트, 주석 등입니다.

같이 보기
-----

* WHATWG 명세의 노드 트리
* 노드 (en-US) 객체


기준 (호환성) - MDN Web Docs 용어 사전: 웹 용어 정의

기준 (호환성)
========

**Baseline**은 널리 지원되는 웹 플랫폼 기능을 식별합니다. 웹 개발자는 기본 기능이 최신 브라우저에서 작동할 것으로 기대할 수 있습니다.

기본 기능(API, CSS 속성 집합, JavaScript 구문 등)은 잘 알려진 여러 브라우저(Chrome, Edge, Firefox 및 Safari)의 현재 버전 이전에 적어도 하나의 버전에서 일관되게 작동하는 것으로 알려져 있습니다.

배지
--

🟢 녹색 Baseline 배지가 표시되면, 해당 기능이 브라우저의 최신 및 이전 주요 배포판에서 작동할 것이라고 신뢰할 수 있습니다.

🟡 기능이 아직 Baseline이 아니다라는 것을 나타내는 노란색 배지가 표시되면, 해당 기능을 사용하기 전에 사이트 사용자를 대상으로 추가 조사 및 테스트를 수행하거나 해당 기능이 Baseline이 될 때까지 기다리세요.

추가 고려사항
-------

Baseline은 지원을 위한 안내서이며, 모든 상황을 다루지는 않습니다. 사이트가 브라우저의 장기 지원 배포판, 이전 장치나 브라우저 배포판, Baseline 보고서에 포함되지 않는 브라우저에서 작동해야 하는 경우, 자체적으로 조사하거나 테스트해야 할 수도 있습니다. Baseline이 환경을 지원하지 않는 경우, 기능을 적용하기 전에 MDN에서 브라우저 호환성 표를 읽거나, caniuse.com을 참고해보는 것이 좋습니다.

기여하기
----

 Baseline은 W3C WebDX 커뮤니티 그룹의 커뮤니티 활동이며, MDN의 오픈 소스 브라우저 호환성 데이터를 사용합니다.
 질문 또는 피드백이 있거나, Baseline 상태 보고서에서 다루는 기능을 갱신하고 확장하는 데 도움을 주고 싶다면, web-platform-dx/feature-set로 이동해 참여하세요.

같이 보기
-----

* 크로스 브라우저 테스팅 (en-US)
* web-platform-dx/feature-set 레포지토리
* W3C WebDX 커뮤니티 그룹
* mdn/browser-compat-data 레포지토리


기준선 (타이포그래피) - MDN Web Docs 용어 사전: 웹 용어 정의

기준선 (타이포그래피)
============

**기준선**은 유럽 및 서아시아 타이포그래피에서 글꼴의 문자가 놓이는 가상의 선을 의미하는 용어입니다.

같이 보기
-----

* 위키백과의 기준선 on Wikipedia
* CSS 상자 정렬 (en-US) on MDN


디지털 가입자 회선 (Digital Subscriber Line, DSL) - MDN Web Docs 용어 사전: 웹 용어 정의

디지털 가입자 회선 (Digital Subscriber Line, DSL)
=========================================

**디지털 가입자 회선**은 전화선을 통해 유선 데이터 전송을 보내는 광대역 인터넷 연결 유형입니다.

 다운로드 속도와 업로드 속도가 동일할 필요는 없습니다. 이러한 경우, 회선은 '비대칭'이라고 하며 ADSL이라는 약어가 사용됩니다.
 케이블, 광섬유 또는 전화 접속 연결과 비교됩니다.

같이 보기
-----

* 위키백과의 디지털 가입자 회선


도메인 특화 언어 (Domain-Specific Language, DSL) - MDN Web Docs 용어 사전: 웹 용어 정의

도메인 특화 언어 (Domain-Specific Language, DSL)
=========================================

\*\*도메인 특화 언어 (DSL)\*\*은 응용 프로그램 도메인 내의 특정 문제를 해결하도록 설계된, 제한된 범위의 컴퓨터 언어 유형입니다.

도메인 전반에 걸쳐 다양한 문제를 해결하도록 설계된 '일반 목적 언어(GPL)'과 DSL를 비교해보세요.

같이 보기
-----

* 위키백과의 도메인 특화 언어
* martinfowler.com DSL 안내서


Signature (functions) - MDN Web Docs 용어 사전: 웹 용어 정의

Signature (functions)
=====================

**함수 시그니처**(*타입* 시그니처, *메소드* 시그니처)는 functions 그리고 methods의 입력과 출력을 정의합니다.

시그니처는 다음을 포함합니다:

* parameters와 그들의 types
* 반환값과 타입
* 던져지거나 콜백으로 반환되는 exceptions
* object-oriented 프로그램에서 메소드의 접근 권한에 대한 정보 (`public`, `static`, 혹은 `prototype`와 같은 키워드들).
In depth
--------

### Signatures in JavaScript

JavaScript는 *약한 타입* 혹은 *동적* 언어입니다. 이것은 여러분이 변수의 타입을 미리 선언하지 않아도 됨을 의미합니다. 타입은 프로그램이 실행되는 동안 자동으로 결정됩니다. 하지만 JavaScript에서의 시그니처는 여전히 여러분에게 메소드에 대한 몇 가지 정보를 제공해줄 수 있습니다:

```js
MyObject.prototype.myFunction(value);
```

* 메소드는 `MyObject`라 불리는 object에 장착되어 있습니다.
* 메소드는 `MyObject`의 `prototype`에 장착되어 있습니다. (따라서 이 메소드는 instance method (en-US) 입니다.) 반대의 경우는 static method입니다.
* 메소드의 이름은 `myFunction`입니다.
* 메소드는 하나의 인자를 받고, 그것의 이름은 `value` 입니다.
### Signatures in Java

Java는 VM수준에서 메서드와 클래스를 식벽하는데 시그니처가 사용됩니다. Java 코드를 싱행하기 위해서는 변수의 타입을 선언해야 합니다. Java는 강한 타입이며, 컴파일 시간에 parameters의 type의 정확성을 검사합니다.

```java
public static void main(String[] args)
```

* The `public` keyword is an access modifier and indicates that this method can be called by any object.
* The `static` keyword indicates that this method is a class method as opposed to being an instance method.
* The `void` keyword indicates that this method has no return value.
* The name of the method is `main`.
* The method accepts one parameter of type String Array. It is named `args.`
`Learn more`
------------

### `General knowledge`

* Type signature on Wikipedia


안전함 (HTTP 메서드) - MDN Web Docs 용어 사전: 웹 용어 정의

안전함 (HTTP 메서드)
==============

 HTTP 메서드가 서버의 상태를 바꾸지 않으면 그 메서드가 **안전**하다고 말합니다. 다른 말로 하면, 읽기
 작업만 수행하는 메서드는 안전합니다. 흔히 쓰이는 HTTP 메서드 중에서는 `GET`, `HEAD`,
 `OPTIONS`가 안전합니다. 모든 안전한 메서드는 멱등성 또한
 갖지만, 모든 멱등성을 지닌 메서드가 안전한 것은 아닙니다. 예컨대 `PUT`과 `DELETE`는 둘
 다 멱등성을 가졌지만 안전하지는 않은 메서드입니다.

 그러나, 안전한 메서드가 읽기 전용의 의미를 내포하긴 하지만, 서버가 요청 정보와 통계 등을 기록함으로써 자신의 상태에
 변경을 가하는 것도 가능합니다. 안전함의 중요점은 그 메서드를 호출해도 클라이언트가 서버의 상태 변화를 직접 요청하는
 것이 아니므로 서버에 불필요한 부하를 주지 않을 것이란 점입니다. 즉 브라우저 입장에서는, 안전한 메서드라면 서버에 해를
 끼치지 않을 것임을 알 수 있기 때문에 자유롭게 호출할 수 있습니다. 이런 점을 활용해서 브라우저가 별다른 위험 없이도
 프리페칭과 같은 동작을 수행할 수 있는 것입니다. 웹 크롤러 역시 안전한 메서드의 호출에 의존합니다.

 안전한 메서드가 정적 파일만 제공해야 할 필요는 없으며, 요청에 대해 응답을 필요에 따라 생성하는 것도 가능합니다. 다만
 생성 과정은 안전해야 하므로, 다른 이커머스 웹 사이트에 주문을 넣는 것과 같이 외부 이펙트를 유발하는 것은 안됩니다.

 메서드의 안전함을 준수하는 것은 온전히 서버 어플리케이션의 책임으로, Apache, Nginx, IIS 등 웹 서버 스스로는 안전함을
 강제하지 못합니다. 서버 어플리케이션은 특히 `GET` 요청을 받았을 때 자신의 상태가 바뀌지 않도록 해야 합니다.

다음은 서버 상태를 바꾸지 않는, 안전한 메서드의 호출입니다.
```

    GET /pageX.html HTTP/1.1
```

다음은 서버 상태를 바꿀 수도 있는, 안전하지 않은 메서드의 호출입니다.
```

    POST /pageX.html HTTP/1.1
```

마지막으로 멱등성을 가졌지만 안전하지는 않은 메서드의 호출입니다.
```

    DELETE /idX/delete HTTP/1.1
```

더 알아보기
------

### 일반 지식

* HTTP 명세에서 안전함의 정의.
### 기술 지식

* 일반적으로 쓰이는 안전한 메서드: `GET`, `HEAD`, `OPTIONS`
* 일반적으로 쓰이는 안전하지 않은 메서드: `PUT`, `DELETE`, `POST`


CSS를 이용한 HTML 스타일링 익히기 - Web 개발 학습하기

CSS를 이용한 HTML 스타일링 익히기
======================

CSS(Cascading Stylesheets – 종속형 스타일시트)는 HTML을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, CSS를 사용하면 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.

학습 경로
-----

CSS에 도전하기 전에 HTML의 기초를 익혀야 합니다. 먼저 HTML 소개를 진행하면서 다음을 익히시는게 좋습니다.

* CSS 소개부터 시작하는 CSS
* 고급 HTML 주제
* JavaScript 및 웹페이지에 동적 기능을 추가하는 법

HTML의 기본 원리를 이해하고 나면, HTML과 CSS 사이를 왕복하며 동시에 학습하는걸 추천드립니다. HTML은 CSS를 활용할 때 훨씬 흥미롭고 재미있으며, HTML을 모르고는 CSS를 제대로 배울 수 없기 때문입니다.

이 주제를 시작하기 전에, 컴퓨터의 사용법과 웹을 둘러보는 일이 익숙해야 합니다. 기본 소프트웨어 설치하기에서 설명하는 기본적인 작업 환경을 갖춰야 하고, 파일 다루기에서 설명하는 파일 생성 및 관리도 이해해야 합니다. 두 안내서 모두 처음 시작하는 분을 위한 Web과 함께 시작하기의 일부분이죠.

본 주제를 시작하기 전에 Web과 함께 시작하기를 먼저 해보시는게 좋겠습니다. 그러나 CSS 기초 글에서 다루는걸 여기 CSS 소개에서 훨씬 상세하게 다루므로 필수는 아닙니다.

구성
--

아래는 추천 순서로 정렬한 본 주제의 구성입니다. 첫 항목부터 시작하세요.

CSS 소개

CSS 작동 원리에 대한 기초로, 선택자와 속성, CSS 규칙을 쓰는 법, HTML에 적용하기, 길이나 색상 등 단위를 특정하는 법, 종속과 상속, 박스 모델의 기초, CSS 디버그 등을 다룹니다.

텍스트 스타일링

여기서 글꼴, 굵기 및 기울임꼴, 줄과 문자 간격, 그림자 및 기타 텍스트 기능 설정을 비롯한 텍스트 스타일링 기본 사항을 살펴 봅니다. 페이지에 맞춤 글꼴을 적용하거나 목록 및 링크에 스타일을 적용할 수도 있습니다.

박스 스타일링

다음으로 웹페이지 레이아웃을 위한 기본 단계 중 하나인 박스 스타일링을 살펴 봅니다. 먼저 박스 모델을 다시 요약하여 설명한 후, 내부 여백(padding), 테두리(borders) 및 외부 여백(margins)을 설정하거나 사용자 지정 배경색, 이미지 및 기타 기능을 설정하고, 박스에 그림자나 필터와 같은 멋진 기능을 설정하는 등 상자 레이아웃을 제어하는 법을 알아봅니다.

CSS 레이아웃

이 시점에서 이미 CSS 기초, 텍스트 스타일링 및 콘텐트가 포함된 박스의 스타일링 및 조작을 살펴보았습니다. 이제는 박스를 뷰포트(viewport) 또는 다른 박스와 관련하여 올바른 위치에 배치하는 방법을 살펴볼 시간입니다. 필요한 사전 요구 사항을 포함하여, CSS 레이아웃, 디스플레이(display) 속성의 다양한 설정, 플로트(float) 및 위치 지정(positioning)과 관련된 기존 레이아웃 방식과 더불어 유동적 박스(flexbox) 같은 새롭고 놀라운 레이아웃 도구를 깊게 살펴봅니다.

반응형 디자인 (TBD)

요즘은 다양한 장치로 웹을 탐색하기 때문에 반응형 웹 디자인 (en-US)(RWD; Responsive Web Design)은 핵심적인 웹 개발 기술이 되었습니다. 이 모듈에서는 반응형 웹 디자인의 기본 원칙과 도구들을 다루며, 화면 너비, 방향, 해상도와 같은 장치 특성에 따라 다른 CSS를 적용하는 방법을 설명합니다. 그리고 이런 특성에 따라 다양한 비디오와 이미지를 제공할 수 있게 하는 기술을 탐구합니다.

CSS로 일상적인 문제 해결하기
-----------------

CSS를 사용하여 일반적인 문제 해결하기는 웹페이지를 만들 때의 매우 흔한 문제들을 CSS를 사용해 해결하는 방법을 살펴보는 섹션들의 링크를 제공합니다.

시작부터 가장 많이 하게 되는 일은 HTML 요소들(elements)의 색상과 배경색을 지정하고, 크기나 모양 또는 위치를 변경하고, 테두리(borders)를 정의하고 추가하는 일입니다. 하지만 일단 CSS의 기초에 대해 확실하게 이해만 하면 못하는 일이 거의 없게 됩니다. CSS 학습의 장점 중 하나는 잘 모르는 것에 대해서도 일단 기초만 익혀두면 무엇을 할 수 있고 무엇을 할 수 없는지를 꽤 정확하게 느낄 수 있다는 것입니다!

더 알아보기
------

MDN의 CSS

MDN의 CSS 문서 목록에 대한 주 진입 지점입니다. CSS 언어의 모든 기능에 대한 자세한 참조 문서 목록을 찾을 수 있습니다. 혹시 속성(property)이 가질 수 있는 모든 값(values)에 대한 정보가 필요한가요? 그렇다면 이곳으로 이동하세요.


JavaScript - 동적인 클라이언트 사이드 스크립트 언어 - Web 개발 학습하기

JavaScript - 동적인 클라이언트 사이드 스크립트 언어
==================================

JavaScript 는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어입니다. 웹페이지는 단순히 변하지 않고 정적인 정보들만 보여주는 것 이상의 일을 합니다. 시간의 흐름에 따라 업데이트 되는 콘텐츠, 동적인 지도와 움직이는 2D/3D 그래픽, 또는 스크롤 가능한 비디오 쥬크박스들과 여러 가지들을 보여줍니다. 여러분은 '아마도 JavaScript가 그 일들을 하고 있겠구나'라고 생각하실 수 있습니다.

**참고:** **프런트엔드 개발자가 되길 희망하나요?**

우리는 모든 필수 정보를 포함하는 과정을 구성했습니다. 목표를 향해 노력할 일만 남았습니다.

**시작하기**

전제 조건
-----

JavaScript 는 HTML 이나 CSS 와 같은 관련 기술들보다 배우기가 더 어렵습니다. JavaScript 에 입문하기 전에, 적어도 아래의 두가지 기술을 먼저 배우고, 아마도 다른 것들도 배우는 것이 좋습니다. 다음 과정들을 통해 시작하세요.

* Web과 함께 시작하기
* HTML 소개
* CSS 소개

다른 프로그래밍 언어를 배웠던 경험이 있다면 도움이 될 수도 있습니다.

JavaScript 의 기본적인 것들이 익숙해진 이후에, 여러분은 더 고급 주제들을 배울 준비가 되어 있어야 합니다. 예를 들면 다음과 같습니다.

* JavaScript 심화, JavaScript 안내서
* 웹 APIs 참조문서
과정
--

이 주제에는 다음 과정들이 제안된 순서대로 포함되어 있습니다.

JavaScript 첫걸음

JavaScript 과정에서, JavaScript를 이용해 첫번째 경험을 쌓기 이전에 "JavaScript 는 무엇인가요?", "어떻게 생겼나요?", 그리고 "그것으로 무엇을 할 수 있죠?" 와 같은 질문에 대답 할 수 있어야 합니다. 그 이후에, 변수, 문자열, 숫자 그리고 배열과 같은 JavaScript 의 기능에 대해 살펴봅시다.

JavaScript 구성 요소

이 과정에서는, 조건문, 반복문, 함수, 그리고 이벤트와 같이 일반적으로 쓰이며 괄호로 감싸여진 형태인 JavaScript 의 핵심적인 기본 기능들을 살펴볼 것입니다. 여러분은 이미 이것들에 대해 이미 보셨겟지만, 그저 지나쳤을 것이니, 우리는 이것에 대해 자세히 살펴볼 것입니다.

JavaScript 객체 소개

JavaScript 에서는 문자열과 배열같은 핵심적인 JavaScript 기능부터 JavaScript 보다 위에 작성된 브라우저의 API 까지 거의 대부분이 객체입니다. 심지어 관련 함수와 변수들을 효율적인 패키지로 캡슐화하기 위해 객체를 만들 수도 있습니다. 여러분이 언어에 대한 이해도를 높이고 효율적으로 코드를 작성하기 위해서라면 JavaScript 의 객체 지향적인 특성을 이해하는 것이 중요합니다. 따라서 우리는 이 과정을 통해 여러분을 도와드릴 것입니다. 여기에서는 객체 이론과 문법에 대해 설명하고 어떻게 객체를 만들고, JSON 데이터가 무엇이고 어떻게 작동하는지에 대해 설명합니다.

비동기적 JavaScript

이 부분에서 우리는 Javascript의 비동기적 실행이 왜 중요한지, 서버에서 리소스를 가져올 때와 같은 시간 지연을 유발하는 동작들을 어떻게 효과적으로 다룰지 등에 대해 살펴봅니다.

Client-side web APIs

클라이언트측의 웹사이트나 응용프로그램을 위해 JavaScript 를 작성하는 경우, 여러분은 브라우저와 운영체제 또는 다른 웹사이트의 데이터를 위한 API를 사용하기 전에 이상한 길에 빠지지 않을 겁니다. 이번 과정에서는 API 가 무엇인지, 그리고 개발 도중 자주 접하게 될 가장 보편적인 API들을 사용하는 방법에 대해 알아 볼 것입니다.

일반적인 JavaScript 문제 해결
---------------------

JavaScript 를 이용한 보편적인 문제 해결 은 웹페이지를 만들 때 발생하는 일반적인 문제들을 JavaScript 로 해결하는 방법에 대한 링크들을 제공합니다.

관련 항목
-----

JavaScript on MDN

JavaScript 의 핵심적인 문서입니다. 여기서 JavaScript 언어의 모든 측면에 대해 넓은 참조 문서들과 JavaScript 경험자들을 위한 심화 튜토리얼들을 찾을 수 있습니다.

JavaScript 배우기

Web 개발자 지망생을 위한 훌륭한 자료 — 짧은 강좌와 대화형 테스트, 자동화된 평가로 지도하는 인터랙티브 환경에서 JavaScript를 배웁니다. 처음 40개 강좌는 무료이며, 한번의 작은 금액 지불로 전체코스를 수강할 수 있습니다.

EXLskills의 JavaScript 기초

EXLskills의 오픈소스 코스로 JavaScript를 무료로 배우세요 JS로 어플리케이션 제작을 시작하는데 필요한 모든 것을 배울수 있습니다.

Coding math

프로그래머가 되기 위해 이해해야 하는 수학을 가르치는 훌륭한 비디오 튜토리얼 시리즈 by Keith Peters.


Server-side website programming - Web 개발 학습하기

Server-side website programming
===============================

The **동적 웹사이트 서버-사이드 프로그래밍** 에 대한 주제는 동적 웹사이트를 생성하는 방법을 보여주는 과목(module) 시리즈이다. (Dynamic Websites: HTTP 요구(requests)에 응답하여 요구에 맞는 정보를 전달하는 웹사이트) 각 과목들은 서버-사이드 프로그래밍의 포괄적인 소개를 제공한다. 기본적인 어플리케이션들을 생성하기 위한 Django (Python) 와Express (Node.js/JavaScript) 같은 웹 프레임워크를 사용하는 방법에 대한 초보자 레벨(beginner level)의 가이드도 포함한다.

대부분의 주요 웹사이트들은 요구에 따라 동적으로 다른 데이터들을 보여주기 위해 여러 종류의 서버-사이드 기술을 사용한다. 예를 들어, Amazon에서 이용가능한 물품들이 얼마나 많을까? 그리고 Facebok에 얼마나 많은 게시글이 있을까? 를 상상해보자. 완전히 다른 static pages(정적 페이지)를 사용하여 이런 것들을 보여주는 것은 완전히 비효율적이다, 그래서 대신에 그런 정적인 템플릿(HTML, CSS, JavaScript 를 사용하여 구성된 템플릿)을 보여준 다음, 필요할 때마다, 템플릿 안에 보이는 데이터들을 동적으로 업데이트한다. 예) 당신이 Amazon에서 다른 물품을 보고 싶어할 때 물품만 다른 것으로 업데이트한다.

현대의 웹 개발에서는, 서버-사이드 개발에 대해 배우는 것을 매우 추천한다.

Learning pathway(학습 경로)
-----------------------

서버-사이드 프로그래밍을 시작하는 것은 보통 클라이언트-사이드(Client-side) 개발보다 더 쉽다. 왜냐하면, 동적 웹사이트는 비슷한 작업들을 많이 수행하는 경향이 있기 때문이다. (데이터베이스에서 데이터를 검색하고 페이지에 보여주는 것, 유저가 입력한 데이터가 유효한 지 확인하고 데이터 베이스에 저장하는 것, 로그인한 유저의 권환을 체크하는 것 등) 그리고 이런 작업들과 다른 일반적인 웹 서버 기능을 쉽게 해주는 웹 프레임워크가 있기 때문이다.

기본적인 프로그래밍 개념에 대한 지식 (또는 특정한 프로그래밍 언어에 대한 지식) 은 유용하나, 필수는 아니다. 비슷하게, 클라이언트-사이드 코딩에 대한 전문지식이 요구되지 않는다, 그러나 기본적인 지식은 클라이언트-사이드 웹 "프론트 엔드(Front End)"를 생성하는 개발자와 일 하는데 도움이 될 것이다.

"웹을 작동하는 방법"을 이해할 필요가 있다. 다음 주제들을 먼저 읽는 것을 추천한다.

* What is a web server(웹서버는 무엇인가)
* What software do I need to build a website?(웹사이트를 만들기 위해 필요한 소프트웨어는 무엇인가)
* How do you upload files to a web server?(웹 서버에 파일을 업로드하는 방법은 무엇인가)

이런 기본적인 이해를 통해, 이 섹션의 과목들을 공부할 준비가 될 것이다.

Modules(과목)
-----------

이번 주제에는 다음의 과목들을 포함하고 있다. 우선 첫번째 과목을 시작해야한다. 그 후에 두 개의 과목들 중 하나를 선택해 나아가야한다. 두 개의 과목은 가장 대중적인 서버-사이드 언어와 그에 맞는 적절한 웹 프레임워크를 사용하는 방법을 보여준다.

Server-side website programming first steps(서버-사이드 웹사이트 프로그래밍의 첫 단계)

이 과목은 서버 기술 문외한을 위한 서버-사이드 웹사이트 프로그래밍에 대한 정보를 제공한다. 또한, 서버-사이드 프로그래밍에 대한 근본적인 질문에 대한 답을 포함하고 있다. (그 질문은 서버가 무엇인지, 클라이언트-프로그래밍과 어떻게 다른 지, 서버가 왜 그렇게 유용한 지에 대한 것이다.) 그리고 몇몇의 더 대중적인 서버-사이드 웹 프레임워크에 대한 개요와 당신의 사이트에 가장 적합한 것을 선택하는 방법에 대한 가이드도 있다. 마지막으로, 웹 서버 보안에 대한 기본적인 섹션도 제공한다.

Django Web Framework (Python)

Django는 매우 대중적이고 Python으로 쓰여진 매우 중요한 서버-사이드 웹 프레임워크이다. 이 과목은 Django가 좋은 웹 서버 프레임워크인 이유, 개발 환경을 구축하는 방법, 그리고 Django로 일반적인 업무를 수행하는 방법을 설명해준다.

Express Web Framework (Node.js/JavaScript)

Express는 JavaScript로 쓰여진 대중적인 웹 프레임워크이며, node.js 런 타임 환경에서 호스트된다. 이 과목은 이 프레임 워크의 주요 장점, 개발 환경을 구축하는 법, 일반적인 웹 개발과 배치(deployment) 작업을 수행하는 법에 대해 설명해준다.

다른 주제
-----

Node server without framework(프레임워크 없는 노드 서버)

이 글은 프레임워크를 사용하고 싶지 않는 사람들을 위해, 순수한 Node.js로 구성된 단순한 정적 파일 서버를 제공한다.


Web과 함께 시작하기 - Web 개발 학습하기

Web과 함께 시작하기
============

*Web과 함께 시작하기* 는 여러분에게 웹 개발의 실질적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다.

당신의 첫 번째 웹사이트 줄거리
-----------------

전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.

가이드
---

아래 열거된 문서들을 통해 여러분은 아무것도 없는 상태에서 첫 번째 웹 페이지를 온라인 상태로 만들 수 있습니다. 여행을 시작합시다!

기본 소프트웨어 설치

웹사이트 제작을 위한 도구는 아주 많습니다. 이제 막 시작한다면 수도 없이 많은 코드 편집기와 프레임워크, 테스트 도구 때문에 혼란스러울 겁니다. 이 문서에서는 기본적인 웹 개발을 시작하는 데 필요한 소프트웨어를 어떻게 설치할 수 있는지 차근차근 알려드립니다.

웹사이트는 어떻게 보일까요?

여러분의 웹사이트를 위한 코드 작성을 하기 전에, 먼저 계획을 세워야 합니다. 어떤 정보들을 보여줄것인가요? 어떤 글꼴이나 색상을 사용할 것인가요? 여기서 우리는 여러분이 사이트의 내용이나 디자인을 계획하기 위한 간단한 방법을 제공할 것입니다.

파일 다루기

웹사이트는 많은 파일(문자, 코드, 스타일시트, 미디어, 등등)로 이루어져 있습니다. 웹사이트를 만들 때, 여러분은 합리적인 구조로 여러 파일을 모으고 상호 작용이 가능한지 확인해야 합니다. 이 문서에서는 여러분의 웹사이트를 위해 합리적인 파일 구조를 설정하는 방법과 여러분이 알아야 할 문제들을 설명해줄 것입니다.

HTML 기본

HTML(Hypertext Markup Language)은 여러분의 웹 콘텐츠를 구조화하고, 의미와 의도를 주기 위해 사용되는 코드입니다. 예를 들면, 내 콘텐츠가 문단의 집합인지, 또는 목차(•)의 리스트인지. 페이지에 이미지를 넣어야 하는지, 데이터 테이블이 필요한지. 이 문서는 여러분을 난처하지 않게 하면서 HTML에 익숙해질 수 있는 충분한 정보를 제공할 것입니다.

CSS 기본

CSS(Cascading Style Sheets)는 여러분의 웹사이트를 디자인할 때 사용하는 코드입니다. 예를 들어, 글자 색을 검정으로 할 것인가요, 빨간색으로 할 것인가요? 콘텐츠는 화면 어디에 있어야 하나요? 웹사이트를 꾸미려면 어떤 배경 이미지나 색을 사용하실 건가요? 이 문서에서 시작하는데 필요한 모든 것들을 안내해드립니다.

JavaScript 기본

JavaScript는 여러분이 상호 기능을 웹사이트에 추가할 때 사용하는 프로그래밍 언어입니다. 예를 들면 게임, 버튼이 눌리거나 폼에 정보가 입력되었을 때 발생하는 것, 동적인 스타일 효과, 애니메이션 등이 있습니다. 이 문서는 여러분께 이 흥미로운 언어로 가능한 것들에 대한 것과 어떻게 시작할 수 있는지에 대한 아이디어를 제공할 것입니다.

여러분의 코드 공개

웹사이트를 위한 코드 작성과 파일 구성을 마쳤다면, 사람들이 찾아볼 수 있도록 이 모든 것을 온라인에 둘 필요가 있습니다. 이 문서에서는 여러분이 간단한 예제 코드를 적은 노력으로 온라인 시키는 방법을 설명할 것입니다.

웹의 동작 방식

여러분이 가장 선호하는 웹사이트에 접근할 때, 여러분이 모르는 많은 복잡한 것들이 눈에 띄지 않는 곳에서 발생합니다. 이 문서에서는 여러분이 컴퓨터로 웹페이지를 볼 때 발생하는 것들에 대해 간단하게 설명을 할 것입니다.

같이 보기
-----

* Web Demystified: 웹 개발을 처음 시작하는 분을 위해 웹 기초를 설명하는 뛰어난 비디오 시리즈입니다. Jérémie Patonnier께서 제작하셨습니다.
* The web and web standards (en-US): 이 글은 웹에 대한 유용한 배경지식을 알려줍니다. 웹이 어떻게 생겨났는지, 웹의 표준 기술이 무엇인지, 어떻게 함께 작동하는지, 왜 "웹 개발자"가 직업으로 삼기 좋은지, 그리고 이 과정을 통해 어떤 모범 사례를 배울 수 있는지 알 수 있습니다.


접근성 - Web 개발 학습하기

접근성
===

웹 개발자가 되기위해서 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 - Web 개발 학습하기

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 문서를 참고하는 것은 좋은 출발점입니다. 요소가 어떤 속성을 가지고 있는지, 어떤 값과 속성을 사용할 수 있는지를 알고 싶다면, 큰 도움이 될 것입니다.


HTML 폼 가이드 - Web 개발 학습하기

HTML 폼 가이드
==========

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

항목
--

1. 나의 첫 HTML 폼
2. HTML 폼 구성 방법 (en-US)
3. 기본 폼 위젯 (en-US)
4. CSS와 HTML 폼
    1. HTML 폼 스타일 (en-US)
    2. HTML 폼을 위한 고급 스타일 (en-US)
    3. 폼 위젯을 위한 호환성 테이블 속성 (en-US)
5. 데이터 주고 받기 (en-US)
6. 데이터 유효성 검사 (en-US)
7. 사용자 폼 위젯 만드는 방법 (en-US)
8. JavaScript를 통해서 폼 전달 하기 (en-US)
    1. FormData 객체 사용 (en-US)
9. 기존 브라우저에서 HTML 폼 (en-US)
HTML 문서
-------

### HTML 요소

| 요소 | 관련 DOM 인터페이스 | 설명 |
| --- | --- | --- |
| `<button>` | `HTMLButtonElement` (en-US) | `button 요소는 클릭할 수 있는 버튼을 나타낸다.` |
| `<datalist>` | `HTMLDataListElement` (en-US) | datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 `<option>` 요소의 집합을 포함합니다. |
| `<fieldset>` | `HTMLFieldSetElement` (en-US) | fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다. |
| `<form>` | `HTMLFormElement` (en-US) | `form` 요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다. |
| `<input>` (en-US) | `HTMLInputElement` (en-US) | `input 요소는` 대화형 컨트롤 폼들을 생성하는데 사용됩니다. |
| `<label>` | `HTMLLabelElement` (en-US) | `label` 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다. |
| `<legend>` | `HTMLLegendElement` (en-US) | `legend` 요소는 상위 요소인 `<fieldset>` 컨텐츠를 위한 캡션을 나타냅니다. |
| `<meter>` | `HTMLMeterElement` (en-US) | `meter` 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다. |
| `<optgroup>` | `HTMLOptGroupElement` (en-US) | `optgroup` 요소는 `<select>` (en-US) 요소 안에 있는 옵션 그룹을 생성합니다. |
| `<option>` | `HTMLOptionElement` (en-US) | HTML `option` 요소는 `<select>` (en-US), `<optgroup>` 또는 `<datalist>`요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다. |
| `<output>` | `HTMLOutputElement` (en-US) | `output` 요소는 계산 결과를 나타냅니다. |
| `<progress>` | `HTMLProgressElement` (en-US) | `progress` 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다. |
| `<select>` (en-US) | `HTMLSelectElement` (en-US) | `select` 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. |
| `<textarea>` (en-US) | `HTMLTextAreaElement` (en-US) | `textarea` 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다. |

**참고:** 모든 폼 요소들이나 모든 HTML요소들은 `HTMLElement` 돔 인터페이스를 지원합니다.

### HTML 속성

| 속성 이름 | 요소 | 설명 |
| --- | --- | --- |
| accept | `<form>`, `<input>` (en-US) | 서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다. |
| accept-charset | `<form>` | 지원하는 문자 집합 목록 |
| action | `<form>` | 폼을 통해서 전송 정보를 처리하는 프로그램의 URL |
| autocomplete | `<form>`, `<input>` (en-US) | 폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다. |
| autofocus | `<button>`, `<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) | 페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다. |
| checked | `<input>` (en-US) | 해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. |
| cols | `<textarea>` (en-US) | textarea의 세로줄 수를 설정합니다. |
| data | `<object>` | 자원의 URL을 명시합니다. |
| dirname | `<input>` (en-US), `<textarea>` (en-US) |  |
| disabled | `<button>`, `<fieldset>`, `<input>` (en-US), `<optgroup>`, `<option>`, `<select>` (en-US), `<textarea>` (en-US) | 사용자가 요소와 상호 작용할 수 있는 지 나타냅니다. |
| enctype | `<form>` | POST방식으로 전송되는 데이터의 타입을 설정합니다. |
| for | `<label>`, `<output>` | Describes elements which belongs to this one. |
| form | `<button>`, `<fieldset>`, `<input>` (en-US), `<label>`, `<meter>`, `<object>`, `<output>`, `<progress>`, `<select>` (en-US), `<textarea>` (en-US) | 요소의 소유자인 폼을 나타냅니다. |
| high | `<meter>` | Indicates the lower bound of the upper range. |
| list | `<input>` (en-US) | Identifies a list of pre-defined options to suggest to the user. |
| low | `<meter>` | Indicates the upper bound of the lower range. |
| max | `<input>` (en-US), `<meter>`, `<progress>` | 허용되는 최댓값을 나타냅니다. |
| maxlength | `<input>` (en-US), `<textarea>` (en-US) | 요소에서 허용되는 특징의 최대 수를 명시합니다. |
| method | `<form>` | Defines which HTTP method to use when submitting the form. Can be GET (default) or POST. |
| min | `<input>` (en-US), `<meter>` | 허용되는 최솟값을 나타냅니다. |
| multiple | `<input>` (en-US), `<select>` (en-US) | Indicates whether multiple values can be entered in an input of the type `email` or `file`. |
| name | `<button>`, `<form>`, `<fieldset>`, `<input>` (en-US), `<output>`, `<select>` (en-US), `<textarea>` (en-US) | 요소의 이름. For example used by the server to identify the fields in form submits. |
| novalidate | `<form>` | This attribute indicates that the form shouldn't be validated when submitted. |
| optimum | `<meter>` | Indicates the optimal numeric value. |
| pattern | `<input>` (en-US) | Defines a regular expression which the element's value will be validated against. |
| placeholder | `<input>` (en-US), `<textarea>` (en-US) | Provides a hint to the user of what can be entered in the field. |
| readonly | `<input>` (en-US), `<textarea>` (en-US) | Indicates whether the element can be edited. |
| required | `<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) | Indicates whether this element is required to fill out or not. |
| rows | `<textarea>` (en-US) | Defines the number of rows in a textarea. |
| selected | `<option>` | Defines a value which will be selected on page load. |
| size | `<input>` (en-US), `<select>` (en-US) | Defines the width of the element (in pixels). If the element's `type` attribute is `text` or `password` then it's the number of characters. |
| src | `<input>` (en-US) | The URL of the embeddable content. |
| step | `<input>` (en-US) |  |
| target | `<form>` |  |
| type | `<button>`, `<input>` (en-US) | Defines the type of the element. |
| usemap | `<input>` (en-US) |  |
| value | `<button>`, `<option>`, `<input>` (en-US), `<meter>`, `<progress>` | Defines a default value which will be displayed in the element on page load. |
| wrap | `<textarea>` (en-US) | Indicates whether the text should be wrapped. |

### Normative reference

* W3C HTML5 Specification (Forms)
* WHATWG HTML Living Standard (Forms)


웹 성능 - Web 개발 학습하기

웹 성능
====

웹사이트를 만들기 위해선 HTML과 CSS, JavaScript가 필요합니다. 사람들이 쓰고 싶은 웹사이트와 어플리케이션을 만들려면 사용자들을 끌어모으고 유지할 수 있어야 하며, 그러려면 좋은 사용자 경험을 주어야 합니다. 콘텐츠가 빠르게 로드되고 사용자와의 상호작용에 잘 반응하는 것은 좋은 사용자 경험의 일부입니다. 이를 **웹 성능**이라고 하며, 이 모듈에서는 어떻게 성능이 좋은 웹사이트를 만들 수 있는지에 대해 기초적인 부분들을 집중적으로 다룹니다.

이 초보자 교육 자료의 나머지 부분은 웹 성능과 접근성과 같은 모범 사례를 가능한 한 많이 다루려 했지만, 해당 주제들에 확실히 익숙해지고 싶다면 별도로 탐색해보는 것이 좋을 것입니다.

학습 경로
-----

웹 성능을 높일 수 있는 권장사항들을 구현하려면 HTML과 CSS, JavaScript를 알아야 하지만, 어플리케이션을 만드는 방법을 알아야만 웹 성능을 이해하고 측정할 수 있는 것은 아닙니다. 그렇지만 본 과정을 진행하기 전, 최소한 웹 개발 시작하기 과정에서 웹 개발의 기본 개념을 익히는 것을 추천합니다.

다음의 과정들에서 다루는 주제를 조금 더 깊게 살펴보는 것도 도움이 될 것입니다.

* HTML 소개
* CSS 첫걸음
* JavaScript 첫걸음

위의 과정들을 진행했다면 웹 성능에 대해 더 깊게 알고 싶어질 것입니다. MDN 웹 성능 구획에서 웹 성능 API, 테스트 및 분석 도구, 병목 현상 잡아내기 등 더 많은 것을 배울 수 있습니다.

안내서들
----

본 주제에 속한 안내서들은 다음과 같습니다. 순서대로 진행하는 것을 권장합니다. 바로 첫 번째부터 시작하면 됩니다.

"어째서" 웹 성능인가

접근성, 사용자 경험, 비즈니스 목표 달성 측면에서 웹 접근성이 왜 중요한지 다룹니다.

웹 성능이란 무엇인가? (en-US)

웹 성능이 중요하다는 것은 누구나 압니다. 그렇다면 웹 성능이란 구체적으로 무엇일까요? 이 문서에서는 웹페이지의 로딩과 렌더링에서부터 웹 성능을 검토할 때 어떤 집단의 사람들을 고려해야 하는지까지 웹 성능의 요소들을 소개합니다. 이는 콘텐츠가 사용자의 브라우저에 보여지는 과정을 포함합니다.

사용자들은 어떻게 웹 성능을 인지하는가? (en-US)

웹사이트가 밀리초 단위로 얼마나 빠른지보다 중요한 것은 사용자들이 웹사이트를 어느 정도로 빠르다고 느끼는지입니다. 사용자들의 인지는 웹페이지의 실제 로드 시간, 지연 시간, 사용자의 상호작용에 대한 반응성, 스크롤이나 다른 애니메이션의 부드러움 등에 영향을 받습니다. 이 문서에서는 로딩과 애니메이션, 반응성을 나타내는 다양한 지표들과 실제 타이밍을 제외하더라도 사용자의 인지 작용을 개선할 수 있는 모범 사례들을 논합니다.

웹 성능 측정하기

이제 당신은 몇 가지의 웹 성능 지표를 이해하게 되었습니다. 웹 성능 도구와 지표, API, 웹 성능을 웹 개발과정의 일부로 편입시킬 수 있는 방법에 대해 더 깊게 살펴봅니다.

멀티미디어: 이미지

많은 경우에 가장 쉬운 웹 성능 개선 방법은 미디어 최적화입니다. 사용자 에이전트의 기능, 크기, 픽셀 밀도를 고려해 미디어 파일을 각각 다르게 제공할 수 있습니다. 이 문서에서는 이미지가 웹 성능에 미치는 영향, 이미지당 전송되는 바이트의 크기를 줄이는 방법을 다룹니다.

멀티미디어: 비디오

많은 경우에 가장 쉬운 웹 성능 개선 방법은 미디어 최적화입니다. 이 문서에서는 비디오 콘텐츠가 웹 성능에 미치는 영향, 배경 영상에서 오디오 트랙을 제거하여 웹 성능 높이기와 같은 팁들을 다룹니다.

JavaScript를 활용한 웹 성능 모범사례 (en-US)

적절하게 JavaScript를 사용하면 상호작용할 수 있고 몰입되는 웹 경험을 줄 수 있습니다. 하지만 JavaScript를 잘못 사용할 경우 다운로드 시간, 렌더링 시간, 앱 자체의 성능, 배터리 수명, 사용자 경험을 심각하게 해칠 수도 있습니다. 이 문서에서는 컨텐츠가 복잡하더라도 최대한의 성능을 발휘할 수 있도록 고려해야 할 JavaScript 모범사례에 대해 소개합니다.

HTML과 웹 성능 (en-US)

마크업이 배치된 순서나 속성은 웹사이트 성능에 영향을 미칠 수 있습니다. DOM 노드의 개수를 최소화하고 HTML 문서에 콘텐츠(스타일, 스크립트, 미디어, 써드파티 스크립트 등)를 포함시키는 순서와 속성을 최적화하여 사용자 경험을 크게 개선할 수 있습니다. 이 문서에서는 최고의 성능을 끌어내려면 어떻게 HTML을 사용해야 하는지를 자세히 다룹니다.

CSS와 웹 성능 (en-US)

성능 개선에서 CSS 최적화는 상대적으로 덜 중요할 수 있습니다. 하지만 웹 성능에 더 많은 영향을 끼치는 CSS 기능이 몇 있습니다. 이 글에서는 해당 CSS 속성들과 웹 성능에 부정적인 영향을 끼치지 않으면서 스타일을 다루기 위해 권장되는 방법을 살펴봅니다.

글꼴과 웹 성능

외부 글꼴을 포함해야 하는지, 만약 포함해야 한다면 어떻게 웹사이트의 성능에 미치는 영향을 최소화하면서 디자인이 요구하는 글꼴을 포함시킬 수 있는지를 살펴봅니다.

모바일 환경에서의 웹 성능

모바일 기기로 웹에 접속하는 것이 대중화되면서, 모든 모바일 플랫폼은 완전한 형태의 웹 브라우저를 탑재하고 있습니다. 그러나 대역폭, CPU, 배터리 수명이 여전히 제한적이기 때문에 모바일 플랫폼에서 웹 컨텐츠의 성능을 고려해야 합니다. 이 글에서는 모바일 환경에 특화된 검토사항을 살펴봅니다.

비즈니스에서의 웹 성능 활용 사례 (en-US)

웹 성능을 개선하기 위해 개발자는 많은 것을 할 수 있지만, 어느 정도까지 "빨라야" 할까요? 어떻게 경영진에게 웹 성능을 개선하는 것이 중요하다고 설득해야 할까요? 한 번 최적화를 하면 웹 성능 관련 문제가 다시 발생하지 않는다고 보장할 수 있을까요? 이 문서에서는 경영진 설득하는 법, 웹 성능을 중시하는 문화 만드는 법, 웹 성능을 위한 예산 책정하는 법을 살펴보고 코드베이스가 퇴보하지 않도록 하는 방법들을 소개합니다.

참조 항목
-----

웹 성능 기초 (en-US)

HTML, CSS, JavaScript, 미디어 파일 등 프론트엔드 구성 요소뿐만 아니라 어플리케이션을 느리게 만들 수 있는 기능들과 주관적, 객관적으로 빠르게 만들 수 있는 기능들이 있습니다. 웹 성능과 관련된 API, 개발자 도구, 모범 사례, 안 좋은 사례를 여럿 소개합니다. 여기에서는 그런 기능들을 기본적인 수준으로 다루면서 각 주제별로 성능을 개선하기 위해 더 깊게 살펴볼 수 있는 링크를 제공합니다.

반응형 이미지

이 문서에서는 반응형 이미지의 개념과 이를 구현하기 위해 HTML에서 제공하는 도구들을 배웁니다. 반응형 이미지란 화면 크기와 해상도, 그 외 여타 기능들에서 제각기 다른 다양한 기기들에서 잘 보여지는 이미지를 말합니다. 이를 통해 다양한 기기에서 웹 성능을 높일 수 있습니다. 반응형 이미지는 앞으로 배울 CSS 주제인 반응형 디자인의 한 부분입니다.

MDN 웹 성능 구획

가장 주요한 웹 성능 구획입니다. 여기에서 웹 성능 API 개괄, 테스트 및 분석 도구, 웹 성능 병목현상 잡아내기 등 웹 성능에 관한 훨씬 더 자세한 내용들을 찾을 수 있습니다.


Front-end web developer - Web 개발 학습하기

Front-end web developer
=======================

프론트 개발자가 되는 과정에 오신 것을 환영합니다!

여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공합니다. 각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. 각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.

다루는 주제
------

다루는 내용은 다음과 같습니다.

* 기본 설정 및 학습 방법에 대한 학습
* 웹 표준 및 모범 사례(예: 접근성 및 브라우저간 호환성)
* 웹 구조와 의미를 제공하는 언어인 HTML
* 웹 페이지 스타일을 지정하는 언어인 CSS
* 웹에서 동적인 기능을 만드는데 사용되는 스크립트 언어인 JavaScript
* 최신 클라이언트 웹 개발을 용이하게 해주는 도구

섹션을 순서대로 살펴볼 수 있지만, 각 섹션은 독립적입니다. 예를들어 이미 HTML을 알고 있는 경우 CSS 섹션으로 건너뛸 수 있습니다.

전제 조건
-----

이 강좌를 시작하기 위한 사전 지식은 필요하지 않습니다. 최신 웹 브라우저를 실행할 수 있는 컴퓨터, 인터넷 연결, 학습 의지만 있으면 됩니다.

프론트 엔드 웹 개발이 자신에게 적합한지 확실하지 않거나, 더 길고 완전한 과정을 시작하기 전에 부드러운 소개를 원하면 먼저 웹과 함께 시작하기 를 읽어보세요.

도움말 얻기
------

우리는 가능한 한 편안하게 프론트 엔드 웹 개발을 학습할 수 있도록 노력했습니다. 그러나 무언가를 이해하지 못하거나 일부 코드가 작동하지 않아 학습을 멈추게 될 수 있습니다.

당황하지 마세요. 우리는 초보자든 전문 웹 개발자든 모두 어떤 문제에 막혀 있습니다. 학습 및 도움말 얻기 (en-US) 문서는 정보를 찾고 도움을 줄 수 있는 일련의 팁을 제공합니다. 그래도 문제가 해결되지 않는다면 Discourse forum에 문제를 게시하세요.

시작합시다. 행운을 빌어요!

학습 과정
-----

### 시작하기

완료 시간: 1.5–2 시간

#### 전제 조건

기본적인 컴퓨터 사용 능력 외에는 아무것도 없습니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

이 강좌에는 평가가 없습니다. 그러나 건너뛰지 마세요. 강좌의 후반부에 있는 연습문제를 준비하는것도 중요합니다.

#### 가이드

* 기본 소프트웨어 설치하기— 기본 도구 설정 (15 분 읽기)
* 웹과 웹 표준에 대한 배경 (en-US) (45 분 읽기)
* 학습과 도움말 얻기 (en-US) (45 분 읽기)
### HTML을 사용한 의미론과 구조

완료 시간: 35–50 시간

#### 전제 조건

기본적인 컴퓨터 활용 능력과 기본적인 웹 개발 환경 외에는 아무것도 없습니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

 각 모듈(교과목 단위)의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

#### 모듈

* HTML 소개 (15–20 시간 읽기/평가)
* Multimedia 와 embedding (15–20 시간 읽기/학습)
* HTML tables (5–10 시간 읽기/학습)
### CSS를 사용한 스타일링 및 레이아웃

완료 시간: 90–120 시간

#### 전제조건

CSS를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 HTML 소개 를 먼저 공부해야 합니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

 각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

#### 모듈

* CSS 첫 번째 단계 (10–15 시간 읽기/학습)
* CSS 구성 블록 (35–45 시간 읽기/학습)
* 텍스트 스타일링 (15–20 시간 읽기/학습)
* CSS 레이아웃 (30–40 시간 읽기/학습)

#### 추가 자료

* CSS 레이아웃 쿡북 (en-US)
### JavaScript와의 상호작용

완료 시간: 135–185 시간

#### 전제 조건

Javascript를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 HTML 소개 를 먼저 공부해야 합니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

 각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

#### 모듈

* JavaScript 첫걸음 (30–40 시간 읽기/평가)
* JavaScript 구성 요소 (25–35 시간 읽기/평가)
* JavaScript 객체 소개 (25–35 시간 읽기/평가)
* Client-side web APIs (30–40 시간 읽기/평가)
* 비동기 JavaScript (25–35 시간 읽기/평가)
### 웹 폼 — 유저 데이터 작업

완료 시간: 40–50 시간

#### 전제 조건

Form에는 HTML, CSS, and JavaScript 지식이 필요합니다. Form 작업의 복잡성을 감안할 때 자주 접하는 내용입니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

 각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

#### 모듈

* HTML 폼 가이드(40–50 시간)
### 모두를 위한 웹 작동 시키기

완료 시간: 60–75 시간

#### 전제 조건

이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 많은 기술과 모범 사례(best practices)가 여러 기술에 적용됩니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

 각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.

#### 모듈

* 크로스 브라우저 테스팅 (en-US) (25–30 시간 읽기/평가)
* 접근성 (20–25 시간 읽기/평가)
### 최신 도구

완료 시간: 55–90 시간

#### 전제 조건

이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 논의하는 도구들은 이러한 많은 기술과 함께 작동합니다.

#### 앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?

이 모듈에는 특정 평가가 없습니다. 두 번째, 세 번째 모듈의 끝에 있는 사례 연구 자습서는 최신 도구의 필수 요소를 파악할 수 있도록 준비했습니다.

#### 모듈

* Git 과 GitHub (5 hour read)
* 클라이언트 웹 개발 도구 이해하기 (en-US) (20–25 hour read)
* Javascript 클라이언트 프레임워크 이해하기 (30-60 hour read/exercises)


CSS 첫 번째 단계 - Web 개발 학습하기

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 요소 스타일 지정에 대해 학습합니다.


텍스트 스타일링 - Web 개발 학습하기

텍스트 스타일링
========

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

전제 조건
-----

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

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

안내
--

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

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

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

목록 스타일링

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

링크 스타일링

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

웹 글꼴

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

평가
--

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

커뮤니티 스쿨 홈페이지 typesetting

이 평가에서는 커뮤니티 스툴 홈페이지의 텍스트 스타일을 지정함으로써 스타일 텍스트에 대한 이해를 테스트합니다.


CSS 레이아웃 - Web 개발 학습하기

CSS 레이아웃
========

이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일 지정 방법, 콘텐츠가 들어 있는 박스의 스타일을 지정하고 조작하는 방법을 살펴보았습니다. 이제 뷰포트와 관련하여 박스를 올바른 장소에 배치하는 방법을 살펴볼 차례입니다. 우리는 필수 전제조건을 이미 다루었기 때문에 이제 다양한 디스플레이 설정, 포지셔닝, 플렉스박스 및 CSS 그리드와 같은 최신 레이아웃 도구, 그리고 당신이 여전히 알고 싶어 할 만한 레거시 기술들을 살펴보며 CSS 레이아웃에 대해 자세히 알아보겠습니다.

선결사항
----

이번 과정을 시작하기 전에, 여러분은 이미 아래 내용을 알고 있어야 합니다:

1. HTML 소개 과정에서 논의했듯이 HTML에 대해 기본적인 친숙도가 있어야 합니다.
2. CSS 소개 과정에서 논의한 대로 CSS 기본 사항에 대해 익숙해야 합니다.
3. 박스 스타일 지정 방법에 대한 이해가 있어야 합니다.

**참고:** 직접 파일을 생성할 수 없는 컴퓨터/태블릿/기타 장치에서 작업하고 있는 경우, JSBin나 Glitch과 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.

안내서
---

이 글은 CSS에서 이용할 수 있는 기본 레이아웃 도구 및 기술에 대한 지침을 제공합니다. 과정 말미에는 웹페이지를 레이아웃하여 레이아웃 메서드에 대한 이해도를 확인할 수 있는 평가가 있습니다.

* CSS 레이아웃 입문서
    + 이 문서에서는 이전 과정에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 다양한 `display` (en-US) 속성값의 차이 등을 복습하고, 이번 과정에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.
* 일반 흐름
    + 웹페이지의 요소 무리는 여러분이 무언가 변화를 주기전까지는 *normal flow*(일반 흐름)에 따라 요소들을 배치합니다. 이 문서에서는 일반 흐름을 변경하는 방법을 배우기 위한 기초로서 일반 흐름의 기본을 설명합니다.
* 플렉스박스(Flexbox)
    + 플렉스박스는 행이나 열로 배치하는 1차원 레이아웃 메서드입니다. 항목은 좁은 공간에 맞게 축소되거나, 여분의 공간을 채우기 위해 변형됩니다. 이 문서에서는 모든 기본 사항을 설명합니다. 이 안내서를 공부한 후 플렉스박스 기술을 테스트 (en-US)하여 이해도를 확인한 후 계속 진행할 수 있습니다.
* 그리드(Grids)
    + CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 2차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열로 배치할 수 있으며, 복잡한 레이아웃을 간단하게 구축할 수 있는 많은 기능이 있습니다. 이 문서에서는 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 설명합니다. 이 안내서를 공부한 후 그리드 기술을 테스트 (en-US)해 볼 수 있습니다.
* 플로트(Floats)
    + 원래 텍스트 블록 안에 플로팅 이미지를 넣기 위해 사용되던 `float` 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 일반적으로 사용되는 도구 중 하나로 자리매김했었습니다. 플렉스박스와 그리드의 등장으로 플로트 속성은 원래의 용도로 돌아갔습니다.
* 포지셔닝(Positioning)
    + 포지셔닝을 사용하면 요소를 일반적인 문서 레이아웃 흐름에서 벗어나, 요소 위에 배치하거나, 뷰포트 내부에서 항상 같은 위치에 있는 등 다르게 동작하도록 할 수 있습니다. 이 문서에서는 다양한 `position` 값을 설명하고, 그 사용법에 대해 설명합니다.
* 다단 레이아웃
    + CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 문서에서는 이 기능을 어떻게 사용하는지 설명합니다.
* 반응형 디자인
    + 웹 기반 장치에 다양한 화면 크기가 등장함에 따라 반응형 웹 디자인(RWD) 개념이 등장했습니다. 이것은 다양한 화면 너비와 해상도 등에 맞게 웹 페이지가 레이아웃과 모양을 변경할 수 있는 일련의 관행입니다. 이는 멀티 디바이스 웹을 위한 디자인 방식을 바꾼 아이디어로, 이 문서에서는 그 내용을 숙달하기 위해 알아야 하는 주요 기술을 이해하도록 도울 것입니다.
* 미디어 쿼리 초보자 안내서
    + **CSS Media Query**는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 요소입니다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문입니다. 또한 사용자가 마우스가 아닌 터치스크린을 사용하는지 여부와 같이 실행 중인 사이트 환경의 여러 내용들을 감지하는 데도 사용할 수 있습니다. 이번 과정에서는 먼저 미디어 쿼리에 사용되는 구문에 대해 배우고, 간단한 디자인을 반응형으로 만드는 방법을 보여주는 예제를 살펴보겠습니다.
* 레거시 레이아웃 메서드
    + 그리드 시스템은 CSS 레이아웃에서 사용되는 매우 일반적인 기능이며, CSS 그리드 레이아웃(Grid Layout) 이전에는 플로트(Floats) 또는 기타 레이아웃 기능을 이용하여 그리드 레이아웃(Grid Layout)을 구현하는 경향이 있었습니다. 먼저 레이아웃을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤, 여러분의 콘텐츠를 그 가상의 열 안에 콘텐츠 열을 끼워 맞추는 방식이었습니다. 이 글에서 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.
* 이전 브라우저 지원
    + 이 과정에서는 플렉스박스 및 그리드를 웹디자인을 위한 주 레이아웃 방법으로 사용할 것을 권장합니다. 그러나 이전 브라우저 또는 당신이 사용하는 메서드를 지원하지 않는 브라우저를 사용하는 사이트 방문자가 있을 수 있습니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 브라우저마다 다른 기능의 우선순위를 정하기 때문에 발생합니다. 이 문서에서는 이전 기술의 사용자들을 배제하지 않고 현대적인 웹 기술을 사용하는 방법에 대해 설명합니다.
평가
--

다음 평가는 위 가이드에서 다룬 CSS 레이아웃 방법에 대한 이해도를 테스트합니다.

* 레이아웃 이해의 핵심 사항 (en-US)
    + 웹페이지를 레이아웃하여 다양한 레이아웃 방법에 대한 지식을 테스트하는 평가입니다.
같이 보기
-----

포지셔닝 실례 (en-US)

이 문서에서는 포지셔닝으로 어떤 작업을 수행할 수 있는지 설명하기 위해 몇 가지 실제 사례를 구축하는 방법을 보여줍니다.

CSS 레이아웃 안내서 (en-US)

CSS 레이아웃 안내서(cookbook)는 사이트에 구현해야 할 수 있는 일반적인 레이아웃 패턴에 대한 레시피를 한데 모으는 것을 목표로 합니다. 이 레시피는 프로젝트의 시작점으로 사용할 수 있는 코드를 제공할 뿐만 아니라 레이아웃 사양을 사용할 수 있는 다양한 방법과 개발자로서의 선택 사항을 강조합니다.


일반적인 CSS 문제 해결하기 - Web 개발 학습하기

일반적인 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 구성 블록 - Web 개발 학습하기

CSS 구성 블록
=========

이 강의에서는 CSS 첫 번째 단계 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서는 계단식 및 상속, 사용 가능한 모든 선택자 유형, 단위 크기 조정, 배경 및 테두리 스타일 지정, 디버깅 등을 살펴 봅니다.

여기에서의 목표는 텍스트 스타일 및 CSS 레이아웃 과 같은 보다 구체적인 분야로 이동하기 전에 유능한 CSS 를 작성하기 위한 도구를 제공하고 모든 필수 이론을 이해하도록 돕는 것입니다.

전제 조건
-----

이 과목을 시작하기 전에 다음이 있어야 합니다:

1. 컴퓨터 사용 및 수동적으로 웹을 사용하는 것(보기만 하고, 콘텐츠를 소비하는 것)에 대한 기본적인 친숙성.
2. 기본 소프트웨어 설치 에 설명 된대로 기본 작업 환경과 파일 처리 에 설명 된대로 파일 작성 및 관리 방법에 대한 이해.
3. HTML 소개 과목에서 설명한 HTML 에 대한 기본적인 친숙성.
4. CSS 첫 번째 단계 과목에서 논의된 CSS 의 기본 사항에 대한 이해.

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

안내
--

이 강의에서는 CSS 언어의 가장 중요한 부분을 다루는 다음 기사가 포함되어 있습니다. 그 과정에서 당신은 이해력을 시험할 수 있도록 하기 위해 많은 연습을 하게 될 것입니다.

계단식 (cascade) 및 상속 (inheritance)

이번 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.

CSS 선택자

사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴 보겠습니다. 하위 기사는 다음과 같습니다:

* Type, class 및 ID 선택자
* 속성 선택자
* Pseudo-classes 및 pseudo-elements
* 결합자 (combinators)

박스 모델

CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS *박스 모델* 을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다.

배경 및 테두리

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

다른 텍스트 방향 처리

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

콘텐츠 Overflow

이 수업에서는 CSS 의 또 다른 중요한 개념인 — **overflow** 를 살펴 봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.

CSS 값 과 단위

CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값이 있습니다. 이 수업에서는 가장 일반적인 값과 사용 단위를 살펴 보겠습니다.

CSS 에서 항목 크기 조정

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

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

이 수업에서는 CSS 에서 특정 특수 요소를 처리하는 방법을 살펴 봅니다. 이미지, 기타 미디어 및 양식 요소는 일반 박스와 CSS 로 스타일을 지정할 수 있다는 점에서 약간 다르게 작동합니다. 무엇이 가능하고 불가능한지를 이해하면, 약간의 좌절감을 줄일 수 있으며, 이 수업에서는 알아야 할 주요 사항을 중점적으로 다룹니다.

표 스타일링

HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기 좋게 만드는 방법에 대한 안내서를 제공합니다.

CSS 디버깅

때로는 CSS 를 작성 할 때 CSS 가 예상 한 대로 동작하지 않는 문제가 발생합니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고, 모든 최신 브라우저에 포함된 개발도구 (DevTools) 가 진행중인 작업을 찾는 데 어떻게 도움이 되는지 보여줍니다.

CSS 정리 (en-US)

더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리 할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리를 개선하기 위해 다른 사용자가 사용하는 해결책을 간략하게 살펴 보겠습니다.

평가
--

CSS 기술을 테스트하고 싶습니까? 다음 평가는 위 안내서에서 다루는 CSS 에 대한 이해를 테스트 합니다.

기본 CSS 이해 (en-US)

이 평가는 기본적인 구문, 선택자, 우선 순위, 박스 모델 등에 대한 이해를 테스트 합니다.

멋진 편지지 만들기 (en-US)

올바른 인상을 남기고 싶다면, 멋진 편지지에 편지를 쓰는 것이 정말 좋습니다. 이 평가에서는 이러한 모양을 달성하기 위해 온라인 템플릿을 작성해야 합니다.

멋진 박스 (en-US)

여기에서는 배경 및 테두리 스타일을 사용하여 눈길을 끄는 박스를 만드는 방법을 연습합니다.

참고 항목
-----

고급 스타일링 효과 (en-US)

이 기사는 박스 그림자, blend modes 및 필터 와 같은 흥미로운 고급 스타일링 기능에 대한 소개를 제공하는 트릭 박스 역할을 합니다.


박스 모델 - Web 개발 학습하기

박스 모델
=====

* 이전
* Overview: Building blocks
* 다음

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스*모델*을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.

|  |  |
| --- | --- |
| 선결 사항: |
 기본 컴퓨터 활용 능력기본 소프트웨어 설치,
 파일 작업에 대한 기본 지식, HTML 기본기 (HTML
 학습), CSS 작동 방식에 대한 개념 (CSS 첫 단계
 학습.) 등에 대한 기본 지식
  |
| 목표: |
 CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해
 학습합니다.
  |

블록 및 인라인 박스
-----------

CSS에는 크게 두 가지 박스(**블록 박스**와 **인라인 박스**) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

* 박스는 인라인 방향으로 연장되어 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 대부분은 경우 이것은 박스가 사용 가능한 공간을 100%로 채우면서 상위 콘테이너 너비만큼 된다는 의미입니다.
* 박스는 새 줄로 행갈이를 합니다.
* `width`와 `height` 속성은 존중됩니다.
* 패딩과 여백, 테두리로 인해 다른 요소들이 박스로부터 밀려납니다.

여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(`<h1>`)과 `<p>`)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 `block` 사용합니다.

박스의 외부 디스플레이 유형이 `inline`일 경우:

* 박스는 새 줄로 행갈이를 하지 않습니다.
* `width`와 `height` 속성은 적용되지 않습니다.
* 패딩과 여백, 테두리는 다른 인라인 박스들이 당 박스로부터 멀어지지게 하지 않습니다.

링크용 `<a>` 요소와 `<span>`, `<em>` 및 `<strong>` 요소는 모두 기본적으로 인라인으로 표시됩니다.

요소에 적용되는 박스 유형은 `block` 및 `inline`과 같은 `display` (en-US) 속성 값으로 정의되며. 아울러 그것은 `display`의 **outer** 값과 관련이 있습니다.

구분: 내부 및 외부 디스플레이 유형
--------------------

이 시점에 우리는 **내부** 및 **외부** 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 *외부* 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.

그러나 박스에는 *내부* 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 **일반 대열**로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

그러나 여러분은 `flex`과 같은 `display` 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 `display: flex;`를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 `flex`으로 변경됩니다. 이 박스의 직계 자식은 플렉스 항목이 되고, 나중에 익히게 될 플렉스박스 규격에 명시된 규칙에 따라 배치됩니다.

**참고:** 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 레이아웃에 대한 Mozilla 개발자 네트워크 가이드를 참조하십시오.

CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 `flex`나 `grid`같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 `normal flow`이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.

서로 다른 디스플레이 유형의 예
-----------------

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 `block`입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

두 번째는 `display: flex` 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 플렉스 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 `<span>` 요소가 있습니다. 이들 요소는 보통 `inline`이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 `display: block`로 설정했으니까요.

우리는 다음 예제에서 `inline` 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 `<span>`는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.

`display: inline-flex`로 설정된 `<ul>` 요소도 갖고 있는데, 이는 몇 가지 플렉스 항목 주변에 인라인 박스를 생성합니다.

마지막으로 `display: inline`으로 설정된 두 단락이 있습니다. 인라인 플렉스 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.

**예제에서 여러분은 `display: inline` 부분을 `display: block`으로, 또는 `display: inline-flex`를 `display: flex`로 디스플레이 모드 사이를 전환할 수 있습니다.**

나중에 해당 단원에서 플렉스 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 `display` 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.

CSS 박스 모델이란 무엇인가?
-----------------

전체 CSS 박스 모델은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.

### Box의 구성

CSS 블록 박스 구성하기 위한 우리의 준비물은:

* **콘텐츠 박스**: 당신의 콘텐츠가 표시되는 영역으로 그 크기는 `width` and `height`와 같은 속성을 사용해서 정할 수 있습니다.
* **패딩 박스**: 패딩은 콘텐츠 주변을 마치 공백처럼 자리잡습니다. 패딩의 크기는 `padding`와 관련 속성을 사용해 제어할 수 있습니다.
* **테두리 박스**: 테두리 박스는 콘텐츠와 패딩까지 둘러쌉니다. 테두리의 크기와 스타일은 `border`와 관련 속성을 사용하여 제어할 수 있습니다.
* **여백 박스**: 여백은 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 박스와 다른 요소 사이 공백 역할을 합니다. 여백 박스의 크기는 `margin`와 관련 속성을 사용하여 제어될 수 있습니다.

아래 도표는 이들 레이어를 보여줍니다.

![박스 모델](/ko/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png)

### 표준 CSS 박스 모델

표준 박스 모델에서 box에서 `width`와 `height`를 부여하면 *content box*의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

우리는 박스의 `width`와 `height`, `margin`과 `border` 및 `padding` CSS 값이 다음과 같이 지정되어 있다고 간주합니다:

```css
.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
```

표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.

![표준 박스 모델을 사용했을 때의 박스 크기](/ko/docs/Learn/CSS/Building_blocks/The_box_model/standard-box-model.png)

**참고:** 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

### 대체 CSS 박스 모델

박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

![대체 표준 박스 모델을 사용했을 때의 박스 크기](/ko/docs/Learn/CSS/Building_blocks/The_box_model/alternate-box-model.png)

기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 `box-sizing: border-box`를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.

```css
.box {
  box-sizing: border-box;
}
```

모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) `<html>` 요소에 `box-sizing` 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 박스 크기에 관한 CSS 요령 문서를 참조하십시오.

```css
html {
  box-sizing: border-box;
}
\*,
\*::before,
\*::after {
  box-sizing: inherit;
}
```

**참고:** 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

박스 모델 부리기
---------

아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 `.box` 클래스에 해당하며 `width`, `height`, `margin`, `border`, `padding`에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.

**당신은 (`.alternate` 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?**

**참고:** **참조**: 여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다..

### 브라우저 개발자도구를 사용해 박스 모델 보기

브라우저 개발자 도구 (en-US)를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. Firefox의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

![FireFox의 DevTools를 이용한 박스 모델 검사](/ko/docs/Learn/CSS/Building_blocks/The_box_model/box-model-devtools.png)

여백과 패딩과 테두리
-----------

상술한 예제에서 여러분은 이미 `margin`과 `padding`, 그리고 `border`를 보았습니다. 이번 예제에서 사용된 속성은 `shorthands`으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

해당 속성에 대한 자세한 내용을 탐구해 봅시다.

### 여백

여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.

우리는 `margin` 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`

**아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.**

#### 여백 축소

여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.

아래 예제에는 단락 두 개가 있습니다. 상위 단락은 `margin-bottom` 값이 50픽셀이 주어졌습니다. 두 번째 단락은 `margin-top` 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.

**여러분은 2번째 단락의 `margin-top` 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 `bottom-margin`에 설정된 50픽셀은 유지됩니다.**

여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 여백 축소 정복에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.

### 테두리

테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 `width`과 `height`에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 `width`와 `height`의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.

테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.

당산은 당장에 `border` 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.

테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:

* `border-top`
* `border-right`
* `border-bottom`
* `border-left`

테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:

* `border-width`
* `border-style`
* `border-color`

테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.

* `border-top-width`
* `border-top-style`
* `border-top-color`
* `border-right-width`
* `border-right-style`
* `border-right-color`
* `border-bottom-width`
* `border-bottom-style`
* `border-bottom-color`
* `border-left-width`
* `border-left-style`
* `border-left-color`

**아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 Mozilla 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.**

### 패딩

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.

우리는 `padding` 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.

* `padding-top`
* `padding-right`
* `padding-bottom`
* `padding-left`

**아래 예제에서 `.box`클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.**

**여러분은 또한 `.container,` 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.**

박스 모델과 인라인 박스
-------------

상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 `<span>`에 의해 생성된 속성도 그렇습니다.

아래 예제에 한 단락 내부에 `<span>`가 있고 거기에 `width`와 `height`, 그리고 `margin`와 `border`를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.

인라인 블록 디스플레이 사용하기
-----------------

`inline`와 `block` 사이 중립 지대를 제공하는 `display` 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, `width`와 `height`가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.

`display: inline-block` 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.

* `width`와 `height` 속성은 존중됩니다.
* `padding`와 `margin`과 `border` 속성으로 인해 다른 요소가 박스에서 밀려납니다.

그러나 새 줄로 행갈이를 하지 않고, `width`와 `height` 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.

**다음 예제에서 우리는 `<span>` 요소에 `display: inline-block`를 추가했습니다. 스팬 요소 속성을 `display: block`로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.**

여러분이 `padding`를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. `<a>`는 `<span>`처럼 인라인 요소입니다. 여러분은 해당 요소에 `display: inline-block`을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.

탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 플렉스박스를 사용해 행으로 표시되었으며, `<a>`를 마우스로 가리킬 때 `background-color`를 변경할 수 있도록 `<a>` 요소에 패딩 추기했습니다. 패딩은 `<ul>` 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 `<a>`가 인라인 요소이기 때문입니다.

**`.links-list a` 선택기에 딸린 규칙에 `display: inline-block`를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.**

요약정리
----

박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.

다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.

* 이전
* Overview: Building blocks
* 다음


CSS 선택자 - Web 개발 학습하기

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


계단식 및 상속 - Web 개발 학습하기

계단식 및 상속
========

* Overview: Building blocks
* 다음

이 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.

이 수업을 통해 작업하면 코스의 다른 부분 보다 관련성이 떨어지고 좀 더 학문적으로 보일 수 있지만, 이러한 사항을 이해하면 나중에 많은 고통을 덜 수 있습니다! 이 섹션을 주의 깊게 살펴보고 계속 진행하기 전에 개념을 이해하는지 확인하십시오.

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

규칙 충돌
-----

CSS 는 **Cascading Style Sheets** 의 약자이며, CSS 라는 단어를 이해하는 데 있어 첫 번째 단어 *cascading* 은 매우 중요합니다.

어느 시점에서, 당신은 프로젝트를 진행할 것이며 요소에 적용해야 할 CSS 가 작동하지 않는다는 것을 알게 될 것입니다. 일반적으로 문제는 동일한 요소에 적용할 수 있는 두 가지 규칙을 작성 했다는 것입니다. **계단식 (cascade)** 과 밀접하게 관련된 **우선 순위 (specificity)** 개념은 그러한 충돌이 있을 때 적용되는 규칙을 제어하는 메커니즘입니다. 어떤 규칙에 따라 요소를 원하는 스타일로 만들지 못할 수도 있으므로 이러한 메커니즘의 작동 방식을 이해해야 합니다.

**상속(inheritance)** 개념도 중요합니다. 기본적으로 일부 CSS 속성은 현재 요소의 부모 요소에 설정된 값을 상속하지만, 일부는 그렇지 않습니다. 또한 예상치 못한 일부 동작이 발생할 수 있습니다.

우리가 다루고 있는 주요 사항을 간단히 살펴보면서 시작해 봅시다. 차례대로 살펴보고 서로 상호 작용하고 CSS 와 어떻게 상호 작용 하는지 살펴 보겠습니다. 이것은 이해하기 어려운 까다로운 개념으로 보일 수 있습니다. 그러나 CSS 작성에 대한 연습이 많을수록 작동 방식이 더 명확해 집니다.

### 계단식 (cascade)

스타일 시트 **cascade** — 매우 간단한 수준에서 이는 CSS 규칙의 순서가 중요하다는 것을 의미 합니다. 동일한 우선 순위를 갖는 두 규칙이 적용될 때, CSS 에서 마지막에 나오는 규칙이 사용 될 것입니다.

아래 예에서는, `h1` 에 적용할 수 있는 두 가지 규칙이 있습니다. `h1` 은 파란색으로 표시됩니다 — 이러한 규칙에는 동일한 선택자가 있고 동일한 고유성을 가지므로, 소스 순서의 마지막 규칙이 우선합니다.

### 우선 순위 (Specificity)

우선 순위는 여러 규칙에 다른 선택자가 있지만, 여전히 동일한 요소에 적용될 수 있는 경우, 브라우저가 어떤 규칙을 적용할 지 결정하는 방법입니다. 기본적으로 선택자의 선택이 얼마나 구체적인지 측정합니다:

* 요소 선택자는 덜 구체적입니다 — 페이지에 나타나는 해당 유형의 모든 요소를 선택하므로 — 점수가 낮아집니다.
* class 선택자는 보다 구체적입니다 — 특정 `class` 속성 값이 있는 페이지의 요소만 선택하므로 — 점수가 높아집니다.

시간 예제! 아래에는 `h1` 에 적용할 수 있는 두 가지 규칙이 다시 있습니다. 아래 `h1` 은 빨간색으로 표시 됩니다 — class 선택자는 규칙에 더 높은 우선 순위를 부여하므로 요소 선택자가 있는 규칙은 소스 순서에서 더 아래에 표시 되더라도 적용됩니다.

우선 순위 점수 및 기타 사항에 대해서는 나중에 설명하겠습니다.

### 상속 (Inheritance)

상속은 이 맥락에서 이해되어야 합니다 — 부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속되며, 일부는 그렇지 않습니다.

예를 들어, 요소에 `color` 및 `font-family` 를 설정하면, 다른 색상 및 글꼴 값을 직접 적용하지 않는 한, 해당 요소 내부의 모든 요소에도 해당 색상 및 글꼴로 스타일이 지정됩니다.

일부 속성은 상속되지 않습니다 — 예를 들어 요소에 `width` 를 50% 로 설정하면, 모든 하위 항목의 너비가 부모 너비의 50% 가 되지 않습니다. 이 경우, CSS 는 사용하기가 매우 어려울 것입니다!

**참고:** MDN CSS 속성 참조 페이지에서 일반적으로 specifications 섹션의 맨 아래에 기술 정보 박스가 있습니다. 여기에는 해당 속성의 상속 여부를 포함하여 해당 속성에 대한 여러 데이터 요소가 나열되어 있습니다. 예를 들어, color 속성 Specifications 섹션 을 참조 하십시오.

개념이 함께 작동하는 방식 이해하기
-------------------

이 세 가지 개념은 어떤 CSS 가 어떤 요소에 적용되는지를 함께 제어합니다. 아래 섹션에서 우리는 그들이 어떻게 함께 작동하는지 볼 것입니다. 때로는 약간 복잡해 보일 수 있지만, CSS 에 익숙해지면 기억하기 시작하고 잊어 버린 경우, 항상 세부 정보를 찾을 수 있습니다! 숙련된 개발자 조차도 모든 세부 사항을 기억하지 못합니다.

상속 이해하기
-------

상속부터 시작하겠습니다. 아래 예에서는 `<ul>` 이 있으며, 그 안에 순서가 없는 두 가지 수준의 목록이 있습니다. 외부 `<ul>` 에 테두리, 패딩 및 글꼴 색상을 지정했습니다.

색상은 직접 자식 항목 뿐만 아니라 간접 자식 항목 (직접 자식 `<li>`) 및 첫 번째 중첩 목록에 있는 자식 항목에도 적용됩니다. 그런 다음 두 번째 중첩 목록에 `special` class 를 추가하고 다른 색상을 적용했습니다. 그런 다음 자식을 통해 상속됩니다.

너비 (위에서 언급 한 것처럼), 마진, 패딩 및 테두리와 같은 것은 상속되지 않습니다. 만약 우리 목록의 자식들이 테두리를 물려 받았다면, 모든 단일 목록과 목록 항목은 테두리를 얻게 될 것입니다 — 아마도 우리가 원하는 효과는 아닙니다!

기본적으로 상속되는 속성과 그렇지 않은 속성은 대체로 상식적입니다.

### 상속 제어하기

CSS 는 상속을 제어하기 위한 4 가지 특수 범용 속성 값을 제공합니다. 모든 CSS 속성은 이러한 값을 허용합니다.

`inherit`

선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정합니다. 사실상, 이것은 "상속에 영향을 미칩니다".

`initial`

선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정합니다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 `inherit` 되도록 설정됩니다.

`unset`

속성을 natural 값으로 재설정 합니다. 즉, 속성이 자연적으로 상속되면 `inherit` 된 것처럼 작동하고 그렇지 않으면 `initial` 처럼 작동합니다.

**참고:** 브라우저 지원이 제한된 새로운 값인 `revert` 도 있습니다.

**참고:** 각각에 대한 자세한 내용과 작동 방식에 대한 자세한 내용은 Origin of CSS declarations (en-US) 를 참조하십시오.

우리는 링크 목록을 보고 보편적 가치가 어떻게 작용하는지 탐구할 수 있습니다. 아래의 라이브 예제를 사용하면 CSS 를 사용하여 변경 작업을 수행할 수 있습니다. 코드를 가지고 노는 것이 HTML 과 CSS 를 이해하는 가장 좋은 방법입니다.

예를 들면:

1. 두 번째 목록 항목에는 `my-class-1` class 가 적용되었습니다. 내부에 중첩된 `<a>` 요소의 색상을 상속하도록 설정합니다. 규칙을 제거하면 링크 색상이 어떻게 변경됩니까?
2. 왜 세 번째 와 네 번째 링크가 그 색깔인지 이해합니까? 그렇치 않은 경우 위의 값에 대한 설명을 확인하십시오.
3. `<a>` 요소에 대해 — 예를 들어 `a { color: red; }` 와 같은 새 색상을 정의하는 경우 어떤 링크가 색상이 변경됩니까?

### 모든 속성 값 재설정

CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 (거의) 모든 속성에 한 번에 적용할 수 있습니다. 이 값은 상속 값 (`inherit`, `initial`, `unset` 또는 `revert`) 중 하나일 수 있습니다. 스타일에 대한 변경 사항을 취소하여 새로운 변경을 시작하기 전에 알려진 시작 지점으로 돌아갈 수 있는 편리한 방법입니다.

아래 예제에는 두 개의 인용문이 있습니다. 첫 번째는 인용문 자체에 스타일을 적용하고 두 번째는 `all` 값을 `unset` 하도록 인용문에 적용된 class 를 갖습니다.

`all` 의 값을 사용 가능한 다른 값 중 일부로 설정하고 차이가 무엇인지 관찰하십시오.

계단식 (cascade) 이해하기
------------------

이제 HTML 구조에 깊게 중첩된 단락이 본문에 적용된 CSS 와 동일한 색상인 이유를 이해하고, 소개 수업에서 문서의 어느 시점에서는 CSS 를 변경하는 방법에 대해 이해합니다 — 요소에 CSS 를 할당하거나 class 를 만들지 여부. 이제 여러 요소가 요소를 스타일링 할 수 있는 경우, CSS 에서 적용할 CSS 규칙을 어떻게 정의하는지 계단식 (cascade) 에 대해 올바르게 살펴보겠습니다.

여기에는 중요도의 내림차순으로 나열된 세 가지 요소가 있습니다. 이전의 것들은 다음 것보다 우선합니다:

1. **Importance**
2. **우선 순위**
3. **소스 순서**

브라우저가 CSS 를 정확히 적용하는 방법을 어떻게 파악하는지 아래부터 위로 살펴보겠습니다.

### 소스 순서

우리는 이미 소스 순서가 계단식 (cascade) 에 어떻게 중요한지를 보았습니다. 정확히 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, CSS 에서 마지막에 오는 규칙이 우선합니다. 이것을 요소 자체가 마지막 요소가 승리하고 요소를 스타일링 할 때까지 초기 요소를 덮어 쓰는 규칙에 가깝다고 생각할 수 있습니다.

### 우선 순위 (Specificity)

소스 순서가 중요하다는 사실을 이해하면, 어느 시점에서 규칙이 스타일 시트에서 나중에 나오지만 이전의 충돌하는 규칙이 적용되는 상황이 발생합니다. 이는 이전 규칙이 더 **높은 우선 순위**를 갖기 때문입니다 — 보다 구체적이기 때문에, 브라우저에서 요소를 스타일해야 하는 규칙으로 선택하고 있습니다.

이 수업의 앞부분에서 살펴본 것처럼, class 선택자는 요소 선택자보다 가중치가 높으므로, class 에 정의된 속성이 요소에 직접 적용된 속성보다 우선합니다.

여기서 주목할 점은 선택자 및 선택한 항목에 적용되는 규칙에 대해 생각하고 있지만, 덮어 쓰는 전체 규칙이 아니라 동일한 속성일 뿐입니다.

이 동작은 CSS 에서 반복을 피하는 데 도움이 됩니다. 일반적인 방법은 기본 요소의 일반 스타일을 정의한 다음, 다른 요소에 대한 class 를 작성하는 것입니다. 예를 들어, 아래 스타일 시트에서 h2 제목에 대한 일반 스타일을 정의한 다음, 일부 속성과 값만 변경하는 class 를 만들었습니다. 처음에 정의된 값은 모든 표제에 적용되며, 보다 구체적인 값은 class 가 있는 표제에 적용됩니다.

이제 브라우저가 우선 순위 (specificity) 를 계산하는 방법을 살펴보겠습니다. 우리는 이미 요소 선택자가 우선 순위가 낮으며 class 가 덮어 쓸 수 있음을 알고 있습니다. 기본적으로 포인트 단위의 가치가 다른 유형의 선택자에 부여되며, 이를 합산하면 특정 선택자의 가중치가 부여되며, 이는 다른 잠재적 일치 항목에 대해 평가할 수 있습니다.

선택자의 우선 순위는 4개의 다른 값 (또는 구성 요소) 을 사용하여 측정되며, 이는 4개의 열에서 Thousands, Hundreds, Tens 및 Ones 개의 단일 자릿수로 간주될 수 있습니다.

1. **Thousands**: 선언이 인라인 스타일인 `style` 속성 안에 있으면, 열에서 1점을 얻습니다. 이러한 선언에는 선택자가 없으므로 그 우선 순위는 항상 1000 입니다.
2. **Hundreds**: 전체 선택자에 포함된 각 ID 선택자에 대해 이 열에서 1점을 얻습니다.
3. **Tens**: 이 선택란에서 전체 선택자 내에 포함된 각 class 선택자, 속성 선택자 또는 pseudo-class 에 대해 이 열에서 1점을 얻습니다.
4. **Ones**: 이 항목에서 각 요소 선택자 또는 전체 선택자 내에 포함된 pseudo-element 에 대해 1점을 얻습니다.

**참고:** 범용 선택자 (`*`), 결합자 (`+`, `>`, `~`, ' ') 및 부정 pseudo-class (`:not`) 는 우선 순위에 영향을 미치지 않습니다.

다음 표는 기분을 전환하기 위해 몇 가지 분리된 예를 보여줍니다. 이것들을 살펴보고 왜 그들이 우리에게 그들에게 주어진 우선 순위를 가지고 있는지 이해하도록 하십시오. 선택자는 아직 자세히 다루지 않았지만, MDN 선택자 참조 에서 각 선택자의 세부 정보를 찾을 수 있습니다.

| 선택자 | Thousands | Hundreds | Tens | Ones | Total specificity |
| --- | --- | --- | --- | --- | --- |
| `h1` | 0 | 0 | 0 | 1 | 0001 |
| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 |
| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 |
| `#identifier` | 0 | 1 | 0 | 0 | 0100 |
| 요소의 `style` 속성 안에 규칙이 있는 선택자가 없습니다 | 1 | 0 | 0 | 0 | 1000 |

계속 진행하기 전에, 실제 사례를 살펴보겠습니다.

우선, 우리는 이 예제의 처음 7개 규칙에만 관심이 있으며, 앞으로 알 수 있듯이 각 규칙 앞에 주석에 우선 순위 값을 포함 시켰습니다.

* 처음 두 선택자는 링크의 배경색 스타일링을 놓고 경쟁합니다 — 두 번째 선택자는 추가 ID 선택자가 있기 때문에 이기고 배경색을 파란색으로 만듭니다: 우선 순위는 201 vs 101 입니다.
* 세 번째와 네 번째 선택자는 링크의 텍스트 색상 스타일링을 놓고 경쟁하고 있습니다 — 두 번째 선택자는 이기고 텍스트는 흰색으로 만듭니다. 왜냐하면 한 개의 요소 선택자가 더 적지만, 누락된 선택자는 10배의 가치가 있는 class 선택자로 교체되기 때문입니다. 그래서 승자의 우선 순위는 113 vs 104 입니다.
* 선택자 5–7 은 마우스를 가져 가면 링크의 테두리 스타일을 놓고 경쟁합니다. 선택자 6은 23 vs 24 의 우선 순위로 5점이 확실히 손실됩니다 — 요소 선택자가 하나 더 적습니다. 선택자 7은 5 와 6을 모두 능가합니다 — 5와 동일한 수의 자식 선택자가 있지만, 한 요소는 class 선택자로 교체되었습니다. 따라서 승자의 우선 순위는 33 vs 23 및 24 입니다.

**참고:** 이것은 이해를 돕기위한 대략적인 예일뿐입니다. 실제로 각 선택자 유형에는 고유한 순위가 있으며, 낮은 우선 순위의 선택자로 덮어쓸 수 없습니다. 예를 들어, *백 만* 개의 **class** 선택자가 결합되어도 *하나* 의 **id** 선택자의 규칙을 겹쳐쓸 수 없습니다.

우선 순위를 평가하는 보다 정확한 방법은 우선 순위를 개별적으로 최고에서 시작하여 필요할 때 최저로 평가하는 것입니다. 특정 순위 내에서 선별 점수 사이에 동점이 있을 때만 다음 수준을 평가해야 합니다. 그렇지 않으면, 낮은 우선 순위 선택자는 높은 우선 순위를 덮어쓸 수 없으므로 무시할 수 있습니다.

### !important

위의 모든 계산을 무효화하는 데 사용할 수 있는 특별한 CSS 가 있지만, 중요하게 사용해야 합니다 — `!important`. 이것은 특정 속성과 가치를 가장 구체적으로 만들어 계단식 (cascade) 의 일반적인 규칙을 무시하는 데 사용됩니다.

두 개의 단락이 있고, 하나에 ID 가 있는 이 예를 살펴보십시오.

이 과정을 통해 어떤 일이 일어나고 있는지 살펴보겠습니다 — 이해하기 어려운 경우 어떤 일이 발생하는지 확인하려면 일부 속성을 제거해 보십시오:

1. 세 번째 규칙의 `color` 및 `padding` 값이 적용되었지만, `background-color` 가 적용되었음을 알 수 있습니다. 왜죠? 소스 순서 후반의 규칙은 일반적으로 이전 규칙보다 우선하기 때문에 세 가지 모두가 반드시 적용되어야 합니다.
2. 그러나, class 선택자는 요소 선택자보다 높은 우선 순위에 있기 때문에 위의 규칙이 우선합니다.
3. 두 요소 모두 `class` 가 **`더 우수`** 하지만, 두 번째 요소는 `id` 도 **`이기고`** 있습니다. ID 는 classe 보다 우선 순위가 *더 높기* 때문에 페이지에서 각 고유 ID 를 가진 요소는 하나만 가질 수 있지만, class 는 같은 요소가 많습니다 — ID 선택자는 대상에 따라 ***매우 다릅니다*.** 빨간색 배경색과 1 px 검은색 테두리를 두 번째 요소에 적용해야 합니다. 첫 번째 요소는 회색 배경색을 가져오고 class 에서 지정한대로 테두리가 없습니다.
4. 두 번째 요소는 빨간색 배경색을 얻지만, 테두리는 없습니다. 왜일까요? 두 번째 규칙의 `!important` 선언으로 인해 — `border: none` 뒤에 이것을 포함하면 ID 가 더 높은 우선 순위에도 불구하고 이 선언이 이전 규칙의 테두리 값 보다 우선함을 의미합니다.

**참고:** 이 `!important` 선언을 재정의하는 유일한 방법은 소스 순서에서 나중에 같은 우선 순위를 가진 선언에 또는 다른 고유한 선언에 다른 `!important` 선언을 포함시키는 것입니다.

`!important` 가 존재한다는 것을 아는 것이 도움이 되므로 다른 사람들의 코드에서 그것을 발견할 때 그 의미를 알 수 있습니다. **그러나, 반드시 필요한 경우가 아니면 절대 사용하지 않는 것이 좋습니다.** `!important` 는 계단식이 정상적으로 작동하는 방식을 변경하므로, CSS 스타일 문제를 해결하기가 어렵습니다. 특히 큰 스타일 시트에서.

핵심 CSS modules 을 편집할 수 없는 CMS 에서 작업할 때, 다른 방법으로는 재정의 할 수 없는 스타일을 재정의 하려는 경우에 사용할 수도 있습니다. 그러나 실제로 피할 수 있다면 사용하지 마십시오.

CSS 위치의 영향
----------

마지막으로, CSS 선언의 중요성은 지정된 스타일 시트에 따라 다릅니다 — 사용자가 스타일 시트를 설정하여 개발자의 스타일을 재정의할 수 있습니다. 예를 들어, 사용자가 시각 장애인일 수 있으며, 쉽게 읽을 수 있도록 방문하는 모든 웹 페이지의 글꼴 크기를 일반 크기의 두 배로 설정하려고 합니다.

요약하자면
-----

충돌 선언은 다음 순서로 적용되며, 이후 선언은 이전 선언보다 우선합니다:

1. 사용자 에이전트 스타일 시트의 선언 (예: 다른 스타일이 설정되지 않은 경우 사용되는 브라우저의 기본 스타일).
2. 사용자 스타일 시트의 일반 선언 (사용자가 설정한 사용자 정의 스타일).
3. 작성자 스타일 시트의 일반적인 선언 (웹 개발자가 설정한 스타일).
4. 작성자 스타일 목록에서 중요한 선언
5. 사용자 스타일 시트의 중요한 선언

웹 개발자의 스타일 시트는 사용자 스타일 시트를 재정의 하는것이 합리적이므로 디자인을 의도한대로 유지할 수 있지만, 사용자는 위에서 언급한 것처럼 웹 개발자 스타일을 재정의 해야 할 충분한 이유가 있습니다 — 이는 규칙에서 `important` 를 사용하여 달성할 수 있습니다.

적극적인 학습: 계단식 게임입니다
------------------

이 적극적인 학습에서는, 기본적으로 링크에 적용한 색상 및 배경색을 재정의하는 새로운 규칙 하나를 작성하여 실험해 보고자 합니다. 상속 제어 섹션에서 살펴본 특수값 중 하나를 사용하여 실제 색상값을 사용하지 않고 배경색상을 다시 흰색으로 재설정하는 새 규칙에 선언을 작성할 수 있습니까?

실수한 경우 언제든지 *재설정* 버튼을 사용하여 재설정 할 수 있습니다. 정말로 막힌다면, 여기에서 해결책을 살펴 보십시오.

다음은 뭐죠
------

이 기사의 대부분을 이해했다면, 잘 끝났습니다 — CSS 의 기본 메커니즘에 익숙해지기 시작했습니다. 다음으로 선택자를 자세히 살펴보겠습니다.

계단식, 우선 순위 및 상속을 완전히 이해하지 못했다면, 걱정하지 마십시오! 이것은 지금까지 우리가 다루었던 가장 복잡한 내용이며, 전문 웹 개발자 조차도 까다로워하는 부분입니다. 강의를 계속 진행하면서, 이 기사를 몇 차례 다시 읽고 계속 생각하는 것이 좋습니다.

스타일이 예상대로 적용되지 않는 이상한 문제가 발생하면 여기를 다시 참조 하십시오. 우선 순위 문제일 수 있습니다.

* Overview: Building blocks
* 다음


콘텐츠 overflow - Web 개발 학습하기

콘텐츠 overflow
============

* 이전
* Overview: Building blocks
* 다음

이번 수업에서는 CSS 의 또 다른 중요한 개념인 — **overflow** 를 살펴봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.

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

overflow 란 무엇인가?
----------------

우리는 이미 CSS 의 모든 것이 박스라는 것을 알고 있으며, `width` 및 `height` (또는 `inline-size` (en-US) 및 `block-size` (en-US)) 의 값을 제공하여 박스의 크기를 제한할 수 있음을 알고 있습니다. Overflow 는 박스에 내용이 너무 많을 때 발생하므로, 박스 안에 들어가지 않습니다. CSS 는 이 overflow 를 관리할 수 있는 다양한 도구를 제공하며, 이 초기 단계에서 이해하는 데 유용한 개념이기도 합니다. CSS 를 작성할 때, 특히 CSS 레이아웃에 더 깊이 들어가면 overflow 상황이 자주 발생합니다.

CSS 는 "데이터 손실" 을 피하려고 합니다
-------------------------

overflow 가 발생했을 때, CSS 가 기본적으로 어떻게 동작하는지 보여주는 두 가지 예를 살펴보도록 하겠습니다.

찻 번째는 `height` 를 지정하여 블록 크기가 제한된 박스입니다. 그런 다음 이 박스에 필요한 공간보다 많은 콘텐츠를 추가했습니다. 내용물이 박스에 넘쳐서 박스 아래의 단락 위에 다소 혼란스럽게 놓여 있습니다.

두 번째는 인라인 크기로 제한된 박스의 단어입니다. 박스가 해당 단어에 맞지 않도록 너무 작게 만들어져 박스 밖으로 나옵니다.

왜 CSS 가 기본적으로 내용이 혼란스러워지는 어수선한 접근 방식을 취했는지 궁금할 것입니다. 추가 콘텐츠를 숨기거나 박스가 커지는 이유는 무엇입니까?

가능하면 CSS 는 내용을 숨기지 않습니다; 그렇게 하면 데이터가 손실될 수 있으며, 이는 일반적으로 문제입니다. CSS 용어로, 이는 일부 콘텐츠가 사라짐을 의미합니다. 콘텐츠 손실의 문제점은 손실 되었음을 알 수 없다는 것입니다. 방문자가 사라진 것을 눈치채지 못할 수도 있습니다. 그것이 사라지는 양식의 제출 버튼이고 아무도 양식을 완성할 수 없다면 큰 문제입니다! 따라서 CSS 는 눈에 띄게 overflow 되는 경향이 있습니다. 혼란스러워 보이거나, 최악의 경우 사이트 방문자가 일부 콘텐츠가 겹치므로 수정해야함을 알려줍니다.

`width` 또는`height` 가 있는 박스를 제한한 경우, CSS 는 사용자가 수행중인 작업을 알고 있으며, overflow 가능성을 관리한다고 가정합니다. 일반적으로 사이트를 디자인할 때 예상보다 많은 텍스트가 있거나 텍스트가 더 클 수 있으므로 — 예를 들어 사용자가 글꼴 크기를 늘린 경우 박스에 텍스트를 넣을 때 블록 크기를 제한하는 것은 문제가 됩니다.

다음 수업에서는 overflow 가 덜 발생하는 크기를 제어하는 다양한 방법을 살펴보겠습니다. 그러나 고정 크기가 필요한 경우, overflow 동작을 제어할 수도 있습니다. 계속 읽어 봅시다!

overflow 속성
-----------

`overflow` 속성은 요소의 overflow 를 제어하고 브라우저가 원하는 방식으로 동작하도록 하는 방법입니다. overflow 의 기본값은 `visible` 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다.

콘텐츠가 넘칠 때 내용을 자르려면 박스에 `overflow: hidden` 을 설정할 수 있습니다. 이렇게 하면 — overflow 를 숨길 수 있습니다. 이로 인해 모든 것이 사라질 수 있으므로 콘텐츠를 숨기는 것이 문제를 일으키지 않을 경우에만 해야합니다.

아마도 내용이 넘칠 때 스크롤 막대를 추가하고 싶습니까? `overflow: scroll` 를 사용하면 브라우저에 항상 스크롤 막대가 표시됩니다 — 콘텐츠가 부족하여 overflow 할 수 없는 경우에도 마찬가지입니다. 내용에 따라 스크롤 막대가 나타나거나 사라지는 것을 방지하기 때문에 원하는 경우가 있습니다.

**아래 박스에서 일부 내용을 제거하면 스크롤 할 내용이 없어도 스크롤 막대가 여전히 남아 있습니다 (또는 스크롤 막대만).**

위의 예제에서는 `y` 축만 스크롤하면 되지만, 두 축에는 스크롤바가 나타납니다. 대신 `overflow-y` (en-US) 속성을 사용하여, `overflow-y: scroll` 로 설정하면 `y` 축에서만 스크롤하도록 할 수 있습니다.

`overflow-x` (en-US) 를 사용하여 x 축을 스크롤할 수도 있지만, 긴 단어를 처리하는 데 권장되는 방법은 아닙니다! 작은 박스에서 긴 단어를 처리해야 하는 경우 `word-break` 또는 `overflow-wrap` 속성을 볼 수 있습니다. 또한 CSS 항목 크기 조정 에서 설명하는 일부 방법을 사용하면 다양한 양의 콘텐츠에 더 잘 맞는 박스를 만들 수 있습니다.

`scroll` 과 마찬가지로 스크롤 막대를 유발할 내용이 충분한 지 여부에 따라 스크롤 크기에 스크롤 막대가 나타납니다.

**참고:** `overflow` 속성을 사용하여 두 개의 값을 전달하여 x 와 y 스크롤을 지정할 수 있습니다. 두 개의 키워드가 지정되면, 첫 번째 키워드는 `overflow-x` 에 적용되고 두 번째 키워드는 `overflow-y` 에 적용됩니다. 그렇지 않으면 `overflow-x` 및 `overflow-y` 가 모두 같은 값으로 설정됩니다. 예를 들어, `overflow: scroll hidden` 은 `overflow-x` 를 `scroll` 로, `overflow-y` 를 `hidden` 으로 설정합니다.

박스에 넣을 수 있는 것보다 많은 내용이 있는 경우 스크롤 막대만 표시하려면, `overflow: auto` 를 사용하십시오. 이 경우 스크롤 막대를 표시할 지 여부를 결정하는 것은 브라우저에게 맡겨져 있습니다. 데스크톱 브라우저는 일반적으로 overflow 를 유발할 수 있는 충분한 콘텐츠가 있는 경우에만 그렇게 합니다.

**아래 예에서 박스에 들어갈 때까지 일부 내용을 제거하면, 스크롤 막대가 사라지는것을 볼 수 있습니다.**

Overflow 는 블록 서식 Context 를 설정합니다
--------------------------------

CSS 에는 **Block Formatting Context** (BFC) 의 개념이 있습니다. 이것은 지금 너무 걱정할 필요는 없지만, `scroll` 또는 `auto` 와 같은 overflow 값을 사용할 때 BFC 를 생성한다는 것을 아는 것이 유용합니다. 결과적으로 `overflow` 값을 변경한 박스의 내용이 자체의 미니 레이아웃이 됩니다. container 외부의 물건은 container 에 찌를 수 없으며, 박스에서 주변 레이아웃으로 찌를 수는 없습니다. 이느 일관된 스크롤 환경을 만들기 위해, 박스의 모든 내용을 포함해야 하고 페이지의 다른 항목과 겹치지 않아야 하므로 스크롤 동작을 활성화하기 위한 것입니다.

웹 디자인에서 원치 않는 overflow
----------------------

최신 레이아웃 방법 (CSS 레이아웃 강의에 설명되어 있음) 은 overflow 를 매우 잘 관리합니다. 우리가 웹에 얼마나 많은 콘텐츠를 가지고 있는지 예측할 수 없다는 사실에 대처하도록 설계되었습니다. 그러나 과거에는 개발자들이 종종 고정된 높이를 사용하여 서로 관계가 없는 박스의 하단을 정렬하려고 했습니다. 이것은 깨지기 쉬웠으며, legacy 응용 프로그램에서 때때로 내용이 페이지의 다른 내용과 겹치는 박스가 나타날 수 있습니다. 이러한 현상이 나타나면 overflow 가 발생한다는 것을 알수 있습니다. 박스 크기 고정에 의존하지 않도록 레이아웃을 리팩터링 하는것이 이상적입니다.

사이트를 개발할 때는 항상 overflow 문제를 염두에 두어야 합니다. 많은 양의 콘텐츠로 디자인을 테스트하고 텍스트의 글꼴 크기를 늘리면 CSS 가 강력한 방식으로 대처할 수 있는지 확인해야 합니다. 내용을 숨기거나 스크롤 막대를 추가하기 위해 overflow 값을 변경하는 것은 스크롤 박스를 원할 때와 같은 몇 가지 특별한 경우에만 예약할 수 있습니다.

요약
--

이 짧은 수업은 overflow 개념을 소개했습니다; 이제 CSS 가 넘쳐나는 내용을 보이지 않게 만들려고 하지만 데이터가 손실될 수 있음을 이해합니다. overflow 가능성을 관리할 수 있으며 실수로 overflow 문제가 발생하지 않도록 작업을 테스트해야 합니다.

* 이전
* Overview: Building blocks
* 다음


표 스타일링 - Web 개발 학습하기

표 스타일링
======

* 이전
* Overview: Building blocks
* 다음

HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기좋게 만드는 방법에 대한 안내서를 제공합니다.

|  |  |
| --- | --- |
| 전제조건: |
 HTML 기본 사항 (HTML 소개
 학습), HTML 표 에 대한 지식
 및 CSS 작동 방식에 대한 이해 (CSS 첫 번째 단계 학습.)
  |
| 목적: | HTML 표를 효과적으로 스타일링하는 방법 배우기. |

전형적인 HTML 표
-----------

전형적인 HTML 표를 살펴 봅시다. 글쎄요, 일반적인 표의 예들은 — 신발, 날씨 또는 직원들에 관한 것입니다; 우리는 영국의 유명한 펑크 밴드에 관한것을 만들어서 더 흥미롭게 만들기로 결정했습니다. 코드는 다음과 같습니다:

```html
<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>
```

`scope` (en-US), `<caption>`, `<thead>`, `<tbody>` (en-US) 등의 기능 덕분에 표가 잘 표시되고 쉽게 스타일링되며 액세스할 수 있습니다. 불행히도 화면에 렌더링할 때는 좋지 않습니다 (punk-bands-unstyled.html 에서 라이브 참조):

![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/table-unstyled.png)

기본 브라우저 스타일만 사용하면, 비좁고 읽기 어려우며 지루해 보입니다. 이 문제를 해결하려면 CSS 를 사용해야 합니다.

우리의 표 스타일링
----------

표 예제를 함께 스타일링 해 봅시다.

1. 시작하려면, sample markup 의 로컬 사본을 만들고 두 이미지 (노이즈 및 표범가죽) 를 모두 다운로드한 다음, 세 개의 결과 파일을 로컬 컴퓨터의 작업 디렉토리에 넣습니다.
2. 다음으로, `style.css` 라는 새 파일을 만들고 다른 파일과 같은 디렉토리에 저장하십시오.
3. `<head>` 안에 다음 HTML 행을 배치하여 CSS 를 HTML 에 연결하십시오:

```html
<link href="style.css" rel="stylesheet" type="text/css" />
```

### 간격 및 레이아웃

가장 먼저 해야할 일은 간격/레이아웃을 정렬하는 것입니다 — 기본 표 스타일은 너무 비좁습니다! 이렇게 하려면, `style.css` 파일에 다음 CSS 를 추가하십시오:

```css
/\* 간격 \*/

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}
```

가장 중요한 부분은 다음과 같습니다:

* `fixed` 의 `table-layout` (en-US) 값은 일반적으로 표가 기본적으로 좀 더 예측 가능하게 작동하므로 표에 설정하는 것이 좋습니다. 일반적으로, 표의 열은 내용의 양에 따라 크기가 정해지는 경향이 있으며, 그 결과 이상한 결과가 발생합니다. `table-layout: fixed` 를 사용하면 제목의 너비에 따라 열의 크기를 지정한 다음 내용을 적절하게 처리할 수 있습니다. 이것이 우리가 `thead th:nth-child(n)` (`:nth-child`) 선택자 ("`<thead>` 요소 내에서 `<th>` (en-US) 요소인 *n번째* 자식 요소`<thead>` 를 순서대로 선택합니다") 요소를 설정하고 백분율 너비를 설정했습니다. 전체 열 너비는 제목 너비를 따르므로, 표 열의 크기를 정할 수 있습니다. Chris Coyier 는 이 기술에 대해 고정 표 레이아웃 에서 자세히 설명합니다.
 이를 `width` 와 100% 결합했습니다. 즉, 표에 넣은 container 를 표에 채우고 반응성이 뛰어납니다 (아직 더 많은 작업이 필요하지만 좁은 화면 너비에서 잘 보임).
* `collapse` 의 `border-collapse` 값은 모든 표 스타일 작업에 대한 표준 모범 사례입니다. 기본적으로, 표 요소에 테두리를 설정하면, 아래 이미지와 같이 테두리 사이에 간격이 있습니다:
 ![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/no-border-collapse.png)이것은 매우 멋지게 보이지 않습니다 (원하는 모양일 수 있는지, 누가 알겠습니까?) `border-collapse: collapse;` 로 설정하면 테두리가 하나로 축소되어 훨씬 좋아 보입니다:
 ![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/border-collapse.png)
* 우리는 전체 표 주위에 `border` 를 넣었습니다. 나중에 표 머리글과 바닥글에 테두리를 씌울 것입니다 — 표 바깥쪽에 테두리가 없고 틈새가 생기면 정말 이상하게 보입니다.
* `<th>` (en-US) 및 `<td>` (en-US) 요소에 `padding` 을 설정했습니다 — 이렇게 하면 데이터 항목에 숨을 공간이 생깁니다. 표를 훨씬 읽기 쉽게 보이게합니다.

이 시점에서, 우리 표는 이미 훨씬 좋아보입니다:

![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-spacing.png)

### 간단한 typography

이제 텍스트를 약간 정리해 보겠습니다.

우선, Google Fonts 에서 펑크 밴드 관련 표에 적합한 글꼴을 찾았습니다. 원하는 경우 거기에 가서 다른 것을 찾을 수 있습니다. 제공된 `<link>` 요소 및 custom `font-family` (en-US) 선언을 Google Fonts 에서 제공하는 선언으로 바꾸면 됩니다.

먼저, 다음 `<link>` 요소를 기존 `<link>` 요소 바로 위의 HTML head 에 추가하십시오:

```html
<link
 href="https://fonts.googleapis.com/css?family=Rock+Salt"
 rel="stylesheet"
 type="text/css" />
```

이제 이전 CSS 아래의 `style.css` 파일에, 다음 CSS 를 추가하십시오:

```css
/\* typography \*/

html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}
```

여기에서는 표에 특별한 것은 없습니다. 우리는 일반적으로 쉽게 읽을 수 있도록 글꼴 스타일을 조정합니다:

* 전역 sans-serif 글꼴 스택을 설정했습니다; 이것은 순전히 문체 선택입니다. 또한 `<thead>` 및 `<tfoot>` 요소의 제목에 맞춤 글꼴을 설정하여 멋지고 펑키한 모양을 만들었습니다.
* 가독성을 높이기 위해 제목과 셀에 `letter-spacing` 을 설정했습니다. 다시 말하지만, 주로 스타일 선택입니다.
* `<tbody>` (en-US) 내부의 표 셀에서 텍스트를 가운데 정렬하여 제목과 일치하도록 했습니다. 기본적으로, 셀에는 `text-align` 에 `left` 값이 제공되고, 머리글에는 `center` 값이 제공되지만 둘 다에 대해 정렬을 동일하게 설정하는것이 좋습니다. 제목 글꼴의 기본 굵은체는 모양을 구별하기에 충분합니다.
* 데이터와 시작적으로 더 잘 연결되도록 `<tfoot>` 내부에서 제목을 오른쪽 정렬했습니다.

결과는 조금 깔끔해 보입니다:

![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-typography.png)

### 그래픽 과 색상

이제 그래픽과 색상으로 넘어가겠습니다! 표에는 punk and attitude 가 가득하기 때문에, 밝은 인상적인 스타일링을 제공해야합니다. 걱정하지 마십시오. 표를 크게 만들 필요는 없습니다 — 더 미묘하고 세련된 것을 선택할 수 있습니다.

아래에서 다시 CSS 를 `style.css` 파일에 추가하고, 다시 시작하십시오:

```css
thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.5)
  );
  border: 3px solid purple;
}
```

다시 말하지만, 여기에는 표에만 해당되는 것이 없지만, 몇 가지 주목할 가치가 있습니다.

`<thead>` 및 `<tfoot>` 에 `background-image` 를 추가하고, 머리글과 바닥글에 있는 모든 텍스트의 `color` 를 흰색으로 (텍스트에 그림자 추가) 변경하여 읽기 쉽게 했습니다. 텍스트가 배경과 잘 대비되도록 해야합니다. 그래야 잘 읽을 수 있습니다.

또한 머리글과 바닥글 내부의 `<th>` (en-US) 및 `<td>` (en-US) 요소에 선형 그라데이션을 추가하여 약간의 질감을 개선하오, 밝은 보라색 테두리를 부여했습니다. 중첩된 요소를 여러 개의 중첩된 요소를 사용하여 스타일을 서로 겹칠 수 있는 것이 유용합니다. 예, 여러 배경 이미지를 사용하여 `<thead>` 및 `<tfoot>` 요소에 배경 이미지와 선형 그라데이션을 모두 넣을 수는 있지만, 별도로 결정했습니다. 여러 배경 이미지 또는 선형 그라데이션을 지원하지 않는 구형 브라우저의 이점을 위해서입니다.

#### 얼룩말 줄무늬 (Zebra striping)

우리는 표의 다른 데이터 행을 더 쉽게 구문 분석하고 읽을 수 있도록 번갈아 가며 **zebra stripes** 를 구현하는 방법을 보여주기 위해 별도의 섹션을 제공하고자 했습니다. `style.css` 파일의 맨 아래에 다름 CSS 를 추가하십시오:

```css
tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
```

* 이전에는 `:nth-child` 선택자가 특정 자식 요소를 선택하는 데 사용되는 것을 보았습니다. 수식을 매개 변수로 제공할 수도 있으므로 일련의 요소를 선택합니다. 수식 `2n-1` 은 홀수 번째 자식 (1, 3, 5 등) 을 모두 선택하고 수식 `2n` 은 짝수 번째 자식 (2, 4, 6 등) 을 모두 선택합니다. 코드의 `odd` 및 `even` 키워드 조차도 앞에서 언급한 공식과 정확히 동일한 기능을 수행합니다. 이 경우 홀수 및 짝수 행에 다른 색상 (선정적인 색상) 을 부여합니다.
* 또한 모든 본문 행에 반복적인 배경 타일을 추가하여, 약간의 노이즈 (약간 시각적 왜곡이 있는 반투명 `.png`) 를 사용하여 질감을 제공했습니다.
* 마지막으로, `:nth-child` 선택자를 지원하지 않는 브라우저는 여전히 본문 행의 배경을 갖도록 전체 표에 단색 배경색을 지정했습니다.

이러한 색상은 다음과 같은 모양을 만듭니다:

![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-color.png)

자, 이것은 여러분의 취향에 맞지 않을 수도 있습니다. 하지만 , 우리가 하려고하는 요점은 표가 지루하고 학문적일 필요는 없다는 것입니다.

### caption 스타일링

표와 관련하여 마지막으로 해야할 일이 있습니다 — caption 에 스타일을 지정하는 일입니다. 이렇게 하려면, `style.css` 파일의 맨 아래에 다름을 추가하십시오:

```css
caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}
```

`bottom` 값을 가진 `caption-side` (en-US) 속성을 제외하고는 여기서 주목할만한 것이 없습니다. 이로 인해 caption 이 표의 맨 아래에 배치되고 다른 선언과 함께 최종 모양을 얻을 수 있습니다 (punk-bands-complete.html 참조):

![](/ko/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-caption.png)

적극적인 학습: 나만의 표 스타일
------------------

이 시점에서 표 HTML 예제 (또는 일부를 사용하십시오!) 를 가져와서 표보다 훨씬 더 나은 디자인과 장식을 갖도록 스타일을 지정하고 싶습니다.

표 스타일링 빠르게 하는 팁
---------------

다음 단계로 넘어가지 전에, 위에서 설명한 가장 유용한 요점에 대한 간단한 목록을 제공해야 한다고 생각했습니다:

* 표 마크 업을 가능한 한 간단하게 만들고, 유연한 작업을 유지하십시오 예: 백분유을 사용하여 디자인의 반응속도를 향상시킵니다.
* `table-layout` (en-US)`: fixed` 를 사용하여 제목 (`<th>` (en-US)) 에서 `width` 를 설정하여 열 너비를 쉽게 설정할 수 있는 예측 가능한 표 레이아웃을 작성합니다.
* `border-collapse``: collapse` 를 사용하여 표 요소 테두리를 서로 접어서 깔끔하게 만들 수 있습니다.
* `<thead>`, `<tbody>` (en-US) 및 `<tfoot>` 를 사용하여 표를 논리적 덩어리로 나누고 CSS 를 적용할 추가 위치를 제공하십시오. 필요한 경우 서로 위에 스타일을 더 쉽게 레이어할 수 있습니다.
* alternative 행을 읽기 쉽게 하려면 얼룩말 줄무늬를 사용합니다.
* `text-align` 을 사용하여 `<th>` (en-US) 및 `<td>` (en-US) 텍스트를 정렬하여, 더 깜끔하고 쉽게 따라할 수 있도록 하십시오.
요약
--

지금 우리 뒤에 스타일링 표가 있기 때문에, 우리의 시간을 차지할 다른 것이 필요합니다. 다음 기사에서는 CSS 디버깅에 대해 살펴봅니다 — 레이아웃이 제대로 보이지 않거나 적용할 때 적용되지 않는 속성과 같은 문제를 해결하는 방법. 여기에는 브라우저 DevTools 를 사용하여 문제점에 대한 솔루션을 찾는 방법에 대한 정보가 포함됩니다.

* 이전
* Overview: Building blocks
* 다음


멋지게 보이는 박스 - Web 개발 학습하기

멋지게 보이는 박스
==========

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


멋진 편지지 양식 만들기 - Web 개발 학습하기

멋진 편지지 양식 만들기
=============

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