플러그인 (Plugin) - MDN Web Docs 용어 사전: 웹 용어 정의

플러그인 (Plugin)
=============

브라우저 플러그인은 브라우저가 기본적으로 지원할 수 없는 콘텐츠를 처리하기 위해 사용자가 설치할 수 있는 소프트웨어 구성요소입니다. 브라우저 플러그인은 일반적으로 NPAPI (Netscape 플러그인 애플리케이션 프로그래밍 인터페이스) 아키텍처를 사용해 작성됩니다.

가장 잘 알려지고 널리 사용되는 플러그인은 브라우저에서 Adobe Flash 콘텐츠를 실행할 수 있게 해주는 오래된 Adobe Flash player이었습니다.

브라우저가 더욱 강력해지면서, 플러그인의 유용성이 떨어졌습니다. 플러그인에는 웹 사용자에게 보안 및 성능 문제를 일으킨 역사가 있습니다.

2016년부터 2021년까지 브라우저 공급업체는 플러그인, 특히 Adobe Flash에 대한 지원 중단 로드맵을 작성했고 현재 플러그인은 더 이상 주요 브라우저에서 지원되지 않습니다.

플러그인은 브라우저 확장 프로그램과 혼동해서는 안 됩니다. 브라우저 확장 프로그램은 플러그인과 달리 바이너리가 아닌 소스 코드로 배포되며 특히 WebExtensions 시스템을 사용하여 브라우저에서 여전히 지원됩니다.

같이 보기
-----

* Adobe Flash 수명 종료 발표


게코 (Gecko) - MDN Web Docs 용어 사전: 웹 용어 정의

게코 (Gecko)
==========

**게코(Gecko)** 는 Mozilla Project에서 개발하고 Firefox 및 Firefox 운영체제를 포함한 많은 애플리케이션/장치에서 사용되는 레이아웃 엔진입니다.

웹 브라우저에는 HTML, CSS, JavaScript 및 삽입된 콘텐츠(예, 이미지)를 해석하고 모든 것을 화면에 그리는 레이아웃 엔진이라는 소프트웨어가 필요합니다. 추가적으로, 게코(Gecko)는 연관된 API가 게코(Gecko)가 지원하는 모든 운영체제에서 잘 작동하는지 확인하고, 적절한 API가 관련 지원 대상에만 노출되도록 합니다. 이것은 게코(Gecko)에는 무엇보다도 네트워킹 스택, 그래픽 스택, 레이아웃 엔진, JavaScript 가상 머신 및 포팅 레이어가 포함되어 있음을 의미합니다.

모든 Firefox 운영체제 애플리케이션은 웹 앱이므로 Firefox 운영체제는 애플리케이션 런타임으로도 게코(Gecko)를 사용합니다.

같이 보기
-----

* 위키백과의 게코(Gecko)


RTL (Right to Left) - MDN Web Docs 용어 사전: 웹 용어 정의

RTL (Right to Left)
===================

**RTL** 은 텍스트가 오른쪽에서 왼쪽으로 쓰여지는 것을 나타내는 locale 속성입니다.

예를 들어, `he` locale (히브리어의 경우)은 오른쪽에서 왼쪽으로 지정합니다. 아랍어 (`ar`)는 RTL로 작성된 또 다른 공용 언어입니다.

RTL과 반대로, LTR (Left To Right)은 영어 (`en`, `en-US`, `en-GB`, 등), 스페인어 (`es`) 및 프랑스어 (`fr`)를 포함한 다른 언어에서 사용합니다.

같이 보기
-----

* MDN 웹 문서 용어사전
    + Localization
    + LTR (Left to Right)
    + RTL (Right to Left)


엄격 모드 (Strict mode) - MDN Web Docs 용어 사전: 웹 용어 정의

엄격 모드 (Strict mode)
===================

JavaScript의 **엄격 모드(strict mode)** 는 제한된 JavaScript 변형을 선택하여 느슨한 모드를 암시적으로 거부하는 방법입니다. 엄격 모드는 그냥 부분 집합이 아니며, 의도적으로 일반 코드와 다른 의미론을 가지고 있습니다.

전체 스크립트에 대한 엄격 모드는 다른 문 앞에 `"use strict";` 문을 포함하여 호출됩니다.

같이 보기
-----

* 엄격 모드
* 용어 사전
    + Sloppy mode


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

RGB
===

*Red-Green-Blue* (**RGB**)는 'red', 'green' 및 'blue'라는 세 가지 기본 구성 요소(또는 채널)의 혼합으로 색상을 나타내는 색상 모델입니다. 이 모델은 일련의 세 개의 숫자(일반적으로 0.0에서 1.0 사이 또는 0에서 255 사이)로 색상을 설명합니다. 각 숫자는 최종 색상을 결정하는 데 있어 기본 색상의 다양한 강도(또는 기여도)를 나타냅니다.

RGB 값만으로는 의미가 없습니다. 색상 모델은 세 가지 구성 요소가 색상 공간과 어떻게 관련되는지 정의합니다. 그래픽적으로, 3차원 격자나 큐브의 점은 색상을 나타냅니다. 각 차원(또는 축)은 서로 다른 채널에 해당합니다. RGB 색상 모델은 기본 색상 공간의 '입방체(cubic)' 또는 '데카르트(Cartesian)' 좌표계입니다.

웹의 경우, RGB 값의 기본 색상 공간은 'sRGB' (표준 RGB)이고 각 RGB 구성 요소는 0에서 255 사이의 숫자입니다.

'Adobe RGB' 색상 공간과 같이 'sRGB' 색상 공간보다 더 넓은 색 재현율 색상을 표현할 수 있는 다른 RGB 색상 공간이 있습니다. 'sRGB'와 'Adobe RGB'의 좌표가 다릅니다.

색상의 RGB 구성 요소를 설명하는 방법에는 여러가지가 있습니다. CSS에서는 16진수 표기법(예, `#add8e6`은 연한 파란색) 또는 함수 표기법(`rgb(46 139.5 87)`와 같이 0과 255 사이의 세 개의 개별 숫자로 표현할 수 있는 `rgb()` (en-US))으로 단일 24비트 정수로 표시할 수 있습니다. `color()` (en-US) 함수에는 `srgb`, `srgb-linear`, `a98-rgb` 및 `prophoto-rgb` 색상 공간도 있습니다.

RGB가 'sRGB' 색상 공간을 표현할 수 있는 유일한 색상 모델은 아닙니다. `HSL` (en-US) (색상-채도-밝기(hue-saturation-lightness)) 또는 `HWB` (en-US) (색상-백색-흑도(hue-whiteness-blackness))와 같은 원통형 좌표계 색상 모델은 웹에서 sRGB 색상을 나타내는 데에도 사용됩니다.

같이 보기
-----

* 위키백과의 RGB 색상 모델
* 위키백과의 sRGB 색 공간
* 위키백과의 Adobe RGB 색 공간
* CSS 데이터 타입: <color>


모바일 우선 (Mobile First) - MDN Web Docs 용어 사전: 웹 용어 정의

모바일 우선 (Mobile First)
=====================

점진적인 향상의 한 형태인 **모바일 우선 (Mobile first)** 은 데스크톱 화면 크기에 대한 디자인 및 개발보다, 모바일 화면 크기에 대한 디자인 및 개발에 우선순위를 두는 웹 개발 및 웹 디자인 접근 방식입니다. 모바일 우선 접근 방식을 사용하는 이유는 작은 화면에서 잘 작동하는 사용자 경험을 만드는 것부터 시작해, 화면 크기가 커짐에 따라 사용자 경험을 더욱 풍부하게 만들어 모든 화면 크기에서 사용자에게 좋은 사용자 경험을 제공하는 것입니다. 모바일 우선 접근 방식은 데스크톱 화면 크기에 맞게 먼저 디자인한 다음, 나중에 작은 화면 크기에 대한 일부 지원을 추가하는 기존 접근 방식과 반대됩니다.


패킷 (Packet) - MDN Web Docs 용어 사전: 웹 용어 정의

패킷 (Packet)
===========

패킷 또는 네트워크 패킷은 네트워크를 통해 전송되는 형식화된 데이터 덩어리입니다. 네트워크 패킷의 주요 컴포넌트는 사용자 데이터와 제어 정보입니다. 사용자 데이터는 '페이로드(payload)'로 알려져 있습니다. 제어정보는 페이로드를 전달하기 위한 정보입니다. 소스와 목적지에 대한 네트워크 주소, 순서 정보, 오류 감지 코드로 구성되며 일반적으로 패킷 헤더와 푸터에서 발견됩니다.

패킷에 포함된 내용
----------

### 홉 제한

홉은 패킷이 한 네트워크에서 다음 네트워크로 전달될 때 발생합니다. 패킷이 통과할 때마다 1씩 감소하는 필드입니다. 홉 제한이 0에 도달하면 전송 작업이 실패하고 패킷이 삭제됩니다.

시간이 지남에 따라 패킷 수로 인해 폐쇄 회로 내에서 횡단이 발생할 수 있고, 순환하는 패킷 수가 증가하여 궁극적으로 네트워킹 실패로 이어질 수 있습니다.

### 오류 감지 및 수정

오류 감지 및 수정은 데이터가 수신기로 전송될 때 발생하는 오류를 감지하고 수정하는 데 사용되는 코드입니다. 오류 수정에는 역방향 오류 수정과 순방향 오류 수정의 두 가지 유형이 있습니다. 역뱡향 오류 수정은 수신자가 발신자에게 전체 데이터 단위를 재전송하도록 요청하는 경우입니다. 순방향 오류 수정은 수신자가 자동으로 오류를 수정하는 오류 수정 코드를 사용하는 것입니다.

송신기에서는, 패킷이 전송되기 전에 계산이 수행됩니다. 대상에서 수신되면 체크섬이 다시 계산되어 패킷의 체크섬과 비교됩니다.

### 우선순위

이 필드는 어떤 패킷이 다른 패킷보다 더 높은 우선순위를 가져야 하는지를 나타냅니다. 높은 우선순위 대기열은 네트워크가 혼잡할 때 낮은 우선순위 대기열보다 더 빨리 비워지게 됩니다.

### 주소

네트워크 패킷을 라우팅할 때 송신 호스트의 소스 주소와 수신 호스트의 대상 주소라는 두 개의 네트워크 주소가 필요합니다.

### 사용자 데이터 - 페이로드

페이로드는 애플리케이션을 대신하여 전달되는 데이터입니다. 일반적으로 네트워크 프로토콜과 때로는 경로의 장비에 의해 설정된 최대 길이까지 가변 길이입니다.

사용된 참고자료
--------

* 네트워크 패킷
* 홉 (네트워크)
* 오류 감지 및 수정 작동 방식


스코프 - MDN Web Docs 용어 사전: 웹 용어 정의

스코프
===

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 **표현식**이 \*\*"표현"\*\*되거나 참조 될 수 있음을 의미한다. 만약 **변수** 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

\*\*함수\*\*는 \*\*JavaScript\*\*에서 **클로저** 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다. 예를 들어 다음과 같은 상황은 유효하지 않다.

```js
function exampleFunction() {
  var x = "declared inside function";
  // x는 오직 exampleFunction 내부에서만 사용 가능.
  console.log("Inside function");
  console.log(x);
}

console.log(x); // 에러 발생
```

그러나 다음과 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효하다.

```js
var x = "declared outside function";

exampleFunction();

function exampleFunction() {
  console.log("Inside function");
  console.log(x);
}

console.log("Outside function");
console.log(x);
```

Learn more
----------

### General knowledge

* Scope (computer science) on Wikipedia


열거형 (Enumerated) - MDN Web Docs 용어 사전: 웹 용어 정의

열거형 (Enumerated)
================

컴퓨터 과학에서, **열거형** 타입은 제한된 이름이 있는 값의 모음으로 구성된 데이터 타입입니다.

HTML 열거 속성
----------

HTML에서 열거 속성은 제한된 사전 정의된 텍스트 값 모음이 있는 속성입니다. 예를 들어, 전역 HTML `dir` 속성은 세 가지 유효한 값(`ltr`, `rtl` 및 `auto`)이 있습니다.

열거된 각 속성에는 속성이 값 없이 존재할 경우(값이 누락되는 경우)에 대한 기본값 및 속성에 유효하지 않은 값이 할당될 경우에 대한 기본값이 있습니다. 불리언 HTML 속성과 달리, 이 속성에는 값이 존재하는지, 생략되었는지, 유효하지 않은지에 관계없이 속성이 존재할 때 항상 true입니다. 열거된 HTML 속성을 사용하면, 생략된 값의 기본값이 유효하지 않은 값의 기본값과 다를 수 있습니다.

예를 들어, 전역 HTML `contenteditable` 속성은 두 개의 유효한 키워드( `true` 및 `false`)를 가집니다. 속성이 있지만 값이 설정되지 않은 경우, 값은 `true`입니다. 값이 설정되었지만, 유효하지 않은 경우(`contenteditable="contenteditable"`와 같이), 값은 세 번째 상태인 `inherit`으로 매핑됩니다.

ARIA 열거 속성
----------

ARIA 상태와 속성은 HTML이므로 열거된 속성도 있습니다. ARIA 속성이 열거된 목록에 `true` 및 `false` 값을 모두 포함하는 경우, 일반적으로 생략된 속성은 `false`로, 유효하지 않은 값은 `true`로 처리하는 반면, 빈 문자열이나 생략된 값의 기본값은 속성에 따라 다릅니다.

예를 들어, `aria-current` 속성은 `page`, `step`, `location`, `date`, `time`, `true` 및 `false`를 포함하는 제한된 값 목록을 허용합니다. 이 경우에는, 속성이 없거나, 빈 문자열이거나, 값이 없거나 `aria-current="false"`로 설정된 경우에, 속성은 false이고 사용자에게 노출되지 않습니다. 열거된 값 목록에 없는 비어 있지 않은 문자열 값은 `aria-current="true"`가 설정된 것처럼 처리됩니다.

JavaScript 열거 속성
----------------

JavaScript에서, 열거 가능 속성은 내부 열거 가능 플래그가 true로 설정된 속성입니다. 열거 가능 속성은 단순 할당이나 속성 초기자를 통해 생성된 속성의 기본값입니다. 대부분의 반복 메커니즘(`for...in` 반복문 및 `Object.keys`와 같습니다)은 열거 가능한 키만 접근하게 됩니다.

같이 보기
-----

* 불리언
* JavaScript 데이터 타입과 자료구조
* HTML 표준의 열거 속성


CSS 선택자 (Selector (CSS)) - MDN Web Docs 용어 사전: 웹 용어 정의

CSS 선택자 (Selector (CSS))
========================

**CSS 선택자**는 규칙이 일치하는 문서의 요소를 설명하는 CSS 규칙의 일부입니다. 일치하는 요소는 규칙에 지정된 스타일이 적용됩니다.

예제
--

이 CSS를 생각해보세요.

```css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}
```

이 선택자들은 `"p"` (`<p>` 요소 내부 텍스트에 녹색을 적용), `"div.warning"` (class `"warning"`이 있는 모든 `<div>` (en-US) 요소는 경고 상자처럼 보임) 및 `"#customized"` (ID가 `"customized"`인 요소의 기본 글꼴을 16픽셀 크기의 Lucida Grande 또는 몇 가지 대체 글꼴 중 하나로 설정) 입니다.

그런 다음, 이 CSS를 다음과 같은 일부 HTML에 적용할 수 있습니다.

```html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>
```

결과 페이지 콘텐츠의 스타일은 다음과 같습니다.

같이 보기
-----

* CSS 소개에서 CSS 선택자에 대해 더 알아보기
* 기본 선택자
    + 타입 선택자 `elementname`
    + 클래스 선택자 `.classname`
    + ID 선택자 `#idname`
    + 범용 선택자 `* ns|* *|*`
    + 속성 선택자 `[attr=value]`
    + 상태 선택자 `a:active, a:visited`
* 그룹화 선택자
    + 선택자 목록 `A, B`
* 결합자
    + 인접 형제 선택자 `A + B`
    + 일반 형제 선택자 `A ~ B`
    + 자식 선택자 `A > B`
    + 하위 선택자 `A B`
* 의사 요소
    + 의사 클래스 `:`
    + 의사 요소 `::`


레이아웃 뷰포트 (Layout viewport) - MDN Web Docs 용어 사전: 웹 용어 정의

레이아웃 뷰포트 (Layout viewport)
==========================

**레이아웃 뷰포트(layout viewport)** 는 브라우저가 웹페이지를 그리는 뷰포트입니다. 본질적으로, 레이아웃 뷰포트는 볼 수 있는 것을 나타내는 반면에, 시각적 뷰포트는 현재 사용자의 디스플레이 장치에 표시되는 것을 나타냅니다.

예를 들어, 핀치 동작(두 개의 손가락으로 안쪽으로 모으는 행위)을 사용해 사이트 콘텐츠를 확대 및 축소할 수 있는 모바일 장치에서 매우 중요한 부분입니다. 렌더링된 문서는 어떤 방식으로도 변경되지 않으므로 사용자가 확대/축소 수준을 조정해도 레이아웃 뷰포트는 동일하게 유지됩니다. 대신에, 시각적 뷰포트가 업데이트되어 볼 수 있는 페이지 영역을 나타냅니다.

같이 보기
-----

* 시각적 뷰포트 API (en-US)
* 위키백과의 뷰포트
* 쿼크모드의 두 가지 뷰포트 이야기
* MDN 용어사전의 뷰포트
* MDN 용어사전의 시각적 뷰포트


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

XInclude
========

XInclude는 문서에 다른 문서나 일부를 포함할 수 있도록 하는 포함 태그를 정의하는 W3C 권장 사항입니다. 콘텐츠는 다른 XML 파일이나 텍스트 파일에서 포함될 수 있습니다.

XInclude 메커니즘은 주요 브라우저에서 기본적으로 지원되지 않습니다.

같이 보기
-----

* XInclude 표준
* `XPath`


마크업 (Markup) - MDN Web Docs 용어 사전: 웹 용어 정의

마크업 (Markup)
============

마크업 언어는 텍스트를 정의하고 표현하기 위해 고안된 것입니다. 하이퍼텍스트 마크업 언어 (HyperText Markup Language,HTML)은 마크업 언어의 예입니다.

HTML 파일과 같은 텍스트 파일 내에서, 요소는 콘텐츠의 해당 부분의 목적을 설명하는 태그를 사용하여 '표시'됩니다.

마크업 언어의 종류
----------

**표현적 마크업 (Presentational Markup):**

WYSIWYG을 사용하는 전통적인 워드 프로세싱 시스템에서 사용됩니다(보이는 대로 얻을 수 있습니다). 사용자, 편집자, 작성자가 사람일 경우에는 숨겨져 있습니다.

**순차적 마크업 (Procedural Markup):**

텍스트와 결합되어 프로그램에 텍스트 처리에 대한 지침을 제공합니다. 이 텍스트는 작성자에 의해 수정될 수 있습니다.

**설명적 마크업 (Descriptive Markup):**

프로그램이 문서를 처리하는 방법에 대해 문서 항목에 레이블을 지정합니다. 예를 들어, HTML `<td>` (en-US)은 HTML 테이블의 셀을 정의합니다.

같이 보기
-----

* MDN 웹 문서 용어사전
    + HTML
    + XHTML
    + XML
    + SVG


페이지 로드 시간 (Page load time) - MDN Web Docs 용어 사전: 웹 용어 정의

페이지 로드 시간 (Page load time)
==========================

**페이지 로드 시간(Page load time)** 은 페이지를 로드하는 데 걸리는 시간으로, 탐색 시작 (en-US)부터 로드 이벤트 시작 (en-US)까지 측정됩니다.

```js
let time = performance.timing;

let pageloadtime = time.loadEventStart - time.navigationStart;
```

