recursal/MDN huggingface dataset:
공백 (Whitespace)
===============

**공백(Whitespace)** 은 다른 문자 사이에 가로 또는 세로 간격을 제공하는 데 사용되는 문자열을 나타냅니다. 공백은 HTML, CSS, JavaScript 및 기타 컴퓨터 언어에서 토큰을 구분하는 데 자주 사용됩니다.

공백 문자와 사용법은 언어마다 차이가 있습니다.

HTML에서
------

Infra Living Standard에서는 5개의 문자를 'ASCII 공백'으로 정의합니다(U+0009 TAB, U+000A LF, U+000C FF, U+000D CR 및 U+0020 SPACE).

JavaScript에서
------------

ECMAScript 언어 명세서는 여러 유니코드 코드 포인트를 '공백'으로 정의합니다(U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> 및 기타 유니코드 "Space\_Separator" 코드 포인트 <USP>).

같이 보기
-----

* 위키백과의 공백 문자
* HTML, CSS 및 DOM에서 공백을 처리하는 방법 (en-US)
* `white-space`
* 명세서
    + ASCII 공백 명세
    + ECMAScript 언어 명세서
* 용어 사전
    1. Character
PHP
===

**PHP**(PHP: Hypertext Preprocessor)는 HTML에 내장되어 웹 애플리케이션과 동적 웹 사이트를 구축할 수 있는 오픈 소스 서버 측 스크립팅 언어입니다.

예제
--

### 기본 문법


```php
// PHP 코드 시작
<?php
 // PHP 코드가 위치
?>
// PHP 코드 종료
```

### 화면에 데이터 출력하기


```php
<?php
 echo "Hello World!";
?>
```

### PHP 변수


```php
<?php
 // 변수
 $nome='Danilo';
 $sobrenome='Santos';
 $pais='Brasil';
 $email='danilocarsan@gmail.com';

 // 변수 출력하기
 echo $nome;
 echo $sobrenome;
 echo $pais;
 echo $email;
?>
```

같이 보기
-----

* 공식 웹사이트
* PHP on Wikipedia
* 위키북스의 PHP 프로그래밍
* MDN 웹 문서 용어 사전
    + Java
    + JavaScript
    + Python
    + Ruby
CORS
====

**CORS** (Cross-Origin Resource Sharing)는 브라우저가 프론트엔드 JavaScript 코드가 교차 출처(cross-origin)에 대한 응답에 접근하는 것을 차단하는지 여부를 결정하는 HTTP headers 전송으로 이루어진 시스템입니다.

동일 출처 보안 정책은 리소스에 대한 출처 간 접근을 금지합니다. 그러나 CORS는 웹 서버가 리소스에 대한 출처 간 접근을 허용하도록 선택할 수 있는 기능을 제공합니다.

CORS 헤더
-------

`Access-Control-Allow-Origin`

응답을 공유할 수 있는지 여부를 나타냅니다.

`Access-Control-Allow-Credentials`

자격 증명 플래그가 true일 때 요청에 대한 응답을 노출할 수 있는지 여부를 나타냅니다.

`Access-Control-Allow-Headers`

실제 요청을 할 때 사용할 수 있는 HTTP 헤더를 나타내기 위해 실행 전 요청에 대한 응답으로 사용됩니다.

`Access-Control-Allow-Methods`

실행 전 요청에 대한 응답으로 리소스에 접근할 때 허용되는 메서드를 지정합니다.

`Access-Control-Expose-Headers`

이름을 나열하여 응답의 일부로 노출될 수 있는 헤더를 나타냅니다.

`Access-Control-Max-Age`

실행 전 요청 결과를 캐시할 수 있는 기간을 나타냅니다.

`Access-Control-Request-Headers`

실제 요청이 이루어질 때 사용될 HTTP 헤더를 서버에 알리기 위해 프리플라이트 요청을 발행할 때 사용됩니다.

`Access-Control-Request-Method`

실제 요청이 이루어질 때 어떤 HTTP method가 사용될 것인지 서버에 알리기 위해 프리플라이트 요청을 발행할 때 사용됩니다.

`Origin`

가져오기(fetch) 요청이 시작된 위치를 나타냅니다.

`Timing-Allow-Origin` (en-US)

Resource Timing API (en-US)의 기능을 통해 검색된 속성 값을 볼 수 있는 출처를 지정합니다. 그렇지 않으면, 교차 출처 제한으로 인해 0으로 보고됩니다.

같이 보기
-----

* 교차 출처 리소스 공유 (CORS) on MDN
* 위키피디아의 교차 출처 리소스 공유
* Fetch 명세
DOM
===

**DOM** (Document Object Model) 은 HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API입니다. DOM은 browser에서 로드되며, node 트리(각 노드는 문서의 부분을 나타냅니다)로 표현하는 문서 모델입니다(예, element, 문자열, 또는 주석).

DOM은 document의 모든 노드에 접근하고 상호작용할 수 있도록 브라우저에서 코드를 실행할 수 있게 해주기 때문에, Web에서 가장 많이 사용되는 API 중 하나입니다. 노드들은 생성, 이동 및 변경될 수 있습니다. 이벤트 리스너를 노드에 추가해 주어진 이벤트가 발생할 때 트리거되게 할 수 있습니다.

같이 보기
-----

* MDN의 DOM 문서
* DOM 표준
* 위키피디아의 문서 객체 모델
직렬화 가능 객체 (Serializable object)
===============================

**직렬화 가능 객체 (Serializable object)** 는 모든 JavaScript 환경('영역')에서 직렬화되고 나중에 역직렬화될 수 있는 객체입니다.

