---
title: 개발자를 위한 웹 기술
slug: Web
tags:
  - History
  - Landing
  - Web
  - 웹 개발
translation_of: Web
---
<p class="summary">웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는 사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을 알아야 웹 기술을 잘 활용할 수 있습니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.</p>

<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="웹_기술">웹 기술</h2>

<h3 id="기본_기술">기본 기술</h3>

<dl>
 <dt><a href="/ko/docs/Web/HTML">HTML</a></dt>
 <dd><strong>HTML(HyperText Markup Language)</strong>은 웹페이지에 내용을 기술하고 정의하는 데 사용합니다.</dd>
 <dt><a href="/ko/docs/Web/CSS">CSS</a></dt>
 <dd><strong>CSS(Cascading Style Sheets)</strong>는 웹페이지 콘텐츠의 모양이나 표현을 기술하는 데 사용합니다.</dd>
 <dt><a href="/ko/docs/Web/HTTP">HTTP</a></dt>
 <dd><strong><dfn>하이퍼텍스트 전송 규약(Hypertext Transfer Protocol)</dfn></strong><dfn>은 HTML 및 기타 하이퍼미디어 문서를 웹 상에서 전달할 때 사용하는 규칙을 말합니다.</dfn></dd>
</dl>

<h3 id="스크립트">스크립트</h3>

<dl>
 <dt><a href="/ko/docs/Web/JavaScript">JavaScript</a></dt>
 <dd><strong>JavaScript(자바스크립트)</strong>는 브라우저에서 실행되는 프로그램 언어입니다. 사용자의 행동에 화면이 반응하는 것과 같은 동적인 기능을 웹페이지나 애플리케이션에 넣기 위해 사용합니다.</dd>
 <dd><a href="https://developer.mozilla.org/ko/docs/Glossary/Node.js">Node.js</a>를 통해 서버상에서도 JavaScript를 구동할 수 있습니다.</dd>
 <dt><a href="/ko/docs/Web/Reference/API">Web API</a></dt>
 <dd><strong>Web API(Application Programming Interfaces)</strong>는 <a href="DOM">DOM</a> 조작, 오디오 및 비디오 재생, 3D 그래픽 구현 등의 작업을 위해 사용합니다.
 <ul>
  <li><a href="https://developer.mozilla.org/ko/docs/Web/API" title="Web/API">웹 API 인터페이스 설명집</a> - 웹 개발에 사용하는 모든 객체 유형을 볼 수 있습니다.</li>
  <li><a href="/ko/docs/WebAPI">WebAPI 페이지</a> - 웹 애플리케이션에 사용할 수 있는 모든 통신 및 하드웨어 접근, 기타 API가 나열되어 있습니다</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events">이벤트 참조</a> - 웹페이지나 애플리케이션에서 발생한 이벤트를 모아놓은 것으로, 관심있는 사건을 추적하거나 그에 반응하는 것을 가능케 합니다.</li>
 </ul>
 </dd>
 <dt><a href="/ko/docs/Web/Web_components">웹 컴포넌트</a></dt>
 <dd>웹 컴포넌트는 코드를 재사용할 수 있도록 커스텀 엘리먼트(custom elements)를 생성하고, 이를 사용하기 위한 기술을 말합니다. </dd>
</dl>

<h3 id="그래픽">그래픽</h3>

<dl>
 <dt><a href="/ko/docs/HTML/Canvas">Canvas</a></dt>
 <dd>{{HTMLElement("canvas")}}는 자바스크립트로 2D 그래픽 그릴 수 있게 하는 Api 를 지원합니다. </dd>
 <dt><a href="/ko/docs/SVG">SVG</a></dt>
 <dd><strong>SVG(Scalable Vector Graphics)</strong>는 일련의 벡터 및 도형을 통해 이미지를 나타냄으로써 이미지가 원래 그려진 크기에 상관 없이 매끄럽게 확대/축소가 가능하도록 합니다.</dd>
 <dt><a href="/ko/docs/Web/WebGL" title="Web/WebGL">WebGL</a></dt>
 <dd>WebGL은 OpenGL ES 2.0을 거의 충족하는 API를 도입함으로써 웹에 2D, 3D 그래픽을 제공하여 HTML의 {{HTMLElement("canvas")}} 요소에서 사용할 수 있습니다.</dd>
</dl>

<h3 id="오디오_비디오_멀티미디어">오디오, 비디오, 멀티미디어</h3>

