recursal/MDN huggingface dataset:
Semantics
=========

프로그래밍에서,**시맨틱**은 코드 조각의 *의미*를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?"

JavaScript 시맨틱
--------------

JavaScript의 경우입니다. `textContent` 문자열을 매개변수로 하고 `<li>` 요소를 반환하는 함수를 생각해봅시다. 코드 볼 때, 함수를 `build('Peach')` 로 부르거나 `createLiWithContent('Peach')` 부르는 것 중 어느 것이 이 함수의 기능 파악하기에 쉬울까요?

CSS 시맨틱
-------

CSS의 경우입니다. 다양한 종류의 과일을 나타내기 위해서는 리스트 태그 `li` 가 있다고 가정해봅시다. `div> ul> li` 와 `.fruits__item` 둘 중 어떤 것이 어떤 DOM부분이 선택되었는지 잘 알려줄까요?

HTML 시맨틱
--------

예를 들어 HTML에서는 `<h1>` 은 시맨틱 요소입니다. "이 페이지에서 최상위 제목" 인 텍스트를 감싸는 역할(또는 의미)를 나타냅니다.


```html
<h1>This is a top level heading</h1>
```


기본적으로 대부분의 브라우저의 사용자 에이전트 스타일시트 (en-US) `<h1>` 가 제목(heading) 처럼 *보이도록* 큰사이즈 폰트로 스타일을 만듭니다(당신이 원하는 대로 스타일을 바꿀 수도 있지만요).

반면에 모든 요소를 '최상위 제목'처럼 *보이게* 할 수 있습니다. 다음을 고려하세요:


```html
<span style="font-size: 32px; margin: 21px 0;"
 >Is this a top level heading?</span
>
```


이렇게 하면 top level heading 처럼 보이지만 의미적 가치(semantic value)가 없으므로 위에서 설명한 것처럼 추가적인 이점은 얻을 수 없습니다. 따라서 작업에 적합한 HTML 요소를 사용하는 것이 좋습니다.

HTML은 채워질 *데이터*를 나타내도록 코딩해야합니다. 기본 프리젠테이션 스타일기반이 아니라요. 프레젠테이션(어떻게 보여져야만 하는가)은 CSS만의 단독 역할입니다.

의미론적인 마크업을 사용하면 아래와 같은 이점이 있습니다:

* 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다 (SEO 참조).
* 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
* 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 `div` 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
* 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다
* 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.

사용할 마크업에 접근할 때 스스로에게 물어보세요. "내가 채울 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까?" 예를 들어, 그 데이터는 정렬된 목록입니까? 정렬되지 않은 목록입니까?, 관련된 정보가 제외된 섹션이 있는 아티클(article)입니까?, 정의의 나열입니까?, 캡션이 필요한 그림 또는 이미지입니까?, 사이트 전체 머리글(header) 및 바닥글(footer) 외에 또 다른 머리글과 바닥글이 있어야합니까? 등등

의미론적 요소(element)들
-----------------

사용가능한 백 여개 정도의 요소(elements)들이 있습니다.

* `<article>`
* `<aside>`
* `<details>` (en-US)
* `<figcaption>`
* `<figure>`
* `<footer>`
* `<header>`
* `<main>`
* `<mark>`
* `<nav>`
* `<section>`
* `<summary>` (en-US)
* `<time>`
Learn more
----------

* HTML element reference on MDN
* Using HTML sections and outlines (en-US) on MDN
* Semantics on Wikipedia
ARIA
====

접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, **ARIA**)는 보조 기술 사용자의 요구에 맞게 HTML에 의미 체계 및 기타 메타데이터를 추가하기 위한 W3C 명세입니다.

예를 들어, `role="alert"` 속성을 `<p>` tag 추가하여 시각 장애가 있는 사용자에게 정보가 중요하고 시간에 민감합니다(텍스트 색상을 통해 전달할 수도 있습니다).

같이 보기
-----

* ARIA 역할 (en-US)
* ARIA 상태 및 속성: `aria-*` 속성
* ARIA
* ARIA 안내서 (en-US)
* WAI-ARIA 명세
* WAI-ARIA 작성 활동
모듈성 (Modularity)
================

모듈성이(Modularity)라는 용어는 시스템의 컴포넌트가 분리되고 재결합될 수 있는 정도를 나타내며, 소프트웨어 패키지를 논리 단위로 분할하는 것을 의미하기도 합니다. 모듈형 시스템의 장점은 모듈을 독립적으로 추론할 수 있다는 부분입니다.

같이 보기
-----

* 위키백과의 Modularity
Pixel
=====

픽셀(pixel)은 컴퓨터 화면과 같은 그래픽 디스플레이의 가장 작은 구성 단위입니다.

디스플레이 해상도는 픽셀 단위로 표시됩니다. 예를 들어, "800 x 600" 픽셀 해상도는 폭 800 픽셀, 높이 600 픽셀을 표시할 수 있음을 의미합니다.

같이 보기
-----

* 위키백과의 Pixel
파이썬 (Python)
============

**파이썬 (Python)** 은 고도의 범용 프로그래밍 언어입니다. 그것은 절차적, 객체지향적, 그리고 일부 함수형 프로그래밍 구조를 지원하는 다변수적 접근방식을 사용합니다.

1985년에서 1990년 사이에 귀도 반 로썸(Guido van Rossum)이 ABC라는 다른 언어의 후속으로 만들었으며, 현재는 웹 개발, 데스크톱 애플리케이션, 데이터 과학, DevOps, 자동화/생산성과 같은 다양한 영역에서 사용되고 있습니다.

Python은 OSI가 승인한 오픈 소스 라이센스로 개발되어 상업적인 용도로도 자유롭게 사용할 수 있고 배포할 수도 있습니다. Python의 라이선스는 Python Software Foundation에서 관리합니다.

더 알아보기
------

* Wikipedia의 Python
* Official Python 문서 자습서
* Tutorialspoint Python 자습서
* AlphaCodingSkills Python 자습서
* MDN의 Django Web Framework (Python)
MVC
===

