eloan
MDN Web Docs 로고

MDN Web Docs

무료KR

Mozilla 운영. 웹 개발 표준 레퍼런스 1티어. HTML·CSS·JavaScript·API.

MDN Web Docs 바로가기 ↗

MDN Web Docs(developer.mozilla.org) 는 2005년 Mozilla 가 출범시킨 웹 개발 표준 레퍼런스 사이트로 HTML·CSS·JavaScript·Web API·브라우저 호환성 같은 모든 웹 개발 1차 레퍼런스 정보를 무료로 제공합니다.

Mozilla 비영리 운영이라 사용자 비용이 일체 없으며 광고도 없습니다. 한국어를 포함한 다국어 번역도 제공해 한국 개발자가 한국어 레퍼런스로 학습 가능합니다.

MDN 의 강점은 웹 표준·브라우저 호환성 정보가 가장 정확하다는 점, 한국어 번역이 핵심 페이지에 적용되어 있다는 점, 본격 웹 개발 실무·학습의 1차 레퍼런스로 가장 자주 참조된다는 점입니다.

✨ 주요 기능

HTML·CSS·JavaScript 레퍼런스

웹 개발 3대 언어의 모든 문법·API 가 상세히 정리되어 있습니다.

Web API 문서

Fetch·DOM·Canvas·WebGL·WebRTC 같은 모든 Web API 사용법·예제·브라우저 호환성을 함께 제공합니다.

브라우저 호환성 표

각 API·CSS 속성의 브라우저별 지원 여부·버전을 한눈에 확인할 수 있어 본격 개발 시점에 호환성 결정에 활용합니다.

한국어 번역

주요 페이지가 한국어로 번역되어 있어 한국 개발자가 한국어 레퍼런스로 학습할 수 있습니다.

튜토리얼·가이드

초보자용 튜토리얼부터 본격 학습 가이드까지 단계별 학습 자료가 풍부합니다.

예제 코드·실행

각 API·문법 페이지에 예제 코드와 일부는 인터랙티브 실행 환경이 함께 제공됩니다.

오픈 소스 커뮤니티

MDN 자체가 오픈 소스 프로젝트라 본인이 오류 수정·번역 기여 등으로 참여할 수 있습니다.

💰 가격 플랜 비교

추천

전체 무료

0원
  • ✓모든 레퍼런스 무제한 열람
  • ✓튜토리얼·가이드
  • ✓한국어 번역 제공
  • ✓브라우저 호환성 표
  • ✓예제 코드·실행

👍 장점

  • +웹 개발의 1차 표준 레퍼런스 출처
  • +한국어 번역 핵심 페이지 적용
  • +브라우저 호환성 정보 정확
  • +Mozilla 비영리 운영으로 광고 없음
  • +오픈 소스 커뮤니티 활성화
  • +본격 학습·실무 모두 활용 가능

👎 단점

  • −최신 기술(예: 새 API) 은 한국어 번역이 늦을 수 있음
  • −프론트엔드 외 영역(백엔드·인프라) 은 다른 레퍼런스 필요
  • −한국어 페이지 일부가 영문 원문과 차이가 있을 수 있음
  • −본인 학습 의지가 필요한 정보형 자료

🇰🇷 한국 사용자 가이드

Mozilla 가 운영하는 글로벌 서비스이며 한국에서 가입·접속·이용이 모두 정상 작동합니다. 한국어 번역이 핵심 페이지에 적용되어 한국 개발자가 한국어로 학습할 수 있어 진입 장벽이 낮습니다.

🚀 시작하기 가이드

  1. 1

    접속·관심 키워드 검색

    developer.mozilla.org 에 접속해 본인 관심 키워드(예: 'fetch'·'flexbox'·'async') 로 검색합니다.

  2. 2

    한국어 버전 선택

    페이지 상단에서 언어를 한국어로 변경하면 한국어 번역이 적용된 페이지가 표시됩니다.

  3. 3

    예제·브라우저 호환성 확인

    각 페이지의 예제 코드와 브라우저 호환성 표를 함께 확인해 본인 프로젝트에 적용 가능한지 결정합니다.

  4. 4

    튜토리얼·가이드 따라가기

    본격 학습이라면 튜토리얼·가이드 섹션의 단계별 학습 자료를 활용합니다.

  5. 5

    본격 개발 시 1차 레퍼런스로 활용

    본격 개발 중 의문 사항이 있을 때 MDN 을 1차 레퍼런스로 활용하고 추가 정보는 Stack Overflow·공식 스펙 문서를 함께 활용합니다.

❓ 자주 묻는 질문

Q.MDN 진짜 무료인가요?▾

전부 무료입니다. Mozilla 가 운영하는 비영리 프로젝트로 사용자 비용이 일체 발생하지 않으며 광고도 없습니다. 본인 학습·실무에 자유롭게 활용 가능합니다.