페이지 로드 시간은 완벽한 웹 성능 지표처럼 들리지만, 그렇지 않습니다. 로드 시간은 장치 기능, 네트워크 상태 및 서버와의 거리에 따라 사용자마다 크게 다를 수 있습니다. 페이지 로드 시간이 측정되는 개발 환경은 사용자의 현실을 반영하지 않는 최적의 환경일 가능성이 높습니다. 또한, 웹 성능은 로드 이벤트가 발생하는 시점에만 국한되지 않습니다. 또한 페이지 로드 시간은 인지된 성능, 응답성, jank 및 지터와 관련이 있습니다.

같이 보기
-----

* 탐색 및 리소스 타이밍 (en-US)
* `PerformanceNavigationTiming` (en-US)
* `PerformanceResourceTiming` (en-US),


렌더링 엔진 (Rendering engine) - MDN Web Docs 용어 사전: 웹 용어 정의

렌더링 엔진 (Rendering engine)
=========================

**렌더링 엔진(rendering engine)** 은 화면에 텍스트와 이미지를 그리는 소프트웨어입니다. 엔진은 문서 (종종 HTML)에서 구조화된 텍스트를, 그리고 주어진 선언에 따라 적절한 형식 (종종 CSS에 제공됨)을 지정합니다. 레이아웃 엔진의 예로는 Blink, Gecko, EdgeHTML, WebKit 가 있습니다.

같이 보기
-----

* 위키백과의 웹 브라우저 엔진
* Venkatraman.R - Behind Browsers (Part 1, Basics)


메타데이터 가져오기 요청 헤더 (Fetch metadata request header) - MDN Web Docs 용어 사전: 웹 용어 정의

메타데이터 가져오기 요청 헤더 (Fetch metadata request header)
================================================

**메타데이터 가져오기 요청 헤더**는 요청이 시작된 맥락에 대한 추가 정보를 제공하는 HTTP 요청 헤더입니다. 이를 통해 서버는 요청이 어디서 왔는지와 리소스를 어떻게 사용하는지에 따라 요청을 허용할지 여부를 결정할 수 있습니다.

이 정보를 사용하여 서버는 리소스 격리 정책을 구현할 수 있고, 이를 통해 외부 사이트에서는 공유하기로 의도된, 적절하게 사용되는 리소스만 요청할 수 있습니다. 이 접근 방식은 CSRF, 교차 사이트 스크립트 포함(Cross-site Script Inclusion, 'XSSI'), 타이밍 공격 및 교차 출처 정보 유출(cross-origin information leaks)과 같이, 일반적인 교차 사이트 웹 취약점을 완화하는 데 도움이 될 수 있습니다.

이 헤더에는 `Sec-` 접두사가 붙어서, 금지 헤더 목록이 있습니다. 따라서 금지 헤더 목록은 JavaScript가 수정할 수 없습니다.

메타데이터 가져오기 요청 헤더는 아래와 같습니다.

* `Sec-Fetch-Site` (en-US)
* `Sec-Fetch-Mode` (en-US)
* `Sec-Fetch-User` (en-US)
* `Sec-Fetch-Dest` (en-US)

 아래 요청 헤더는 동일한 명세서에 있지 않기 때문에, 엄격히 '메타데이터 가져오기 요청 헤더'는 아니지만, 비슷하게 리소스가 사용되는 방식에 대한 맥락 정보를 제공합니다.
 서버는 이를 사용하여 캐싱 동작 및 반환되는 정보를 수정할 수 있습니다.

* `Sec-Purpose` (en-US)
Experimental
* `Service-Worker-Navigation-Preload` (en-US)
같이 보기
-----

* web.dev의메타데이터 가져오기를 사용해 웹 공격으로부터 리소스를 보호하세요
* 메타데이터 가져오기 요청 헤더 플레이그라운드 (secmetadata.appspot.com)
* 모든 HTTP 헤더 목록
* 모든 HTTP 헤더 > 메타데이터 가져오기 요청 헤더 목록
* 용어사전
    + Representation 헤더
    + HTTP 헤더
    + Response 헤더
    + Request 헤더


제어 흐름 (Control flow) - MDN Web Docs 용어 사전: 웹 용어 정의

제어 흐름 (Control flow)
====================

'제어 흐름'은 컴퓨터가 스크립트의 명령문을 실행하는 순서입니다.

컴퓨터가 조건문 및 루프아 같이 제어 흐름을 변경하는 (매우 빈번합니다) 구조를 통해 실행되지 않는 한, 코드는 파일의 첫 번재 줄부터 마지막 줄까지 순서대로 실행됩니다.

예를 들어, 웹페이지 양식에서 사용자 데이터의 유효성을 검사하는 데 사용되는 스크립트를 상상해보세요. 스크립트는 검증된 데이터를 제출하지만, 사용자가 필수 입력 필드를 비워두면, 이를 입력하라는 메시지를 표시합니다. 이를 위해서, 스크립트는 조건 구조 또는 `if...else`를 사용하여 양식이 다 채워졌는지 여부에 따라 다른 코드가 실행되도록 합니다.

```js
if (isEmpty(field)) {
  promptUser();
} else {
  submitForm();
}
```

JavaScript 또는 PHP 등의 일반적인 스크립트에는 조건문, 반복문 및 함수를 포함한 많은 제어 구조가 포함되어 있습니다. 이벤트가 발생할 때 스크립트의 일부가 실행되도록 설정할 수도 있습니다.

예를 들어, 위의 인용문은 사용자가 양식에 대해 **제출** 버튼을 클릭할 때 실행되는 함수 내에 있을 수 있습니다. 함수에는 양식의 모든 필드를 반복하여 각 필디를 차례로 확인하는 반복문이 포함될 수도 있습니다. `if` 및 `else` 섹션의 코드를 다시 살펴보면, `promptUser` 및 `submitForm` 줄은 스크립트의 다른 함수에 대한 호출일 수도 있습니다. 보시다시피, 제어 구조는 단 몇 줄의 코드로도 복잡한 처리 흐름을 지시할 수 있습니다.

제어 흐름은 스크립트를 읽을 때 처음부터 끝까지 읽어야 할 뿐만 아니라 프로그램 구조와 실행 순서에 미치는 영향도 살펴봐야 함을 의미합니다.

같이 보기
-----

* 위키백과의 제어 흐름
* MDN의 JavaScript 참조 - 제어 흐름
* MDN의 명령문 (제어 흐름)


전역 스코프 (Global scope) - MDN Web Docs 용어 사전: 웹 용어 정의

전역 스코프 (Global scope)
=====================

프로그래밍 환경에서, '전역 범위'는 다른 모든 범위를 포함하고, 모든 범위에 접근 가능한 스코프입니다.

클라이언트 사이드 JavaScript에서, 전역 범위는 일반적으로 모든 코드가 실행되는 웹 페이지입니다.

같이 보기
-----

* JavaScript 변수 스코프 소개
* 위키백과의 스코프


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

Three js
========

three.js는 GPU 기반 게임 및 기타 그래픽 기반 앱을 브라우저에서 바로 실행할 수 있는 JavaScript 기반 WebGL 엔진입니다. three.js 라이브러리는 브라우저에서 3D 장면을 그리기 위한 다양한 기능과 API를 제공합니다.

같이 보기
-----

* 위키백과의 Three.js
* three.js 공식 웹사이트


잉크 오버플로우 (Ink overflow) - MDN Web Docs 용어 사전: 웹 용어 정의

잉크 오버플로우 (Ink overflow)
=======================

상자의 \*\*잉크 오버플로우 (Ink overflow)\*\*는 상자의 테두리 상자 외부에 시각적 효과를 생성하는 상자 부분과 내용을 나타냅니다. 시각적으로만 잉크 오버플로는 상자 모델 속성에 영향을 주지 않으므로, 레이아웃에 영향을 주지 않습니다.

잉크 오버플로는 레이아웃에 영향을 주지 않거나 스크롤 가능한 오버플로 영역을 확장하지 않는 상자 그림자 (en-US), 테두리 이미지, 텍스트 장식, 테두리 등과 같은 페인팅 효과의 오버플로우입니다. 잉크 오버플로는 em 박스 외부로 확장되는 상승 및 하강과 같은 글자의 모양(glyph, 글리프)가 돌출된 현상이기도 합니다.

대체된 요소는 항상 독립적인 서식 컨텍스트를 설정하므로, 대체된 콘텐츠의 오버플로는 항상 잉크 오버플로입니다(스크롤 가능한 오버플로와 반대입니다).

같이 보기
-----

* CSS 오버플로우 모듈 (en-US)


루비 (Ruby) - MDN Web Docs 용어 사전: 웹 용어 정의

루비 (Ruby)
=========

**루비 (Ruby)** 는 오픈 소스 프로그래밍 언어입니다. 웹 관련 맥락에서, Ruby는 웹사이트/앱을 생성하기 위해 'Ruby On Rails(ROR)' 프레임워크와 함께 서버 사이드에서 자주 사용됩니다.

Ruby는 HTML 문서에서 동아시아 텍스트에 주석을 달아 발음 정보를 제공하는 방법이기도 합니다. `<ruby>` 요소를 참고하세요.

같이 보기
-----

* 위키백과의 Ruby
* Ruby's 공식 웹사이트
* Ruby On Rails' 공식 웹사이트


표준 순서 (Canonical order) - MDN Web Docs 용어 사전: 웹 용어 정의

표준 순서 (Canonical order)
=======================

CSS에서 표준 순서는 별도의 값을 지정(또는 구문 분석)해야 하거나 CSS 속성 값의 일부로 직렬화해야 하는 순서를 참조하는 데 사용됩니다. 표준 순서는 속성의 형식적 문법에 의해 정의되며 일반적으로 단일 단축 값의 일부로 정식 값을 지정해야 하는 순서를 나타냅니다.

예를 들어, `background` 단축 속성 값은 여러 개의 `background-*` 기본 속성으로 구성됩니다. 기본 값의 표준 순서는 다음과 같이 정의됩니다.

1. `background-image`
2. `background-position` (en-US)
3. `background-size` (en-US)
4. `background-repeat`
5. `background-attachment`
6. `background-origin`
7. `background-clip`
8. `background-color`

또한, 해당 문법은 `background-size` (en-US)의 값을 받게 되면, **반드시** `background-position` (en-US)의 값 **뒤에** 슬래시로 구분해서 지정되어야 한다고 정의합니다. 다른 값은 순서에 상관없이 나타날 수 있습니다.

같이 보기
-----

* StackOverflow의 유용한 추가 토론인 CSS 속성과 관련해 "표준 순서"는 무엇을 의미하나요?
* MDN의 CSS 값에 사용되는 공식 문법에 대한 설명


이벤트 (Event) - MDN Web Docs 용어 사전: 웹 용어 정의

이벤트 (Event)
===========

이벤트는 JavaScript 코드로 수정할 수 있는 DOM 요소에 의해 생성된 리소스입니다.

같이 보기
-----

* MDN의 Event 문서
* 공식 웹사이트
* 위키백과의 DOM 이벤트


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

XForms
======

**XForms** 은 웹 양식을 작성하고 XML 형식의 양식 데이터를 처리하기 위한 규칙입니다.

**참고:** XForms을 더 이상 지원하는 주요 브라우저는 없습니다. 대신 HTML forms을 사용하는 것이 좋습니다.


예외 (Exception) - MDN Web Docs 용어 사전: 웹 용어 정의

예외 (Exception)
==============

\*\*예외(exception)\*\*는 정상적인 코드 실행을 중단하는 조건입니다. JavaScript 문법 에러는 매우 일반적인 예외가 있는 코드입니다.

같이 보기
-----

* 위키백과의 예외 핸들링


스레드 (Thread) - MDN Web Docs 용어 사전: 웹 용어 정의

스레드 (Thread)
============

컴퓨터 과학의 스레드는 동시에 여러 작업이나 프로그램을 실행하는 것입니다. 코드를 실행할 수 있는 각 단위를 **스레드** 라고 합니다.

**메인 스레드** 는 브라우저에서 사용자 이벤트를 처리하고, 디스플레이를 렌더링 및 페인팅하고, 일반적인 웹 페이지나 앱을 구성하는 대부분의 코드를 실행하는 데 사용되는 스레드입니다. 이러한 일이 모두 하나의 스레드에서 발생하기 때문에, 느린 웹 사이트나 앱 스크립트는 전체 브라우저의 속도를 저하시킵니다. 더 안 좋은 부분은 사이트나 앱 스크립트가 무한 루프에 빠지면 전체 브라우저가 중단된다는 것입니다.

최신 JavaScript는 추가 스레드를 생성하는 방법을 제공하며, 각 스레드는 서로 통신하면서 독립적으로 실행됩니다. 자체 스레드에서 기본 스레드와 동시에 실행되는 하위 프로그램을 분리하는 데 사용할 수 있는 web workers와 같은 기술을 사용해 수행될 수 있습니다. 이러한 기술들로 느리거나 복잡하거나 장기간 실행되는 작업을 메인 스레드와 독립적으로 실행할 수 있으며, 사이트나 앱의 전반적인 성능은 물론 브라우저의 전반적인 성능도 보존할 수 있습니다. 또한, 스레딩을 사용하면 웹 애플리케이션이 최신 멀티 코어 프로세서를 활용할 수 있기 때문에, 단일 코어에서 실행되는 멀티 스레드 애플리케이션보다 훨씬 더 나은 성능을 얻을 수 있습니다.

**service worker** 라는 특별한 유형의 워커를 생성하여 사용자의 허가를 받아 사이트에서 실행할 수 있습니다. 사용자가 현재 해당 사이트를 사용하지 않는 경우에도 마찬가지입니다. 서비스 워커는 사용자가 사이트에 활성 사용자로써 참여하지 않는 동안 어떤 일이 발생하면 사용자에게 알릴 수 있는 사이트를 만드는 데 사용됩니다. 예를 들어, 사용자가 현재 메일 서비스에 로그인하지 않았음에도 새 이메일을 받았다고 알리는 등의 작업을 수행할 수 있습니다.

전반적으로 우리 운영 체제 내의 이러한 스레드는 매우 유용하다는 것을 알 수 있습니다. 이는 컨텍스트 전환 시간을 최소화하고 보다 효율적인 통신을 가능하게 하며 다중 프로세서 아키텍처를 추가로 사용할 수 있도록 해줍니다.

같이 보기
-----

* 비동기 JavaScript
* Web worker API
* Service worker API
* 용어 사전
    + Main thread


통합 개발 환경 (IDE) - MDN Web Docs 용어 사전: 웹 용어 정의

통합 개발 환경 (IDE)
==============

**통합 개발 환경 (Integrated Development Environment, IDE)** 또는 대화형 개발 환경은 소프트웨어 개발을 위해 컴퓨터 프로그래머에게 포괄적인 기능을 제공하는 소프트웨어 응용 프로그램입니다. IDE는 일반적으로 소스코드 편집기, 빌드 자동화 도구 및 디버거로 구성됩니다.

같이 보기
-----

* 위키백과의 IDE


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

Head
====

**Head** 란 HTML 문서의 일부분으로써 해당 문서의 metadata 를 포함하는데, 예를 들면, 저자, 설명, 그리고 HTML에 적용될 수 있는 CSS 또는 JavaScript 파일들로 연결되는 것들이 이에 해당될 수 있습니다.

같이 보기
-----

* MDN에서의 `<head>` 요소 참조
* MDN Learning Area의 The HTML <head> (en-US) 참고


그리드 셀 (Grid Cell) - MDN Web Docs 용어 사전: 웹 용어 정의

그리드 셀 (Grid Cell)
=================

CSS 그리드 레이아웃에서, \*\*그리드 셀 (Grid Cell)\*\*은 CSS 그리드에 사용할 수 있는 가장 작은 단위입니다. 이는 교차하는 4개의 격자선 사이의 공간이며 개념적으로는 표 셀과 매우 유사합니다.

![그리디의 개별 셀을 보여주는 다이어그램](/ko/docs/Glossary/Grid_Cell/1_grid_cell.png)

그리드 배치 방법 중 하나를 사용해 항목을 배치하지 않으면, 그리드 컨테이너의 바로 밑 자식 요소는 자동 배치 알고리즘에 의해 각 개별 그리드 셀에 하나씩 배치됩니다. 모든 요소를 담을 수 있는 충분한 셀을 만들기 위해 추가 행 또는 열 그리드 트랙이 생성됩니다.

예제
--

이 예제에서는 3개의 열 트랙 그리드를 만들었습니다. 5개의 요소는 3개 그리드 셀의 초기 행을 따라 작업하는 그리드 셀에 배치된 다음, 나머지 2개에 대한 새로운 행을 생성합니다.
```

\* {
  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-auto-rows: 100px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

같이 보기
-----

### 속성 참고서

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-auto-rows` (en-US)
* `grid-auto-columns` (en-US)
### 더 읽어보기

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 기본 개념
* CSS 그리드 레이아웃 명세서의 그리드 셀 정의


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

Wrapper
=======

JavaScript와 같은 프로그래밍 언어에서, 래퍼는 하나 이상의 다른 기능들을 호출하기 위한 기능입니다. 때로는 순전히 편의상, 때로는 프로세스에서 약간 다른 작업을 하도록 조절하는 기능입니다.

예를 들면, AWS용 SDK 라이브러리는 래퍼의 하나의 예제로 들 수 있습니다.

같이 보기
-----

* 위키백과의 래퍼 함수
* MDN 웹 문서 용어 사전
    + API
    + Class
    + Function


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

의사 코드
=====

의사 코드는 일반적으로 사람에게 일부 코드 구문의 작동 방식을 나타내거나, 코드 아키텍처 항목의 디자인을 설명하는 데 사용되는 코드와 유사한 구문을 나타냅니다. 코드로 실행시키려고 하면 작동하지 **않을 것입니다.**

같이 보기
-----

* 위키백과의 의사 코드


텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE) - MDN Web Docs 용어 사전: 웹 용어 정의

텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE)
=======================================================================

**텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE)** (**SMPTE**) 는 엔터테인먼트 미디어를 제작, 방송, 저장 및 제공하는 데 사용되는 표준과 기술을 개발하고 정의하는 엔지니어와 과학자의 전문 협회입니다.

예를 들어, SMPTE는 현대 디지털 영화관에서 쓰이는 디지털 영화에 사용되는 표준을 정의합니다.


전역 객체 - MDN Web Docs 용어 사전: 웹 용어 정의

전역 객체
=====

전역 객체는 전역 범위 에 항상 존재하는 객체 를 의미합니다.

JavaScript에선, 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서, 스크립트가 `var` 키워드를 통해 전역 변수를 생성할 때, 이 때 생성되는 변수들은 전역 객체의 멤버로서 생성됩니다. (이것은 Node.js 에서는 예외입니다). 전역 객체의 interface는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 예를 들어,

* 웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 `Window` 를 가집니다. 이것은 Web에 있는 JavaScript 코드의 상당수가 그렇습니다.
* `Worker` 에서 실행하는 코드는 그것의 전역 객체로서 `WorkerGlobalScope` (en-US) 를 가집니다.
* Node.js 환경에서 실행하는 스크립트에는 전역 객체로 `global`이라는 객체를 가집니다.

`globalThis` 전역 속성을 사용하면 현재 환경에 관계없이 전역 객체에 접근할 수 있습니다.

`var`문 및 상단의 함수 선언 전역 객체에서 만들어지는 속성입니다.

전역 객체의 속성은 global scope에 자동으로 추가됩니다.

JavaScript에서, 전역 객체는 항상 자신에 대한 참조를 가지고 있습니다.

브라우저 에서의 `window` 객체
--------------------

`window` 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는 `window` 객체의 프로퍼티로서 접근될 수 있습니다.

```js
console.log(globalThis === globalThis.globalThis); // true (모든 곳에서)
console.log(window === window.window); // true (브라우저에서)
console.log(self === self.self); // true (브라우저 또는 웹 워커에서)
console.log(frames === frames.frames); // true (브라우저에서)
console.log(global === global.global); // true (Node.js에서)
```

같이 보기
-----

* MDN Web Docs Glossary
    + 전역 범위
    + 객체
* `Window`
* `WorkerGlobalScope` (en-US)
* `global`


TCP 느린 시작 (TCP slow start) - MDN Web Docs 용어 사전: 웹 용어 정의