예를 들어, 직렬화 가능 객체를 통해, 디스크에 저장하고 나중에 복원하거나 `structuredClone()`를 사용하여 복제하거나, `DedicatedWorkerGlobalScope.postMessage()` (en-US)를 사용하여 워커 간에 공유할 수 있습니다.

 직렬화에는 원래 객체의 모든 속성과 기타 부분이 포함되지 않을 수 있습니다.
 예를 들어, `DOMException` (en-US)의 직렬화에는 `name` 및 `message` 속성이 포함되어야 하지만, 다른 속성이 포함되어 있는지 여부는 구현에 따라 다릅니다.
 결과적으로, 역직렬화된 객체는 원래 객체의 동일한 복제본/복사본이 아닐 수 있습니다.
 그러나 역직렬화된 새 객체는 깊은 복사이므로, 원래 객체에서 직렬화된 다음 새 객체로 역직렬화된 속성은 원래 객체와 참조를 공유하지 않습니다.

 어떤 경우에는 객체를 직렬화 및 역직렬화할 때, 복사본을 만드는 것보다 일부 리소스를 전송하는 것이 합리적입니다.
 전송할 수 있는 객체를 전송 가능한 객체 (en-US)라고 합니다.

지원되는 객체
-------

 모든 원시 값은 직렬화 가능합니다.
 모든 객체가 직렬화 가능한 객체는 아닙니다.
 직렬화할 수 있는 객체는 The structured clone algorithm > Supported types에 나열되어 있습니다.

**참고:** 직렬화 가능 객체는 웹 IDL 파일에 `[Serializable]` 속성으로 마크업되어 있습니다.
Immutable
=========

불변 값은 완전히 새로운 값을 생성하지 않고는 내용을 변경할 수 없는 값입니다.

JavaScript에서, 원시 값은 불변입니다. 원시 값이 생성되면 변경할 수 없지만, 이를 가진 변수에 다른 값을 다시 할당할 수 있습니다. 반대로, 객체 및 배열은 기본적으로 변경할 수 있습니다. 새 값을 다시 할당하지 않고도 속성과 요소를 변경할 수 있습니다.

몇 가지 이유로 불변 객체를 사용하는 것이 도움될 수 있습니다.

* 성능 향상하기(향후 객체의 변경에 대한 계획 없음)
* 메모리 사용을 줄이기(전체 객체를 복제하는 대신 객체 참조 만들기)
* 스레드 안전성(여러 스레드가 서로 간섭하지 않고 동일한 객체 참조 가능)
* 개발자의 정신적인 부담 감소(객체의 상태가 변경되지 않고 항상 일관됨)

변경 가능성을 쉽게 증명할 수 있습니다. 속성을 변경할 수 있는 한 가지 방법을 제공하는 한 객체는 변경 가능합니다. 반면에, "불변성"은 이를 보호할 언어적 의미가 없다면 증명하기 어렵습니다. 이는 개발자 간 약속의 문제입니다. 예를 들어, `Object.freeze()`는 JavaScript에서 객체를 변경할 수 없도록 만드는 언어 수준 메서드입니다.

같이 보기
-----

* 위키피디아의 불변 객체
* Mutable
알파 (알파 채널)
==========

**알파 채널**은 (`<color>`)의 불투명도를 지정합니다. 색상은 여러 숫자들의 디지털 형식으로 표현되고, 각 숫자는 색상의 특정 구성 요소의 강도 또는 강도 수준을 나타냅니다. 이러한 각 구성 요소를 **채널**이라고 합니다. 일반적인 이미지 파일에서 색상 채널은 최종 색상을 구성하는 데 빨간색, 녹색, 파란색이 얼마나 사용되는지를 나타냅니다. 배경을 어느 정도 볼 수 있는 색상을 표현하기 위해, 색상에 네 번째 채널인 알파 채널을 추가합니다.

예를 들어, 색상 `#8921F2`(`rgb(137 33 242)` 또는 `hsl(270 89% 54)`로 표현됩니다)는 멋진 보라색 음영입니다. 아래에는 왼쪽 상단 모서리에 해당 색상의 작은 상자가 있고, '동일' 색상이지만 알파 채널이 0.5(50% 불투명도)로 설정된 `#8921F280` 상자가 있습니다. `80`은 16진수로 50%에 해당합니다. 이 색상은 `rgb(137 33 242 / 0.5)` 또는 `hsl(270 89% 54 / 0.5)`. 두 개의 상자는 텍스트 단락 위에 그려집니다.

![색상에 대한 알파 채널의 효과를 보여주는 이미지입니다.](/ko/docs/Glossary/Alpha/alpha-channel-example.png)

보시다시피, 알파 채널이 없는 색상은 배경 텍스트를 완전히 차단하는 반면, 알파 채널이 있는 상자는 보라색 배경 색상을 통해 표시됩니다.

같이 보기
-----

* CSS 색상
* CSS 값과 단위 소개
* 이미지 파일 형식 및 형식 안내서 (en-US)
* 알파 합성 on Wikipedia
* RGBA 색상 모델 on Wikipedia
* 채널 (디지털 이미지) on Wikipedia
Simple header
=============

CORS-safelisted request header의 과거 표현입니다.
그리드 행 (Grid Row)
================

\*\*그리드 행(grid row)\*\*은 CSS 그리드 레이아웃의 수평 트랙, 즉 두 수평 그리드 선 사이의 공간입니다. `grid-template-rows` (en-US) 속성 또는 약식 `grid` (en-US) 또는 `grid-template` (en-US) 속성에 의해 정의됩니다.

또한, 요소가 '명시적 그리드'에서 생성된 행 외부에 배치되면 '암시적 그리드'에서 행이 생성될 수 있습니다. 이러한 행은 기본적으로 자동 크기가 지정되거나, `grid-auto-rows` (en-US) 속성으로 지정된 크기를 가질 수 있습니다.

CSS 그리드 레이아웃에서 정렬 시, 행 방향으로 작동되는 축은 '인라인 또는 가로 축'으로 알려져 있습니다.

같이 보기
-----

### 속성 참고서

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

* CSS 그리드 레이아웃 안내서: 그리드 레이아웃 기본 개념
난수 생성기 (Random Number Generator)
================================

