---
title: Front-end web developer
slug: Learn/Front-end_web_developer
translation_of: Learn/Front-end_web_developer
---
<p>{{learnsidebar}}</p>

<p>프론트 개발자가 되는 과정에 오신 것을 환영합니다!</p>

<p>여기에서는 프론트 엔드 웹 개발자가 되기 위해 알아야 할 모든 것을 배울수 있는 체계적인 강좌를 제공합니다. 각 섹션을 통해 학습하면서 새로운 기술을 배우거나 기존 기술을 개선하세요. 각 섹션에는 진행하기 전에 잘 이해하고 있는지 확인하기 위한 연습 및 평가가 포함되어 있습니다.</p>

<h2 id="다루는_주제">다루는 주제</h2>

<p>다루는 내용은 다음과 같습니다.</p>

<ul>
 <li>기본 설정 및 학습 방법에 대한 학습</li>
 <li>웹 표준 및 모범 사례(예: 접근성 및 브라우저간 호환성)</li>
 <li>웹 구조와 의미를 제공하는 언어인 HTML</li>
 <li>웹 페이지 스타일을 지정하는 언어인 CSS</li>
 <li>웹에서 동적인 기능을 만드는데 사용되는 스크립트 언어인 JavaScript</li>
 <li>최신 클라이언트 웹 개발을 용이하게 해주는 도구</li>
</ul>

<p>섹션을 순서대로 살펴볼 수 있지만, 각 섹션은 독립적입니다. 예를들어 이미 HTML을 알고 있는 경우 CSS 섹션으로 건너뛸 수 있습니다.</p>

<h2 id="전제_조건">전제 조건</h2>

<p>이 강좌를 시작하기 위한 사전 지식은 필요하지 않습니다. 최신 웹 브라우저를 실행할 수 있는 컴퓨터, 인터넷 연결, 학습 의지만 있으면 됩니다.</p>

<p>프론트 엔드 웹 개발이 자신에게 적합한지 확실하지 않거나, 더 길고 완전한 과정을 시작하기 전에 부드러운 소개를 원하면 먼저 <a href="/ko/docs/Learn/Getting_started_with_the_web">웹과 함께 시작하기</a> 를 읽어보세요.</p>

<h2 id="도움말_얻기">도움말 얻기</h2>

<p>우리는 가능한 한 편안하게 프론트 엔드 웹 개발을 학습할 수 있도록 노력했습니다. 그러나 무언가를 이해하지 못하거나 일부 코드가 작동하지 않아 학습을 멈추게 될 수 있습니다.</p>

<p>당황하지 마세요. 우리는 초보자든 전문 웹 개발자든 모두 어떤 문제에 막혀 있습니다. <a href="/ko/docs/Learn/Learning_and_getting_help">학습 및 도움말 얻기</a> 문서는 정보를 찾고 도움을 줄 수 있는 일련의 팁을 제공합니다. 그래도 문제가 해결되지 않는다면 <a href="https://discourse.mozilla.org/c/mdn/learn/">Discourse forum</a>에 문제를 게시하세요.</p>

<p>시작합시다. 행운을 빌어요!</p>

<h2 id="학습_과정">학습 과정</h2>

<h3 id="시작하기">시작하기</h3>

<p>완료 시간: 1.5–2 시간</p>

<h4 id="전제_조건_2">전제 조건</h4>

<p>기본적인 컴퓨터 사용 능력 외에는 아무것도 없습니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>이 강좌에는 평가가 없습니다. 그러나 건너뛰지 마세요. 강좌의 후반부에 있는 연습문제를 준비하는것도 중요합니다.</p>

<h4 id="가이드">가이드</h4>

<ul>
 <li><a href="/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기</a>— 기본 도구 설정 (15 분 읽기)</li>
 <li><a href="/ko/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">웹과 웹 표준에 대한 배경</a> (45 분 읽기)</li>
 <li><a href="/ko/docs/Learn/Learning_and_getting_help">학습과 도움말 얻기</a> (45 분 읽기)</li>
</ul>

<h3 id="HTML을_사용한_의미론과_구조">HTML을 사용한 의미론과 구조</h3>

<p>완료 시간: 35–50 시간</p>

<h4 id="전제_조건_3">전제 조건</h4>

<p>기본적인 컴퓨터 활용 능력과 기본적인 웹 개발 환경 외에는 아무것도 없습니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_2">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>각 모듈(교과목 단위)의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>

<h4 id="모듈">모듈</h4>

<ul>
 <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> (15–20 시간 읽기/평가)</li>
 <li><a href="/ko/docs/Learn/HTML/Multimedia_and_embedding">Multimedia 와 embedding</a> (15–20 시간 읽기/학습)</li>
 <li><a href="/ko/docs/Learn/HTML/Tables">HTML tables</a> (5–10 시간 읽기/학습)</li>
</ul>