<dl>
 <dt><a href="/ko/docs/Web/Media">웹 미디어 기술</a></dt>
 <dd>미디어 관련 API 및 그에 필요한 문서 링크 일람.</dd>
 <dt><a href="/ko/docs/Web/API/Media_Streams_API">미디어 캡처 및 스트림 API</a></dt>
 <dd>로컬이든 네트워크 경유든 미디어 스트리밍, 녹화, 녹음, 조작을 할 수 있는 API 편람입니다.. 로컬 카메라 및 마이크를 사용하여 비디오, 오디오, 정지 화상을 캡처하는 내용이 있습니다.</dd>
 <dt><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">HTML5 오디오 비디오 사용하기</a></dt>
 <dd>웹 페이지에 비디오, 오디오를 심고, 재생제어를 하는 방법입니다. </dd>
 <dt><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></dt>
 <dd>실시간 커뮤니케이션을 위한 WebRTC 표준에 속하는 기술입니다. 브라우저 클라이언트간에(peer to peer) 오디오/비디오 스트리밍, 데이터 공유가 가능합니다 </dd>
</dl>

<h3 id="기타">기타</h3>

<dl>
 <dt><a href="/ko/docs/Web/MathML">MathML</a></dt>
 <dd><strong>수학 마크업 언어(Mathematical Markup Language)</strong>는 복잡한 수학 방정식 및 구문을 표시할 수 있게 합니다.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/XSLT">XSLT</a></dt>
 <dd><strong>Extensible Stylesheet Language Transformations (XSLT)</strong>를 사용하면 XML 문서를 사람이 읽을 수있는 HTML로 변환 할 수 있습니다.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/XPath">XPath</a></dt>
 <dd><strong>XPath</strong>를 사용하면 현재 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS selectors</a>에서 제공하는 것보다 더 강력한 구문을 사용하여 문서에서 DOM 노드를 선택할 수 있습니다.</dd>
</dl>
</div>

<div class="section">
<h2 class="Documentation" id="학습_영역">학습 영역</h2>

<dl>
 <dt><a href="/ko/docs/Learn">웹 개발 학습</a></dt>
 <dd>초심자가 간단한 웹사이트 코딩을 시작하는 데 필요한 다양한 글이 있습니다.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/Apps/Progressive">Progressive Web Apps</a></dt>
 <dd>Progressive 웹 앱은 현대적인 웹 API를 사용하여 전통적인 Progressive 향상 전략과 함께 크로스플랫폼 웹 응용 프로그램을 만듭니다. 이러한 앱은 어디서나 작동하며 기본 앱과 동일한 사용자 환경 이점을 제공하는 몇 가지 기능을 제공합니다. 이 문서 및 가이드 세트는 PWA에 대해 알아야 할 모든 정보를 제공합니다.</dd>
</dl>

<h2 id="기타_주제">기타 주제</h2>

<dl>
 <dt><a href="Web/Apps">웹 애플리케이션 개발</a></dt>
 <dd>모바일, 데스크톱, 파이어폭스 OS 환경의 웹 앱을 개발하기 위한 기술을 설명하는 글들입니다.</dd>
 <dt><a href="Web/Accessibility">접근성</a></dt>
 <dd>웹 개발에서 접근성이란 가능한 많은 사람들이 일부 신체적 장애가 있더라도 웹 사이트를 사용할 수 있게 만드는 것을 말합니다. 본 주제에서는 콘텐트를 접근성 있게 개발하는 데 대한 정보를 제공합니다.</dd>
 <dt><a href="Web/Localization">현지화(L10n)와 국제화(I18n)</a></dt>
 <dd>웹은 글로벌 커뮤니티입니다!  당신의 사이트나 앱을 사용하길 원하는 모든 사람이 기대하는 언어 및 레이아웃으로 콘텐츠를 제공해야 한다는것을 명심해야 하며 당신의 사이트가 그러한 사이트의 일부인지 확인하세요.</dd>
 <dt><a href="/ko/docs/Web/Security">보안</a></dt>
 <dd>웹사이트나 앱의 개인적인 데이터가 악의적인 사람에게 누출되지 않도록 해야 합니다. 이 주제의 글들을 통해 프로젝트의 보안을 강화해보세요.</dd>
 <dt><a href="/ko/docs/WebAssembly">웹어셈블리</a></dt>
 <dd>웹어셈블리는 현대 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드입니다. 네이티브에 가까운 성능으로 돌아가며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++ 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. 또한 자바스크립트와 나란히 돌아가면서, 서로를 보완할 수 있도록 설계되었습니다</dd>
</dl>
</div>
</div>