**의사 난수 생성기 (pseudorandom number generator, PRNG)** 는 복잡하고 예측 불가능해 보이는 패턴으로 숫자를 출력하는 알고리즘입니다. 진정한 난수(예를 들어, 방사선 소스)는 전혀 예측할 수 없지만, 모든 알고리즘은 예측 가능하며 PRNG는 동일한 시작 매개변수 또는 'seed'를 전달하면 동일한 숫자를 반환합니다.

PRNG는 게임과 같은 다양한 애플리케이션에 사용될 수 있습니다.

암호학적으로 안전한 PRNG는 암호화에 사용하기에 적합한 특정 추가 속성을 갖춘 PRNG입니다. 여기에는 아래가 포함됩니다.

* 공격자가 (시드에 대한 지식 없이) 출력을 예측하는 것은 계산을 고려했을 때 불가능합니다.
* 공격자가 현재 상태를 알아낼 수 있다면, 공격자가 이전에 내보낸 숫자를 알아낼 수 있어서는 안 됩니다.

대부분의 PRNG는 암호학적으로 안전하지 않습니다.

같이 보기
-----

* 위키백과의 의사 난수 생성기
* 암호화된 보안 PRNG가 아닌 내장된 JavaScript PRNG 함수인 `Math.random()`.
* 암호화된 보안 숫자를 제공하기 위한 함수인 `Crypto.getRandomValues()`
키워드(Keyword)
============

\*\*키워드(Keyword)\*\*는 내용을 설명하는 단어나 문구입니다. 온라인 키워드는 검색 엔진에 대한 쿼리로 사용되거나 웹사이트의 콘텐츠를 식별하는 단어로 사용됩니다.

검색 엔진을 사용할 때, 키워드를 사용하여 찾고 있는 내용을 지정하면 검색 엔진이 관련 웹 페이지를 반환합니다. 보다 정확한 결과를 얻으려면, "Mustang" 대신 "Blue Mustang GTO"와 같은 보다 구체적인 키워드를 사용해 보세요. 또한, 웹페이지는 메타 태그(`<head>` 섹션 안에서) 키워드를 사용하여 페이지 콘텐츠를 설명하므로, 검색 엔진이 웹페이지를 더 잘 식별하고 구성할 수 있습니다.

같이 보기
-----

* 위키백과의 Keyword
WAI
===

웹 접근성 표준(Web Accessibility Initiative, WAI)은 비표준 브라우저 또는 장치가 필요할 수 있는 다양한 문제를 가지고 있는 사람들의 접근성을 개선하기 위한 월드 와이드 웹 컨소시엄(World Wide Web Consortium, W3C)의 노력입니다.

같이 보기
-----

* WAI 웹사이트
* 위키백과의 웹 접근성 표준
단편화 상자 (Fragmentainer)
======================

단편화 상자 (Fragmentainer)는 CSS Fragmentation 명세서에 아래와 같이 정의되어 있습니다.

> 
> 단편화된 흐름의 일부 (또는 전체)를 포함하는 페이지 상자, 열 상자 또는 영역과 같은 상자입니다. 단편화 상자는 사전 정의되거나, 필요에 따라 생성될 수 있습니다. 깨지기 쉬운 콘텐츠가 블록 차원의 단편화 상자를 오버플로우하는 경우, 대신 조각화 컨텍스트에서 다음 컨테이너로 침범하게 됩니다.
> 
> 
> 

단편화된 컨텍스트는 CSS 페이징 미디어(CSS Paged Media)에서 찾을 수 있고, 여기서 단편화 상자는 페이지를 정의하는 상자입니다. 다중 열 레이아웃에서 단편화 상자는 다중 열 컨테이너에 열이 정의될 때 생성되는 열 상자입니다. CSS 영역에서 각 영역은 단편화 상자입니다.
ITU
===

국제 전기 통신연합 (International Telecommunication Union, ITU)은 전선, 라디오, 전화, 인터넷을 포함한 통신에 대한 표준과 규칙을 제정하도록 UN에서 승인한 조직입니다.

전송이 필요한 위치에 도달하도록 보장하는 규칙을 정의하고 모스 부호에 사용되는 "SOS" 경고 신호를 생성하는 것부터, 국제 전기 통신연합 (ITU)은 정보와 아이디어를 교환하기 위해 기술을 사용하는 방법에 있어 오랫동안 중요한 역할을 해왔습니다.

인터넷 시대에 스트리밍, 원격 회의 및 기타 목적에 사용되는 비디오 및 오디오 데이터 형식에 대한 표준을 설정하는 국제 전기 통신연합 (ITU)의 역할입니다. 예를 들어, ITU와 동화상 전문가 그룹(Moving Picture Experts Group, MPEG)은 함께 협력하여 MPEG-2 (ITU H.262), AVC (ITU H.264) 및 HEVC (ITU H.265)와 같은 다양한 MPEG 명세서를 개발 및 게시하고 유지 관리했습니다.

같이 보기
-----

* ITU 웹사이트
* ITU 역사 포털
코덱 (Codec)
==========

**코덱** ("**co**der-**dec**oder"에서 파생된 혼합어)은 데이터 스트림을 인코딩하거나 디코딩하는 프로그램, 알고리즘 또는 장치입니다. 특정 코덱은 특정 인코딩 또는 압축 기술을 처리하는 방법을 알고 있습니다.

같이 보기
-----

* 위키백과의 코덱
* 웹 비디오 코덱 안내서
* 웹 오디오 코덱 안내서 (en-US)
* 웹에서의 미디어 타입 및 형식 안내 (en-US)
LCP
===

**최대 콘텐츠풀 페인트 (Largest contentful paint, LCP)** 성능 지표는 페이지가 처음 로드되기 시작할 때부터 기록된, 뷰포트 내에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 제공합니다.

LCP를 결정할 때 아래 요소가 포함되어 측정됩니다.

* `<img>` 요소.
* SVG 내부의 `<image>` (en-US) 요소.
* `<video>` 요소의 포스터 이미지.
* `background-image`가 있는 요소.
* `<p>`와 같은, 텍스트 노드 그룹.
같이 보기
-----