TCP 느린 시작 (TCP slow start)
==========================

TCP 느린 시작은 네트워크 성능에 대한 전송 속도를 높이는 데 도움이 됩니다. 처음에는 해당 기능이 무엇인지 알지 못하고 혼잡을 일으키지 않고 이 작업을 수행합니다. TCP 느린 시작은 패킷 전송에 사용 가능한 대역폭을 감지하고 네트워크 연결 속도의 균형을 맞추는 데 사용되는 알고리즘입니다. 초기에 기능을 알 수 없는 네트워크 혼잡 현상을 방지하고, 네트워크의 최대 용량을 찾을 때까지 확산되는 정보의 양을 천천히 늘립니다.

TCP 느린 시작을 구현하기 위해, 혼잡 창('cwnd')은 확인('ACK')을 수신하기 전에 소스가 네트워크를 통해 전송할 수 있는 데이터 양에 대한 상한을 설정합니다. 느린 시작 임계값('ssthresh')은 느린 시작의 (비)활성화를 결정합니다. 새로운 연결이 이루어지면 cwnd는 하나의 TCP 데이터 또는 확인 패킷으로 초기화되고 확인 또는 ACK를 기다립니다. 해당 ACK가 수신되면, 'cwnd'가 'ssthresh'보다 커질 때까지 혼잡 창이 증가됩니다. 혼잡이 발생하면 느린 시작도 종료됩니다.

혼잡 제어
-----

혼잡 자체는 메시지 트래픽이 너무 많아 네트워크 응답 시간이 느려질 때 네트워크 계층 내에서 발생하는 상태입니다. 서버는 TCP 패킷으로 데이터를 보내고, 사용자의 클라이언트는 확인 또는 ACK를 반환하여 전달을 확인합니다. 하드웨어 및 네트워크 상태에 따라 연결 용량이 제한됩니다. 서버가 너무 많은 패킷을 너무 빨리 보내면 해당 패킷이 삭제됩니다. 즉, 확인이 없을 것입니다. 서버는 이를 누락된 ACK로 등록합니다. 혼잡 제어 알고리즘은 전송된 패킷과 ACK의 흐름을 사용하여 전송 속도를 결정합니다.

같이 보기
-----

* 페이지 채우기: 브라우저 작동 방식
* http 개요


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

Card sorting
============

카드 정렬은 정보 아키텍처에서 사용되는 간단한 기술로, 웹 사이트(또는 다른 제품) 디자인에 참여한 사람들이 제품에 대해 느끼는 콘텐츠 / 서비스 / 기능을 작성하도록 초대됩니다. 제품이 해당 기능을 포함하고 카테고리나 그룹으로 이러한 기능들을 구성하고 있어야 합니다. 예를 들어, 웹사이트의 각 페이지에 어떤 내용이 들어가야 하는지 알아내는 데 사용할 수 있습니다. 이 용어의 이름은 카드 정렬이 문자 그대로 카드에 항목을 쓴 다음, 카드를 더미로 배열하여 수행되는 경우가 많다는 사실에서 유래되었습니다.

같이 보기
-----

* 위키백과의 카드 정렬


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

Localization
============

**현지화**(**l10n**)는 소프트웨어 사용자 인터페이스를 특정 문화에 적응시키는 과정입니다.

다음은 고려해야 할 일반적인 요인입니다.

* 언어
* 측정 단위 (e.g., 유럽에서 킬로미터, U.S.에서 마일)
* 텍스트 입력 방향 (e.g., 유럽 언어는 왼쪽에서 오른쪽, 아라비아 표기법 오른쪽에서 왼쪽으로 입력됨)
* 라틴 문자의 대문자 사용 (e.g., 영어는 평일에 대해서는 대문자를 사용하고, 스페인어는 소문자를 사용합니다).
* 관용어의 적응 (e.g., "Raining cats and dogs"는 문자 그대로 번역하면 의미가 없습니다).
* 레지스터의 사용 (e.g., 일본어에서 공손한 말투는 일상적인 말투와 유난히 다릅니다).
* 숫자 형식 (e.g., 독일이 10 000,00 vs U.S에서 10,000.00).
* 날짜 형식
* 통화
* 문화적 참고자료
* 종이 크기
* 색채심리학
* 현지 법규 준수
* 현지 공휴일
* 개인 이름
같이 보기
-----

* 위키피디아의 Localization


최초 의미있는 페인트 (First Meaningful Paint, FMP) - MDN Web Docs 용어 사전: 웹 용어 정의

최초 의미있는 페인트 (First Meaningful Paint, FMP)
=========================================

**최초 의미있는 페인트(FMP)** 이후에 웹 페이지 초기 렌더링 직후 기본 화면 레이아웃(above-the-fold)이 변경되고, 웹 글꼴이 로드됩니다. FMP 이후에 사용자는 웹 페이지를 유용하다고 느낄 수 있습니다.

FMP는 페이지 로드의 작은 차이에도 매우 민감합니다. 이로 인해 일관되지 않은(이중적인) 결과가 발생할 수 있습니다. 측정항목에 대한 정의는 브라우저 별 구현 세부정보에 의존합니다. 즉, 표준화할 수 없고 모든 웹 브라우저에서 구현되지 않았습니다.

**경고:** 최초 의미있는 페인트 (FMP)는 Lighthouse 6.0부터 지원되지 않습니다. 앞으로는 대신, LargestContentfulPaint API 사용을 고려해주세요.

같이 보기
-----

* 최초 콘텐트풀 페인트
* 최대 콘텐트풀 페인트


접근성 트리 - MDN Web Docs 용어 사전: 웹 용어 정의

접근성 트리
======

**접근성 트리**는 대부분의 HTML 요소에 대한 정보와 관련된 접근성을 포함합니다.

브라우저는 마크업을 DOM tree (en-US)로 불리는 내부적인 표현으로 전환시킵니다. DOM 트리는 모든 마크업의 요소, 특성, 텍스트 노드를 표현하는 객체들을 포함합니다. 그 다음 브라우저는 DOM 트리에 기반된 접근성 트리를 생성합니다. 이 트리는 플랫폼별 접근성 API에서 스크린 리더와 같은 보조 기술이 이해할 수 있는 표현을 제공하기 위해 사용됩니다.

접근성 트리 객체에는 4가지 속성들이 있습니다.

**이름**

이것을 어떻게 나타내야 합니까? 예를 들어, "더 읽기" 텍스트가 있는 링크는 "더 읽기"가 이름입니다. (이름들이 접근 가능한 이름과 설명 계산 사양에서 계산되는 방법에 대해 더 알아보기)

**설명**

이름 이상으로 더 많은 설명을 제공하고 싶으면, 이것을 어떻게 설명해야 합니까? 테이블의 설명은 테이블이 포함하는 정보의 종류로 설명할 수 있습니다.

**역할** (en-US)

이것의 종류는 무엇입니까? 예를 들어, 버튼, 탐색 모음 혹은 아이템들의 목록입니까?

**상태**

이것이 상태를 가집니까? 예제들로 선택 또는 선택 해제된 체크박스, 접기 또는 확장된 `<summary>` (en-US) 요소를 포함합니다.

추가적으로, 접근성 트리는 주로 요소와 함께 수행될 수 있는 것에 대한 정보를 포함합니다. 링크를 '추적'하거나 텍스트 인풋을 '입력'할 수 있습니다.

2022년 4월 기준 아직은 초안 형태이나 웹 인큐베이터 커뮤니티 그룹(Web Incubator Community Group)에서 접근성 시멘틱들을 더 쉽게 표현하고 계산된 접근성 트리에 읽기 접근을 허용하는 API들을 만들어내기 위한 **접근성 객체 모델 (AOM)** 도 있습니다.

같이 보기
-----

* 용어 사전
    + 접근성
    + ARIA


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

Brotli
======

**Brotli**은 범용 무손실 압축 알고리즘입니다.

LZ77 알고리즘의 최신 변형, 허프만 코딩 및 2차 컨텍스트 모델링을 결합하여 데이터를 압축하며, 현재 사용 가능한 최고의 범용 압축 방법과 비교할 수 있는 압축 비율을 제공합니다. Brotli는 gzip보다 더 나은 압축 비율을 제공하며 압축하는 데 드는 속도는 비슷하지만, brotli 압축은 Gzip 압축보다 느린 과정이므로, gzip이 캐시 가능한 컨텐츠를 압축하는 데 있어서 더 나은 옵션일 수 있습니다.

Brotli은 대부분의 최신 브라우저와 호환되지만, 대안을 고려할 수도 있습니다.

같이 보기
-----

* brotli.org
* Brotli GitHub 리포지토리
* Brotli on Wikipedia
* Caniuse의 Brotli


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

Grid Axis
=========

CSS 그리드 레이아웃은 '행' 및 '열' 방향의 콘텐츠 레이아웃을 가능하게 하는 2차원 레이아웃을 표시하는 방법입니다. 따라서, 모든 그리드에는 '블록 또는 열 방향의 축' 또는 '인라인 또는 행 방향의 축'이라는 2개의 축이 있습니다.

이러한 축을 따라 상자 정렬 명세서 (en-US)에 정의된 속성을 사용하여 항목을 정렬하고 맞출 수 있습니다.

CSS에서 '블록 또는 열 방향의 축'은 텍스트 블록을 배치할 때 사용되는 축입니다. 두 개의 단락이 있고, 오른쪽에서 왼쪽으로, 위에서 아래로 흐르는 언어 방향으로 작업하는 경우 , 블록 축에서 하나가 다른 단락 아래에 배치됩니다.

![CSS 그리드 레이아웃의 블록 축을 보여주는 다이어그램](/ko/docs/Glossary/Grid_Axis/7_block_axis.png)

'인라인 또는 행 방향의 축'은 블록 축을 가로질러 실행되며 일반 텍스트가 흐르는 방향입니다. 이것은 CSS 그리드 레이아웃의 행입니다.

![CSS 그리드 레이아웃의 인라인 축을 보여주는 다이어그램](/ko/docs/Glossary/Grid_Axis/7_inline_axis.png)

이러한 축의 물리적 방향은 문서의 쓰기 모드 (en-US)에 따라 변경될 수 있습니다.

같이 보기
-----

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 기본 개념
* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 상자 정렬 (en-US)
* CSS 그리드 레이아웃 안내서: 그리드, 논리값 및 쓰기 모드 (en-US)


값 (Value) - MDN Web Docs 용어 사전: 웹 용어 정의

값 (Value)
=========

데이터 또는 해당 데이터 주변의 객체 **래퍼** 맥락에서, 값은 객체 래퍼에 포함된 **기본 값** 입니다. **변수** 또는 **속성** 맥락에서, 값은 기본 값이거나 **객체 참조** 일 수 있습니다.

CSS 속성 값의 맥락에는, 지정된 값, 계산된 값, 실제 값이 있습니다. 모든 요소와 의사 요소에 적용되는 모든 CSS 속성의 최종 값은 4단계를 통한 계산의 결과입니다. 이 값은 명세서(지정된 값)를 통해 결정된 다음, 상속에 사용되는 값(계산된 값)으로 해석됩니다. 그 후에 필요한 경우 절대값(사용된 값)으로 변환되고, 최종적으로 로컬 환경(실제 값 (en-US))의 제한에 따라 변환됩니다.

CSS 데이터 타입은 CSS 값 및 단위를 참조하세요.

같이 보기
-----

* 위키백과의 원시 래퍼 클래스


General 헤더 - MDN Web Docs 용어 사전: 웹 용어 정의

General 헤더
==========

**General 헤더**는 HTTP 헤더를 가리키는 데 사용되는 구식 용어로, 요청 메시지와 응답 메시지 모두에 사용할 수 있지만 콘텐츠 자체에는 적용되지 않습니다(콘텐츠에 적용된 헤더는 entity header라고 했습니다). 헤더가 사용되고 있는 컨텍스트에 따라, general 헤더는 response 또는 request 헤더일 수 입니다(e.g. `Cache-Control`).

**참고:** 현재 버전의 HTTP/1.1 명세에서는 헤더를 "일반 헤더"로 구체적으로 분류하지 않습니다. 이제 컨텍스트에 따라 간단히 response 또는 request 헤더라고 합니다.


가변 벡터 도형 (SVG) - MDN Web Docs 용어 사전: 웹 용어 정의

가변 벡터 도형 (SVG)
==============

*Scalable Vector Graphics* (**SVG**)는 XML 신텍스에 기반을 둔 2D 벡터 이미지 형식(포맷)이다.

W3C는 1990년 후반부터 SVG를 사용하기 시작했지만, SVG를 지원하는 Internet Explorer 9가 출시된 후에야 널리 사용되기 시작했다. 현재 주요 웹브라우저(browsers)들은 SVG를 지원한다.

XML 신텍스를 기반으로 한 SVG는 CSS를 통해 스타일 처리가 가능하고, JavaScript(JavaScript)를 사용해 상호소통이 가능하다. 현재 HTML5는 SVGtags가 HTML문서에서 직접 사용 되도록 지원한다.

벡터 이미지 형식 (vector image format)으로써, SVG 그래픽은 무한정적인 크기를 가질 수 있고, 이러한 점 때문에 어떠한 화면 크기에도 적용 가능한 인터페이스 요소와 그래픽을 만들 수 있어 반응형 디자인(responsive design (en-US)) 에서 아주 유용하게 여겨진다. 또한 SVG는 클리핑(clipping), 마스킹(masking), 필터(filter), 애니매이션(animation) 등 여러가지 유용한 툴 셋들을 제공한다.

더보기
---

### 일반 상식

* SVG 위키피디아
### SVG 배우기

* W3.org's SVG Primer
### 기술 정보

* SVG documentation on MDN
* Latest SVG specification


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

주축
==

플렉스박스에서, 주축이란 `flex-direction` 속성이 지정한 방향과 수평한 축입니다. `flex-direction`은 다음과 같은 네 가지 방향이 가능합니다.

* `row`
* `row-reverse`
* `column`
* `column-reverse`

`row` 또는 `row-reverse`를 선택한 경우, 주축은 행을 따라 인라인 방향으로 진행합니다.

![이 이미지에서 flex-direction is 행을 주축을 형성하는 행입니다](/ko/docs/Glossary/Main_Axis/basics1.png)

`column` 또는 `column-reverse`인 경우, 주축은 페이지의 위에서 아래, 블록 방향으로 진행합니다.

![컨테이너의 전체 너비를 차지하는 3개의 플렉스 항목이 코드 순서대로 다른 항목 아래에 표시됩니다. Flex-direction은 열로 설정됩니다(주축은 수직, 즉, 위에서 아래로)](/ko/docs/Glossary/Main_Axis/basics2.png)

아이템의 `flex` 속성을 통하면, 컨테이너의 사용 가능한 공간을 그 아이템에 더 할당하는 방식으로 주축 방향 크기를 키울 수 있습니다. 아니면 `justify-content` 속성을 사용해 아이템 사이와 주위 여백을 조절할 수 있습니다.

주 축에서는 항목의 `flex` 속성을 통해 항목 자체에 사용 가능한 공간을 추가하여 플렉스 항목의 크기를 제어할 수 있습니다. 또는, `justify-content` 속성을 사용하여 항목 사이와 항목 주위의 공간을 제어할 수 있습니다.

같이 보기
-----

### 속성 참고서

* `flex-basis`
* `flex-direction`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `flex`
### 더 읽어보기

* CSS Flexbox Guide
    + Flexbox 기본 개념
    + flex container의 항목 배치
    + 주 축을 따라 flex 항목의 비율 제어하기 (en-US)


보안 컨텍스트 (Secure Context) - MDN Web Docs 용어 사전: 웹 용어 정의

보안 컨텍스트 (Secure Context)
========================

**보안 컨텍스트(secure context)** 는 특정 최소 인증 및 기밀 표준이 충족되는 `Window` 또는 `Worker` 입니다. 많은 웹 API 및 기능은 보안 컨텍스트에서만 접근할 수 있으므로 악성 코드에 의한 오용 가능성이 줄어듭니다.

자세한 정보는 Web > Security > Secure Contexts을 참조하세요.


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

DSL
===

**DSL**라는 용어는 상황에 따라 여러가지 의미를 가질 수 있습니다. 다음을 참조하세요.

도메인 특화 언어 (Domain-Specific Language, DSL)
\*\*도메인 특화 언어 (DSL)\*\*은 응용 프로그램 도메인 내의 특정 문제를 해결하도록 설계된, 제한된 범위의 컴퓨터 언어 유형입니다.
디지털 가입자 회선 (Digital Subscriber Line, DSL)
**디지털 가입자 회선**은 전화선을 통해 유선 데이터 전송을 보내는 광대역 인터넷 연결 유형입니다.
같이 보기
-----

* 위키백과의 DSL


도메인 (Domain) - MDN Web Docs 용어 사전: 웹 용어 정의

도메인 (Domain)
============

도메인은 자체 리소스를 제어하는 인터넷 내의 권한입니다. '도메인 네임'은 URL 계층 구조의 일부로 이 권한을 지정하는 방법입니다. 일반적으로, 브랜드 이름처럼 가장 기억에 남는 부분입니다.

정규화된 도메인 이름(Fully Qualified Domain Name, FQDN)에는 인터넷의 DNS 시스템을 사용하여 이름별로 이 권한을 명확하게 검색하는 데 필요한 모든 부분이 포함되어 있습니다.

예를 들어, "developer.mozilla.org"에서,

1. 'org'는 최상위 도메인으로 불려집니다. 최상위 도메인은 IANA에 의해 인터넷 표준으로 등록되어 있습니다. 여기서, 'org'는 최상위 '도메인 레지스트리'에 정의된 '조직'을 의미합니다.
2. 'mozilla'는 도메인입니다. 도메인을 소유하고 싶다면 최상위 도메인 등록 기관에 등록할 수 있는 여러 등록 기관 중 하나에 등록해야 합니다.
3. '개발자'는 '하위 도메인'으로, 도메인 소유자로서 우리가 직접 정의할 수 있습니다. 많은 소유자는 자신의 월드 와이드 웹 리소스를 가리키기 위해 하위 도메인 'www'를 선택하지만, 이 방법은 필수는 아닙니다(다소 선호도도 떨어졌습니다).
같이 보기
-----

* 위키백과의 도메인 네임


호스트 (Host) - MDN Web Docs 용어 사전: 웹 용어 정의

호스트 (Host)
==========

호스트는 인터넷 (또는 로컬 네트워크)에 연결된 장치입니다. 서버라는 일부 호스트는 웹페이지 제공, 파일 및 이메일 저장과 같은 추가 서비스를 제공합니다.

호스트는 하드웨어 인스턴스일 필요는 없습니다. 호스트는 가상머신에 의해 생성될 수 있습니다. 가상 머신에 의해 생성된 호스트를 '가상 호스팅'이라고 합니다.

같이 보기
-----

* 위키백과의 호스트


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

Hyperlink
=========

하이퍼링크는 웹 페이지 또는 데이터 항목을 서로 연결합니다. HTML에서 `<a>`요소는 웹페이지의 한 지점(예: 텍스트 문자열 또는 이미지)에서 다른 웹페이지(또는 동일한 페이지)의 다른 지점으로 연결되는 하이퍼링크를 정의합니다.

같이 보기
-----

* Wikipedia Hyperlink
* MDN 가이드 하이퍼링크
* Links in HTML Documents - W3C
* HTML a - hyperlink - W3C
* `<a>` on MDN
* `<link>` on MDN


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

Character encoding
==================

인코딩은 바이트와 텍스트 간의 매핑을 정의합니다. 바이트 시퀀스는 다양한 텍스트 해석을 허용합니다. 특정 인코딩(예를 들면 UTF-8 등)을 지정함으로써, 바이트 시퀀스를 해석하는 방법을 지정합니다.

예를 들어, HTML에서 우리는 일반적으로 아래 줄과 같이 UTF-8의 문자 인코딩을 선언합니다.

```html
<meta charset="utf-8" />
```