Q.MDN 한국어 번역이 영문 원문과 다를 수 있나요?▾

한국어 번역은 자원봉사자·기여자가 작업하며 영문 원문이 업데이트된 직후에는 한국어 번역이 늦을 수 있어 일부 페이지가 영문 최신과 차이가 있을 수 있습니다. 본격 개발 시 한국어로 1차 학습 후 최신 정보가 중요하면 영문 원문을 함께 확인하는 것이 안전합니다.

Q.MDN vs W3Schools 차이는?▾

MDN 은 웹 표준·브라우저 호환성 정보의 1차 출처로 정확성이 가장 높고, W3Schools 는 초보자 친화 튜토리얼·예제 중심으로 학습 입문에 적합합니다. 본격 개발자라면 MDN 을 메인으로 가져가는 것이 표준 패턴이고 초보자가 빠른 학습을 원한다면 W3Schools 도 보조로 활용 가능합니다.

Q.MDN 의 브라우저 호환성 정보는 얼마나 정확한가요?▾

Mozilla 와 커뮤니티 기여자가 관리하는 1차 데이터로 정확성이 높습니다. 새 기능 출시 직후에는 호환성 표가 업데이트되기까지 약간 시차가 있을 수 있지만 일반적인 웹 개발 결정에는 충분히 정확합니다. 본격 브라우저 분기별 결정은 Can I Use(caniuse.com) 도 함께 확인하는 것이 안전합니다.

Q.MDN 에서 본 예제를 본인 프로젝트에 그대로 사용해도 되나요?▾

MDN 의 예제 코드는 CC0(저작권 포기) 또는 매우 관대한 라이선스로 제공되어 본인 프로젝트에 자유롭게 활용 가능합니다. 본격 활용 전 각 페이지의 라이선스 표시를 확인하시기 바랍니다.

Q.MDN 에 오류·번역 누락 발견 시 어떻게 하나요?▾

MDN 은 오픈 소스 프로젝트이므로 본인이 GitHub 저장소(github.com/mdn) 에서 직접 PR(pull request) 또는 이슈 제출로 기여할 수 있습니다. 본인이 한국어 번역에 기여하고 싶다면 한국어 번역 워킹 그룹에 참여하는 것도 가능합니다.

Q.MDN 모바일 사용성은?▾

모바일 웹으로 접근 가능하며 반응형 디자인이 적용되어 모바일에서도 레퍼런스 조회가 가능합니다. 본격 코딩 실습은 PC 환경이 편리하지만 외출 중 빠른 레퍼런스 확인은 모바일에서도 충분합니다.

Q.MDN 회원가입은 꼭 해야 하나요?▾

모든 레퍼런스 조회는 회원가입 없이도 가능합니다. 회원가입은 기여(번역·문서 수정·이슈 제출) 활동에 필요합니다.

Q.MDN 외에 웹 개발 레퍼런스는?▾

DevDocs(devdocs.io) 가 MDN·Python·Node.js 같은 다양한 언어·프레임워크 레퍼런스를 한 사이트에 통합 제공해 본격 다언어 개발자에게 유용합니다. 또 각 언어·프레임워크의 공식 문서(React·Vue·Node.js 공식)도 함께 활용하는 것이 표준입니다.

Q.MDN 학습 자료가 너무 많아요. 어디부터 봐야 하나요?▾

본인 학습 단계에 따라 다릅니다. 입문자는 'Learn Web Development' 섹션의 단계별 튜토리얼을 따라가는 것이 권장됩니다. 본격 학습자는 본인이 관심 있는 API·문법 페이지를 직접 검색해 학습하는 것이 효율적입니다.

Q.MDN 정보를 본인 블로그·강의 자료에 인용해도 되나요?▾

공공·오픈 자료로 인용 가능합니다. 인용 시 출처(MDN Web Docs, URL) 를 명시하면 신뢰성이 확보됩니다.

Q.MDN 외에 한국어 웹 개발 레퍼런스는?▾

한국 개발자 커뮤니티에서 작성한 한국어 가이드·블로그가 풍부하며 인프런·패스트캠퍼스 같은 강의 플랫폼의 한국어 강의도 함께 활용 가능합니다. 본격 표준 레퍼런스는 MDN 이 1차 출처이며 한국어 학습은 추가 자료로 보강하는 패턴이 일반적입니다.

🔄 비슷한 도구 (대안)
DevDocsW3Schools공식 ECMAScript 스펙
🔎 관련 검색어
🔙 카테고리로
💻 개발자 도구 전체 보기

본 디렉토리는 등록 사이트와 제휴 관계가 없습니다. 가격·자격·기능 정보는 작성 시점 기준이며, 정확한 최신 내용은 각 사이트의 공식 안내에서 다시 확인해주세요.

내 재물운은?