* `LargestContentfulPaint` (en-US)
* 최초 콘텐츠풀 페인트
* 최초 페인트
Google Chrome
=============

구글 크롬(Google Chrome)은 구글이 개발한 무료 웹 브라우저입니다. 이는 Chromium 오픈 소스 프로젝트에 기반을 두고 있습니다. 몇 가지 주요 차이점은 BrowserStack에 설명되어 있습니다. 크롬은 Blink라고 불리는 고유한 레이아웃을 지원한다. 크롬의 iOS 버전은 Blink가 아니라 해당 플랫폼의 웹뷰(WebKit)를 사용한다는 점에 유의해야 합니다.

같이 보기
-----

* 위키피디아의 Google Chrome
### 크롬 사용자들을 위해

일반 사용자를 위해 다음 중 하나의 링크를 이용하세요.

* Android
* iOS
* Desktop
### 웹 개발자들을 위해

최신 Chrome 기능을 시도하려면, 사전 안정화된 빌드 중 하나를 설치해야 합니다. 구글은 업데이트를 자주 하며, 배포된 버전이 안정된 버전과 나란히 실행되도록 설계하였습니다. 새로운 기능에 대해 알아보려면 Chrome 릴리스 블로그를 방문해야 합니다.

* Android용 Chrome Dev
* Desktop용 Chrome Canary.
델타 (Delta)
==========

**델타**라는 용어는 두 값 또는 상태 간의 차이를 나타냅니다.

이름은 로마 알파벳의 문자 'D'에 해당하는 그리스 문자 Δ (델타)에서 유래되었습니다. 'D'는 'difference'의 약칭으로 문자 Δ를 사용하는 것을 의미합니다.

'델타'라는 용어는 물리적 또는 가상 객체의 속도, 위치 또는 가속도 변화를 전달할 때 일반적으로 사용됩니다. 음파의 크기나 주파수의 변화를 설명할 때도 사용됩니다.

예를 들어, 화면의 객체가 왼쪽에서 오른쪽으로 얼마나 멀리 이동하는지 설명할 때, 'delta x' 또는 'Δx'라는 용어를 사용할 수 있습니다.

마찬가지로, 'X'의 새 값과 이전 값이 주어지면, 다음과 같이 델타를 계산할 수 있습니다.


```js
let deltaX = newX - oldX;
```


더 일반적으로는, 델타를 수신하고 이를 사용하여 저장된 이전 조건을 업데이트합니다.


```js
let newX = oldX + deltaX;
```

같이 보기
-----

* 마우스 휠 이벤트 (예를 들어, `WheelEvent` (en-US)는 `deltaX` (en-US), `deltaY` (en-US) 및 `deltaZ` (en-US) 속성에서 마지막 이벤트 이후 휠이 이동한 거리를 제공합니다)
정적 메서드 (Static method)
======================

정적 메서드 (또는 정적 함수)는 객체의 멤버로 정의된 메서드이지만 생성자를 통해 생성된 객체 인스턴스가 아닌 API 객체의 생성자에서 직접 접근할 수 있습니다.

Web API에서, 정적 메서드는 인터페이스에 의해 정의되지만 해당 유형의 객체를 먼저 인스턴스화하지 않고도 호출할 수 있는 메서드입니다.

객체 인스턴스에서 호출되는 메서드를 '인스턴스 메서드'라고 합니다.

예제
--

Notifications API에서, `Notification.requestPermission()` (en-US) 메서드는 `Notification` 생성자 자체에서 호출됩니다. `Notification.requestPermission()` (en-US) 메서드는 정적 메서드입니다.


```js
let promise = Notification.requestPermission();
```


반면에 `Notification.close()` (en-US) 메서드는 인스턴스 메서드입니다. 이는 특정 알림 객체 인스턴스에서 호출되어 해당 시스템 알림을 닫습니다.


```js
let myNotification = new Notification("This is my notification");

myNotification.close();
```

같이 보기
-----

* Techopedia의 정적 메서드
* static
* MDN 웹 문서 용어 사전
    + Object
    + Method
최초 페인트 (First paint)
====================

\*\*최초 페인트(First Paint)\*\*는 네비게이션과 브라우저가 처음으로 픽셀을 화면에 렌더링해서 본문의 기본 배경색과 시각적으로 다른 모든 항목 렌더링하는 사이의 시간입니다. 이는 페이지 로드 시에 첫번째로 중요한 순간이며 "브라우저가 페이지 렌더링을 시작했나요?"에 대한 대답이 됩니다.

같이 보기
-----

* 최초 콘텐츠풀 페인트
* `PerformancePaintTiming` (en-US)
* 최대 콘텐츠풀 페인트
* 최초 의미있는 페인트
페이로드 헤더 (Payload header)
========================

**페이로드 헤더(payload header)** 는 하나 이상의 메시지에서 원래 리소스 표현의 안전한 전송 및 재구성과 관련된 페이로드 정보를 설명하는 HTTP 헤더입니다. 페이로드 헤더에는 메시지 페이로드의 길이, 이 페이로드에 전달되는 리소스 부분(다중 부분 메시지의 경우), 전송에 적용되는 인코딩, 메시지 무결성 검사 등과 같은 정보가 포함됩니다.

페이로드 헤더는 HTTP 요청 및 응답 메시지 모두(즉, 페이로드 데이터를 전달하는 모든 메시지)에 존재할 수 있습니다.

페이로드 헤더는 `Content-Length`, `Content-Range`, `Trailer` (en-US) 및 `Transfer-Encoding`을 포함합니다.

같이 보기
-----

* 모든 HTTP 헤더 목록
    + `Content-Length`
    + `Content-Range`
    + `Trailer` (en-US)
    + `Transfer-Encoding`
    + Representation header
* RFC 7231, section 3.3: Payload semantics
HTTP
====

