1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
title: Web과 함께 시작하기
slug: Learn/Getting_started_with_the_web
tags:
- Beginner
- CSS
- Design
- Guide
- HTML
- Index
- 'l10n:priority'
- 가이드
- 초보자
translation_of: Learn/Getting_started_with_the_web
---
<div>{{LearnSidebar}}</div>
<div class="summary">
<p><em>Web과 함께 시작하기(Getting stated with the Web)</em>는 여러분에게 웹 개발의 실질적인 측면을 소개하는 간결한 시리즈입니다. 여러분은 간단한 웹페이지를 만들 때 필요한 도구를 설치하고 여러분의 코드를 게시할 것입니다.</p>
</div>
<h2 id="당신의_첫_번째_웹사이트_줄거리">당신의 첫 번째 웹사이트 줄거리</h2>
<p>전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.</p>
<p>아래 나열한 항목을 순서대로 진행하면 백지부터 시작해서 첫 웹페이지를 인터넷에 띄울겁니다. 시작합시다!</p>
<h3 id="기본_소프트웨어_설치하기Installing_basic_software"><a href="/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기(Installing basic software)</a></h3>
<p>웹사이트 제작을 위한 도구는 아주 많습니다. 이제 막 시작한다면 수도 없이 많은 코드 편집기와 프레임워크, 테스트 도구 때문에 혼란스러울 겁니다.<a href="/ko/docs/Learn/Getting_started_with_the_web/%EA%B8%B0%EB%B3%B8_%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0">기본 소프트웨어 설치하기</a>에서는 기본적인 웹 개발을 시작하기 위해 필요한 소프트웨어를 어떻게 설치할 수 있는지 차근차근 알려드립니다.</p>
<h3 id="웹사이트의_외관은_어떻게_할까요What_will_your_website_look_like"><a href="/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">웹사이트의 외관은 어떻게 할까요?(What will your website look like?)</a></h3>
<p>여러분의 웹사이트를 위한 코드 작성을 하기 전에, 먼저 계획을 세워야 합니다. 어떤 정보들을 강조할 건가요? 어떤 글꼴이나 색상을 사용할 것인가요? <a href="/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">웹사이트의 외관은 어떻게 할까요?</a>에서 우리는 여러분이 사이트의 내용이나 디자인을 계획하기 위해 따라할 수 있는 간단한 방법을 제공할 것입니다.</p>
<h3 id="파일_다루기Dealing_with_files"><a href="/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기(Dealing with files)</a></h3>
<p>웹사이트는 많은 파일(문자, 코드, 스타일시트, 미디어, 등등)로 이루어져 있습니다. 웹사이트를 만들 때, 여러분은 합리적인 구조로 여러 파일을 모으고 서로 상호 작용이 가능한지 확인해야 합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/%ED%8C%8C%EC%9D%BC%EB%93%A4_%EB%8B%A4%EB%A3%A8%EA%B8%B0">파일 다루기</a>에서 여러분의 웹사이트를 위해 합리적인 파일 구조를 설정하는 방법과 여러분이 알아야 할 문제들을 설명할 것입니다.</p>
<h3 id="HTML_기본"><a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_기본">HTML 기본</a></h3>
<p>HTML(Hypertext Markup Language)은 여러분의 웹 컨텐츠를 구조화하고, 의미와 의도를 주기위해 사용되는 코드입니다. 예를 들면, 내 컨텐츠가 문단의 집합인지, 또는 목차(*)의 리스트인지? 내 페이지에 이미지를 넣어야 하는지? 데이터 테이블이 필요한지? 여러분을 난처하지 않게하면서, <a href="/ko/docs/Learn/Getting_started_with_the_web/HTML_기본">HTML 기본</a>은 여러분이 HTML에 익숙해질 수 있도록 충분한 정보를 제공할 것입니다.</p>
<h3 id="CSS_기본"><a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 기본</a></h3>
<p>CSS(Cascading Style Sheets)는 여러분의 웹사이트를 꾸밀 때 사용하는 코드입니다. 예를 들면, 글자 색을 검정과 빨강 중 어느걸 하실건가요? 아니면 컨텐츠를 화면 어디에 표시해야 하나요? 웹사이트를 장식하려면 어떤 배경 이미지나 색을 사용하실 건가요? <a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 기본</a>으로 시작에 필요한 모든걸 준비해보세요.</p>
<h3 id="JavaScript_기본"><a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 기본</a></h3>
<p>JavaScript는 여러분이 인터렉티브한 기능을 웹사이트에 추가할 때 사용하는 프로그래밍 언어입니다. 예를 들면 게임, 버튼이 눌리거나 폼에 정보가 입력되었을 때 발생하는 것, 동적인 스타일 효과, 애니매이션 등이 있습니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 기본</a>은 여러분께 이 흥미로운 언어로 가능한 것들에 대한 것과 어떻게 시작할 수 있는지에 대한 아이디어를 제공할 것입니다.</p>
<h3 id="웹사이트_출판하기"><a href="/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website">웹사이트 출판하기</a></h3>
<p>일단 여러분이 코드 작성과 웹사이트를 위한 파일 구성을 마쳤다면, 사람들이 찾아볼 수 있도록 이 모든 것을 온라인에 둘 필요가 있습니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website">예제 코드 출판하기</a>는 여러분이 간단한 예제 코드를 어떻게 최소한의 노력으로 얻을 수 있는지 설명할 것입니다.</p>
<h3 id="웹의_동작_방식"><a href="/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works">웹의 동작 방식</a></h3>
<p>여러분이 가장 선호하는 웹사이트에 접근할 때, 여러분이 모르는 많은 복잡한 것들이 눈에 띄지 않는 곳에서 발생합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works">웹의 동작 방식</a>은 여러분이 컴퓨터로 웹페이지를 볼 때 발생하는 것들에 대한 개략적인 설명을 할 것입니다.</p>
<h2 id="같이_보기">같이 보기</h2>
<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: 웹 개발을 처음 시작하는 분을 위해 웹 기초를 설명하는 뛰어난 비디오 시리즈입니다. <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>가 제작했습니다.</p>
<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a>: 이 글은 웹에 대한 유용한 배경지식을 알려줍니다. -- 웹이 어떻게 생겼는지, 웹의 표준 기술이 무엇인지, 어떻게 같이 작동하는지, 왜 "웹 개발자"가 직업으로 삼기 좋은지, 그리고 관련 과목들을 공부하면서 어떤 것들이 최선의 관행인지 알려줍니다.</p>
|