이 방법은 HTML 문서에서 인간 언어의 문자를 사용할 수 있도록 보장하며, 그것들은 신뢰성 있게 표시될 것입니다.

같이 보기
-----

* Character encoding on W3C
* Wikipedia의 Character encoding


자리 표시자 이름 (Placeholder names) - MDN Web Docs 용어 사전: 웹 용어 정의

자리 표시자 이름 (Placeholder names)
=============================

자리 표시자 이름(placeholder names)은 "당사자 A(Party A)", "도청자(eavesdropper)" 및 "악의적인 공격자(malicious attacker)"와 같은 용어를 사용하지 않고, 대화 참가자를 나타내기 위해 암호학에서 일반적으로 사용됩니다.

가장 일반적으로 사용되는 이름은 아래와 같습니다.

* *Alice* 및 *Bob*, 서로에게 메시지를 보내고 싶은 두 당사자, 때때로 세 번째 참가자인 *Carol*이 합류합니다.
* *Eve*, *Alice*와 *Bob*의 대화를 도청하는 수동적 공격자
* *Mallory*, 대화를 수정하고 오래된 메시지를 재생할 수 있는 적극적인 공격자(중간자, *man-in-the-middle*)


재전송 공격 (Replay attack) - MDN Web Docs 용어 사전: 웹 용어 정의

재전송 공격 (Replay attack)
======================

웹 보안에서, '재전송 공격 (Replay attack)'은 공격자가 이전에 전송된 메시지를 가로채서 나중에 다시 전송하여 원래의 메시지와 동일한 자격 증명을 얻을 때 발생하며, 잠재적으로 다른 페이로드나 명령이 포함되어 있는 메시지를 다시 보내 공격하는 것을 의미합니다.

수신자가 전송의 신뢰성을 확인하는 데 사용 가능한 고유하고 일회성의 식별자를 각 메시지에 포함시키고 있으면 재생 공격을 방지할 수 있습니다. 이 식별자는 세션 토큰 또는 '한 번만 사용되는 숫자(number used only once, nonce)' 형식을 가질 수 있습니다.

같이 보기
-----

* 위키백과의 Replay attack


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

CDN
===

CDN (Content Delivery Network)는 많은 장소에 걸쳐 분산된 서버들의 그룹입니다. 이러한 서버들은 데이터의 중복 복사본들을 저장하여, 서버가 최종 사용자와 가장 가까운 서버를 기준으로 데이터 요청을 처리할 수 있습니다. CDN은 높은 트래픽에도 영향을 덜 받는 빠른 서비스를 제공할 수 있습니다.

CDN은 Bootstrap, jQuery 같은 라이브러리들의 스타일시트 및 JavaScript 파일(정적 애셋)을 전송하는데 널리 쓰입니다. 라이브러리 파일을 위해 CDN을 사용하는 것이 선호되는 이유는 여러 가지가 있습니다.

* CDN을 통해서 라이브러리의 정적 애셋을 제공하면 라이브러리의 자체 서버에 요청 부담이 줄어듭니다.
* 대부분의 CDN들은 전 세계에 서버를 가지고 있습니다. 따라서 CDN 서버들은 지리학적으로 특정 라이브러리의 서버보다 사용자와 더 가깝습니다. 지리학적 거리는 지연시간에 비례하여 영향을 미칩니다.
* CDN들은 이미 적절한 캐시 설정이 되어있습니다. CDN을 사용하면 자체 서버의 정적 애셋을 위한 추가적인 설정을 하지 않아도 됩니다.


세션 하이재킹 (Session Hijacking) - MDN Web Docs 용어 사전: 웹 용어 정의

세션 하이재킹 (Session Hijacking)
===========================

**세션 하이재킹 (Session Hijacking)** 은 공격자가 두 컴퓨터 간의 유효한 세션을 장악할 때 발생합니다. 공격자는 시스템에 침입하여 데이터를 스누핑하기 위해 유효한 세션 ID를 훔칩니다.

대부분의 인증은 TCP 세션이 시작될 때만 발생합니다. TCP 세션 하이재킹에서는, 공격자가 세션 중간에 두 시스템 간의 TCP 세션을 장악하여 접근 권한을 획득합니다.

![공격자는 웹 서버와 상호 작용하는 사용자로부터 합법적인 세션 ID를 스니핑하고 접근한 다음, 해당 세션 식별자를 사용하여 일반 사용자와 서버 간의 세션을 스푸핑하여, 사용자의 세션을 익스플로잇(취약점 공격)을 실행하고 서버에 직접 접근합니다](/ko/docs/Glossary/Session_Hijacking/session_hijacking_3.jpg)

### 세션 하이재킹이 발생하는 이유는 아래와 같습니다

* 유효하지 않은 세션 ID에 대한 계정 잠금이 없습니다.
* 취약한 세션 ID 생성 알고리즘
* 안전하지 않은 취급
* 무기한 세션 만료 시간
* 짦은 세션 ID
* 일반 텍스트로 전송
### 세션 하이재킹 과정

1. **스니프(Sniff):** 중간자(man-in-the-middle, MITM) 공격을 수행합니다. 공격받는 컴퓨터와 서버 사이의 자기 자신을 위치시킵니다.
2. **모니터링(Monitor):** 서버와 사용자 사이에 흐르는 패킷을 관찰합니다.
3. **차단(Break):** 공격받는 컴퓨터의 연결을 종료시킵니다.
4. **제어(Take control):** 세션을 제어합니다.
5. **주입(Inject):** 공격받는 컴퓨터의 세션 ID를 사용하여 서버에 새로운 패킷을 주입합니다.
### 세션 하이재킹으로부터의 보호

* 보안 쉘(SSH)을 사용하여 보안 통신 채널을 생성합니다.
* HTTPS 연결을 통해 인증 쿠키를 전달합니다.
* 사용자가 세션을 종료할 수 있도록 로그아웃 기능을 구현합니다.
* 로그인 성공 후 세션 ID를 생성합니다.
* 사용자와 웹 서버 간에 암호화된 데이터를 전달합니다.
* 문자열이나 길이가 긴 난수를 세션 키로 사용합니다.
같이 보기
-----

* 위키백과의 세션 하이재킹


그리드 컨테이너 (Grid container) - MDN Web Docs 용어 사전: 웹 용어 정의

그리드 컨테이너 (Grid container)
=========================

요소에 `grid` 또는 `inline-grid` 값을 사용하면 해당 요소가 CSS 그리드 레이아웃을 사용하여 **그리드 컨테이너**로 변환되고, 바로 밑의 모든 자식 요소도 그리드 요소가 됩니다.

요소가 그리드 컨테이너가 되면 **그리드 서식 지정 컨텍스트**가 설정됩니다. 바로 밑의 자식 요소는 이제 `grid-template-columns` 및 `grid-template-rows` (en-US)를 사용하여 정의된 명시적 그리드 또는 요소가 '명시적 그리드' 외부에 배치될 때 생성된 '암시적 그리드'에 배치될 수 있습니다.

같이 보기
-----

### 속성 참고서

* `grid-template-columns`
* `grid-template-rows` (en-US)
* `grid-auto-columns` (en-US)
* `grid-auto-rows` (en-US)
* `grid` (en-US)
* `grid-template` (en-US)
### 더 읽어보기

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 기본 개념


뷰포트 - MDN Web Docs 용어 사전: 웹 용어 정의

뷰포트
===

컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역입니다. 웹 브라우저에서는, 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면 전체)을 말합니다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.

뷰포트 중에서도 지금 볼 수 있는 부분을 \*\*시각적 뷰포트\*\*라고 부릅니다. 사용자가 두 손가락으로 대상을 확대 및 축소하는 동작과 같은 특정 상황에서, 레이아웃 뷰포트의 크기는 변하지 않지만 시각적 뷰포트는 더 작아집니다.

같이 보기
-----

* 시각적 뷰포트 API (en-US)
* 위키백과 뷰포트 (컴퓨터 과학)
* 두 가지의 뷰포트 이야기 (호환모드)
* MDN 용어 사전의 Visual viewport
* MDN 용어 사전의 Layout viewport


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

SDP
===

**세션 기술 프로토콜 (Session Description Protocol, SDP)** 은 피어 투 피어(peer-to-peer) (en-US) 연결을 설명하는 표준입니다. SDP에는 오디오 및 비디오의 코덱, 소스 주소, 타이밍 정보가 포함되어 있습니다.

아래는 일반적인 SDP 메시지입니다.
```

v=0
o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
s=
c=IN IP4 host.anywhere.com
t=0 0
m=audio 49170 RTP/AVP 0
a=rtpmap:0 PCMU/8000
m=video 51372 RTP/AVP 31
a=rtpmap:31 H261/90000
m=video 53000 RTP/AVP 32
a=rtpmap:32 MPV/90000
```

SDP는 단독으로 사용되지 않으며, RTP and RTSP와 같은 프로토콜에 의해 사용됩니다. SDP는 세션을 설명하는 방법으로, SDP를 사용하는 WebRTC의 구성요소이기도 합니다.

같이 보기
-----

* WebRTC 프로토콜
* 위키백과의 세션 기술 프로토콜


그리드 (Grid) - MDN Web Docs 용어 사전: 웹 용어 정의

그리드 (Grid)
==========

'CSS 그리드(grid)'는 `display` (en-US) 속성의 `grid` 값을 사용하여 정의됩니다. `grid-template-rows` (en-US) 및 `grid-template-columns` 속성을 사용하여 그리드의 열과 행을 정의할 수 있습니다.

이러한 속성을 사용해 정의하는 그리드는 '명시적 그리드'라고 할 수 있습니다.

이 명시적 그리드 외부에 콘텐츠를 배치하거나 자동 배치에 의존하고 그리드 알고리즘이 그리드 요소들을 보관하기 위해 추가 행 또는 열 트랙을 생성해야 하는 경우, 그러면 암시적 그리드에 추가 트랙이 생성됩니다.'암시적 그리드'는 정의된 트랙 외부에 추가되는 콘텐츠로 인해 자동으로 생성되는 그리드입니다.

아래 예제에서는 3개의 열과 2개의 행으로 구성된 '명시적 그리드'를 만들었습니다. 그리드의 '세 번째' 행은 '암시적 그리드' 행 트랙으로, 명시적 트랙을 채우는 6개 항목보다 많기 때문에 형성됩니다.

예제
--
```

\* {
  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: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>
```

같이 보기
-----

* 그리드 레이아웃의 기본 개념
* 속성 참고서
    + `grid-template-columns`
    + `grid-template-rows` (en-US)
    + `grid` (en-US)
    + `grid-template` (en-US)


CSS 객체 모델 (CSS Object Model, CSSOM) - MDN Web Docs 용어 사전: 웹 용어 정의

CSS 객체 모델 (CSS Object Model, CSSOM)
===================================

**CSS 객체 모델 (CSS Object Model, CSSOM)**은 문서의 스타일 관련 (CSS) 정보를 읽고 수정하기 위한 API 세트입니다. 즉, DOM을 사용해 JavaScript에서 문서의 구조와 내용을 읽고 수정할 수 있는 방식과 비슷하게, CSSOM을 사용하여 JavaScript에서 문서의 스타일을 읽고 수정할 수 있습니다.

같이 보기
-----

* 페이지 채우기: 브라우저 작동 방식


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

NaN
===

NaN (Not a Number, 숫자가 아님)은 정의되지 않은 값 또는 표현할 수 없는 값, 특히 부동 소수점 계산 결과를 의미하는 숫자 데이터 타입입니다.

예를 들어, NaN는 무한대, 0으로 나눈 결과, 누락된 값 또는 음수의 제곱근(허수지만, 부동 소수점 숫자는 실수입니다)을 나타낼 수 있습니다.

실제로는, JavaScript 프로그램에서 두 개의 변수를 나누면, 결과는 NaN이 될 수 있고, JavaScript에서 "undefined"로 미리 정의되어 있습니다. 따라서 이 나누기로 인해 프로그램이 중단될 수 있습니다. 이제, 이 계산이 훨씬 더 큰 알고리즘의 작은 부분이라면, 실제로 오류가 발생한 위치를 파악하는 것은 정말 힘들 것입니다. 운이 좋게도, 결과는 NaN이고 나누는 수가 0이 될 수 있다는 것을 알고 있기 때문에, 먼저 이런 계산을 방지하거나 어디서 발생하는지 알려주는 테스트 조건을 설정할 수 있습니다.

같이 보기
-----

* 위키백과의 NaN
* JavaScript의 NaN


웹 분산 저작 및 버전 관리 (Web Distributed Authoring and Versioning, WebDAV) - MDN Web Docs 용어 사전: 웹 용어 정의

웹 분산 저작 및 버전 관리 (Web Distributed Authoring and Versioning, WebDAV)
==================================================================

**웹 분산 저작 및 버전 관리(Web Distributed Authoring and Versioning, WebDAV)** 는 웹 개발자가 클라이언트에서 원격으로 콘텐츠를 갱신할 수 있게 해주는 HTTP 확장 프로그램입니다.

WebDAV는 단독으로 사용되는 경우가 거의 없지만, CalDAV (원격 접근 달력) 및 CardDAV (원격 접근 주소록)이라는 두 가지 확장이 매우 일반적으로 사용됩니다.

WebDAV를 사용하면 클라이언트가 아래를 수행할 수 있습니다.

* 웹페이지 메타데이터(예, 작성자 또는 생성 날짜) 추가, 삭제 및 검색
* 모든 미디어 타입의 페이지를 관련 페이지에 연결
* 문서 세트를 생성하고 계층적으로 목록을 검색
* 웹페이지 복사 및 이동
* 한 번에 두 명 이상이 문서를 편집하지 못하도록 잠금
같이 보기
-----

* 위키백과의 WebDAV
* 명세서:
    + RFC 2518
    + RFC 3253
    + RFC 3744


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

XLink
=====

XLink는 XML과 XML 또는 기타 문서 간의 링크를 설명하는 데 사용되는 W3C 표준입니다. 처리 방법을 결정하기 위해 일부 동작은 구현에 달려있습니다.

단순 XLink는 Firefox(적어도 SVG 및 MathML에서) 지원되지만, XLink가 포함된 일반 XML 문서를 로드하고 XML 트리에서 관련 포인트를 클릭하려고 하면 링크로 작동하지 않습니다.

XLink 1.0이 일반 링크에 대해 번거롭다고 생각하는 사람들을 위해, XLink 1.1에서 단순 링크에 `xlink:type="simple"`을 지정할 필요가 없어졌습니다.

XLink는 SVG, MathML 및 기타 중요한 표준에서 사용됩니다.

### 명세서

* XLink 1.0
* XLink 1.1 (현재 초안입니다)
### 같이 보기

* XML
* Code snippets:getAttributeNS (en-US) - 이 DOM 메서드를 지원하지 않는 일부 브라우저를 처리하기 위한 래퍼


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

WebGL
=====

**WebGL** ('Web Graphics Library')은 인터랙티브한 2D/3D 그래픽을 그리는 JavaScript API입니다.

Khronos 그룹에서 OpenGL ES 2.0에 기반한 WebGL을 관리하고 있습니다.

렌더링 표면을 제공하는 HTML `<canvas>` 요소 내부에서 WebGL을 사용할 수 있습니다.

현재 모든 주요 browsers가 WebGL을 지원하지만, 사용 가능 여부는 외부 요인(예. GPU 지원)에 의해 달라질 수 있습니다.

같이 보기
-----

* 위키백과의 WebGL
* WebGL 지원 확인
* MDN의 WebGL
* WebGL 지원 표


구문 오류 (Syntax error) - MDN Web Docs 용어 사전: 웹 용어 정의

구문 오류 (Syntax error)
====================

미리 정의된 구문을 잘못 사용하여 발생한 예외입니다. 소스 코드를 컴파일하거나 구문 분석하는 동안 구문 오류가 감지됩니다.

예를 들어, JavaScript 함수를 정의할 때 닫는 중괄호(`}`)를 생략하면, 구문 오류가 발생합니다. 브라우저 개발자 도구에는 콘솔에 JavaScript 및 CSS 구문 오류를 표시합니다.

같이 보기
-----

* 위키백과의 구문 오류
* `SyntaxError` JavaScript 객체


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

RSS
===

**RSS** (Really Simple Syndication)는 사이트 업데이트를 게시하기 위해 설계된 여러 XML 문서 형식을 나타냅니다. 웹 사이트의 RSS 피드에 구독하면, 웹 사이트는 피드(feed)라는 RSS 문서로 정보 및 업데이트를 RSS 리더로 보내므로 즐겨찾는 모든 웹 사이트를 수동으로 확인할 필요가 없습니다.

같이 보기
-----

* 위키백과의 RSS
* 최신 명세


Simple response header - MDN Web Docs 용어 사전: 웹 용어 정의

Simple response header
======================

CORS-safelisted response header에 포함된 이전에 사용된 용어입니다.


Accent (악센트) - MDN Web Docs 용어 사전: 웹 용어 정의

Accent (악센트)
============

**악센트**는 일반적으로 색 구성표 내에서 보다 실용적인 배경 및 전경 색과 대조되는 밝은 색입니다. 이는 전부는 아니지만 많은 플랫폼의 시각적 스타일에서 존재합니다.

웹에서는 `<input>` (en-US) 요소의 컨트롤의 활성에 대해 악센트가 사용되는 경우가 있고, 그 예로 체크박스의 체크된 배경이 있습니다.

같이 보기
-----

### 악센트 관련 CSS

요소의 CSS `accent-color` (en-US) 속성을 적절한 `<color>` 값으로 설정하여 지정된 요소의 악센트 색상을 설정할 수 있습니다.


메타데이터 - MDN Web Docs 용어 사전: 웹 용어 정의

메타데이터
=====

**메타데이터**의 가장 단순한 정의는 데이터를 설명하는 데이터입니다. 예를 들어, HTML은 데이터입니다. 그리고 HTML의 `<head>` 안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터, 즉 메타데이터를 넣을 수 있습니다.

같이 보기
-----

* 학습: metadata 배우기
* 위키백과 메타데이터
* MDN의 `<meta>` 요소 문서


식별자 - MDN Web Docs 용어 사전: 웹 용어 정의

식별자
===

**식별자**는 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열입니다.

JavaScript에서, 식별자는 대소문자를 구별하며 유니코드 글자, `$`, `_`, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없습니다.

식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다.

같이 보기
-----

* 위키피디아의 식별자
* Glossary
    + Identifier
    + Scope
    + string
    + Unicode


전역 변수 (Global variable) - MDN Web Docs 용어 사전: 웹 용어 정의

전역 변수 (Global variable)
=======================

전역 변수는 전역 범위에 선언된 변수입니다. 즉, 다른 모든 범위에서 볼 수 있는 변수입니다.

JavaScript에서는 전역 객체의 속성입니다.

같이 보기
-----

* 위키백과의 전역 변수


핑거프린팅 (Fingerprinting) - MDN Web Docs 용어 사전: 웹 용어 정의

핑거프린팅 (Fingerprinting)
======================

**핑거프린팅(Fingerprinting)** 은 브라우저와 기본 운영체제의 고유한 기능을 수집하고 결합하여, 웹사이트에서 특정 브라우저(더 나아가 특정 사용자)를 식별하는 방식입니다. 핑거프린팅에는 아래가 포함될 수 있습니다.

* 브라우저 버전
* 시간대 및 선호하는 언어
* 시스템에서 사용할 수 있는 비디오 또는 오디오 코덱 세트
* 시스템에 설치된 글꼴
* 브라우저 설정 상태
* 컴퓨터의 디스플레이 크기 및 해상도

웹사이트는 기기에서 JavaScript와 CSS를 실행하여 이와 같은 위와 같은 정보를 검색할 수 있으며, 이 데이터를 결합하여 브라우저에 대한 고유한 핑거프린팅을 생성할 수 있으며, 이는 웹에서 사용자를 추적하는 데 사용될 수 있습니다.

웹 표준은 식별 정보를 수집하는 웹 사이트의 기능을 최소화하는 방식으로 설계되었으며, 브라우저는 일반적으로 자체 보호 기능도 추가합니다.