The HyperText Transfer Protocol (**HTTP**)은 Web에서 하이퍼미디어 문서를 전송하는 네트워크 프로토콜입니다. 일반적으로 하이퍼미디어 문서를 사람들이 읽을 수 있도록 브라우저와 서버 사이에 존재합니다. 현재 버전의 HTTP 명세는 HTTP/2입니다.

URI의 일부로, "http://example.com/" 내의 "http"를 "스킴"이라고 합니다. "http" 스키마를 사용하는 리소스는 일반적으로 HTTP 프로토콜을 사용하여 암호화되지 않은 연결을 통해 전송됩니다. "https" 스키마 ("https://developer.mozilla.org"와 같이)는 리소스가 HTTP 프로토콜을 사용하여 전송되지만 안전한 TLS 채널을 통해 전송된다는 것을 나타냅니다.

HTTP 텍스트 기반 (모든 통신은 일반 텍스트로 수행됩니다) 이며 stateless (이전의 통신을 인식하지 않습니다) 입니다. 이 속성은 www 상에서 인간이 문서(웹 사이트) 를 읽는 것을 이상적으로 수행할 수 있도록 합니다. 그뿐만 아니라, HTTP 는 서버 간 웹 서비스 REST 또는 웹 사이트 내의 요청 AJAX 에 대한 기초로도 사용할 수 있어 웹 사이트를 더욱 동적으로 만들 수 있습니다.

같이 보기
-----