**MVC** (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공합니다. MVC 에 기반을 둔 몇 가지 다른 디자인 패턴으로 MVVM (모델-뷰-뷰모델), MVP (모델-뷰-프리젠터), MVW (모델-뷰-왓에버)가 있습니다.

MVC 소프트웨어 디자인 패턴의 세 가지 부분은 다음과 같이 설명할 수 있습니다.

1. 모델: 데이터와 비즈니스 로직을 관리합니다.
2. 뷰: 레이아웃과 화면을 처리합니다.
3. 컨트롤러: 모델과 뷰로 명령을 전달합니다.
모델 뷰 컨트롤러 예시
------------

간단한 쇼핑 리스트 앱이 있다고 상상해봅시다. 우리가 원하는 것은 이번 주에 사야할 각 항목의 이름, 개수, 가격의 목록입니다. MVC 를 사용해 이 기능의 일부를 구현하는 방법을 아래에서 설명할 것입니다.

![MVC 아키텍처의 다양한 부분을 보여주는 다이어그램](/ko/docs/Glossary/MVC/model-view-controller-light-blue.png)

### 모델

모델은 앱이 포함해야할 데이터가 무엇인지를 정의합니다. 데이터의 상태가 변경되면, 모델을 일반적으로 뷰에게 알리며(따라서 필요한 대로 화면을 변경할 수 있습니다) 가끔 컨트롤러에게 알리기도 합니다(업데이트 된 뷰를 조절하기 위해 다른 로직이 필요한 경우).

다시 쇼핑 리스트 앱으로 돌아가서, 모델은 리스트 항목이 포함해야 하는 데이터 — 품목, 가격, 등. — 와 이미 존재하는 리스트 항목이 무엇인지를 지정합니다.

### 뷰

뷰는 앱의 데이터를 보여주는 방식을 정의합니다.

쇼핑 리스트 앱에서, 뷰는 항목이 사용자에게 보여지는 방식을 정의하며, 표시할 데이터를 모델로부터 받습니다.

### 컨트롤러

컨트롤러는 앱의 사용자로부터의 입력에 대한 응답으로 모델 및/또는 뷰를 업데이트하는 로직을 포함합니다.

예를 들어보면, 쇼핑 리스트는 항목을 추가하거나 제거할 수 있게 해주는 입력 폼과 버튼을 갖습니다. 이러한 액션들은 모델이 업데이트되는 것이므로, 입력이 컨트롤러에게 전송되고, 모델을 적당하게 처리한 다음, 업데이트된 데이터를 뷰로 전송합니다.

단순히 데이터를 다른 형태로 나타내기 위해 뷰를 업데이트하고 싶을 수도 있습니다(예를 들면, 항목을 알파벳순서로 정렬한다거나, 가격이 낮은 순서 또는 높은 순서로 정렬). 이런 경우에 컨트롤러는 모델을 업데이트할 필요 없이 바로 처리할 수 있습니다.

웹에서의 MVC
--------

웹 개발자로써, 여러분이 이 패턴을 이전에 의식적으로 사용한 적이 없더라도 아마 상당히 친숙할 것입니다. 여러분의 데이터 모델은 아마 어떤 종류의 데이터베이스에 포함되어 있었을 것입니다(MySQL 과 같은 전통적인 서버 사이드 데이터베이스, 또는 IndexedDB 같은 클라이언트 사이드 솔루션). 여러분의 앱의 제어 코드는 아마 HTML/JavaScript 로 작성되었을 것이고, 사용자 인터페이스는 HTML/CSS 등 여러분이 선호하는 것들로 작성되었을 것입니다. 이는 MVC 와 아주 유사하게 들리지만, MVC 는 이러한 컴포넌트들이 더 엄격한 패턴을 따르도록 합니다.

웹의 초창기에, MVC 구조는 클라이언트가 폼이나 링크를 통해 업데이트를 요청하거나 업데이트된 뷰를 받아 다시 브라우저에 표시하기 위해 대부분 서버 사이드에서 구현되었습니다. 반면, 요즘에는, 클라이언트 사이드 데이터 저장소의 출현과 필요에 따라 페이지의 일부만 업데이트를 허용하는 XMLHttpRequest를 포함해 더 많은 로직이 클라이언트 사이드에 추가되었습니다.

AngularJS 및 Ember.js와 같은 웹 프레임워크들은 약간씩은 방식이 다르지만, 모두 MVC 구조를 구현합니다.

같이 보기
-----

* 위키피디아의 모델-뷰-컨트롤러
MathML
======

XML 애플리케이션인 **MathML**은 수학적 표현식을 웹페이지에서 표현하기 위한 개방형 표준입니다. 1998년에 W3C는 브라우저에서 수학적 표현식을 나타내기 위해 MathML을 처음으로 권장하기 시작했습니다. MathML에는 과학 콘텐츠 및 음성 합성을 포함한 다른 응용 프로그램도 있습니다.

같이 보기
-----

* 위키백과의 MathML
* MathML
* MathML 작성하기 (en-US)
* MathML란 무엇일까요?
콜백 함수
=====

**콜백 함수**는 전달인자로 다른 함수에 전달되는 함수입니다. 이는 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출됩니다.

콜백 기반 API의 소비자(Consumer)는 API에 전달되는 함수를 작성합니다. API 공급자(Provider) ("caller")는 인자로 전달된 함수를 API 공급자(Provider) 함수 본문 내 특정 부분에서 다시 호출(또는 실행)합니다. API 공급자(Provider)는 올바른 매개변수를 콜백함수에 전달해야 합니다. API 공급자(Provider)는 API 공급자(Provider)의 추가동작을 지시하는 데 사용되는 콜백 함수에서 특정 반환 값을 받을 수도 있습니다.

콜백함수를 호출하는 방법에는 "synchronous" 및 "asynchronous" 두 가지가 있습니다. 동기식 콜백(synchronous callbacks)은 중간에 비동기 작업 없이 외부 함수 호출 직후에 호출되는 반면에, 비동기식 콜백(asynchronous callbacks)은 asynchronous 작업이 완료된 후 나중에 호출됩니다.

콜백 함수가 동기식으로 호출되는지, 비동기식으로 호출되는지 이해하는 것은 부수 효과를 분석할 때 특히 중요합니다. 다음 예제를 생각해봅시다.


```js
let value = 1;

doSomething(() => {
  value = 2;
});

console.log(value);
```


`doSomething`이 동기식으로 콜백을 호출하는 경우, `value = 2`가 동기식으로 실행되기 때문에 마지막 코드 실행문(console.log 문)은 `2`를 기록합니다. 그렇지 않고, 콜백 함수가 비동기인 경우 `value = 2`가 `console.log` 문 다음에 실행되기 때문에 마지막 코드 실행문(console.log 문)은 `1`를 기록합니다.

동기식 콜백(synchronous callbacks)의 예는 `Array.prototype.map()`, `Array.prototype.forEach()`에 전달된 콜백 함수가 포함됩니다. 비동기식 콜백(asynchronous callbacks)은 `setTimeout()` 및 `Promise.prototype.then()`에 전달된 콜백 함수들을 예제가 될 수 있습니다.

promises 사용 가이드에는 비동기 콜백의 타이밍에 대한 자세한 정보가 있습니다.

같이 보기
-----

* 위키피디아의 콜백
품질 값 (Quality values)
=====================

**품질 값(Quality values)** 또는 'q-values' 또는 'q-factors'는 쉼표로 구분된 목록에서 값의 우선순위 순서를 설명하는 데 사용됩니다. 일부 HTTP 헤더 및 HTML에서 허용되는 특수 구문입니다.

값의 중요도는 접미사 `';q='`로 표시되며 바로 뒤에 `0`에서 `1`사이의 값이 포함됩니다. 최대 3자리의 소수점 숫자가 가장 높은 값이 제일 높은 우선순위를 나타냅니다. 존재하지 않는 경우, 기본값은 `1`입니다.

예제
--

아래 문법을 참고해주세요.


```http
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
```


우선순위를 나타냅니다.

| 값 | 우선순위 |
| --- | --- |
| `text/html` 및 `application/xhtml+xml` | `1.0` |
| `application/xml` | `0.9` |
| `*/*` | `0.8` |

처음 두 값에 대해 정의된 우선순위가 없는 경우, 목록의 순서는 관계가 없습니다. 그럼에도 불구하고, 동일한 품질을 사용하면 보다 구체적인 값이 덜 구체적인 값보다 우선순위가 높습니다.


```http
text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
```


| Value | Priority |
| --- | --- |
| `text/html` | `0.8` (but totally specified) |
| `text/*` | `0.8` (partially specified) |
| `*/*` | `0.8` (not specified) |

`Accept`과 같은 일부 구문은 `text/html;level=1`과 같이 추가 지정자를 두는 것을 허용합니다. 사용은 매우 드물지만, 값의 특이성을 증가시킵니다.

추가 정보
-----

* HTTP 헤더 구문에 q-values를 사용하는 경우가 있습니다(예, `Accept`, `Accept-Encoding`, `Accept-Language`, `TE` (en-US), `Want-Digest` (en-US)).
* 헤더 필드 정의
최상위 계층 (Top layer)
==================

**최상위 계층(top layer)** 은 뷰포트의 전체 너비와 높이에 걸쳐 있고 웹 문서에 표시된 다른 모든 레이어 위에 위치하는 특정 레이어입니다. 페이지의 다른 모든 콘텐츠 위에 표시되어야 하는 요소를 포함하기 위해 브라우저에서 생성됩니다.

 최상위 레이어에 배치된 요소는 해당 `::backdrop` (en-US) 의사 요소와 마찬가지로 새로운
 스태킹 컨텍스트(stacking context)를 생성합니다.

최상위 레이어에 표시되는 요소는 아래와 같습니다.

* 전체 화면 요소입니다. 즉, 성공적인 `Element.requestFullscreen()` (en-US) 호출로 인해 전체 화면 모드로 표시되는 요소입니다.
* 성공적인 `HTMLDialogElement.showModal()` (en-US) 호출을 통해 모달로 표시되는 `<dialog>` 요소입니다.
* 성공적인 `HTMLElement.showPopover()` (en-US) 호출을 통해 표시된 Popover 요소입니다.

Chrome과 같은 일부 브라우저는 특수 DOM 트리 항목 내 최상위 레이어에 배치된 요소를 표시합니다. 예를 들면,

![크롬 개발자 도구에 표시된 것처럼 최상위 레이어의 요소](/ko/docs/Glossary/Top_layer/top_layer_devtools.png)

최상위 계층은 내부 브라우저 개념이므로 코드에서 직접 조작할 수 없습니다. CSS 및 JavaScript를 사용하여 최상위 레이어에 배치된 요소를 타겟팅할 수 있지만, 최상위 레이어 자체를 타겟팅할 수는 없습니다.

같이 보기
-----

* 스태킹 컨텍스트(stacking context)
* Fullscreen API
* `<dialog>` 요소, `HTMLDialogElement` (en-US) 인터페이스
* Popover API
* `:fullscreen` 의사 클래스
Percent-encoding(퍼센트 인코딩)
=========================

**Percent-encoding** 은 URL 맥락에서 특정 의미를 갖는 8비트 문자로 인코딩하는 메커니즘입니다. URL 인코딩이라고도 합니다. 인코딩은 '%' 다음에 변경할 문자를 ASCII 값으로 표현되는 16진수가 위치하는 대체 문자열로 구성됩니다.

인코딩이 필요한 특수문자는 `':'`, `'/'`, `'?'`, `'#'`, `'['`, `']'`, `'@'`, `'!'`, `'$'`, `'&'`, `"'"`, `'('`, `')'`, `'*'`, `'+'`, `','`, `';'`, `'='` 그리고 `'%'` 그 자체입니다. 다른 문자는 인코딩 할 수 있지만 인코딩을 할 필요는 없습니다.

| 문자 | 인코딩 |
| --- | --- |
| `':'` | `%3A` |
| `'/'` | `%2F` |
| `'?'` | `%3F` |
| `'#'` | `%23` |
| `'['` | `%5B` |
| `']'` | `%5D` |
| `'@'` | `%40` |
| `'!'` | `%21` |
| `'$'` | `%24` |
| `'&'` | `%26` |
| `"'"` | `%27` |
| `'('` | `%28` |
| `')'` | `%29` |
| `'*'` | `%2A` |
| `'+'` | `%2B` |
| `','` | `%2C` |
| `';'` | `%3B` |
| `'='` | `%3D` |
| `'%'` | `%25` |
| `' '` | `%20` or `+` |

문맥에 따라 문자 `' '`는 `application/x-www-form-urlencoded` 메시지에서 사용된 것과 같은 퍼센트 인코딩처럼 `'+'`로 변환되며 URL에서는 `'%20'`으로 변환됩니다.

같이 보기
-----

* 위키피디아 퍼센트 인코딩의 정의
* 이 인코딩이 정의된 RFC 3986의, section 2.1
* URL을 퍼센트 인코딩하는 기능인 `encodeURI()`와 `encodeURIComponent()`
최상위 도메인 (top-level domain, TLD)
===============================

최상위 도메인(top-level domain, TLD)은 인터넷의 계층적 DNS(도메인 네임 시스템)에서 가장 일반적인 도메인입니다. TLD는 도메인 네임의 마지막 구성 요소입니다(`developer.mozilla.org`의 'org').

국제 인터넷 주소 관리 기구(Internet Corporation for Assigned Names and Numbers, ICANN)는 각 TLD를 관리할 조직을 지정합니다. 관리 조직의 엄격한 정보에 따라, TLD는 웹 사이트의 목적, 소유권 또는 국적에 대한 단서 역할을 하는 경우가 많습니다.

 인터넷 주소의 예를 생각해 봅시다(`https://developer.mozilla.org`).
 여기서 org는 TLD입니다. mozilla.org는 2차 도메인 이름입니다. developer는 하위 도메인 이름입니다. 이 모든 것이 정규화된 도메인 이름을 구성합니다. https://를 추가하면 완전한 URL이 됩니다.

현재 IANA에서는 아래와 같은 최상위 도메인 그룹을 구분합니다.

국가 코드 최상위 도메인 (country-code top-level domains, ccTLD)

국가 또는 지역에 대해 설정된 2자리 도메인입니다(예, 미국의 경우 '.us').

국제화된 국가 코드 최상위 도메인 (internationalized country code top-level domains, IDN ccTLD)

라틴어가 아닌 문자 세트입니다(예, 아랍어 또는 중국어).

일반 최상위 도메인 (generic top-level domains, gTLD)

3자 이상의 최상위 도메인입니다.

스폰서가 없는 최상위 도메인

글로벌 인터넷 커뮤니티를 위해 ICANN 프로세스에 의해 설정된 정책에 따라 직접 운영되는 도메인입니다(예, 'com' 및 'edu').

스폰서 최상위 도메인 (sponsored top-level domains, sTLD)

이러한 도메인은 커뮤니티 테마 개념을 기반으로 신청자가 TLD를 사용할 자격이 있는지 여부를 결정하는 민간 조직에서 제안하고 후원합니다.

인프라 최상위 도메인

이 그룹은 하나의 도메인인 Address and Routing Parameter Area (ARPA)로 구성됩니다.

같이 보기
-----

* 위키백과의 TLD
* 최상위 도메인 목록
Argument
========

**인수**란 함수에 입력으로 간주되는 (원시적인 또는 객체의)값입니다.

같이 보기
-----

* Wikipedia의 Parameter와 Argument의 차이
* JavaScript의 `arguments`객체
프로토타입 기반 프로그래밍
==============

**프로토타입 기반 프로그래밍**은 클래스를 명확히 정의하는 객체 지향 프로그래밍과 달리, 속성과 메서드를 다른 클래스의 인스턴스에 추가하거나, 드문 경우 빈 객체에 추가하여 참조하는 방식의 프로그래밍 스타일입니다.

간단히 말하면, 이 프로그래밍 스타일은 어떤 객체를 생성할 때 처음 그 객체의 클래스를 정의하지 않는 것을 허용합니다.

같이 보기
-----

* 위키백과의 프로토타입 기반 프로그래밍
SVN
===

**아파치 서브버전(Apache Subversion, SVN)** 은 무료 소스 제어 관리(SCM) 시스템입니다. SVN를 통해 개발자는 텍스트 및 코드 수정 내역을 유지할 수 있습니다. SVN은 바이너리 파일도 처리할 수 있지만, 이러한 파일에는 사용하지 않는 것이 좋습니다.

같이 보기
-----

* 위키백과의 Apache Subversion
* 공식 웹사이트
바운딩 박스
======

요소 바운딩 박스는 해당 요소와 해당 하위 항목을 완전히 둘러싸는 가능한 가장 작은 직사각형(해당 요소의 사용자 좌표계 축과 정렬됨)입니다.
CORS 허용 목록에 있는 요청 헤더 (CORS-safelisted request header)
=====================================================

CORS 허용 목록에 있는 요청 헤더는 다음 HTTP 헤더 중 하나입니다.

* `Accept`,
* `Accept-Language`,
* `Content-Language`,
* `Content-Type`,
* `Range`.

이 헤더(및 아래에 명시된 추가 요구사항 충족하는 값)만 포함하는 경우, 요청은 CORS 컨텍스트에서 프리플라이트 요청을 보낼 필요가 없습니다.

`Access-Control-Allow-Headers` 헤더를 사용하여 더 많은 헤더를 허용 목록에 추가하고 위 헤더를 나열하여 다음 추가 제한 사항을 피할 수 있습니다.

추가 제약사항
-------

CORS 허용 목록에 있는 헤더가 CORS 허용 목록의 요청 헤더까지 되려면, 다음의 요구사항도 충족해야 합니다.

* `Accept-Language` 및 `Content-Language`는 `0-9`, `A-Z`, `a-z`, 빈 공간 또는 `*,-.;=` 으로 구성된 값만 가질 수 있습니다.
* `Accept` 및 `Content-Type`은 'CORS에 안전하지 않은 요청 헤더 바이트'를 포함할 수 없습니다. 예를 들어, `0x00-0x1F` (허용되는 `0x09 (HT)`는 제외), `"():<>?@[\]{}`, 및 `0x7F (DEL)`가 있습니다.
* `Content-Type`은 `application/x-www-form-urlencoded`, `multipart/form-data` 또는 `text/plain` 중 구문 분석된 값(매개변수 무시)의 MIME 타입이 있어야 합니다.
* `Range`는 `bytes=[0-9]+-[0-9]*` 형식의 단일 바이트 범위 값을 가져야 합니다.
 자세한 내용은 `Range` 헤더 문서를 참조하세요.
* 모든 헤더의 경우 값의 길이가 128보다는 클 수 없습니다.
같이 보기
-----

* CORS 허용 목록에 있는 응답 헤더
* 금지된 헤더 이름
* 요청 헤더
캐시
==

캐시 (웹 캐시 또는 HTTP 캐시)는 HTTP 응답들(responses)을 일시적으로 저장하는 컴포넌트입니다. 이를 통해 그 다음 HTTP 요청들(requests)에서 특정 조건이 만족될 때까지 캐시에 저장한 리소스를 사용할 수 있습니다.

같이 보기
-----

* 위키피디아의 웹 캐시
Operand
=======

**피연산자**는 명령의 일부로서 연산자에 의해 처리되는 데이터를 의미합니다. 예를 들어, 숫자 두 개를 더하는 경우 두 숫자는 피연산자이고 "+"는 연산자입니다.

같이 보기
-----

* 위키백과의 피연산자
그리드 영역 (Grid Areas)
===================

\*\*그리드 영역(grid area)\*\*은 그리드의 직사각형 영역을 구성하는 하나 이상의 그리드 셀입니다. 줄 기반 배치를 사용하여 항목을 배치하거나 이름이 있는 그리드 영역을 사용하여 영역을 정의할 때 그리드 영역이 생성됩니다.

![강조 표시된 그리드 영역을 보여주는 이미지](/ko/docs/Glossary/Grid_Areas/1_grid_area.png)

그리드 영역은 본질적으로 직사각형'이어야 합니다'. 예를 들어, T자형 또는 L자형 그리드 영역을 생성하는 것을 불가능합니다.

예제
--

아래 예제에는 두 개의 그리드 요소가 있는 그리드 컨테이너가 있습니다. 그리드 컨테이너를 `grid-area` (en-US) 속성으로 이름을 지정하고 `grid-template-areas` (en-US)를 사용하여 그리드에 배치했습니다. 이렇게 하면, 두 개의 그리드 영역이 생성되는데, 하나는 4개의 그리드 셀을 덮고, 나머지 두 개는 포함됩니다.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
```



```html
<div class="wrapper">
  <div class="item1">Item</div>
  <div class="item2">Item</div>
</div>
```

같이 보기
-----

### 속성 참고서

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-columns` (en-US)
* `grid-template-areas` (en-US)
* `grid-area` (en-US)
### 추가 읽어보기

* CSS 그리드 레이아웃 안내서:
    + 그리드 레이아웃의 기본 개념
    + 그리드 템플릿 영역
* CSS 그리드 레이아웃 명세서의 그리드 영역의 정의
Robots.txt
==========

Robots.txt는 일반적으로 모든 웹사이트의 루트에 배치되는 파일입니다. 크롤러가 웹사이트에 대한 접근을 허용할지 금지할지 결정합니다.

예를 들어, 사이트 관리자는 일반적으로 다른 검색 엔진에서 해당 파일이 색인화되는 것을 방지하기 위해 크롤러가 특정 폴더(및 그 안에 포함된 모든 파일)를 방문하거나 특정 파일을 크롤링하는 것을 금지할 수 있습니다.

같이 보기
-----

* 위키백과의 Robots.txt
* https://developers.google.com/search/reference/robots\_txt
* 표준 명세서: RFC9309
* https://www.robotstxt.org/
DNS
===

\*\*도메인 네임 시스템(Domain Name System, DNS)\*\*은 인터넷에 연결된 리소스에 대한 계층적이고 분산된 명명 시스템입니다. DNS는 도메인 네임 목록과 도메인 네임과 연결된 IP 주소 등의 리소스를 유지 및 관리합니다.

DNS의 가장 두드러진 기능은 인간에게 친숙한 도메인 네임(예, mozilla.org)을 숫자 IP 주소 (192.0.2.172와 같이)로 변환하는 것입니다. 도메인 네임을 적절한 IP 주소에 매핑하는 이 과정을 **DNS 조회**라고 합니다. 이와 반대로, **역방향 DNS 조회(rDNS)** 는 IP 주소와 연결된 도메인 네임을 확인하는 데 사용됩니다.

같이 보기
-----

* 도메인 네임 이해하기 (en-US)
* 위키백과의 도메인 네임 시스템
Mozilla Firefox
===============

**Mozilla Firefox**는 Mozilla Corporation에서 개발하고 있는 무료 오픈 소스 브라우저입니다. Firefox는 Windows, OS X, Linux, Android에서 구동할 수 있습니다.

2004년 11월에 처음 출시된, Firefox는 테마, 플러그인, 애드온 등의 기능을 통해 사용자에게 철저히 맞출 수 있습니다. Firefox는 Gecko를 사용해 웹 페이지를 렌더링하고, 현재는 물론 곧 다가올 Web 표준을 구현합니다.

같이 보기
-----

* 공식 웹 사이트
* MDN의 Firefox 개발자 문서
생성자 (Constructor)
=================

**생성자**는 인스턴스화된 특정 클래스 객체에 속합니다. 생성자는 이 객체를 초기화하고 해당 개인 정보에 대한 접근을 제공할 수 있습니다. 생성자의 개념은 대부분의 객체 지향 프로그래밍 (object-oriented programming, OOP) 언어에 적용될 수 있습니다. 기본적으로, JavaScript의 생성자는 일반적으로 class의 인스턴스에서 선언됩니다.

문법
--


```js
// 일반적인 기본 생성자 클래스입니다.
function Default() {}

// 매개변수를 통해 오버로드된 생성자 클래스입니다.
function Overloaded(arg1, arg2, /\* …, \*/ argN) {}
```


JavaScript에서 클래스의 생성자를 호출하려면, `new` 연산자를 사용하여 새 객체 참조를 변수에 할당합니다.


```js
function Default() {}

// 지역 변수 defaultReference에 할당된 기본 객체의 새로운 참조
const defaultReference = new Default();
```

같이 보기
-----

* 위키백과의 생성자
* MDN의 JavaScript용 객체 지향 프로그래밍의 생성자
* MDN의 JavaScript의 새로운 연산자
스냅 위치 (Snap positions)
======================

스냅 위치는 스크롤 작업이 완료되고 난 후 스크롤포트가 이동을 멈추는 지점입니다. 스냅 위치를 설정하면 콘텐츠를 화면 요소로 드래그할 필요 없이 콘텐츠를 페이징하는 스크롤 경험을 만들 수 있습니다.

스냅 위치는 스크롤 컨테이너에 설정됩니다. CSS 스크롤 스냅 속성을 참조하세요.
애플 Safari
=========

Safari는 Apple에 의해 개발되고 macOS, iPadOS 및 iOS에 올라가는 웹 브라우저입니다. Safari는 Webkit 오픈소스 엔진을 기반으로 합니다.

같이 보기
-----

* 위키백과의 Safari
* apple.com의 Safari
* WebKit 프로젝트
* WebKit 개발 중인 빌드
* Safari의 버그 알리기
방화벽
===

**방화벽**은 네트워크 트래픽을 필터링하는 시스템입니다. 이것을 통해 트래픽을 특정 규칙에 따라 통과시키거나 차단할 수 있습니다. 예를 들어, 특정한 포트를 겨냥한 수신 연결이나 특정 IP 주소에 대한 송신 연결을 차단할 수 있습니다.

방화벽은 하나의 소프트웨어처럼 단순할 수도 있고, 방화벽 역할을 하는 유일한 기능을 가진 전용 기계처럼 복잡할 수도 있습니다.

같이 보기
-----

* 위키백과의 Firewall (컴퓨터 공학)
WebVTT
======

웹 비디오 텍스트 트랙 (Web Video Text Tracks, WebVTT)은 HTML `<track>` 요소와 결합하여 텍스트 트랙 리소스를 표시하는 파일 형식에 대한 W3C 명세서입니다.

WebVTT 파일은 비디오 콘텐츠의 캡션이나 자막, 텍스트 비디오 설명, 콘텐츠 탐색을 위한 단락 등과 같은 오디오 또는 비디오 콘텐츠와 시간에 맞춰 정렬된 메타데이터를 제공합니다.

같이 보기
-----

* 위키백과의 WebVTT
* MDN의 WebVTT (en-US)
* 명세서
BiDi
====

**BiDi** (BiDirectional, 양방향)는 오른쪽에서 왼쪽 및 왼쪽에서 오른쪽 텍스트가 모두 포함된 문서를 나타냅니다. 동일한 단락에서 두 방향이 모두 발생하는 경우에도, 각 언어의 텍스트는 적절한 방향으로 나타나야 합니다.

같이 보기
-----

* 위키백과의 양방향 텍스트
WHATWG
======

**WHATWG**(Web Hypertext Application Technology Working Group)은 DOM, Fetch, HTML 등 웹 표준을 개발하고 유지하는 단체입니다. 2004년에 Apple, Mozilla, Opera의 임직원이 설립했습니다.

같이 보기
-----

* WHATWG 웹사이트
* 위키백과의 WHATWG
입력 방법 편집기 (Input method editor)
===============================

입력 방법 편집기 (Input method editor, IME)는 텍스트 입력을 위한 특수한 사용자 인터페이스를 제공하는 프로그램입니다. 입력기 편집기는 다양한 상황에서 사용됩니다.

* 라틴어 키보드를 사용하여 중국어, 일본어 또는 한국어 텍스트를 입력하는 경우
* 숫자 키패드를 사용하여 라틴어 텍스트를 입력하는 경우
* 필기 인식을 사용하여 터치 스크린에 텍스트를 입력하는 경우
같이 보기
-----

* Input 메서드
* 용어 사전
    + I18N
원시 값
====

JavaScript에서, **원시 값**(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터입니다. 원시 값에는 7가지의 종류가 있습니다.

* string
* number
* bigint
* boolean
* undefined
* symbol
* null

대부분의 경우, 원시 값은 언어 구현체의 가장 저수준 단계에서 표현됩니다.

모든 원시 값은 "불변"하여 변형할 수 없습니다. 원시 값 자체와, 원시 값을 할당한 변수를 혼동하지 않는 것이 중요합니다. 변수는 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와는 달리 변형할 수 없습니다. 언어에서는 원시 값을 변경하는 기능을 제공하지 않습니다.

원시 값에는 메서드가 없지만 마치 메서드가 있는 것처럼 동작합니다. 원시 값에서 속성에 접근하려면, JavaScript는 값을 래퍼 객체로 "자동으로 포장"하고 대신 해당 객체 속성에 접근합니다. 예를 들어, `"foo".includes("f")`는 암시적으로 `String` 래퍼 객체를 생성하고 해당 객체에 대해 `String.prototype.includes()`를 호출합니다. 이 "자동으로 포장"은 JavaScript 코드에서 관찰할 수 없지만 다양한 동작에 대한 좋은 정신적인 모델입니다. 예를 들어, "값을 변경하는" 원시 값이 작동하지 않는 이유는 `str.foo = 1`이 `str` 자체의 `foo` 속성에 할당되지 않기 때문입니다. 하지만, 임시 래퍼 객체에는 적용됩니다.

같이 보기
-----

* JavaScript 자료 구조
* 위키백과의 윈시 데이터 타입
* Glossary
    + JavaScript
    + string
    + number
    + bigint
    + boolean
    + null
    + undefined
    + symbol
EXIF
====

\*\*교환 가능한 이미지 파일 형식 (Exchangeable Image File Format, EXIF)\*\*은 멀티미디어 파일에 대한 메타데이터를 파일에 삽입할 수 있는 방법을 지정하는 표준입니다. 예를 들어, 이미지에는 픽셀 너비, 높이 및 밀도, 셔터 속도, 조리개, ISO 설정, 캡쳐 날짜 등을 설명하는 EXIF 데이터가 포함될 수 있습니다.

같이 보기
-----

* 위키 백과의 EXIF
* "CIPA DC-008-Translation-2019 디지털 스틸 카메라용 교환 가능한 이미지 파일 형식 : Exif Version 2.32"를 포함한 CIPA 표준
CSS
===

**종속형 스타일 시트**(Cascading Style Sheets, CSS)는 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어입니다.

브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현합니다. 하나의 스타일 선언은 웹 페이지의 모양을 결정하는 속성과 그 값으로 이루어져 있습니다.

CSS는 HTML, JavaScript와 함께 웹의 3대 핵심 기술을 이룹니다. 보통 HTML 요소의 스타일을 결정하지만, SVG와 XML 등 다른 마크업 언어에도 사용할 수 있습니다.

하나의 CSS 규칙은 선택자에 연결된 속성 세트로 구성됩니다. HTML의 모든 문단을 검은색 배경에 노란색 글자색으로 만드는 예제를 확인해보세요.


```css
/\* 선택자 "p"는 문서의 모든 단락이 해당 규칙의 영향을 받는다는 것을 나타냅니다. \*/
p {
  /\* The "color" 속성은 텍스트 색상(이 경우, 노란색)을 정의합니다. \*/
  color: yellow;

  /\* "background-color" 속성은 배경색(이 경우, 검은색)을 정의합니다. \*/
  background-color: black;
}
```


"종속형"은 페이지의 외형을 결정할 때 선택자의 우선순위를 결정하는 법을 가리킵니다. 복잡한 웹사이트의 CSS 규칙은 수천 개에 달할 수 있으므로 종속은 매우 중요한 특성입니다.

같이 보기
-----

* CSS 배우기
* 위키백과의 CSS
* MDN의 CSS 문서
* CSS Working Group의 현재 작업사항
인터페이스 정의 언어 (IDL)
=================

**인터페이스 정의 언어(Interface Description Language, IDL)** 는 특정 프로그래밍 언어와 별도로 지정된 객체의 인터페이스에 사용되는 일반 언어입니다.

콘텐츠 속성 vs 인터페이스 정의 언어 속성
------------------------

HTML에서, 대부분의 속성에는 **콘텐츠 속성** 및 **인터페이스 정의 언어 속성**이라는 두 가지 측면이 있습니다.

콘텐츠 속성은 콘텐츠(HTML 코드)에서 설정한 속성이며, `element.setAttribute()` 또는 `element.getAttribute()` (en-US)를 통해 설정하거나 가져올 수 있습니다. 예상 값이 정수여야 하는 경우에도 콘텐츠 속성은 항상 문자열입니다. 예를 들어, 콘텐츠 속성을 사용하여 `<input>` (en-US) 요소의 `maxlength`를 42로 설정하려면, 해당 요소에 대해 `setAttribute("maxlength", "42")`를 호출해야 합니다.

IDL 속성은 JavaScript 속성이라고도 합니다. IDL 속성은 `element.foo`와 같은 JavaScript 속성을 사용하여 읽거나 설정할 수 있는 속성입니다. IDL 속성은 항상 기본 콘텐츠 속성을 사용하여(그러나 변환될 수도 있음) 값을 얻을 때 값을 반환하고 이를 설정할 때 콘텐츠 속성에 무언가를 저장합니다. 즉, IDL 속성은 본질적으로 콘텐츠 속성을 반영합니다.

대부분의 경우, IDL 속성은 실제로 사용되는 값을 반환합니다. 예를 들어, `<input>` (en-US) 요소의 기본 `type`은 'text'이므로, `input.type="foobar"`를 설정하면, `<input>` 요소는 'text' 타입(외관 및 동작하는 측면에서)이지만, 'type' 콘텐츠 속성의 값은 'foobar'입니다. 그러나, `type` IDL 속성은 문자열 'text'를 반환합니다.

IDL 속성이 항상 문자열은 아닙니다. 예를 들어, `input.maxlength`는 숫자(부호 있는 long)입니다. IDL 속성을 사용할 때, 원하는 타입의 값을 읽거나 설정하므로, `input.maxlength`는 항상 숫자를 반환하고 `input.maxlength`를 설정하면, IDL 속성은 숫자 타입이 오기를 바랍니다. 다른 타입을 전달하면, 타입 변환에 대한 표준 JavaScript 규칙에 지정된 대로 자동으로 숫자로 변환됩니다.

IDL 속성은 unsigned long, URL, 불리언 등과 같은 다른 타입을 반영할 수 있습니다. 불행하게도, 명확한 규칙이 없고 IDL 속성이 해당 콘텐츠 속성과 함께 작동하는 방식은 속성에 따라 다릅니다. 대부분의 경우 명세서에 표현된 규칙을 따르지만, 때로는 그렇지 않은 경우도 있습니다. HTML 명세서는 이를 가능한 개발자 친화적으로 만들려고 노력하지만, 다양한 이유(주로 역사적)로 일부 속성이 이상하게 동작(예, `select.size`)하므로, 해당 속성이 정확히 어떻게 작동하는지 이해하려면 명세서를 읽어야 합니다.

같이 보기
-----

* 위키백과의 IDL
* HTML 속성 참고서
* 인터페이스 정의 언어
문자 집합 (Character set)
=====================

**문자 집합** 은 문자, 숫자, 문장 부호, 공백 등의 문자들을 인식하는 방법을 컴퓨터에 알려주는 인코딩 시스템입니다.

이전에, 각 나라들은 그들의 다양한 문자 사용 때문에 고유의 문자 집합(예를 들면 일본어를 위한 Kanji JIS 코드(예: Shift-JIS, EUC-JP 등), 전통 중국어를 위한 Big5, 러시아어를 위한 KOI8-R) 을 개발했습니다. 그러나, Unicode는 점차 보편적인 언어 지원을 위해 가장 수용 가능한 문자 집합이 되었습니다.

문자 집합이 잘못 사용된 경우(예: Big5로 인코딩된 글의 Unicode), 글자 깨짐이라고 하는 끊어진 문자만 볼 수 있습니다.

같이 보기
-----

* 위키백과의 문자 인코딩
* 위키백과의 글자 깨짐
* 용어 사전
    + Character
    + Unicode
PDF
===

**PDF** (Portable Document Format)는 특정 소프트웨어 구현, 하드웨어 플랫폼 또는 운영 체제에 의존하지 않고 문서를 공유하는 데 사용되는 파일 형식입니다. PDF는 인쇄된 문서의 디지털 이미지를 제공하며 인쇄될 때 동일한 형태를 유지합니다.

같이 보기
-----

* 위키백과의 PDF
DTMF
====

**이중 톤 다중 주파수 (Dual-Tone Multi-Frequency, DTMF)** 신호는 키패드에서 버튼을 누르고 있음을 나타내기 위해 들리는 신호음을 사용하는 시스템입니다. 미국에서는 "터치 톤(touch tone)"이라고 자주 불리며(펄스 다이얼링에서 DTMF로의 전환이 시작될 때 사용된 Touch-Tone 상표 이후), DTMF를 사용하면 숫자 0-9는 물론 문자 "A"부터 "D"까지, 기호 "#" 및 "\*"를 신호로 보낼 수 있습니다. 전화 네트워크의 제어 신호로 일반적으로 사용되는 문자가 포함된 전화 키패드는 거의 없습니다.

컴퓨터는 모뎀에 전화를 걸 때나, 원격 회의나 기타 목적으로 메뉴 시스템에 명령을 보낼 때 DTMF를 사용할 수 있습니다.

같이 보기
-----

* 위키백과의 이중 톤 다중 주파수 신호
* 위키백과의 펄스 다이얼링
네트워크 스로틀링 (Network throttling)
==============================

**네트워크 스로틀링 (Network throttling)** 은 의도적으로 인터넷 속도를 늦추는 것입니다. 웹 성능에선, 네트워크 스로틀링 또는 네트워크 상태 에뮬레이션은 대상 사이트를 사용하는 사람들의 대부분이 경험할 가능성이 있는 낮은 대역폭 상태를 에뮬레이션하는 데 사용됩니다.

사용자가 모바일에서 경험하는 네트워크 조건을 간과하지 않는 것이 중요합니다. 성능 좋은 컴퓨터를 사용해 회사 사무실 건물에서 웹 애플리케이션을 만드는 개발자의 인터넷 속도는 매우 빠릅니다. 개발자, 기술 작가 또는 디자이너로서 이 부분은 우리의 경험일 것입니다. 여행 중이거나 데이터 요금제 적용 범위가 좋지 않은 원격 지역에서, 해당 웹 애플리케이션에 접근하는 모바일 사용자의 네트워크 속도는 온라인이더라도 매우 느릴 수 있습니다. 네트워크 스로틀링을 통해 개발자는 사용자 경험을 에물레이션 할 수 있습니다. 브라우저 검사기와 같은 대부분의 브라우저 개발자 도구는 다양한 네트워크 조건을 테스트해 볼 수 있는 에뮬레이션하는 기능을 제공합니다. 네트워크 스로틀링을 통해 사용자 경험을 에뮬레이션하면, 로드 시간 문제를 더 쉽게 찾아낼 수 있고, 해결할 수 있습니다.

일반적으로 느린 네트워크 조건에서 애플리케이션을 테스트할 수 있도록, 브라우저 개발자 도구는 네트워크 스로틀링 옵션을 가지고 있습니다. 예를 들어, Firefox의 개발자 도구에는 네트워크 속도 옵션(예, Wi-Fi, good 3G, 2G)이 포함된 네트워크 모니터 및 반응형 디자인 모드 모두에서 사용할 수 있는 드롭다운 메뉴가 있습니다.

같이 보기
-----

* 가상 모니터링
HTTP 공개 키 고정 (HPKP)
===================

\*\*HTTP 공개 키 고정(HTTP Public Key Pinning, HPKP)\*\*은 위조된 인증서에 대한 MITM 공격의 위험을 줄이기 위해 특정 암호화 공개 키를 특정 웹 서버와 연결하도록 웹 클라이언트에 지시하는 더 이상 사용되지 않는 보안 기능입니다.

같이 보기
-----

* RFC 7469
* 위키백과의 HTTP Public Key Pinning
Object reference
================

**객체 참조**는 \*\*객체\*\*에 대한 링크입니다. 객체 참조는 연결된 객체와 똑같이 사용될 수 있습니다.

동일한 객체를 둘 이상의 "속성"에 할당하면 객체 참조의 개념이 명확해집니다. 할당된 각 속성은 객체의 복사본을 보유하는 대신, 동일한 객체에 연결되는 객체 참조를 보유하므로, 객체가 변경되면 해당 객체를 참조하는 모든 속성이 변경사항을 반영합니다.

같이 보기
-----

* 위키백과의 Reference (computer science)