같이 보기
-----

* 웹사이트가 귀하의 브라우저를 지문 인식하는 데 사용할 수 있는 데이터를 표시하는 도구인 Cover Your Tracks
* 핑거프린팅을 방지하기 위한 명세서 작성자의 모범 사례인 웹 명세서에서 브라우저 핑거프린팅 완화


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

QUIC
====

**QUIC**은 UDP 상에 구현된 다중 전송 프로토콜입니다. HTTP/3의 전송 계층으로 TCP 대신 사용됩니다.

QUIC는 HTTP 연결에 대해 보다 빠른 설정과 낮은 대기 시간을 제공하도록 설계되었습니다.

* TCP에서는, 초기 TCP 핸드셰이크 뒤에 선택적으로 TLS 핸드셰이크가 따라옵니다. 이는 데이터가 전송되기 전에 완료되어야 합니다. 이제 TLS 거의 어디에나 존재하므로, QUIC는 TLS 핸드셰이크를 초기 QUIC 핸드셰이크에 통합하여 설정 중에 교환해야 하는 메시지 수를 줄입니다.
* HTTP/2는 다중화 프로토콜로, 여러 개의 동시 HTTP 트랜잭션을 허용합니다. 그러나 트랜잭션은 단일 TCP 연결을 통해 다중화됩니다. 즉, TCP 계층에서의 패킷 손실 및 후속 재전송으로 인해 모든 트랜잭션이 차단될 수 있습니다. QUIC는 UDP를 통해 실행하고 각 스트림에 대해 별도로 패킷 손실 감지 및 재전송을 구현하여 이를 방지합니다. 즉, 패킷 손실은 패킷이 손실된 특정 스트림만 차단한다는 의미입니다.
같이 보기
-----

* RFC 9000: the QUIC 명세
* RFC 9114: the HTTP/3 명세


DOS 공격 (DoS attack) - MDN Web Docs 용어 사전: 웹 용어 정의

DOS 공격 (DoS attack)
===================

DoS (서비스 거부)는 서버에 요청이 너무 많이 들어와 서버 리소스의 합법적인 사용을 방해하는 네트워크 공격입니다.

컴퓨터에는 계산 능력이나 메모리와 같은 제한된 리소스가 있습니다. 제한된 리소스들이 모두 소모되면, 프로그램이 정지되거나 충돌하여 사용할 수 없게 될 수 있습니다. DoS 공격은 이러한 리소스를 소모시키고 합법적인 사용자가 서버나 네트워크를 이용할 수 없게 만들거나, 최소한 서버 성능 하락을 가져오는 다양한 기술로 이루어져 있습니다.

공격을 받는 컴퓨터의 계산 용량을 소진시키기 위해 다수의 서버를 사용하는 분산 서비스 거부 공격(Distributed Denial of Service, DDoS)도 있습니다.

### DoS 공격의 종류

DoS 공격은 특정 종류의 공격이라기 보단, 하나의 범주에 가깝습니다. 다음은 DoS 공격 유형의 대략적인 목록입니다.

* 대역폭 공격
* 서비스 요청 폭주
* SYN 플러딩 공격
* ICMP 플러드 공격
* peer-to-peer(P2P) 공격
* 영구적인 DoS 공격
* 애플리케이션 레벨 플러드 공격
같이 보기
-----

* 위키백과의 서비스 거부 공격
* OWASP의 서비스 거부
* DDoS


암호 (Cipher) - MDN Web Docs 용어 사전: 웹 용어 정의

암호 (Cipher)
===========

암호학에서, **암호**는 평문을 읽을 수 없게 암호화하고, 다시 복호화할 수 있는 알고리즘입니다.

암호는 정보화 시대 이전부터 널리 사용되었습니다 (예, 대체 암호, 전치 암호 및 순열 암호), 일회용 패드를 제외하고는 그 어느 것도 암호학적으로 안전하지 않았습니다.

최신 암호는 암호해석을 통해 발견한 공격을 견딜 수 있도록 설계되었습니다. 모든 공격 방법이 발견되었다는 보장은 아니지만, 각 알고리즘은 알려진 공격 클래스를 기준으로 판단됩니다.

암호는 데이터의 연속 블록 또는 버퍼에 대한 블록 암호 또는 연속적인 데이터 흐름(주로 소리와 영상)의 스트림 암호의 두 가지 방식으로 작동합니다.

또한, 키 처리 방법에 따라 분류됩니다.

* 대칭 키 알고리즘은 동일한 키를 사용하여 메시지를 암호화 및 복호화합니다. 또한 메시지를 기밀로 유지하려면 키를 안전하게 전송해야 합니다.
* 비대칭 키 알고리즘은 암호화와 복호화에 서로 다른 키를 사용합니다.
같이 보기
-----

* 암호 on Wikipedia
* 암호화와 복호화
* MDN 웹 문서 용어사전
    + 블록 암호 운용 방식
    + 암호
    + 암호문
    + 암호알고리즘 집합
    + 암호분석
    + 암호학
    + 복호화
    + 암호화
    + 키
    + 평문
    + 공개키 암호화
    + 대칭키 암호화


고수준 프로그래밍 언어 (High-level programming language) - MDN Web Docs 용어 사전: 웹 용어 정의

고수준 프로그래밍 언어 (High-level programming language)
==============================================

 고수준 프로그래밍 언어는 컴퓨터 작동의 세부 사항으로부터 \*\*중요한 추상화
 \*\*를 가지고 있습니다. 고수준 프로그래밍 언어는 사람이 쉽게 이해할 수 있도록 설계되었으므로 다른 소프트웨어로 번역해야 합니다. 저수준 프로그래밍 언어와 달리 자연어 요소를 사용하거나, 컴퓨팅 시스템의 중요한 영역을 자동화(또는 완전히 숨기는 방법으로)하여 저수준 언어에 비해 개발 프로세스를 더 간단하고 이해하기 쉽게 만들 수 있습니다. 제공된 추상화의 양은 프로그래밍 언어가 얼마나 "고수준"인지 정의합니다.

자동으로 기계 코드로 번역되지만, 인간의 논리에 더 가까운 언어에 대한 아이디어는 1950년대 컴퓨터 과학에 도입되었습니다. 특히 널리 유포된 최초의 고급 언어인 Fortran을 만든 **John Backus** (IBM)의 작업에 감사를 드립니다. 이러한 혁신으로 Backus는 Turing 상을 받았습니다.


사이트 (Site) - MDN Web Docs 용어 사전: 웹 용어 정의

사이트 (Site)
==========

비공식적으로, '사이트'는 웹페이지 모음이고, 동일한 도메인에서 제공되며 단일 조직에서 유지관리하는 웹사이트입니다.

브라우저는 때때로 서로 다른 사이트를 정확하게 구별해야 합니다. 예를 들어, 브라우저는 `SameSite` (en-US) 쿠키를 쿠키를 설정한 동일한 사이트로만 보내야 합니다.

보다 정확한 정의를 위해 사이트는 도메인 이름의 '등록 가능한 도메인' 부분에 의해 결정됩니다. 등록 가능한 도메인은 공개 접미사 목록의 항목과 바로 앞의 도메인 네임 부분으로 구성됩니다. 예를 들면, `theguardian.co.uk`, `sussex.ac.uk` 및 `bookshop.org`가 모두 등록 가능한 도메인임을 의미합니다.

이 정의에 따라, `support.mozilla.org` 및 `developer.mozilla.org`는 동일한 사이트의 일부입니다. `mozilla.org`는 등록 가능한 도메인이기 때문입니다.

일부 상황에서는, 사이트를 차별화할 때 이 체계가 고려되기도 합니다. 이렇게 하면 `http://vpl.ca`와 `https://vpl.ca`가 다른 사이트가 됩니다. 이러한 스키마를 포함하면 안전하지 않은(HTTP) 사이트가 보안(HTTPS) 사이트와 동일한 사이트로 처리되는 것을 방지할 수 있습니다. 이러한 방식을 고려한 정의를 'schemeful same-site'라고도 합니다. 이와 같이, 더 엄격한 정의는 `SameSite` (en-US) 쿠키 처리 규칙에 적용됩니다.

예제
--

`mozilla.org`의 등록 가능한 도메인이 동일하므로 다음 사이트는 동일합니다.

* `https://developer.mozilla.org/en-US/docs/`
* `https://support.mozilla.org/en-US/`

포트가 관련이 없기 때문에, 다음은 동일한 사이트입니다.

* `https://example.com:8080`
* `https://example.com`

두 URL의 등록 가능한 도메인이 다르기 때문에 동일한 사이트가 아닙니다.

* `https://developer.mozilla.org/en-US/docs/`
* `https://example.com`

다음은 스키마가 고려되는 경우 동일한 사이트이거나 다른 사이트입니다.

* `http://example.com`
* `https://example.com`
같이 보기
-----

* URL이란 무엇인가요
* Origin
* 동일 출처 정책


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

ECMAScript
==========

**ECMAScript**는 JavaScript의 기반이 되는 스크립팅 언어 명세입니다. Ecma International은 ECMAScript 표준화를 담당하고 있습니다.

같이 보기
-----

* 위키피디아의 ECMAScript
* ECMAScript


프레스토 (Presto) - MDN Web Docs 용어 사전: 웹 용어 정의

프레스토 (Presto)
=============

프레스토(Presto)는 버전 15까지 오페라 브라우저를 구동하는 데 사용된 독점 브라우저 레이아웃 엔진이었습니다. 이후 Opera 브라우저는 블링크 레이아웃을 엔진을 사용하는 Chromium을 기반으로 합니다.

같이 보기
-----

* 위키백과의 프레스토 레이아웃 엔진


코드 포인트 (Code point) - MDN Web Docs 용어 사전: 웹 용어 정의

코드 포인트 (Code point)
===================

\*\*코드 포인트 (code point)\*\*는 텍스트를 표현하기 위한 시스템(예, 유니코드)에서 추상 문자를 나타내기 위해 할당된 숫자입니다. 유니코드에서, 코드 포인트는 "U+1234" 형식으로 표현됩니다. 여기서 "1234"는 할당된 숫자입니다. 예를 들어, 문자 "A"에는 U+0041이라는 코드 포인트가 할당됩니다.

UTF-8 및 UTF-16과 같은 문자 인코딩 형식은 유니코드 코드 포인트를 연속된 바이트로 인코딩하는 방법을 결정합니다. 다른 인코딩 형식은 동일한 코드 포인트를 다른 연속된 바이트로 인코딩할 수 있습니다. 예를 들어, 코드 포인트가 U+0424인 키릴 문자 "Ф"는 UTF-8에서는 `0xd0a4`로, UTF-16에서는 `0x0424`로 인코딩됩니다.

같이 보기
-----

* 유니코드 표준: 코드 포인트와 문자


페이지 예측 (Page prediction) - MDN Web Docs 용어 사전: 웹 용어 정의

페이지 예측 (Page prediction)
========================

**페이지 예측 (Page prediction)** 은 활성화되면, 사용자가 콘텐츠를 요청하기 전에 사용자가 방문할 가능성이 있는 리소스를 다운로드 하도록 브라우저에 지시하는 브라우저 기능 또는 스크립트입니다. 페이지 예측은 예측된 콘텐츠를 거의 즉시 로드할 수 있도록 하여 성능을 향상시킵니다. 그러나, 페이지 예측은 사용자가 검색하지 않는 콘텐츠를 다운로드할 수도 있습니다.

일부 웹 애플리케이션에는 검색 기록 및 관련 검색을 기반으로 검색 텍스트와 주소 표시줄 URL을 완성하는 예측 기능이 포함되어 있습니다. 예를 들어, 사용자가 주소 표시줄에 입력하면, 브라우저는 사용자가 요청을 제출하기 전에 주소 표시줄의 현재 텍스트를 검색 엔진에 보낼 수 있습니다.

브라우저 페이지 예측 및 예측 서비스는 더 빠른 페이지 로드를 가능하게 하지만, 추가 대역폭을 소비합니다. 또한, 사전 로드된 웹사이트와 삽입된 콘텐츠는 방문하지 않았더라도 방문한 것처럼 쿠키를 설정하고 읽을 수 있습니다.

같이 보기
-----

* prerender
* prefetch


명령문 (Statement) - MDN Web Docs 용어 사전: 웹 용어 정의

명령문 (Statement)
===============

컴퓨터 프로그래밍 언어에서, **명령문(statement)** 은 작업을 명령하는 코드 줄입니다. 모든 프로그램은 일련의 명령문으로 구성됩니다.

같이 보기
-----

* 위키백과의 명령문 (컴퓨터 과학)
* JavaScript 명령문과 선언문


CORS 허용 목록에 있는 응답 헤더 (CORS-safelisted response header) - MDN Web Docs 용어 사전: 웹 용어 정의

CORS 허용 목록에 있는 응답 헤더 (CORS-safelisted response header)
======================================================

'CORS 허용 목록에 있는 응답 헤더 (CORS-safelisted response header)'는 클라이언트 스크립트에 노출되어도 '안전'하다고 생각되는 CORS 응답의 HTTP 헤더입니다. 허용된 응답 헤더만 웹페이지에서 사용할 수 있습니다.

기본적으로, 허용 목록에는 다음과 같은 응답 헤더가 포함됩니다.

* `Cache-Control`
* `Content-Language`
* `Content-Length`
* `Content-Type`
* `Expires`
* `Last-Modified`
* `Pragma`

`Access-Control-Expose-Headers`를 사용하여 허용 목록에 부가적인 헤더를 추가할 수 있습니다.

**참고:** `Content-Length`헤더는 허용된 원래 응답 헤더 집합의 일부가 아닙니다. [ref]를 참고해주세요.

예제
--

### 허용 목록의 확장

`Access-Control-Expose-Headers` 헤더를 사용하여 CORS 허용 목록에 있는 응답 헤더 목록을 확장할 수 있습니다.

```http
Access-Control-Expose-Headers: X-Custom-Header, Content-Encoding
```

같이 보기
-----

* HTTP
* HTTP headers
* `Access-Control-Expose-Headers`
* 용어사전
    + CORS
    + CORS 허용 목록에 있는 요청 헤더
    + 금지된 헤더 이름
    + 요청 헤더


캐럿 (Caret) - MDN Web Docs 용어 사전: 웹 용어 정의

캐럿 (Caret)
==========

**캐럿(Caret)** (때때로 "텍스트 커서(text cursor)"라고도 함)은 텍스트 입력이 삽입될 위치를 나타내기 위해 화면에 표시되는 표시기입니다.

대부분의 사용자 인터페이스는 얇은 수직선이나 깜박이는 문자 크기의 상자를 사용하여 캐럿을 나타내지만 이는 다를 수 있습니다. 텍스트의 이 지점을 **삽입 지점**이라고 합니다. '캐럿'이라는 단어는 텍스트 삽입 지점과 마우스 커서를 구별합니다.

웹에서, 캐럿은 `<input>` (en-US) 및 `<textarea>` (en-US) 요소는 물론 `contenteditable` 속성이 설정된 모든 요소의 삽입 지점을 나타내는 데 사용됩니다. 따라서 사용자가 요소의 내용을 편집할 수 있습니다.

같이 보기
-----

* 위키백과의 캐럿 네비게이션
### 캐럿 관련 CSS

요소의 CSS `caret-color` (en-US) 속성을 적절한 `<color>` 값으로 설정하여 특정 요소의 편집 가능한 콘텐츠에 대한 캐럿 색상을 설정할 수 있습니다.

### 캐럿을 표시할 수 있는 HTML 요소

이러한 요소는 텍스트 입력 필드 또는 상자를 제공하므로 캐럿을 사용합니다.

* `<input type="text">` (en-US)
* `<input type="password">` (en-US)
* `<input type="search">` (en-US)
* `<input type="date">`, `<input type="time">` (en-US), and `<input type="datetime-local">` (en-US)
* `<input type="number">` (en-US), `<input type="range">` (en-US)
* `<input type="email">` (en-US), `<input type="tel">` (en-US) 및 `<input type="url">` (en-US)
* `<textarea>` (en-US)
* 콘텐츠 편집이 가능한 속성이 설정된 모든 요소


가상 요소 (Pseudo-element) - MDN Web Docs 용어 사전: 웹 용어 정의

가상 요소 (Pseudo-element)
======================

CSS에서, **가상 요소(pseudo-element)** 선택자는 선택할 특정 HTML 요소가 없는 시나리오에서 문서 콘텐츠의 일부에 스타일을 적용합니다. 예를 들어, 각 단락의 첫 글자를 자체 요소에 넣는 대신 `p``::first-letter` (en-US)를 사용하여 모든 단락의 스타일을 지정할 수 있습니다.

같이 보기
-----

* 가상 요소


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

WebP
====

**WebP**는 Google이 개발한 무손실/손실 압축 이미지 포맷입니다.

### 같이 보기

* 위키백과의 WebP


메인 스레드 (Main thread) - MDN Web Docs 용어 사전: 웹 용어 정의

메인 스레드 (Main thread)
====================

**메인 스레드(main thread)** 는 브라우저가 사용자 이벤트와 페인트를 처리하는 곳입니다. 기본적으로, 브라우저는 단일 스레드를 사용하여 페이지의 모든 JavaScript를 실행하고 레이아웃, 리플로우 및 가비지 컬렉션을 수행합니다. 오래 실행되는 JavaScript 함수가 스레드를 차단하여 페이지가 응답하지 않고, 사용자 경험이 저하될 수 있다는 것을 의미합니다.

서비스 워커 (en-US)와 같은 웹 워커 (en-US)를 의도적으로 사용하지 않는 한, JavaScript는 메인 스레드에서 실행되기 때문에, 스크립트로 인해 이벤트 처리 또는 페인팅이 지연되기 쉽습니다. 메인 스레드에 필요한 작업이 적을수록, 메인 스레드는 사용자 이벤트, 페인트에 더 많이 응답할 수 있으며, 일반적으로 사용자에게 응답할 수 있습니다.

같이 보기
-----

* 비동기 JavaScript
* Web worker API
* Service worker API
* 용어 사전
    + Thread


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

Nullish 값
=========

JavaScript 에서 Nullish 값은 `null`또는 `undefined`값 중 하나입니다. Nullish 값은 항상 falsy 입니다.


라우터 - MDN Web Docs 용어 사전: 웹 용어 정의

라우터
===

웹에서 **라우터**는 다음 3가지로 정의합니다.

1. 네트워크 계층에서, 라우터는 데이터 패킷 방향을 결정하는 네트워크 장치입니다. 라우터는 사용자가 인터넷과 상호작용할 수 있도록 관련 업체에서 배포합니다.
2. 애플리케이션 계층에서, Single-page application의 경우, 라우터는 주어진 URL로 표시되는 웹 페이지를 결정하는 라이브러리입니다. 이 미들웨어 모듈은 다음 페이지를 열기 위해 렌더링 되는 파일에 대한 경로가 제공되는 모든 URL 기능에 사용됩니다.
3. 서비스 계층의 API 구현에서, 라우터는 요청을 구문 분석하고 요청을 프로그램 내의 다양한 핸들러로 보내거나 라우팅하는 소프트웨어 구성 요소입니다. 라우터 코드는 일반적으로 처리기의 응답을 수락하고 요청자에게 반환하는 것을 용이하게 합니다.
같이 보기
-----

네트워크 계층의 정의인 경우

* 위키백과의 라우터 (컴퓨터 공학)

애플리케이션 계층의 SPA에서의 정의인 경우, 가장 인기있는 SPA 프레임워크들은 그들의 라우팅 라이브러리가 있습니다.

* Angular 라우터
* React 라우터
* Vue 라우터


부모 객체 (Parent object) - MDN Web Docs 용어 사전: 웹 용어 정의

부모 객체 (Parent object)
=====================

주어진 속성 또는 메서드가 속한 객체입니다.

같이 보기
-----

* JavaScript의 상속 및 프로토타입에 대한 토론


엔티티 헤더 - MDN Web Docs 용어 사전: 웹 용어 정의

엔티티 헤더
======