* HTTP (MDN
* 위키피디아의 HTTP
Alignment subject
=================

CSS 상자 정렬 (en-US)에서 **정렬 대상**은 속성에 의해 정렬되는 항목입니다.

`justify-self` (en-US) 및 `align-self` (en-US)의 경우, 정렬 대상은 해당 상자의 쓰기 모드를 사용해 속성이 설정된 상자의 여백 상자입니다. `justify-content` 및 `align-content`의 경우, 상자의 쓰기 모드도 사용됩니다.

정렬 대상의 정의는 사용되는 레이아웃 모드에 따라 다릅니다.

블록 컨테이너 (테이블 셀 포함)

블록의 전체 내용을 단일 단위로 나타냅니다.

다중 컬럼 컨테이너

컬럼 상자들 사이에 공백이 있는 경우를 나타냅니다.

플렉스 컨테이너

`justify-content`의 경우, 각 플렉스 라인의 플렉스 항목입니다. `align-content`의 경우, 플렉스 라인을 의미합니다. 이것은 여러 줄의 플렉스 컨테이너에만 영향을 미칠 수 있다는 것에 주목하세요.

그리드 컨테이너

행과 열 공백이 그리드 항목 사이에 추가된 적절한 축의 그리드 항목입니다. 축소된 거터는 공간 삽입을 위한 유일한 기회로 생각될 수 있습니다.

같이 보기
-----

* CSS 상자 정렬 (en-US) 모듈
태그
==

HTML에서는 요소을 생성하기 위해 **태그**가 사용됩니다.

HTML 요소의 이름은 요소의 시작 태그 시작 부분과 요소 종료 태그의 끝에 나타나는 이름입니다(요소에 종료 태그가 있는 경우). 예를 들어, `<p>` 시작 태그와 `</p>` 종료 태그의 `p`는 HTML 단락 요소의 이름입니다. 종료 태그의 요소 이름 앞에는 슬래시 문자 `</p>`가 오고 빈 요소경우 종료 태그가 필요하지도 허용되지도 않습니다.

같이 보기
-----

* 위키백과의 HTML 요소
* WHATWG의 HTML 요소 구문
* HTML 소개
상속 (Inheritance)
================

상속은 객체 지향 프로그래밍의 주요 기능입니다. 데이터 추상화는 여러 단계에서 수행될 수 있습니다. 즉, 클래스는 슈퍼클래스와 서브클래스를 가질 수 있습니다.

애플리케이션 개발자는, 슈퍼클래스의 속성 및 메서드 중 어느 것을 유지하고 추가할지 선택하여 클래스를 만들 수 있습니다. 클래스를 정의하는 방식은 매우 유연한 장점이 있습니다. 일부 언어에서는 클래스가 두 개 이상의 슈퍼클래스로부터 상속될 수 있도록 합니다(다중 상속을 의미합니다).

같이 보기
-----

* 상속과 프로토타입 체인
표준 (Normative)
==============

표준(Normative)은 소프트웨어 명세서에 표준화되어 규칙으로 따라야 하는 섹션을 나타내는 데 일반적으로 사용되는 단어입니다. 명세서에는 '비표준(non-normative)' 또는 '정보성(informative)'로 표시되는 섹션이 포함될 수도 있습니다. 비표준과 정보성 섹션은 독자가 명세서를 더 잘 이해하도록 도와주거나 예제나 최선의 방법을 보여주기 위한 목적입니다. 원칙적으로는 따를 필요가 없는 관행입니다.

같이 보기
-----

* WHATWG 위키의 표준 콘텐츠 및 정보성 콘텐츠에 대한 설명
무손실 압축 (Lossless compression)
=============================

\*\*무손실 압축(Lossless compression)\*\*은 압축된 데이터를 원본 데이터로 완벽하게 재구성할 수 있는 데이터 압축 알고리즘의 일종입니다. 무손실 압축 방법은 되돌릴 수 있습니다. 무손실 압축의 예로는 GZIP, Brotli, WebP 및 PNG가 있습니다.

반면에 손실 압축은 원본 파일에서 일부 데이터를 삭제하여 부정확한 근사치를 사용하기 때문에, 되돌릴 수 없는 압축 방법입니다.

같이 보기
-----

* 용어 사전
    + GZIP
    + Brotli
    + PNG
    + Lossy compression
웹 서버 (Web server)
=================

웹 서버(web server)는 일반적으로 클라이언트라고 하는 사용자에게 서비스를 제공하는 하드웨어 서버에서 실행되는 소프트웨어입니다. 반면에, 서버는 일반적으로 데이터 센터로 알려진 컴퓨터로 가득 찬 방에 있는 하드웨어입니다.

같이 보기
-----

* 서버에 대한 소개
* 위키백과의 서버 (컴퓨팅)
클래스 (Class)
===========

객체 지향 프로그래밍에서, '클래스'는 객체의 특성을 정의합니다. 클래스는 객체의 속성 및 메서드의 템플릿 정의이며, 객체의 더 구체적인 인스턴스를 표현하는 "청사진"입니다.

같이 보기
-----

* JavaScript의 클래스
* 상속과 프로토타입 체인
* 위키백과의 클래스 기반 프로그래밍
* 위키백과의 객체 지향 프로그래밍
RTF
===

서식 있는 텍스트 형식 (Rich Text Format, RTF)은 형식 지정 지침(굵게 또는 기울임꼴)을 지원하는 일반 텍스트 기반 파일 형식입니다.

1980년대에 Microsoft Word 팀의 프로그래머 3명이 RTF를 만들었고 Microsoft는 2008년까지 이 형식을 계속 개발했습니다. 그러나 많은 워드 프로세싱 프로그램은 여전히 RTF를 읽고 쓸 수 있습니다.

같이 보기
-----

* 위키백과의 서식 있는 텍스트 형식
* Microsoft의 v1.9.1 명세서
배열
==

"배열"은 데이터(언어에 따라 원시 값 또는 객체)의 순서가 있는 집합입니다. 배열은 하나의 변수에 여러 개의 값들을 저장하는데 사용합니다. 이것은 단 하나의 값을 저장하는 변수와 대비됩니다.

어떤 숫자 배열의 각 항목에 붙어 있는데 그것을 숫자 인덱스라고 부릅니다. 숫자 인덱스는 항목에 접근하게 해줍니다. Javascript에서 배열은 인덱스 0에서 시작하고 여러 메서드로 조작할 수 있습니다.

Javascript에서 배열은 아래와 같이 보입니다.


```js
let myArray = [1, 2, 3, 4];
let catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
// JavaScript에서 배열은 위에 보이는 것과 같이 여러 데이터 유형을 담을 수 있습니다.
```

같이 보기
-----

* Wikipedia의 배열
* MDN의 JavaScript `Array`
요소
==

**요소**(element)는 웹 페이지를 구성합니다. XML과 HTML에서, 요소는 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있습니다. 일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성됩니다.

![Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.](/ko/docs/Glossary/Element/anatomy-of-an-html-element.png)

요소와 태그는 **같지 않습니다**. 태그는 소스 코드에서 요소의 시작과 끝을 표시하고, 요소는 브라우저가 페이지를 표시할 때 사용하는 문서 모델인 DOM의 일부입니다.

같이 보기
-----

* HTML 시작하기
* 사용자 지정 요소 정의하기
* DOM의 요소를 나타내는 `Element` (en-US) 인터페이스
Blink
=====

 Blink는 Google이 Chromium의 한 부분(따라서 Chrome에도 포함되어 있습니다)으로 개발한 오픈 소스 브라우저 레이아웃 엔진입니다.
 특히, Blink는 레이아웃, 렌더링 및 DOM을 처리하는 WebKit에서 WebCore 라이브러리의 포크로 시작되었지만, 현재는 별도의 렌더링 엔진으로 자체적으로 작동하고 있습니다.

같이 보기
-----

* Blink 프로젝트 홈페이지
* 위키백과의 Blink
* Blink의 FAQ
* 용어 사전
    + Google Chrome
    + Gecko
    + Trident
    + WebKit
    + Rendering engine
Node.js
=======

**Node.js**는 개발자가 서버 사이드 및 네트워크 응용 프로그램을 만들 수 있도록 지원하는 크로스 플랫폼 JavaScript 런타임 환경입니다.

Node 패키지 매니저 (npm)
------------------

npm은 Node.js와 함께 다운로드되어 번들로 제공되는 패키지 관리자입니다. 명령줄(CLI) 클라이언트 `npm`을 사용하여 Node.js 프로젝트에서 사용할 패키지를 다운로드, 구성 및 생성할 수 있습니다. 다운로드한 패키지는 종속성 디렉토리 `node_modules/`를 포함하지 않고 ES imports문 및 CommonJS `require()`문을 통해서 가져올 수 있습니다. Node.js는 패키지를 가져올 때 지정된 상대 또는 절대 경로 없이 패키지를 확인하기 때문입니다.

npm에서 호스팅되는 패키지는 https://registry.npmjs.org/의 레지스트리에서 다운로드되지만, 호환되는 인스턴스를 사용하도록 CLI를 구성할 수 있습니다.

같이 보기
-----

* 위키백과 Node.js
* Node.js 웹사이트
* API 참조 문서
* 가이드
* npm 문서
사원수 (Quaternion)
================

**사원수(quaternion)** 는 두 개의 3D 벡터의 몫이며 3D 그래픽과 가속도계 기반 센서에서 방향 또는 회전 데이터를 나타내는 데 사용됩니다.

수학적 사원수는 이보다 더 복잡하지만, WebGL 또는 WebXR (en-US)를 사용하는 동안 회전을 나타내는 데 사용되는 **단위 사원수(unit quaternions)** (또는 **회전 사원수(rotational quaternions)**)는 예를 들어 3D 포인트와 동일한 구문을 사용하여 표현됩니다. 따라서, `DOMPoint` (en-US) (또는 `DOMPointReadOnly` (en-US)) 타입은 사원수를 저장하는 데 사용됩니다.

같이 보기
-----

* 위키백과의 사원수와 공간 회전
* 위키백과의 사원수
* WebXR 장치 API 참고서에서 `XRRigidTransform.orientation` (en-US)
SLD
===

SLD (2단계 도메인)는 '최상위 도메인(Top Level Domain, TLD)' 바로 앞에 있는 도메인 네임의 일부입니다. 예를 들어, `mozilla.org`에서 SLD는 `mozilla`이고 TLD는 `org`입니다.

자세한 정보는 2단계 도메인을 참조하세요.
Repo
====

Git 또는 SVN와 같은 리비전 컨트롤 시스템(revision control system)에서, 저장소(repo)는 다양한 메타 데이터와 함께 애플리케이션의 코드 소스를 호스팅하는 장소입니다.

같이 보기
-----

* 위키백과의 레포지토리(Repository)
크로노스 그룹 (The Khronos Group)
===========================

\*\*크로노스 그룹 (The Khronos Group)\*\*은 150개 이상의 업계 선도 기업으로 구성된 회원 중심의 개방형 비영리 컨소시엄입니다. 크로노스 그룹의 목적은 3D 그래픽, 증강 및 가상 현실, 병렬 프로그래밍, 비전 가속 및 기계 학습을 위한 로열티 없는 고급 상호 운용성 표준을 만드는 것입니다.

이 그룹은 OpenGL 및 `WebGL API`와 같은 표준을 유지 관리합니다.

같이 보기
-----

* 위키백과의 크로노스 그룹
* 크로노스 그룹 웹사이트
Method
======

**메서드**(**method**)는 객체의 속성인 함수입니다. 객체 인스턴스에 의해 수행되는 작업인 내장된 인스턴스 메서드 또는 객체 생성자에서 직접 호출되는 작업인 "정적 메서드" 2가지 종류의 메서드가 있습니다.

**참고:** JavaScript 함수 자체는 객체이므로, 해당 맥락에서 메서드는 실제로 함수에 대한 객체 참조입니다.

`F`가 `O`의 메서드라고 할 때, 이는 종종 `F`가 `O`를 `this` 바인딩으로 사용한다는 의미입니다. `this` 값에 따라 다른 동작을 갖지 않는 함수 속성(또는 bind된 함수 및 화살표 함수와 같이 동적 `this` 바인딩이 전혀 없는 함수 속성)은 보편적으로 메서드로 생각되지 않을 수 있습니다.

같이 보기
-----

* 위키백과의 (computer programming) 메서드
* JavaScript에서 메서드의 정의 (전통적인 구문과 새로운 약어의 비교)
* JavaScript 내장 메서드 목록
* MDN Web Docs 용어 사전
    + function
    + object
    + property
    + static method
UI
==

***User Interface***(UI) 는 사용자와 기계의 상호작용을 촉진하는 모든 것들을 의미합니다. 컴퓨터의 세계에서는 키보드, 조이스틱, 화면, 프로그램 등 무엇이든 될 수 있습니다. 컴퓨터 소프트웨어의 경우, 커맨드 라인 프롬프트, 웹페이지, 사용자 입력 양식 또는 응용 프로그램의 프론트엔드 페이지가 될 수 있다

같이 보기
-----

* 위키백과의 사용자 인터페이스
* 위키백과의 프론트엔드 웹 개발
대체 정렬 (Fallback alignment)
==========================

CSS 상자 정렬 (en-US)에서, 요청된 정렬을 수행할 수 없는 경우를 처리하기 위해 대체 정렬이 지정됩니다. 예를 들어, `justify-content: space-between`을 지정하는 경우, 정렬 제목이 하나 이상 있어야 합니다. 그렇지 않은 경우, 대체 정렬이 사용됩니다. 아래에 설명된 대로 정렬 방법에 따라 지정됩니다.

First baseline

`start`

Last baseline

`safe end`

Baseline

`start`

Space-between

`flex-start` (start)

Space-around

`center`

Space-evenly

`center`

Stretch

`flex-start` (start)

같이 보기
-----

* CSS 상자 정렬 (en-US)
Cookie
======

쿠키는 웹사이트가 웹 브라우저를 통해 방문자의 컴퓨터에 남기는 작은 정보 조각입니다.

쿠키는 웹사이트에 대한 사용자의 웹 경험을 개인화하는 데 사용됩니다. 여기에는 해당 웹사이트에 접근할 때 사용자의 기본 설정이나 입력 내용이 포함될 수 있습니다. 사용자는 쿠키를 허용, 거부 또는 삭제하도록 웹 브라우저를 맞춤화할 수 있습니다.

쿠키는 `Set-Cookie` HTTP 헤더를 사용하거나 JavaScript의 `document.cookie` (en-US)를 사용하여 서버 수준에서 설정하고 수정할 수 있습니다.

같이 보기
-----

* 위키백과의 HTTP cookie
Microsoft Edge
==============

**Microsoft Edge**는 Microsoft Windows에 포함되어 제공되는 무료 그래픽 웹 브라우저입니다. Microsoft 는 오랜 기간 사용했던 인터넷 익스플로러를 대체하기 위해, 2014년부터 초기 코드명 스파르탄, 즉 Edge를 개발했습니다.

같이 보기
-----

* 공식 웹 사이트
* MDN Web Docs 용어 사전
    + Google Chrome
    + Microsoft Edge
    + Microsoft Internet Explorer
    + Mozilla Firefox
    + Netscape Navigator
    + Opera Browser
HTTPS RR
========

\*\*HTTPS RR(HTTPS Resource Records)\*\*는 HTTPS를 통해 서비스에 접근하는 방법에 대한 구성 정보 및 매개변수를 전달하는 DNS 레코드 유형입니다.

*HTTPS RR* 는 HTTPS를 사용하여 서비스에 연결하는 프로세스를 최적화하는 데 사용할 수 있습니다.
 또한, 'HTTPS 리소스 레코드'가 있으면 원본의 모든 유용한 HTTP 리소스에 HTTPS를 통해 도달할 수 있다는 신호가 표시됩니다. 결과적으로 브라우저가 도메인에 대한 연결을 HTTP에서 HTTPS로 안전하게 업그레이드할 수 있음을 의미합니다.

### 같이 보기

* DNS(DNS SVCB 및 HTTPS RR)를 통한 서비스 바인딩 및 매개변수 명세서 (Draft IETF specification: draft-ietf-dnsop-svcb-https-00)
* 엄격한 전송 보안 vs. HTTPS 리소스 레코드: 비교 (Emily M. Stark blog)
* SSL
* TLS
IANA
====

\*\*인터넷 할당 번호 기관 (Internet Assigned Numbers Authority, IANA)\*\*은 인터넷 프로토콜에서 사용되는 도메인 이름, IP 주소 및 기타 이름과 번호를 기록 및/또는 할당하는 업무를 담당하는 ICANN의 자회사입니다.

같이 보기
-----

* 공식 웹사이트
* 위키백과의 IANA
출처
==

웹 콘텐츠의 **출처**(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다.

일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다.

예제
--

동일한 스킴(`http`)와 호스트 이름(`example.com`)을 갖고 있기 때문에 동일한 출처이며, 다른 파일 경로는 중요하지 않습니다.

* `http://example.com/app1/index.html`
* `http://example.com/app2/index.html`

서버는 기본적으로 포트 80을 통해 HTTP 콘텐츠를 전달하므로 출처는 동일합니다.

* `http://example.com:80`
* `http://example.com`

서로 다른 스킴을 사용하기 때문에 동일한 출처가 아닙니다.

* `http://example.com/app1`
* `https://example.com/app2`

서로 다른 호스트 이름을 사용하기 때문에 동일한 출처가 아닙니다.

* `http://example.com`
* `http://www.example.com`
* `http://myapp.example.com`

서로 다른 포트를 사용하기 때문에 동일한 출처가 아닙니다.

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

* 동일 출처 정책
* Site
* HTML 명세: 출처
테이블 래퍼 상자 (Table Wrapper Box)
=============================

**테이블 래퍼 상자(Table Wrapper Box)** 는 테이블에 표시되는 캡션에 필요한 공간을 설명하는 테이블 그리드 상자 주위에 생성된 상자입니다. 이 상자는 테이블이 둘러싸는 블록이라는 특성을 가진 절대 위치 항목에 대한 둘러싸는 항목이 됩니다.
매개변수 (Parameter)
================

매개변수는 함수에 전달되는 이름이 있는 변수입니다. 매개변수를 의미하는 변수는 인자를 함수로 가져오는 데 사용됩니다.

예를 들면 다음과 같습니다.


```js
function example(parameter) {
  console.log(parameter); // Output = foo
}

const argument = "foo";

example(argument);
```


예제에는 두 가지 종류의 매개변수가 있습니다.

입력 매개변수

가장 일반적인 종류이며 함수에 값을 전달하는 목적으로 사용됩니다. 프로그래밍 언어에 따라, 입력 매개변수는 여러 가지 방법(예, 값을 통한 호출, 주소를 통한 호출, 참조를 통한 호출)으로 전달될 수 있습니다.

출력/반환 매개변수

주로 함수에서 여러 값을 반환하지만, 혼란을 불러일으키므로 권장되지 않습니다.

### 매개변수(parameter) 와 인자(arguments)의 차이점

'매개변수' 와 '인자'의 차이점에 주목하세요.

* 함수 매개변수는 함수 정의 부분에 선언된 이름입니다.
* 함수 인자는 함수에 전달된 실제 값입니다.
* 매개변수는 넘겨받은 인수값으로 초기화됩니다.
같이 보기
-----

* 위키백과의 '매개변수' 와 '인자'의 차이점
* 함수 선언
* 함수 표현식
고유 크기 (Intrinsic size)
======================

CSS에서, 요소의 고유 크기(intrinsic size)는 외부 요인이 적용되지 않은 경우에, 콘텐츠를 기반으로 하는 크기입니다. 예를 들어, 인라인 요소의 크기는 본질적으로 `너비`, `높이`로 결정되며, 가로 여백과 패딩은 영향을 주지만, 세로 여백과 패딩은 영향을 미치지 않습니다.

고유 크기를 계산하는 방법은 CSS 내장 및 외부 크기 조정 명세서에 정의되어 있습니다.

고유 크기 조정은 요소의 `min-content` 및 `max-content` 크기를 고려합니다. 텍스트의 경우 `min-content` 크기는 텍스트가 오버플로를 일으키지 않고 인라인 방향으로 최대한 작게 래핑되어, 가능한 한 많은 자동 줄바꿈(Soft Wrap)을 수행하는 경우입니다. 텍스트 문자열이 포함된 상자의 경우, `min-content` 크기는 가장 긴 단어로 정의됩니다. `width` 속성에 대한 `min-content` 키워드 값은 `min-content` 크기에 따라 요소의 크기를 지정합니다.

`max-content` 크기는 그 반대입니다. 텍스트의 경우, 오버플로가 발생하더라도 자동 줄바꿈(Soft Wrap)을 수행하지 않고 텍스트를 최대한 넓게 표시합니다. `max-content` 키워드 값은 이 동작을 노출합니다.

이미지의 경우, 고유 크기는 동일한 의미를 갖습니다. 렌더링을 변경하기 위해 CSS를 적용하지 않은 경우 이미지가 표시되는 크기입니다. 기본적으로 이미지는 "1x" 픽셀 밀도(1 장치 픽셀 = 1 CSS 픽셀)를 갖는 것으로 가정하므로, 고유 크기는 단순히 픽셀 높이와 너비입니다. 고유 이미지 크기와 해상도는 EXIF 데이터에서 명시적으로 지정할 수 있습니다. `srcset` 속성을 사용하여 이미지에 대해 고유 픽셀 밀도를 설정할 수도 있습니다. (note that 두 메커니즘을 모두 사용하는 경우, the `srcset`값은 EXIF 값 "위에" 적용됩니다).
블록 암호 운용 방식
===========

일반적으로 문맥상 '모드'라고 불리는, 블록 암호 운용 방식은 블록 크기보다 긴 메시지를 암호화하거나 해독하는 데 블록 암호를 사용하는 방법을 지정합니다.

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