웹 개발자 안내서

MDN 문서에는 많은 가이드가 있습니다. 이 문서는 추가 사용 예시를 추가하거나 API 또는 기능을 사용하는 방법을 가르치는 것을 목표로 합니다. 이 페이지는 가장 인기 있는 자료로 연결됩니다.

HTML

HTML로 웹 구조화하기

HTML 학습 영역은 처음부터 HTML을 배우는 데 도움이 되는 자습서를 제공합니다.

HTML 기본

이 글은 HTML에 대한 기본적인 이해를 제공합니다. 이 가이드를 따른 후 HTML 학습 영역에서 자료를 더 탐색할 수 있습니다.

CSS

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

전체 CSS 자습서는 텍스트 스타일 지정, 레이아웃 만들기 등 첫걸음을 뗄 수 있도록 도와줄 것입니다.

CSS 레이아웃 가이드

MDN 전반에 걸쳐 CSS Layout에 대한 많은 가이드가 있으며, 이 페이지는 그것들을 모두 모았습니다.

CSS 애니메이션 사용하기

CSS 애니메이션은 사용하면 CSS 스타일 구성에서 다른 CSS 스타일 구성으로의 전환을 애니메이션으로 만들 수 있습니다. 이 가이드는 애니메이션 속성을 시작하는 데에 도움이 될 것입니다.

JavaScript

자바스크립트 학습영역

당신이 완전한 초보자이든 기술을 다시 배우고 싶든, 이 문서가 출발점이 될 수 있습니다.

AJAX

AJAX는 웹 애플리케이션이 전체 브라우저 페이지를 다시 로드하지 않고도 사용자 인터페이스에 빠르고 점진적으로 업데이트할 수 있도록 하는 기술 그룹들을 정의하는 용어입니다. 이렇게 하면 애플리케이션이 사용자 작업에 더빠르게 응답할 수 있습니다.

Media

웹 상 그래픽

모던 웹사이트와 애플리케이션들은 종종 다양하고 정교한 그래픽을 제공해야합니다.

오디오 및 비디오 전달

우리는 '정적' 미디어 파일에서 적응형 라이브 스트림에 이르기까지 다양한 방법으로 웹에서 오디오와 비디오를 전달할 수 있습니다. 이 문서는 웹 기반 미디어의 다양한 전달 메커니즘과 인기 있는 브라우저와의 호환성을 탐색하기 위한 출발점으로 작성되었습니다.

오디오 및 비디오 조작

웹의 장점은 기술을 결합하여 새로운 형태를 만들 수 있다는 것입니다. 브라우저에 기본 오디오 및 비디오가 있다는 것은 이러한 데이터 스트림을 사용하여 <canvas> 와, WebGL또는 Web Audio API 와 같은 기술과 함께 오디오 및 비디오를 직접 수정할 수 있음을 의미합니다. 예시로 오디오에 reverb/compression 효과 추가 또는 grayscale/sepia 필터를 비디오에 사용하는 것이 있습니다. 이 문서에서는 수행해야 할 작업을 설명하는 참고서를 제공합니다.

APIs

FormData 객체 사용

FormData 객체를 사용하면 key/value 값을 컴파일하여 XMLHttpRequest 로 보낼 수 있습니다. 주로 양식 데이터를 보내기 위한 것이지만, 양식과 독립적으로 데이터를 전송하는 데 사용할 수 있습니다. submit()은 양식의 인코딩 유형이 "multipart/form-data" 로 설정된 경우 폼의 메서드가 데이터를 전송하기 위해 사용하는 것과 동일한 형식입니다.

프로그레시브 웹 앱

프로그레시브 웹 앱(PWA)은 최신 웹 API와 전통적인 점진적 개선 전략을 함께 사용해 크로스 플랫폼 웹 애플리케이션을 생성합니다. 이러한 앱은 어디서든 동작하며 네이티브 앱에서의 사용자 경험 이점과 동일한 몇 가지 기능들을 제공합니다. 이 문서에서는 이에 대해 여러분이 알아야 할 모든 것들에 대해 알려드립니다.

XML 파싱 및 직렬화

웹 플랫폼은 각각 장단점이 있는 다양한 XML 구문을 분석하고 직렬화하는 방법을 제공합니다.

Performance

최적화 및 성능

최신 웹 앱과 사이트를 구축할 때, 콘텐츠를 빠르고 효율적으로 만드는 것이 중요합니다. 이를 통해 강력한 데스크탑 시스템과 약한 핸드헬드 장치 모두에서 효과적으로 수행할 수 있습니다.

Mobile web development

모바일 웹 개발

이 문서에서는 모바일 장치에서 잘 작동하는 웹 사이트를 디자인하는 데 필요한 몇 가지 주요 기술에 대한 개요를 제공합니다.

Fonts

Variable fonts guide

variable fonts를 설계 시 사용하는 방법을 알아보십시오.

웹 오픈 글꼴 형식(WOFF)

WOFF(Web Open Font Format)는 웹에서 누구나 무료로 사용할 수 있는 글꼴 파일 형식입니다.

User interface development

User input and controls

모던 웹에서 사용자 입력은 단순히 마우스와 키보드로만 이뤄지는 것이 아닙니다. 예를 들어 터치스크린을 생각해 보십시오. 이 문서에서는 기본 기술에 대한 자세한 정보가 필요한 사람을 위해 FAQ, 실제 사례 및 추가 정보 링크와 함께 개방형 웹 앱에서 사용자 입력을 관리하고 제어를 구현하기 위한 권장 사항을 제공합니다.