**경고:** HTTP/1.1 명세는 더 이상 엔티티, 엔티티 헤더 또는 엔티티 본문을 참조하지 않습니다. 일부 필드는 이제 Representation header 필드라고 합니다.

엔티티 헤더는 HTTP 메시지의 페이로드(예: 메시지 본문에 대한 메타데이터)를 나타내는 HTTP 헤더입니다. `Content-Length`, `Content-Language`, `Content-Encoding`, `Content-Type`, `Expires` 등과 같은 헤더는 엔티티 헤더에 포함됩니다. 엔티티 헤더는 HTTP 요청 및 응답 모두에 존재할 수 있습니다.

엔티티 헤더가 요청이나 응답 헤더가 아님에도 불구하고, 이러한 용어로 종종 포함됩니다.

다음 예제에서, `Content-Length`는 엔티티 헤더지만, `Host`와 `User-Agent` (en-US)는 request 헤더입니다.

```http
POST /myform.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Content-Length: 128
```

같이 보기
-----

* Representation header


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

POP3
====

**우체국 프로토콜 (Post Office Protocol, POP3)** 은 TCP 연결을 통해 메일 서버에서 이메일을 받기 위한 매우 일반적인 프로토콜입니다. POP3는 보다 더 복잡한 구조로 인해 구현하기가 더 어려운 최신 IMAP와 달리 폴더를 지원하지 않습니다.

클라이언트는 일반적으로 모든 메시지를 검색한 다음 서버에서 삭제하지만, POP3에서는 서버에 복사본을 보관할 수 있습니다. 거의 모든 이메일 서버와 클라이언트는 현재 POP3를 지원합니다.

같이 보기
-----

* 위키백과의 POP
* RFC 1734 (POP3 인증 메커니즘의 명세서)
* RFC 1939 (POP3 명세서)
* RFC 2449 (POP3 확장 메커니즘의 명세서)
* MDN 웹 문서 용어 사전:
    + IMAP


공개 키 암호화 방식 (Public-key cryptography) - MDN Web Docs 용어 사전: 웹 용어 정의

공개 키 암호화 방식 (Public-key cryptography)
=====================================

 공개 키 암호화(또는 비대칭 암호화)는 키가 쌍으로 제공되는 암호화 시스템입니다.
 키 중 하나에 의해 수행된 변환은 다른 키로만 실행 취소할 수 있습니다. 하나의 키 ('개인 키')는 비밀로 유지되고 다른 하나는 공개됩니다.

디지털 서명에 사용되는 경우, 개인 키는 서명에 사용되고 공개 키는 확인에 사용됩니다. 이것은 누구나 서명을 확인할 수 있지만, 해당 개인 키의 소유자만이 서명을 생성할 수 있음을 의미합니다.

암호화에 사용되는 경우, 공개 키는 암호화에 사용되고 개인 키는 복호화에 사용됩니다. 이는 암호화 키를 공개할 수 있다는 점에서 공개키 암호화 시스템이 대칭 암호화 시스템에 비해 이점을 제공합니다. 누구든지 개인 키 소유자에게 보내는 메시지를 암호화할 수 있지만 개인 키 소유자만이 메시지를 해독할 수 있습니다. 그러나, 일반적으로 대칭 알고리즘보다 훨씬 느리고 암호화할 수 있는 메시지 크기는 키 크기에 비례하므로 긴 메시지에 맞게 확장되지 않습니다.

결과적으로, 암호화 시스템에서는 대칭 알고리즘을 사용하여 메시지를 암호화한 다음, 공개 키 시스템에서 대칭 키를 암호화하는 것이 일반적입니다. 이러한 배열은 두 시스템의 이점을 모두 제공할 수 있습니다.

일반적으로 사용되는 공개 키 암호화 시스템은 RSA(서명 및 암호화용), DSA(서명용) 및 Diffie-Hellman(키 계약용)입니다.

같이 보기
-----

* Web Crypto API (en-US)
* MDN 웹 문서 용어 사전
    + Symmetric-key cryptography


구문 (Syntax) - MDN Web Docs 용어 사전: 웹 용어 정의

구문 (Syntax)
===========

구문은 올바르게 구조화된 코드를 구성하는 문자열의 필수 조합과 순서를 지정합니다. 구문에는 일반적으로 Python의 들여쓰기 요구 사항과 같이 문법과 작성에 적용되는 규칙이 포함됩니다.

구문은 언어마다 다릅니다(예, HTML 및 JavaScript의 구문은 다름). 언어는 JavaScript 및 Python의 "피연산자 연산자 피연산자" 규칙과 같이 구문 측면에서 거의 유사점을 공유할 수 없습니다. 이것은 두 언어가 구문과 유사점을 공유한다는 의미가 아닙니다.

구문은 프로그래밍 언어(컴퓨터에 대한 명령)와 마크업 언어(문서 구조 정보) 모두에 동일하게 적용됩니다.

구문은 순서와 구조에만 적용됩니다. 이러한 지침은 또한 '의미 있는' 것이어야 하고 의미론적인 부분입니다.

컴파일을 올바르게 수행하려면 코드에 올바른 구문이 있어야 합니다. 그렇지 않으면 구문 오류가 발생합니다. 괄호 누락과 같은 작은 오류라도, 소스 코드가 성공적으로 컴파일되지 않을 수 있습니다.

간단하고, 읽기 쉽고, 간결한 결과를 생성하는 프레임워크는 "깨끗한" 구문을 가지고 있다고 합니다. 코드베이스가 "많은 구문"을 사용하는 경우, 동일한 기능을 달성하려면 더 많은 문자가 필요합니다.

같이 보기
-----

* 위키백과의 구문 (프로그래밍 언어)


예측 구문 분석 (Speculative parsing) - MDN Web Docs 용어 사전: 웹 용어 정의

예측 구문 분석 (Speculative parsing)
==============================

전통적으로 브라우저에서 HTML 파서는 메인 스레드에서 실행되었으며 스크립트가 네트워크에서 검색되어 실행될 때까지 `</script>` 태그 다음에 차단되었습니다. Firefox 4 이후의 Firefox와 같은 일부 HTML 파서는 메인 스레드에서 예측 구문 분석을 지원합니다. 스크립트가 다운로드되고 실행되는 동안 미리 구문 분석을 합니다. HTML 파서는 스트림에서 미리 찾은 스크립트, 스타일 시트 및 이미지에 대한 예측 로드를 시작하고 예측에 따라 HTML 트리 구성 알고리즘을 실행합니다. 장점은 예측이 성공할 때 이미 스크립트, 스타일 시트 및 이미지를 검색한 수신 파일의 일부를 다시 분석할 필요가 없다는 것입니다. 단점은 예측이 실패할 때 손실되는 작업이 더 많다는 것입니다.

이 문서는 예측을 실패하게 만들고 페이지 로딩 속도를 늦추는 것을 방지하는 데 도움이 됩니다.

연결된 스크립트, 스타일 시트 및 이미지의 예측 로드를 성공적으로 수행하려면 `document.write` (en-US)를 피하세요. `<base>` 요소를 사용하여 페이지의 기본 URI를 재정의하는 경우 문서의 스크립트되지 않은 부분에 요소를 배치하세요. `<base>` 요소를 `document.write()` 또는 `document.createElement`를 통해 추가하지 마세요.

트리 빌더 출력의 손실 방지
---------------

`document.write()`에 의해 삽입된 모든 콘텐츠가 구문 분석되었을 때 `</script>` 태그 뒤의 예측 상태가 더 이상 유지되지 않도록 `document.write()`가 트리 빌더 상태를 변경하면 예측 트리 작성이 실패합니다. 그러나, `document.write()`를 비정상적으로 사용하는 경우에만 문제가 발생합니다. 피해야 할 사항은 아래와 같습니다.

* 불균형한 트리를 사용하지 마세요. `<script>document.write("<div>");</script>`는 잘못되었습니다. `<script>document.write("<div></div>");</script>`는 사용해도 괜찮습니다.
* 완료되지 않은 토큰을 작성하지 마세요. `<script>document.write("<div></div");</script>`는 잘못되었습니다.
* 캐리지 리턴으로 글 작성을 마무리하지 마세요. `<script>document.write("Hello World!\r");</script>`는 잘못되었습니다. `<script>document.write("Hello World!\n");</script>`는 사용해도 괜찮습니다.
* 균형잡힌 태그를 작성하면 쓰기 불균형을 만드는 방식으로 다른 태그가 추론될 수 있습니다. 예, `head` 요소 내부의 `<script>document.write("<div></div>");</script>`는 불균형한 `<script>document.write("</head><body><div></div>");</script>`로 해석됩니다.
* 테이블의 일부를 서식화하지 마세요. `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>`는 잘못되었습니다.


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

Digest
======

**다이제스트**는 전체 메시지에서 암호화 해쉬 함수에 의해 생성된 작은 값입니다. 이상적으로, 다이제스트는 계산이 빠르고, 되돌릴 수 없으며, 예측할 수 없으므로 누군가 특정 메시지를 변조했는지 여부를 나타냅니다.

다이제스트를 사용하여 여러 작업을 수행할 수 있습니다.

* 비암호화 애플리케이션(예, 해시 테이블의 인덱스 또는 중복 데이터를 감지하거나 파일을 고유하게 식별하는 데 사용되는 지문)
* 메시지 무결성 확인(조작된 메시지는 다른 해시를 갖습니다)
* 비밀번호를 검색할 수는 없지만, 확인할 수 있도록 저장합니다(이 작업을 안전하게 수행하려면 비밀번호도 솔트해야 합니다).
* 의사 난수 생성
* 키 생성합니다

충돌과 예측 가능성을 방지하려면 사용 사례에 적합한 해시 함수를 선택하는 것이 중요합니다.

같이 보기
-----

* 암호화 해쉬 함수를 참고하세요.
* 위키백과의 해쉬 함수


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

WebM
====

**WebM**은 로열티 비용이 없는 개방형 웹 비디오 포맷이며 Mozilla Firefox에서 네이티브로 지원됩니다.

같이 보기
-----

* 위키백과의 WebM


거터 (Gutters) - MDN Web Docs 용어 사전: 웹 용어 정의

거터 (Gutters)
============

**거터(Gutters)** 또는 앨리(*alleys*)는 콘텐츠 트랙 사이의 간격입니다. 거터는 `column-gap` (en-US), `row-gap` (en-US), 또는 `gap` 속성을 사용하여 CSS 그리드 레이아웃에서 생성할 수 있습니다.

예제
--