<h3 id="CSS를_사용한_스타일링_및_레이아웃">CSS를 사용한 스타일링 및 레이아웃</h3>

<p>완료 시간: 90–120 시간</p>

<h4 id="전제조건">전제조건</h4>

<p>CSS를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 를 먼저 공부해야 합니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_3">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>

<h4 id="모듈_2">모듈</h4>

<ul>
 <li><a href="/ko/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> (10–15 시간 읽기/학습)</li>
 <li><a href="/ko/docs/Learn/CSS/Building_blocks">CSS 구성 블록</a> (35–45 시간 읽기/학습)</li>
 <li><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 스타일링</a> (15–20 시간 읽기/학습)</li>
 <li><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> (30–40 시간 읽기/학습)</li>
</ul>

<h4 id="추가_자료">추가 자료</h4>

<ul>
 <li><a href="/ko/docs/Web/CSS/Layout_cookbook">CSS 레이아웃 쿡북</a></li>
</ul>

<h3 id="JavaScript와의_상호작용">JavaScript와의 상호작용</h3>

<p>완료 시간: 135–185 시간</p>

<h4 id="전제_조건_4">전제 조건</h4>

<p>Javascript를 배우기 전에 기본적인 HTML 지식을 갖고 있는 것이 좋습니다. 최소한 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 를 먼저 공부해야 합니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_4">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>

<h4 id="모듈_3">모듈</h4>

<ul>
 <li><a href="/ko/docs/Learn/JavaScript/First_steps">JavaScript 첫걸음</a> (30–40 시간 읽기/평가)</li>
 <li><a href="/ko/docs/Learn/JavaScript/Building_blocks">JavaScript 구성 요소</a> (25–35 시간 읽기/평가)</li>
 <li><a href="/ko/docs/Learn/JavaScript/Objects">JavaScript 객체 소개</a> (25–35 시간 읽기/평가)</li>
 <li><a href="/ko/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a> (30–40 시간 읽기/평가)</li>
 <li><a href="/ko/docs/Learn/JavaScript/Asynchronous">비동기 JavaScript</a> (25–35 시간 읽기/평가)</li>
</ul>

<h3 id="웹_폼_—_유저_데이터_작업">웹 폼 — 유저 데이터 작업</h3>

<p>완료 시간: 40–50 시간</p>

<h4 id="전제_조건_5">전제 조건</h4>

<p>Form에는 HTML, CSS, and JavaScript 지식이 필요합니다. Form 작업의 복잡성을 감안할 때 자주 접하는 내용입니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_5">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>

<h4 id="모듈_4">모듈</h4>

<ul>
 <li><a href="/ko/docs/Learn/Forms">HTML 폼 가이드</a>(40–50 시간)</li>
</ul>

<h3 id="모두를_위한_웹_작동_시키기">모두를 위한 웹 작동 시키기</h3>

<p>완료 시간: 60–75 시간</p>

<h4 id="전제_조건_6">전제 조건</h4>

<p>이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 많은 기술과 모범 사례(best practices)가 여러 기술에 적용됩니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_6">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>각 모듈의 평가는 주제에 대한 지식을 테스트하도록 설계되었습니다.<br>
 평가를 완료하면 다음 모듈로 이동할 준비가 된 것입니다.</p>

<h4 id="모듈_5">모듈</h4>

<ul>
 <li><a href="/ko/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스팅</a> (25–30 시간 읽기/평가)</li>
 <li><a href="/ko/docs/Learn/Accessibility">접근성</a> (20–25 시간 읽기/평가)</li>
</ul>

<h3 id="최신_도구">최신 도구</h3>

<p>완료 시간: 55–90 시간</p>

<h4 id="전제_조건_7">전제 조건</h4>

<p>이 섹션을 진행하기 전에 HTML, CSS, JavaScript를 아는 것이 좋습니다. 논의하는 도구들은 이러한 많은 기술과 함께 작동합니다.</p>

<h4 id="앞으로_나아갈_준비가_되었는지_어떻게_알_수_있나요_7">앞으로 나아갈 준비가 되었는지 어떻게 알 수 있나요?</h4>

<p>이 모듈에는 특정 평가가 없습니다. 두 번째, 세 번째 모듈의 끝에 있는 사례 연구 자습서는 최신 도구의 필수 요소를 파악할 수 있도록 준비했습니다.</p>

<h4 id="모듈_6">모듈</h4>

<ul>
 <li><a href="/ko/docs/Learn/Tools_and_testing/GitHub">Git 과 GitHub</a> (5 hour read)</li>
 <li><a href="/ko/docs/Learn/Tools_and_testing/Understanding_client-side_tools">클라이언트 웹 개발 도구 이해하기</a> (20–25 hour read)</li>
 <li>
  <p><a href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Javascript 클라이언트 프레임워크 이해하기</a> (30-60 hour read/exercises)</p>
 </li>
</ul>