MDN, 한 번에 이해하기
웹 개발하다가 "이 CSS 속성이 정확히 어떻게 동작하지?", "이 JS 메서드 브라우저 호환성은?" 같은 게 궁금할 때 제일 먼저 가게 되는 곳이 있다. 그게 바로 MDN이다. 핵심부터 한 줄로 정리하면 이렇다.
MDN (Mozilla Developer Network) = Mozilla가 운영하는 웹 표준 공식 레퍼런스 문서 사이트. HTML·CSS·JavaScript의 거의 모든 것이 정리돼 있음
쉽게 비유하면
국어사전이라고 생각하면 됨! 어떤 단어(API·속성·메서드)가 "정확히 어떤 뜻인지, 어떻게 쓰는지, 예외는 뭔지"를 찾으러 가는 곳이다. 블로그 글은 저자 경험 기반이라 틀릴 수도 있고 낡을 수도 있는데, 사전(MDN)은 공식 정의가 담겨 있어서 제일 믿을 만함.
- 블로그·스택오버플로우 = 선배 개발자 경험담. 빠르지만 틀릴 수 있음
- MDN = 공식 사전. 느리게 읽히지만 정확함
처음엔 영어가 많고 낯설어서 구글 블로그만 보게 되는데, MDN 읽는 습관 들이면 실력이 확 달라지는 것 같음!
자세히
누가 만드나
Mozilla — Firefox 만드는 그 회사다. 원래 Mozilla가 주도했고, 지금은 Google·Microsoft·Apple·Samsung 같은 주요 브라우저 벤더들이 함께 기여하는 오픈소스 프로젝트다. 특정 회사 입맛대로 쓰인 게 아니라, 웹 표준 그 자체를 다룬다는 게 신뢰받는 이유 같음.
뭐가 있나
MDN에서 다루는 주요 내용들이다.
- HTML — 태그 하나하나 속성·사용법·예제
- CSS — 속성 정의, 값의 범위, 브라우저 호환성
- JavaScript — 내장 객체, 메서드, 문법 전체 레퍼런스
- Web API —
fetch,localStorage,canvas,WebRTC같은 브라우저 API - HTTP — 상태 코드, 헤더, 메서드 설명
- 접근성(Accessibility) — 웹 접근성 가이드
- 가이드·튜토리얼 — 초보자부터 심화까지 학습 경로
MDN의 핵심 — 브라우저 호환성 표
MDN의 진짜 킬러 기능은 브라우저 호환성 표(Browser Compatibility Table) 다. 어떤 기능이 Chrome, Firefox, Safari, Edge에서 각각 몇 버전부터 지원하는지 한눈에 보여준다.
예: CSS grid 속성 호환성
Chrome 57+ ✅
Firefox 52+ ✅
Safari 10.1+ ✅
IE 11 ❌ (지원 안 함)"이 기능 써도 되나?"를 판단할 때 MDN 호환성 표가 없으면 불안한 것 같음!
Can I Use와 뭐가 다름?
비슷해 보이지만 역할이 다르다.
| MDN | Can I Use | |
|---|---|---|
| 역할 | 상세 레퍼런스 문서 | 호환성 빠른 확인 |
| 특징 | 문법·예제·설명 풍부 | 시각적으로 한눈에 |
| 언제 | 기능을 깊게 알고 싶을 때 | 지원 여부만 빠르게 확인할 때 |
둘이 상호보완 관계라 같이 쓰는 경우가 많음!
실사용 예
웹 개발하면서 MDN 안 쓰는 날이 없다.
- JS 메서드 까먹었을 때 —
Array.prototype.reduce어떻게 쓰더라? → MDN에서 문법·예제 확인 - CSS 속성 정확히 알고 싶을 때 —
position: sticky가 정확히 어느 기준으로 붙는 거지? → MDN에서 동작 원리·예시 확인 - 브라우저마다 다르게 보일 때 — "Safari에서 왜 안 되지?" → MDN 호환성 표에서 Safari 지원 여부 확인
- HTTP 상태 코드 헷갈릴 때 — 401이랑 403 차이가 뭐지? → MDN HTTP 문서에서 확인
- Web API 처음 써볼 때 —
IntersectionObserver어떻게 쓰는 거지? → MDN에서 기본 예제부터 보기
URL도 외워두면 편하다. mdn.io/찾고싶은것 치면 바로 가기도 되고, 구글에 Array reduce mdn 이렇게 검색해도 거의 1번으로 나오는 것 같음!
한 방 정리
| 구분 | 내용 |
|---|---|
| 한 줄 정의 | 웹 표준 HTML·CSS·JS 공식 레퍼런스 사이트 |
| 운영 | Mozilla + 주요 브라우저 벤더 공동 기여 |
| 비유 | 웹 개발자의 국어사전 |
| 킬러 기능 | 브라우저 호환성 표 |
| 접속 방법 | developer.mozilla.org / 구글에 "원하는것 mdn" |
쉽게 외우면 "틀린 정보 없는 웹 개발 공식 사전" — 블로그 먼저 보는 습관 있으면, MDN 먼저 보는 걸로 하나씩 바꿔가면 실력이 자연스럽게 올라가는 것 같음!