아래 예에는 행과 행, 열과 열 사이의 간격이 20px인 3개의 열과 2개의 행 트랙 그리드가 있습니다.
```

\* {
  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: #fff8f8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  column-gap: 20px;
  row-gap: 20px;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

그리드 크기 측면에서, 간격은 일반 그리드 트랙인 것처럼 작동하지만 간격에 아무것도 배치할 수 없습니다. 간격은 해당 위치의 그리드 선이 추가 크기를 가지게 된 것처럼, 작동하므로 해당 선 뒤에 배치된 모든 그리드 항목은 간격 끝에서 시작됩니다.

`row-gap` 및 `column-gap` 속성은 트랙 공간을 확보할 수 있는 유일한 요소는 아닙니다. 여백, 패딩 또는 상자 정렬 (en-US)의 공간 정렬 속성 사용은 모두 눈에 보이는 간격에 간섭할 수 있습니다. 따라서 우리의 디자인이 이러한 방법 중 하나를 사용하여 추가 공간을 도입하지 않았다는 것을 알고 있지 않는 한, `row-gap` 및 `column-gap` 속성은 "거터 크기"와 동일하게 고려되어서는 안 됩니다.

같이 보기
-----

### 속성 참고서

* `column-gap` (en-US)
* `row-gap` (en-US)
* `gap`
### 더 읽어보기

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃의 기본 개념
* CSS 그리드 레이아웃 명세서의 거터 정의


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

WebIDL
======

**WebIDL** 은 웹 애플리케이션 프로그래밍 인터페이스(API)를 구성하는 데이터 타입, 인터페이스, 메서드, 속성 및 기타 구성 요소를 설명하는 데 사용되는 인터페이스 설명 언어입니다. 특정 프로그래밍 언어와는 독립적인 다소 양식이 있는 구문을 사용합니다. 그래서 각 API를 구축하는 데 사용되는 기본 코드는 가장 적합한 언어로 작성될 수 있으며 동시에 API 구성요소를 JavaScript에 호환이 되는 구성에 매핑할 수도 있습니다.

WebIDL은 웹을 위한 거의 모든 API 명세서에서 사용되며, WebIDL의 표준 형식과 구문으로 인해 웹 브라우저를 만드는 프로그래머는 API 구현을 위한 코드를 작성하는 방법에 관계없이 브라우저가 서로 호환되는지 보다 쉽게 확인할 수 있습니다.

같이 보기
-----

* 명세서
* WebIDL 파일에 포함된 정보 (en-US)
* Gecko WebIDL 바인딩
* WebIDL


쉐도우 트리 (Shadow tree) - MDN Web Docs 용어 사전: 웹 용어 정의

쉐도우 트리 (Shadow tree)
====================

**쉐도우 트리 (Shadow tree)** 는 최상위 노드가 **쉐도우 루트(shadow root)** 인 DOM 노드의 숨겨진 집합입니다. 쉐도우 루트는 **쉐도우 DOM(shadow DOM)** 의 최상위 노드이며 일반 문서의 DOM 트리의 일부가 아닙니다.

쉐도우 루트는 **호스트** 라고 하는 특정 DOM 노드를 통해 다른 노드 트리에 연결됩니다. 이 호스트는 다른 쉐도우 트리의 일부일 수 있습니다. 쉐도우 루트 호스트의 노드 트리를 **라이트 트리(light tree)** 라고도 합니다.

쉐도우 트리의 숨겨진 DOM 노드는 일반적으로 쉐도우 트리 외부에 적용된 어떤 것에도 영향을 받지 않으며 그 반대도 마찬가지입니다. 쉐도우 DOM이 끝나고 일반 DOM이 시작되는 **shadow 경계** 는 통과할 수 있지만, 의도적으로 표시했을 때만 가능한 부분입니다.

* 외부에서 쉐도우 트리 노드를 스크립팅하려면 특별한 Shadow DOM API에 접근해야 합니다.
* CSS 스코핑 (en-US) 및 CSS 쉐도우 부분 (en-US)을 통해 외부에서 쉐도우 트리 스타일을 지정할 수 있습니다.
같이 보기
-----

* 쉐도우 DOM 사용하기
* `Element.shadowRoot` (en-US) 및 `Element.attachShadow()` (en-US)
* `ShadowRoot` (en-US)
* `<slot>`
* 접근성 트리(Accessibility tree)


인지된 성능 (Perceived performance) - MDN Web Docs 용어 사전: 웹 용어 정의

인지된 성능 (Perceived performance)
==============================

**인지된 성능(Perceived performance)** 은 웹사이트가 사용자에게 얼마나 빠르고 반응성이 뛰어나며 안정적이라고 '느끼는'지를 나타내는 척도입니다. 사이트 성능에 대한 인식은 실제 로드 및 응답 시간보다 사용자 경험에 더 큰 영향을 미칠 수 있습니다.

같이 보기
-----

* 인지된 성능 (en-US)


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

Number
======

JavaScript에서 **Number**는 배정밀도 64비트 부동소수점 형식 (IEEE 754)의 숫자 데이터 타입입니다. 다른 프로그래밍 언어에서는 Integer, Float, Double, Bignum와 같은 다양한 숫자 타입들이 존재할 수 있습니다.

같이 보기
-----

* Numeric types 위키피디아
* JavaScript 타입: `Number`
* JavaScript 전역 객체 `Number`
* Glossary:
    + JavaScript
    + 원시 값


Secure Sockets Layer (SSL) - MDN Web Docs 용어 사전: 웹 용어 정의

Secure Sockets Layer (SSL)
==========================

Secure Sockets Layer(SSL)는 클라이언트와 서버 간의 안전한 링크를 통해 송수신되는 모든 데이터를 안전하게 보장하는 과거의 보안 표준 기술이었다. SSL 버전 3.0은 Netscape가 1999년에 발표했으며 현재에는 Transport Layer Security (TLS) 로 대체되었다.

같이 보기
-----

* Transport Layer Security (Wikipedia)
* Transport Layer Security (TLS) protocol
* Glossary
    + HTTPS
    + TLS


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

Alignment container
===================

**정렬 컨테이너**는 정렬 주체가 정렬되는 직사각형입니다. 정렬 컨테이너는 레이아웃 모드에 의해 정의됩니다. 정렬 컨테이너는 일반적으로 정렬 대상의 포함 블록이며 포함 블록을 설정하는 상자의 쓰기 모드를 가정합니다.

같이 보기
-----

* CSS 박스 정렬 (en-US) 모듈
* CSS `align-content` 속성
* CSS `align-items` (en-US) 속성
* CSS `align-self` (en-US) 속성
* CSS `align-tracks` (en-US) 속성
* CSS `justify-content` 속성
* CSS `justify-items` (en-US) 속성
* CSS `justify-self` (en-US) 속성
* CSS `justify-tracks` (en-US) 속성
* CSS `place-content` (en-US) 단축 속성
* CSS `place-self` (en-US) 단축 속성
* CSS `scroll-snap-align` (en-US) 속성


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

NAT
===

**네트워크 주소 변환 (Network Address Translation, NAT)** 은 여러 대의 컴퓨터가 IP 주소를 공유하도록 하는 기술입니다. NAT는 로컬 네트워크의 각 컴퓨터에 고유한 주소를 할당하고 들어오고 나가는 네트워크 트래픽을 조정하여 데이터를 올바른 위치로 보냅니다.

같이 보기
-----

* WebRTC 프로토콜
* 위키백과의 네트워크 주소 변환


Breadcrumb (브레드크럼) - MDN Web Docs 용어 사전: 웹 용어 정의

Breadcrumb (브레드크럼)
==================

**브레드크럼(breadcrumb)**, 또는 브레드크럼 트레일은 일반적으로 사이트의 header와 기본 컨텐츠 사이에 배치되는 탐색 보조 도구로, 사이트 구조와 관련된 현재 페이지의 계층 구조, 최상위에서부터 현재 페이지까지를 사용자의 링크 목록 등으로 표시합니다. 현재 페이지까지 방문한 순서대로 보입니다.

이 문서의 위치 탐색 경로는 다음과 같습니다.

MDN > Glossary > Breadcrumb

브레드크럼 트레일을 통해 사용자는 웹 사이트 내에서 현재 자신의 위치를 알 수 있습니다. 이러한 유형의 탐색이 올바르게 수행되면, 사용자는 사이트 내 위치와 이동 경로를 알 수 있습니다. 또한 사용자가 이전 위치로 돌아가는 데 도움이 되며 상위 페이지로 이동하는 데 필요한 클릭 수를 줄일 수 있습니다.


평문 (Plaintext) - MDN Web Docs 용어 사전: 웹 용어 정의

평문 (Plaintext)
==============

평문이란 암호화 알고리즘 또는 복호화된 암호문의 입력으로 사용되는 정보를 의미합니다.

평문이라는 용어는 암호화되지 않았고 추가 처리 없이 사람이나 컴퓨터가 읽을 수 있는 텍스트 문서, 이미지 등과 같은 모든 정보를 더 느슨하게 나타내는 'cleartext'라는 용어와 같은 의미로 자주 사용됩니다.


베지에 곡선 (Bézier curve) - MDN Web Docs 용어 사전: 웹 용어 정의

베지에 곡선 (Bézier curve)
=====================

**베지에 곡선** ([bezje]로 발음합니다)은 컴퓨터 그래픽과 애니메이션에 사용되는 수학적으로 표현된 곡선입니다. 벡터 이미지에선, 크기를 무한으로 조정할 수 있는 부드러운 곡선을 모델링하는 데 사용됩니다.

곡선은 최소 2개의 제어점 세트로 정의됩니다. 웹 관련 그래픽과 애니메이션에서는 종종 4개의 제어점(P0, P1, P2, 및 P3)이 있는 곡선인 직육면체 베지어 곡선을 사용합니다.

2차 베지어 곡선을 그리려면 두 개의 가상 선을 그립니다. 하나는 P0 to P1로, 다른 하나는 P1 to P2로 그려줍니다. 첫 번째 도우미 선의 시작점과 두 번째 도우미 선의 끝점이 꾸준히 이동하면서 세 번째 가상의 선이 그려집니다. 이 가상의 선에는 시작점에서 끝점까지 꾸준히 움직이는 점이 그려집니다. 이 점이 그려주는 곡선이 베지어 곡선입니다. 다음은 곡선의 생성되는 모습을 보여주는 애니메이션입니다.

![베지에 곡선 그리기](/ko/docs/Glossary/Bezier_curve/b%C3%A9zier_2_big.gif)

같이 보기
-----

* 위키백과의 베지에 곡선
* CSS의 입방체 베지어 곡선의 완화 함수 (en-US)
* `keySplines (en-US)` SVG 속성


금지된 헤더 이름 - MDN Web Docs 용어 사전: 웹 용어 정의

금지된 헤더 이름
=========

**금지된 헤더 이름**은 프로그래밍 방식으로 수정할 수 없는 HTTP 헤더의 이름입니다. 정확히는 금지된 응답 헤더 이름과 대비되는 HTTP **요청** 헤더 이름입니다.

이러한 헤더는 사용자 에이전트가 헤더에 대한 모든 권한을 보유하므로 수정할 수 없습니다. `Sec-`로 시작하는 이름은 개발자에게 헤더에 대한 제어 권한을 부여하는 취득 알고리즘을 사용하는 API(`XMLHttpRequest` 등)로부터 안전한 새 헤더를 만들때 사용하기 위해 예약되어 있습니다.

금지된 헤더 이름은 `Proxy-` 또는 `Sec-` 로 시작하거나 아래 이름 중 하나입니다.

* `Accept-Charset`
* `Accept-Encoding`
* `Access-Control-Request-Headers`
* `Access-Control-Request-Method`
* `Connection`
* `Content-Length`
* `Cookie`
* `Date`
* `DNT` (en-US)
* `Expect`
* `Host`
* `Keep-Alive`
* `Origin`
* `Permissions-Policy` (en-US)
* `Proxy-`
* `Sec-`
* `Referer`
* `TE` (en-US)
* `Trailer` (en-US)
* `Transfer-Encoding`
* `Upgrade` (en-US)
* `Via`

**참고:** 위 목록에 없는 `User-Agent` (en-US) 헤더는 금지됐었으나 명세에 따라 (금지된 헤더 이름 목록 참조(Firefox 43에서 구현됨))이제 사용할 수 있습니다. 따라서 Fetch API `Headers` (en-US) 객체나 `XMLHttpRequest`의 `setRequestHeader()` 메서드로 설정 가능합니다. 그러나 Chrome은 Fetch 요청에서 `User-Agent` 헤더를 조용하게 제거하고 있습니다. Chromium bug 571722를 참고하세요.

같이 보기
-----

금지된 응답 헤더 이름 (용어 사전)


교차축 - MDN Web Docs 용어 사전: 웹 용어 정의

교차축
===

플렉스박스에서, 교차축이란 주축에 수직하는 축으로, `flex-direction`이 `row` 또는 `row-reverse` 인 경우 교차축은 열 방향을 따라갑니다.

![교차축은 열을 따라갑니다.](/ko/docs/Glossary/Cross_Axis/basics3.png)

주축이 `column` 또는 `column-reverse`인 경우 교차축은 행 방향을 따라갑니다.

![교차축은 행 방향을 따라갑니다.](/ko/docs/Glossary/Cross_Axis/basics4.png)

아이템을 교차축에 대해 정렬할 땐 플렉스 컨테이너의 `align-items` 속성 또는 각각 아이템의 `align-self` 속성을 사용합니다. 플렉스 컨테이너가 콘텐츠 여러 줄을 가졌고, 교차축에 남는 공간이 있다면, `align-content` 속성을 통해 열 간격을 조절할 수 있습니다.

같이 보기
-----

### 속성 참고서

* `align-content`
* `align-items` (en-US)
* `align-self` (en-US)
* `flex-wrap`
* `flex-direction`
* `flex`
* `flex-basis`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `order`
### 더 읽어보기

* CSS Flexbox Guide:
    + Flexbox의 기본 개념
    + 플렉스 컨테이너 안의 내용 정렬
    + 플렉스 항목의 래핑 마스터하기 (en-US)
* Glossary
    + Flex
    + Flex Container
    + Flex Item
    + Grid


핫링크 (Hotlink) - MDN Web Docs 용어 사전: 웹 용어 정의

핫링크 (Hotlink)
=============

**hotlink** (**inline link**로도 부름)는 다른 사이트에서 직접 연결된 객체(일반적으로 이미지)입니다. 예를 들어, site1.com에 호스팅된 이미지는 site2.com에 직접 표시됩니다.

연결된 객체를 호스팅하는 웹 사이트에서 원치 않는 대역폭 사용을 유발할 수 있으므로, 이러한 관행이 눈살을 찌푸리게 합니다. 윤리적인 관점에서 볼 때, 허락 없이 행동하는 것은 도둑질로 생각될 수 있습니다.

같이 보기
-----

* 위키백과의 Hotlink
* 용어사전의 Hyperlink


네임스페이스 (Namespace) - MDN Web Docs 용어 사전: 웹 용어 정의

네임스페이스 (Namespace)
==================

네임스페이스 (Namespace)는 프로그램에서 사용되는 이름의 논리적 그룹인 식별자의 컨텍스트입니다. 동일한 컨텍스트 및 범위 내에서, 식별자는 엔터티를 고유하게 식별해야 합니다.

운영체제에서, 디렉터리는 네임스페이스입니다. 디렉토리 내 각 파일이나 하위 디렉토리는 고유한 이름입니다. 동일한 이름을 하위 디렉터리 전체에 걸쳐서 여러 번 사용할 수 있습니다.

HTML, CSS 와 XML 기반 언어에서, 네임스페이스는 요소(또는 속성)가 명시적으로, 혹은 암시적으로 속한 언어입니다.

같이 보기
-----

* 네임스페이스 집중 강의 (en-US)
* CSS 네임스페이스 모듈
* CSS `@namespace`
* `Document.createElementNS()` (en-US) 메소드
* 위키백과의 네임스페이스


상수 (Constant) - MDN Web Docs 용어 사전: 웹 용어 정의

상수 (Constant)
=============

상수(Constant)는 프로그래머가 변경할 수 없는 값입니다. 예를 들어, 숫자(1, 2, 42)입니다. 반면에 변수를 사용하면, 프로그래머는 이미 사용중인 변수 이름에 새로운 값를 할당할 수 있습니다.

변수와 마찬가지로, 일부 상수는 식별자에 바인딩됩니다. 예를 들어, `pi` 식별자는 값 3.14… 에 바인딩 될 수 있습니다.

같이 보기
-----

* 위키백과의 상수


호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의

호이스팅
====

JavaScript **호이스팅**은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.

호이스팅은 ECMAScript 사양에서 규범적으로 정의된 용어가 아닙니다. 사양에서는 선언 그룹을 *HoistableDeclaration*로 정의되어 있지만, 여기에는 `function`, `function*` 만 포함되어 있습니다, `async 함수`, `async 함수` 선언을 사용하세요. 호이스팅은 다른 방식이긴 하지만 종종 `var` 선언의 기능으로 간주되기도 합니다. 구어체 용어로는 다음과 같은 동작을 호이스팅으로 간주할 수 있습니다.

1. 변수가 선언된 줄 이전에 해당 범위에서 변수 값을 사용할 수 있는 경우 ("값 호이스팅")
2. 변수가 선언된 줄 이전에 해당 범위의 변수를 참조할 수 있지만 `ReferenceError`를 던지지 않고 값이 항상 `정의되지 않음`인 경우입니다. ("선언 호이스팅")
3. 변수를 선언하면 변수가 선언된 줄 앞의 범위에서 동작이 변경됩니다.
4. 선언의 부작용은 선언이 포함된 나머지 코드를 평가하기 전에 발생합니다.

위의 네 가지 함수 선언은 유형 1 동작으로 호출되고, `var` 선언은 유형 2 동작으로 호출됩니다. `let`, `const` 및 `class` 선언(총칭하여 lexical 선언이라고도 함)은 유형 3 동작으로 올라갑니다. `import` 선언은 유형 1 및 유형 4 동작으로 호출됩니다.

일부에서는 `let`, `const` 및 `class`를 호이스트되지 않는 것으로 보는 것을 선호하는데, 그 이유는 temporal dead zone이 선언 이전의 변수 사용을 엄격하게 금지하고 있기 때문입니다. 호이스팅은 보편적으로 합의된 용어가 아니기 때문에 이러한 반대는 괜찮습니다. 그러나 temporal dead zone은 그 범위에서 관찰 가능한 다른 변화를 일으킬 수 있으며, 이는 어떤 형태의 호이스팅이 있음을 시사합니다.

```js
const x = 1;
{
  console.log(x); // 참조 에러
  const x = 2;
}
```

만약 `const x = 2` 선언이 전혀 호출되지 않는다면(즉, 실행될 때만 효력이 발생한다면), `console.log(x)` 문은 상위 범위에서 `x` 값을 읽을 수 있어야 합니다. 그러나 `const` 선언은 여전히 정의된 전체 범위를 "오염"시키기 때문에 `console.log(x)` 문은 아직 초기화되지 않은 `const x = 2` 선언에서 `x`를 대신 읽어서 `ReferenceError`를 던집니다. 하지만 실용적인 관점에서 볼 때 이러한 선언의 호이스팅은 의미 있는 기능을 제공하지 않기 때문에 어휘 선언을 비호이스팅으로 특성화하는 것이 더 유용할 수 있습니다.

다음은 호이스팅의 한 형태가 아니라는 점에 유의하세요.

```js
{
  var x = 1;
}
console.log(x); // 1
```

여기에는 "선언 전 접근"이 없는데, 이는 단순히 `var` 선언이 블록으로 범위가 지정되지 않았기 때문입니다.

호이스팅에 대한 자세한 내용은 다음을 참조하십시오:

* `var`/`let`/`const` 호이스팅 - 문법 및 유형 가이드
* `함수` 호이스팅 - 함수 가이드
* `class` 호이스팅 - 클래스 가이드 (en-US)
* `import` 호이스팅 - JavaScript 모듈
참조
--

* `var` 문 - MDN
* `let` 문 - MDN
* `const` 문 - MDN
* `function` 문 - MDN


우아한 성능 저하 (Graceful degradation) - MDN Web Docs 용어 사전: 웹 용어 정의

우아한 성능 저하 (Graceful degradation)
================================

**우아한 성능 저하**는 최신 브라우저에서 동작하는 웹 사이트/응용 프로그램 구축에 주력하는 설계 철학입니다. 그러나 오래된 브라우저에서는 비록 좋지 않은 경험이라 할 지라도 필수 콘텐츠와 기능을 여전히 제공합니다.

JavaScript 폴리필을 이용하면 누락되는 기능을 구현할 수 있지만, 스타일과 레이아웃 같은 특징으로 대체할 수 있다면 CSS 종속 또는 HTML 폴백을 이용하는 편이 좋습니다. 일반적인 HTML과 CSS 문제 다루기 (en-US)에서 좋은 예제를 찾을 수 있다.

알려지지 않은 다양한 사용자 에이전트가 웹 사이트에 접근할 때 웹 개발자가 최상의 웹 사이트를 개발하도록 집중할 수 있는 유용한 기법입니다. 점진적 향상은 관련이 있지만 차이가 있습니다. 종종 우아한 성능 저하와 반대인 것처럼 보인다. 실제로 두 접근법은 유효하고 서로를 보완할 수 있다.

같이 보기
-----

* 우아한 성능 저하 on Wikipedia
* 흔한 HTML 및 CSS 문제 다루기 (en-US)
* 기능 탐지 구현 (en-US)
* MDN Web Docs 용어 사전
    + Graceful degradation
    + Polyfill
    + Progressive enhancement


Self-Executing Anonymous Function - MDN Web Docs 용어 사전: 웹 용어 정의

Self-Executing Anonymous Function
=================================

정의되자마자 실행되는 JavaScript function입니다. (a.k.a. IIFE (즉시실행함수))

링크된 즉시실행함수 페이지에서 더 많은 정보를 얻을 수 있습니다.


프로미스 (Promise) - MDN Web Docs 용어 사전: 웹 용어 정의

프로미스 (Promise)
==============

**`Promise`** 는 아직 작업이 완료되지 않은 함수에 의해 반환된 객체입니다. 프로미스는 문자 그대로 프로미스 객체를 통해 결과를 반환할 함수에 의해 만들어진 프로미스를 나타냅니다.

호출된 함수가 작업을 비동기적으로 완료하면 원래 호출자에게 작업이 완료되었음을 알리기 위해 해결(또는 이행 또는 완료) 핸들러라고 불리는 프로미스 객체의 함수가 호출됩니다.

같이 보기
-----

* Futures 및 promises 객체
* JavaScript 참고서의 `Promise`.
* 프로미스 사용하기


간편 URL (Slug) - MDN Web Docs 용어 사전: 웹 용어 정의

간편 URL (Slug)
=============

간편 URL(Slug)는 일반적으로 URL 끝에 있는 웹 주소의 고유하게 식별이 되는 부분입니다. MDN의 맥락에서는, "*<locale>/docs/*" 다음의 URL 부분입니다.

또한 상위 문서 아래에 새 문서가 생성될 때 최종 구성 요소일 수도 있습니다. 예를 들어, 이 페이지의 슬러그는 `Glossary/Slug`입니다.

같이 보기
-----

* 제목과 간편 URL 선택하기 (en-US)


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

Algorithm
=========

알고리즘(Algorithm)은 기능을 수행하기 위한 독립된 명령어들의 집합입니다.

즉, 알고리즘은 인간이나 기계에 의해 반복적으로 해결할 수 있도록 문제를 해결하는 방법을 기술하는 수단이다. 컴퓨터 과학자들은 "알고리즘의 복잡성"이나 "Big O" 표기법이라는 개념을 통해 알고리즘의 효율성을 비교합니다.

예를 들어:

* 요리 레시피는 인간을 위한 간단한 알고리즘이다.
* 정렬 알고리즘은 종종 컴퓨터 프로그래밍에서 데이터를 정렬하는 방법을 설명하기 위해 사용된다.

일반적인 알고리즘은 Traveling Salesman Problem, Tree Traversal algorithms 등과 같은, 길 찾기 알고리즘이다.

선형 회귀, 로지스틱 회귀, 의사결정 트리, 랜덤 포레스트, 지원 벡터 머신, Recurrent Neural Network(RNN), Long Short Term Memory(LSTM) Neural Network, Convolutional Neural Network(CNNN), Deep Convolutional Neural Network(심층 신경망) 등의 머신 러닝 알고리즘도 있습니다.

같이 보기
-----

* Wikipedia의 Algorithm
* Explanations of sorting algorithms
* Explanations of algorithmic complexity


대칭키 암호화 (Symmetric-key cryptography) - MDN Web Docs 용어 사전: 웹 용어 정의

대칭키 암호화 (Symmetric-key cryptography)
====================================

대칭키 암호화(Symmetric-key cryptography)는 암호화와 복호화에 동일한 키를 사용하는 암호화 알고리즘에 사용되는 용어입니다. 키는 일반적으로 "대칭 키" 또는 "비밀 키"라고 합니다.

일반적으로 키가 쌍으로 생성되고 한 키에 의한 변환이 다른 키를 통해서만 되돌릴 수 있는 공개 키 암호화와 비교됩니다.

대칭키 알고리즘은 올바르게 사용하면 안전하고 효율성이 높아 성능에 부정적인 영향을 주지 않으면서, 대량의 데이터를 암호화하는 데 사용할 수 있습니다.

현재 사용되는 대부분의 대칭키 알고리즘은 블록암호입니다. 즉, 한 번에 한 블록씩 데이터를 암호화합니다. 각 블록의 크기는 고정되어 있으며 알고리즘에 의해 결정됩니다. 예를 들어, AES 16 바이트 블록을 사용합니다. 블록 암호는 항상 블록 크기보다 긴 메시지를 안전하게 암호화하는 방법을 지정하는 '모드'와 함께 사용됩니다. 예를 들어, AES는 암호이고, CTR, CBC 및 GCM은 모두 모드입니다. 부적절한 모드를 사용하거나 모드를 잘못 사용하면, 기본 암호가 제공되는 보안이 완전히 훼손될 수 있습니다.

같이 보기
-----

* MDN 웹 문서 용어 사전
    + Block cipher mode of operation
    + Cryptography
    + Cryptographic hash function
    + Symmetric-key cryptography


테이블 그리드 상자 (Table Grid Box) - MDN Web Docs 용어 사전: 웹 용어 정의

테이블 그리드 상자 (Table Grid Box)
===========================

**테이블 그리드 상자(Table Grid Box)** 는 캡션을 제외한 모든 테이블 내부 상자를 포함하는 블록 수준의 상자입니다. 캡션이 포함된 상자를 테이블 래퍼 상자라고 합니다.


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

ISP
===

인터넷 서비스 제공자(Internet Service Provider, ISP)는 전화선을 통한 전화 접속 연결(이전에는 더 일반적임)이나 케이블 모뎀이나 DSL 서비스와 같은 광대역 연결을 통해 인터넷 접근, 때로는 이메일, 웹 호스팅 및 VoIP를 판매합니다.

같이 보기
-----

* 인터넷 작동 원리 (초보자를 위한 설명)
* 위키백과의 인터넷 서비스 제공자


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

Mutable
=======

"mutable" 값은 변경 가능(가변)한 변수의 유형입니다. JavaScript에서, 원시 값이 아닌 객체와 배열만이 mutable입니다. 일단, 원시값이 생성되면 이를 변경할 수 없습니다. 단, 해당 값을 보유하는 변수는 재할당될 수 있습니다.

같이 보기
-----

* 위키피디아의 불변 객체
* Immutable


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

Prototype
=========

프로토타입은 개발 사이클의 초기 단계에서 제품 혹은 어플리케이션의 외형이나 동작을 보여줄 수 있는 모델을 의미합니다.

상속과 프로토타입 체인에 대해서도 살펴보세요.

같이 보기
-----

* 위키백과의 소프트웨어 프로토타이핑


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

IndexedDB
=========

IndexedDB는 브라우저 내에 대용량 데이터 구조를 저장하고 고성능 검색을 위해 인덱싱하기 위한 웹 API 입니다. SQL 기반 RDBMS와 마찬가지로, IndexedDB는 트랜잭션 데이터베이스 시스템입니다. 그러나, 고정 열 테이블이 아닌 JavaScript 객체를 사용하여 데이터를 저장합니다.

같이 보기
-----

* MDN의 IndexedDB API
* IndexedDB W3C 명세


동적 타입 (Dynamic typing) - MDN Web Docs 용어 사전: 웹 용어 정의

동적 타입 (Dynamic typing)
======================

**동적 타입 언어**는 마치 JavaScript처럼, 인터프리터가 그 시점의 변수 값을 기반으로 런타임에 변수에 타입을 할당하는 것을 말합니다.

같이 보기
-----

* JavaScript 데이터 타입 및 자료구조
* 위키백과의 타입 시스템


퍼즈 테스팅 (Fuzz testing) - MDN Web Docs 용어 사전: 웹 용어 정의

퍼즈 테스팅 (Fuzz testing)
=====================

\*\*퍼징(Fuzzing)\*\*은 자동화된 도구를 사용해 프로그램 또는 프로그램 기능에 유효하지 않거나 예상치 못한 입력을 제공하고 나서, 결과를 확인해서 프로그램이 충돌하거나 부적절하게 작동하는지 확인하는 소프트웨어 테스팅 기술입니다. 퍼징은 소프트웨어의 안정성, 신뢰성 및 보안을 보장하는 중요한 방법입니다.

* 위키백과: 퍼즈 테스팅(Fuzz testing)


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

Object
======

JavaScript에서, 객체는 속성의 모음으로 볼 수 있습니다. 객체 리터럴 구문을 사용하면, 제한된 속성 집합이 초기화됩니다. 그런 다음 속성을 추가하고 제거할 수 있습니다. 속성 값은 복잡한 데이터 구조를 구축할 수 있는, 다른 객체를 포함하여 모든 유형의 값이 될 수 있습니다. 속성은 "key" 값을 사용하여 식별됩니다. "key" 값은 String 값 또는 Symbol value입니다.

객체 속성에는 *data* 속성 및 *accessor* 속성 두 가지 유형이 있습니다.

**참고:** 접근자 "메서드"가 아닌 접근자 "프로퍼티"를 인식하는 것이 중요합니다. 함수를 값으로 사용하여 JavaScript 객체 클래스와 유사한 접근자를 제공할 수 있지만, 그렇다고 해서 객체가 클래스가 되는 것은 아닙니다.

같이 보기
-----

* JavaScript 데이터 유형과 자료구조 글에서의 JavaScript objects의 자세한 정보
* JavaScript 자습서의 `Object`


XHR (XMLHttpRequest) - MDN Web Docs 용어 사전: 웹 용어 정의

XHR (XMLHttpRequest)
====================

`XMLHttpRequest`(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다.

같이 보기
-----

* 위키백과 XMLHttpRequest
* 동기식 vs. 비동기식 통신
* `XMLHttpRequest` 객체.
* XMLHttpRequest를 사용하는 방법에 관한 MDN 문서 (en-US).


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

XPath
=====

**XPath** 는 XML 문서의 섹션과 콘텐츠에 접근할 수 있는 쿼리 언어입니다.

같이 보기
-----

* MDN의 XPath 문서
* XPath 명세서
* 공식 웹사이트
* 위키백과의 XPath


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

IETF
====

\*\*국제 인터넷 표준화 기구 (The Internet Engineering Task Force, IETF)\*\*는 인터넷 뒤에 있는 메커니즘, 특히 TCP/IP 또는 인터넷 프로토콜 제품군을 관리하는 명세서 초안을 작성하는 세계적인 조직입니다.

IETF는 공개되어 있으며, 자원봉사자에 의해 운영되고 인터넷 협회의 후원을 받습니다.

같이 보기
-----

* 공식 웹사이트


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

WebKit
======

WebKit은 마크업을 기반으로 올바른 형식의 웹페이지를 표시하는 프레임워크입니다. Apple Safari는 WebKit에 의존하며 대부분의 모바일 브라우저도 사용합니다(WebKit은 이식성이 뛰어나고 사용자 정의 개발이 가능하기 때문입니다).

WebKit은 KDE의 KHTML 및 KJS 라이브러리의 포크로 시작되었지만, 많은 개인과 회사(KDE, Apple, Google 및 Nokia 포함)가 기여해 왔습니다.

WebKit은 Apple 상표이며 프레임워크는 BSD 형식 라이센스에 따라 배포됩니다. 그러나, LGPL:에는 **WebCore** 렌더링 라이브러리와 **JavaScriptCore** 엔진이라는 두 가지 중요한 구성요소가 포함됩니다.

같이 보기
-----

* 위키백과의 WebKit on Wikipedia
* WebKit CSS 확장 (en-US)


넷스케이프 네비게이터 (Netscape Navigator) - MDN Web Docs 용어 사전: 웹 용어 정의

넷스케이프 네비게이터 (Netscape Navigator)
================================

넷스케이프 네비게이터 (Netscape Navigator) 또는 넷스케이프는 1990년대에 선두적인 브라우저였습니다. 넷스케이프는 모자이크(Mosaic)를 기반으로 했고 넷스케이프 팀은 모자이크용 코드를 작성한 프로그래머인 Marc Andreessen이 이끌었습니다.

넷스케이프는 웹을 텍스트 전용 경험보다 그래픽 경험으로 만드는데 도움을 주었습니다. 많은 브라우징 기능은 넷스케이프가 도입한 이후 표준이 되었습니다. 넷스케이프는 로드하는 동안 웹페이지를 표시할 수 있었고, 양식 및 대화형 컨텐츠에 JavaScript를 사용했고, 쿠키에 세션 정보를 저장할 수 있습니다. 넷스케이프의 기술적 이점과 초기 지배력에도 불구하고, 1990년대 후반에 인터넷 익스플로러가 시장 점유율에서 빠르게 넷스케이프를 추월했습니다.

같이 보기
-----

* 위키백과의 넷스케이프 네비게이터


최초 콘텐츠풀 페인트 (First contentful paint, FCP) - MDN Web Docs 용어 사전: 웹 용어 정의

최초 콘텐츠풀 페인트 (First contentful paint, FCP)
=========================================

\*\*최초 콘텐츠풀 페인트(FCP)\*\*는 브라우저가 DOM에서 첫 번째 콘텐츠 비트를 렌더링하여, 페이지가 실제로 로드되고 있다는 첫 번째 피드백을 사용자에게 제공하는 경우입니다. FCP 이후에 사용자는 웹 페이지가 로드되어 있다는 것을 느낄 수 있습니다.

최초 콘텐츠풀 페인트 타임스탬프는 브라우저가 텍스트, 이미지(배경 이미지 포함), 비디오, 그려진 캔버스 또는 비어있지 않은 SVG를 처음 렌더링한 시점입니다. 이것은 iframe의 모든 콘텐츠를 제외하지만 보류 중인 웹 글꼴이 있는 텍스트를 포함합니다. 사용자가 페이지 콘텐츠를 소비하기 시작한 것은 이 시점이 처음입니다.

같이 보기
-----

* 최초 페인트
* `PerformancePaintTiming` (en-US)
* 최대 콘텐츠풀 페인트
* 최초 의미있는 페인트
* web.dev의 최초 콘텐츠풀 페인트


컴파일 시간 (Compile time) - MDN Web Docs 용어 사전: 웹 용어 정의

컴파일 시간 (Compile time)
=====================

'컴파일 시간'은 프로그램이 처음 로드된 시점부터 프로그램이 구문 분석될때까지의 시간입니다.

같이 보기
-----

* 위키백과의 컴파일 시간


엔진 (Engine) - MDN Web Docs 용어 사전: 웹 용어 정의

엔진 (Engine)
===========

JavaScript 엔진은 JavaScript 프로그램을 구문 분석하고 실행하는 인터프리터입니다.

같이 보기
-----

* 위키백과의 JavaScript 엔진


접근 가능한 이름 (Accessible name) - MDN Web Docs 용어 사전: 웹 용어 정의

접근 가능한 이름 (Accessible name)
===========================

\*\*접근 가능한 이름(Accessible name)\*\*은 사용자 인터페이스 요소의 이름입니다. 이는 보조 기술 사용자에게 요소에 대한 레이블을 제공하는 HTML 요소와 연관된 텍스트입니다.

접근 가능한 이름은 요소의 목적이나 의도를 전달합니다. 이는 사용자가 요소의 용도와 요소와 상호 작용하는 방법을 이해하는 데 도움이 됩니다. 일반적으로, 요소의 접근 가능한 이름은 페이지마다 고유해야 합니다. 이를 통해 사용자는 특정 요소를 다른 요소와 구별하고 상호 작용하려는 요소를 식별하는 데 도움이 됩니다.

요소와 HTML 마크업에 따라, 접근 가능한 이름의 값은 보이는 (예, `<figcaption>` 내의 텍스트) 또는 보이지 않는 (예, 요소에 설정된 `aria-label` 속성) 콘텐츠 또는 둘 다의 조합에서 나타날 수 있습니다. 요소의 접근 가능한 이름이 결정되는 방식은 요소마다 다른 접근 가능한 이름 계산을 기반으로 합니다.

접근 가능한 이름으로 보이는 텍스트를 사용하는 것이 가장 좋습니다. `<a>`, `<td>` (en-US) 및 `<button>`을 포함한 많은 요소는 해당 콘텐츠에서 이름을 얻습니다. 예를 들어, `<a href="foo.html">Bar</a>`가 있는 경우 접근 가능한 이름은 "Bar"입니다.

다른 요소는 연관된 요소의 콘텐츠에서 접근 가능한 이름을 얻습니다. `<fieldset>`, `<table>` (en-US) 및 `<figure>`와 같은 일부 상위 요소의 경우 해당 요소에 하위 `<fieldset>`, `<caption>` 또는 `<figcaption>`는 각각 자동으로 연결됩니다. `<textarea>` (en-US) 및 `<input>` (en-US)와 같은 일부 다른 요소의 경우 접근 가능한 이름은 관련 요소인 `<label>` 요소에서도 알 수 있습니다. 하지만 해당 연결은 form control의 `id`와 일치하는 `<label>`의 `for` 속성 값을 사용하여 명시적으로 설정해야 합니다.

`<img>`와 같은 일부 요소의 경우 접근 가능한 이름은 해당 속성(이 경우, `alt` 속성 값)에서 가져옵니다. `<img src="grape.jpg" alt="banana"/>`가 주어지면 이미지의 접근 가능한 이름은 "banana"입니다.

표시되는 콘텐츠와 요소 또는 여러 텍스트 노드와 요소 사이의 연결을 생성하려면, `aria-labeledby` (en-US) 속성을 사용할 수 있습니다. 접근 가능한 이름이 필요한 UI 요소와 연결할 표시되는 텍스트가 없는 경우, `aria-label` 속성을 사용할 수 있습니다. `<code>`, `<del>` 및 `<mark>`와 같이 인라인 텍스트를 표시하는 요소에 이름을 추가하면 안 됩니다.

텍스트 콘텐츠 섹션과 같은 많은 요소에는 접근 가능한 이름이 필요하지 않습니다. 모든 컨트롤에는 접근 가능한 이름이 있어야 합니다. 정보를 전달하고 순전히 표현용이 아닌 모든 이미지도 마찬가지입니다.

보조 기술은 요소의 역할과 함께 접근 가능한 이름인 접근성 이름 속성을 사용자에게 제공합니다. 많은 요소에는 접근 가능한 이름이 필요하지 않지만, 일부 콘텐츠 역할 (en-US)에는 접근 가능한 이름이 있으면 이점을 얻을 수 있습니다. 예를 들어, `tabpanel` (en-US)은 사용자가 `tab` (en-US) 역할을 사용하여 관련 요소를 활성화한 후에 나타나는 콘텐츠 부분입니다. 이 역할은 `<div>` (en-US) 요소와 같이 필요한 이름이 없는 요소에 설정할 수 있습니다. `tab`은 컨트롤이며, 접근 가능한 이름이 있어야 합니다. `tabpanel`은 `tab`의 하위(콘텐츠 부분)입니다. `tabpanel`에 `aria-labelledby`를 추가하는 것이 가장 좋습니다.

같이 보기
-----

* ARIA 역할 (en-US)
* ARIA 속성
* 접근성
* 접근성 배우기


스피드 인덱스 (Speed index, SI) - MDN Web Docs 용어 사전: 웹 용어 정의

스피드 인덱스 (Speed index, SI)
=========================

**스피드 인덱스(Speed index, SI)** 는 페이지의 콘텐츠가 시각적으로 얼마나 빨리 채워지는지를 측정하는 페이지 로드 성능 측정항목입니다. 스피드 인덱스는 뷰포트의 크기에 따라 달라지며 밀리초 단위로 표시됩니다. 시간이 짧을수록 점수가 높아집니다.

스피드 인덱스는 다른 마일스톤 및 지표와 관련된 문제를 해결하고 실제 사용자 경험의 척도를 제공하기 위해 도입되었습니다. 스피드 인덱스는 WebPageTest 및 Lighthouse를 포함한 여러 일반적인 감사에서 구현되었습니다.

스피드 인덱스는 페이지가 시각적으로 완료될 때까지 100ms 간격으로 페이지의 시각적으로 완료된 비율을 계산합니다. 전체 점수는 화면이 시각적으로 완전하지 않은 비율을 초당 10회 개인의 비율로 합산한 것입니다.

 페이즈 로드 이벤트 전에 스크롤 없이 볼 수 있는 콘텐츠가 어떻게 로드되고 스피드 인덱스로 측정되는지 보여주는 다이어그램입니다.

 ![SpeedIndex의 계산](/ko/docs/Glossary/Speed_index/speedindex.png)

같이 보기
-----

* 웹 성능 배우기


렌더링 차단 (Render-blocking) - MDN Web Docs 용어 사전: 웹 용어 정의

렌더링 차단 (Render-blocking)
========================

**렌더링 차단 (Render-blocking)** 은 사용자 인터페이스 렌더링을 차단할 때 웹 사이트를 로드하는 프로세스의 모든 부분을 나타냅니다. 렌더링 차단은 사용자가 사이트와 상호 작용(예, 콘텐츠 보기 또는 컨트롤과 상호 작용)할 수 있을 때까지의 시간을 늘리기 때문에 웹 성능에 좋지 않습니다.

렌더링 차단의 가장 일반적인 원인은 처음에 로드된 CSS 또는 JavaScript 파일입니다.

같이 보기
-----

* CSS 성능 최적화 (en-US)
* JavaScript 성능 최적화 (en-US)
* Speckyboy의 렌더링 차단 리소스란 무엇이며, 렌더링 차단 문제를 해결하는 방법 Speckyboy (2018)


사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP) - MDN Web Docs 용어 사전: 웹 용어 정의

사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP)
============================================

**사용자 데이터그램 프로토콜 (User Datagram Protocol, UDP)** 은 보안과 신뢰성보다 전송 속도와 효율성이 더 중요한 경우 데이터를 전송하기 위해 IP과 함께 오래 사용된 프로토콜입니다.

UDP는 최소한의 프로토콜 메커니즘을 갖춘 간단한 무연결 통신 모델을 사용합니다. UDP는 데이터 무결성을 위한 checksums 및 데이터그램의 소스 및 대상에서 다양한 기능을 처리하기 위한 포트 번호를 제공합니다. UDP에는 핸드셰이킹 대화 수단이 없으므로, 사용자 프로그램이 기본 네트워크의 불안정성에 노출됩니다. 전달, 순서 또는 중복에 관한 보호가 보장되지 않습니다. 네트워크 인터페이스 수준에서 오류 수정 기능이 필요한 경우, 애플리케이션은 이 목적을 가지고 설계된 전송 제어 프로토콜(Transmission Control Protocol, TCP) 또는 스트림 제어 전송 프로토콜(Stream Control Transmission Protocol, SCTP)를 사용할 수 있습니다.

UDP는 오류 확인 및 수정이 필요하지 않거나 애플리케이션에서 수행되는 목적에 적합합니다. UDP는 프로토콜 스택에서 이러한 처리를 인한 오버헤드를 방지합니다. 시간에 민감한 애플리케이션은 UDP를 사용하는 경우가 많습니다. 실시간 시스템에서는 UDP는 옵션이 아닐 수 있는 재전송으로 인해 지연된 패킷을 기다리는 것보다, 패킷 삭제가 더 바람직하기 때문입니다.

같이 보기
-----

* 위키백과의 User Datagram Protocol
* 명세서


사용자 에이전트 - MDN Web Docs 용어 사전: 웹 용어 정의

사용자 에이전트
========

사용자 에이전트(user agent)는 사용자를 대표하는 컴퓨터 프로그램으로, 웹 맥락에선 브라우저를 의미합니다.

브라우저 외에도, 웹 페이지를 스크랩하는 봇, 다운로드 관리자, 웹에 접근하는 다른앱도 사용자 에이전트입니다. 브라우저는 서버에 보내는 모든 요청에 사용자 에이전트(UA) 문자열이라고 부르는, 자신의 정체를 알리는 `User-Agent` (en-US) HTTP 헤더를 보냅니다. 이 문자열은 보통 브라우저 종류, 버전 번호, 호스트 운영체제를 포함합니다.

스팸 봇, 다운로드 관리자, 일부 브라우저는 자신의 정체를 숨기고 다른 클라이언트인 척 하려고 가짜 사용자 에이전트(UA) 문자열을 보내곤 하며, 이를 사용자 에이전트 스푸핑(spoofing)이라고 말합니다.

클라이언트에서는 JavaScript의 `NavigatorID.userAgent` (en-US) 속성을 통해 사용자 에이전트 문자열에 접근할 수 있습니다.

보통 사용자 에이전트 문자열은 `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"`과 같은 형태입니다.

같이 보기
-----

* 위키백과 사용자 에이전트
* `NavigatorID.userAgent` (en-US)
* 사용자 에이전트를 이용한 브라우저 감지
* RFC 2616, 섹션 14.43: The `User-Agent` header
* Glossary:
    + Browser
* HTTP Headers
    + `User-agent` (en-US)


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

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 - MDN Web Docs 용어 사전: 웹 용어 정의

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) - MDN Web Docs 용어 사전: 웹 용어 정의

모듈성 (Modularity)
================

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

같이 보기
-----

* 위키백과의 Modularity


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

Pixel
=====

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

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

같이 보기
-----

* 위키백과의 Pixel


파이썬 (Python) - MDN Web Docs 용어 사전: 웹 용어 정의

파이썬 (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 - MDN Web Docs 용어 사전: 웹 용어 정의

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 - MDN Web Docs 용어 사전: 웹 용어 정의

MathML
======

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

같이 보기
-----

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


콜백 함수 - MDN Web Docs 용어 사전: 웹 용어 정의

콜백 함수
=====

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

콜백 기반 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) - MDN Web Docs 용어 사전: 웹 용어 정의

품질 값 (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) - MDN Web Docs 용어 사전: 웹 용어 정의

최상위 계층 (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(퍼센트 인코딩) - MDN Web Docs 용어 사전: 웹 용어 정의

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) - MDN Web Docs 용어 사전: 웹 용어 정의

최상위 도메인 (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 - MDN Web Docs 용어 사전: 웹 용어 정의

Argument
========

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

같이 보기
-----

* Wikipedia의 Parameter와 Argument의 차이
* JavaScript의 `arguments`객체


프로토타입 기반 프로그래밍 - MDN Web Docs 용어 사전: 웹 용어 정의

프로토타입 기반 프로그래밍
==============

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

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

같이 보기
-----

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


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

SVN
===

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

같이 보기
-----

* 위키백과의 Apache Subversion
* 공식 웹사이트


바운딩 박스 - MDN Web Docs 용어 사전: 웹 용어 정의

바운딩 박스
======

요소 바운딩 박스는 해당 요소와 해당 하위 항목을 완전히 둘러싸는 가능한 가장 작은 직사각형(해당 요소의 사용자 좌표계 축과 정렬됨)입니다.


CORS 허용 목록에 있는 요청 헤더 (CORS-safelisted request header) - MDN Web Docs 용어 사전: 웹 용어 정의

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 허용 목록에 있는 응답 헤더
* 금지된 헤더 이름
* 요청 헤더


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

캐시
==

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

같이 보기
-----

* 위키피디아의 웹 캐시


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

Operand
=======

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

같이 보기
-----

* 위키백과의 피연산자


그리드 영역 (Grid Areas) - MDN Web Docs 용어 사전: 웹 용어 정의

그리드 영역 (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 - MDN Web Docs 용어 사전: 웹 용어 정의

Robots.txt
==========

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

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

같이 보기
-----

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


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

DNS
===

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

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

같이 보기
-----

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


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

Mozilla Firefox
===============

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

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

같이 보기
-----

* 공식 웹 사이트
* MDN의 Firefox 개발자 문서


생성자 (Constructor) - MDN Web Docs 용어 사전: 웹 용어 정의

생성자 (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) - MDN Web Docs 용어 사전: 웹 용어 정의

스냅 위치 (Snap positions)
======================

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

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


애플 Safari - MDN Web Docs 용어 사전: 웹 용어 정의

애플 Safari
=========

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

같이 보기
-----

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


방화벽 - MDN Web Docs 용어 사전: 웹 용어 정의

방화벽
===

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

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

같이 보기
-----

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