웹 사이트가 제대로 동작하는지 확인하는 방법 - Web 개발 학습하기

웹 사이트가 제대로 동작하는지 확인하는 방법
========================

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

|  |  |
| --- | --- |
| 전제 조건: |
 먼저,
 upload files웹 서버에 파일 업로드 방법 (en-US)을 알아야 합니다.
  |
| 목표: | 웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다. |

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

Active Learning
---------------

*There is no active learning available yet. Please, consider contributing.*

Dig deeper
----------

### 브라우저에서 테스트하기

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

#### 어?, 이미지가 어디갔죠?

우리의 개인 사이트를 봅시다.(동작x), `http://demozilla.examplehostingprovider.net/`. It's not showing the image we expected!

![Oops, the 'unicorn' image is missing](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-missing.png)

Open Firefox's Network tool (**Tools ➤ Web Developer ➤ Network**) and reload the page:

![The image has a 404 error](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/error404.png)

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

#### HTTP statuses

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

**200: OK**

The resource you asked for was delivered.

**301: Moved permanently**

The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.

**304: Not modified**

The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.

**403: Forbidden**

You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).

**404: Not found**

Self-explanatory. We'll discuss how to solve this below.

**500: Internal server error**

Something went wrong on the server. For instance, maybe the server-side language (PHP, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.

**503: Service unavailable**

Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

#### Fixing the 404

So what went wrong?

![Le list of images in our project](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/demozilla-images-list.png)

At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: `unicorn_pics.png` rather than `unicorn_pic.png`. So correct the typo in your code editor by changing the image's `src` attribute:

![Deleting the 's'](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/code-correct.png)

Save, push to the server, and reload the page in your browser:

![The image loads corectly in the browser](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-corrected.png)

There you go! Let's look at the HTTP statuses again:

* **200** for `/` and for `unicorn_pic.png` means that we succeeded in reloading the page and the image.
* **304** for `basic.css` means that this file has not changed since the last request, so the browser can use the file in its cache rather than receiving a fresh copy.

So we fixed the error and learned a few HTTP statuses along the way!

### Frequent errors

The most frequent errors that we find are these:

#### Typos in the address

We wanted to type `http://demozilla.examplehostingprovider.net/` but typed too fast and forgot an "l":

![Address unreachable](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/cannot-find-server.png)

The address cannot be found. Indeed.

#### 404 errors

Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

#### JavaScript errors

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.

Open the console (**Tools ➤ Web developer ➤ Web Console**) and reload the page:

![A Javascript error is shown in the Console](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/js-error.png)

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

### More things to check

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

#### How's the performance?

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

![Yslow diagnostics](/ko/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/yslow-diagnostics.png)

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a CDN. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

#### Is the server responsive enough?

`ping` is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:
```

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
^C
--- mozilla.org ping statistics ---
4 packets transmitted, 4 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
```

Just keep in mind a handy keyboard shortcut: **Ctrl+C**. Ctrl+C sends an "interrupt" signal to the runtime and tells it to stop. If you don't stop the runtime, `ping` will ping the server indefinitely.

### A simple checklist

* Check for 404s
* Make sure all webpages are behaving as you expect
* Check your website in several browsers to make sure it renders consistently
Next steps
----------

Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.

* Since people can come to your website from all over the world, you should consider making it accessible to everybody (en-US).
* Is the design of your website a bit too rough? It's time to learn more about CSS (en-US).


How do you upload files to a web server? - Web 개발 학습하기

How do you upload files to a web server?
========================================

본 글은 어떻게 FTP 도구를 사용하여 사이트를 발행(publish) 할 수 있는지를 다루고 있습니다.

|  |  |
| --- | --- |
| 선행조건: | 먼저 웹 서버가 무엇인지(what a web server is)와 어떤 식으로 도메인이 작동하는지(how domain names work)를 알아야 합니다. 더불어 어떻게 기본 환경을 구성하는지(set up a basic environment)와 간단한 웹 페이지 작성법(write a simple webpage)을 알고 있어야 합니다. |
| 목표: | FTP를 이용해 파일들을 서버에 올리기. |

개요
--

당신은 이미 간단한 웹 페이지를 만들었습니다.(you have built a simple page 참조), 이제 웹 서버에 올려 온라인에 공개하고 싶을 겁니다. 우리는 이러한 방법을 FTP를 통해 다뤄보고자 합니다.

따라해보기
-----

*아직 좋은 예제가 없습니다. 누군가 나서 주세요(Please, consider contributing).*

깊이 파보기
------

### FTP 클라이언트와 함께 해보기: FireFTP

세상에는 다양한 종류의 FTP 클라이언트들이 있습니다. 본 문서에서는 FireFTP를 다룰 겁니다. FireFTP는 파이어 폭스에서 다루기 쉽습니다. 만약 Firefox를 사용하신다면 FireFTP 애드온 페이지(FireFTP's addons page) 에 가셔서l FireFTP를 설치하시면 됩니다.

**참고:** 물론 FireFTP 외에도 수 많은 대안이 있습니다. 관심이 있다면 퍼블리싱 도구: FTP 클라이언트(Publishing tools: FTP clients) 항목을 참조하시면 되겠습니다.

FireFTP를 새로운 탭에서 열어보세요. Firefox에서 열기 위한 방법도 두가지 있습니다.

1. **Firefox menu ![](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/2014-01-10-13-08-08-f52b8c.png) ➤ ![Developer](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/screenshot_from_2014-11-26_14-24-56.png) ➤ FireFTP**
2. **Tools** ➤ **Web Develope**r ➤ **FireFTP**

이제 다음과 같이 보이게 될겁니다.

![FireFTP : the interface, not connected to a server](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/fireftp-default.png)

### 로그인 하기

이 예시에서 우리는 호스팅 제공자가 "Example Hosting Provider"라는 가상의 회사라고 가정합니다. 이 회사의 URLs는 다음과 같습니다 : `mypersonalwebsite.examplehostingprovider.net`.

우리는 방금 계정을 만들었고 호스팅제공자로부터 아래와 같은 계정정보를 받았습니다.
```

Congratulations for opening an account at Example Hosting Provider.

Your account is: `demozilla`

Your website will be visible at `demozilla.examplehostingprovider.net`

To publish to this account, please connect through FTP with the following credentials:

- FTP server: `ftp://demozilla.examplehostingprovider.net`
- User: `demozilla`
- Password: `quickbrownfox`
- To publish on the web, put your files into the `Public/htdocs` directory.
```

먼저 이곳을 봅시다. `http://demozilla.examplehostingprovider.net/` — 보시다시피 아직 아무런 정보도 없습니다.

![Our demozilla personal website, seen in a browser: it's empty](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/demozilla-empty.png)

**참고:** 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 "This website is hosted by [Hosting Service]."과 같은 페이지를 보게될 것입니다.

이제 우리의 FTP 클라이언트를 멀리 떨어진 서버에 접속하기 위해 *"Create an account..." 버튼을 누릅니다.* 그리고 호스팅제공자로 부터 받은 정보를 해당 필드에 채워줍니다.

![FireFTP: creating an account](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/fireftp-createlogin.png)

### 이곳과 "저곳" : 로컬 과 원격 화면

이제 새로 만든 계정으로 접속을 해봅시다.

![The FTP interface, once logged](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/fireftp-logged.png)

어떤 것이 보이는지 조사해봅시다.

* 왼쪽에는, 여러분 컴퓨터의 로컬파일들이 보입니다. 여러분이 올리고 싶은 파일들이 있는 디렉토리로 이동합시다. (여기에서는 `mdn`폴더입니다)
* 오른쪽에는, 원격 파일이 보입니다. 우리는 멀리 떨어진 FTP서버의 디렉토리에 들어온 것입니다. (in this case, `users/demozilla`)
* 아래부분은 지금은 무시하셔도 좋습니다. 이 부분은 여러분의 FTP클라이언트와 서버사이의 상호작용(업로드, 다운로드)을 기록해 놓은 곳입니다.
### 서버에 업로딩

여러분이 기억하듯이, 우리의 호스팅제공자는 우리에게 `Public/htdocs` 디렉토리에 파일을 저장해야한다고 했습니다. 오른쪽 패널에서 해당 디렉토리로 이동해봅시다.

![Changing to the htdocs folder on the remote server](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/remote-htdocs-empty.png)

이제, 여러분의 파일을 서버에 업로드하기 위해서 드래그-앤-드롭하여 파일들을 왼쪽에서 오른쪽 패널로 이동합니다.

![The files show in the remote view: they have been pushed to the server](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/files-dropped-onto-the-server.png)

### 우리가 올린 것이 진짜로 온라인으로 되어있나요?

지금까지는 좋습니다. 하지만 여러분의 브라우저에서 `http://demozilla.examplehostingprovider.net/` 주소로 이동하여 재확인 해봅시다.

![Here we go: our website is live!](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server/here-we-go.png)

맙소사! 우리의 웹사이트가 잘 올라와있습니다!

### 파일 업로드를 위한 다른 방법들

FTP 프로토콜은 웹사이트를 출시하기 위해 잘 알려진 방법입니다. 하지만 유일한 방법은 아닙니다. 여기 몇개의 다른 방법들도 있습니다.

* **Web interfaces**. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service. 여러분의 호스팅제공자는 HTML 인터페이스로 된(브라우저에서 업로드 가능한) 원격 파일 업로드 서비스를 지원해줄 수도 있습니다.
* **GitHub** (advanced). git을 이용해 commit/push 와 같은 방법으로 업로드할 수도 있습니다. Getting started with the Web 가이드에서 Publishing your website 를 읽어보세요.
* **Rsync** (advanced). 로컬과 원격의 파일을 동기화하는 방법입니다.
* **WebDAV**. An extension of the HTTP 프로토콜의 확장으로 보다 나은 파일 관리를 가능하게 해주는 확장입니다.
다음 단계
-----

잘하셨습니다. 이제 거의 끝났습니다. 마지막으로 중요한 일은 make sure your web site is working properly (en-US) 입니다.


웹사이트의 외관은 어떻게 할까요? - Web 개발 학습하기

웹사이트의 외관은 어떻게 할까요?
==================

* 이전
* Overview: Getting started with the web
* 다음

*웹사이트의 외관은 어떻게 할까요?* 에서는 "나의 웹사이트가 무슨 정보를 제공할 것인지?" "무슨 글꼴과 색상을 사용할 것인지?" "나의 웹사이트가 무엇을 하는지?" 를 포함해, 코드를 작성하기 *전에* 여러분이 해야할 계획 세우기와 디자인에 대해 이야기 할 것입니다.

중요한것 먼저 하기: 계획 세우기
------------------

무언가를 하기 전에, 여러분은 어떤 아이디어가 필요합니다. 웹사이트가 실제로 무엇을 해야하는지? 웹사이트가 기본적으로 무엇을 할 수 있는지, 하지만 여러분의 첫 시도를 위해선 이것을 간단히 할 필요가 있습니다. 우리는 제목과 사진, 그리고 몇 개의 문단을 포함한 간단한 웹페이지를 제작하는 것부터 시작할 것입니다.

시작하기 위해, 여러분은 몇 가지 질문에 답해야 합니다.

1. **여러분의 웹사이트는 무엇에 관한 것인가요?** 강아지나 뉴욕, 또는 팩맨 좋아하세요?
2. **주제에 대해 어떤 정보를 나타낼 것인가요?** 여러분의 웹페이지에 나타내기 원하는 제목과 몇개의 문단들, 그리고 그림에 대한 생각을 작성하세요.
3. **웹사이트의 외관은 어떻게 할까요,** in simple high-level terms. 배경색은 무엇으로 할 것인지?어떤 글꼴(폰트)이 적합한지: 딱딱하게, 만화스럽게, 굵고 크게, 얇게?

**참고:** 복잡한 프로젝트들은 색상, 글꼴, 페이지의 항목간 공간, 적절한 문체 등 세부적인 가이드라인을 필요로 합니다. 이것은 디자인 가이드 또는 브랜드 북이라고 불리기도 합니다. Firefox OS 가이드라인*에서 그 예시를 볼 수 있습니다.*.

디자인을 스케치하기
----------

다음으로, 펜과 종이를 가져와 여러분의 사이트가 어떻게 나타날 것인지 대략적으로 스케치하세요. 여러분의 첫 번째 간단한 웹페이지를 위해선, 과도한 스케치는 필요 없지만, 지금 습관으로 만드는게 좋습니다. 정말 도움이 됩니다--반 고흐가 될 필요는 없습니다!

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/website-drawing-scan.png)

**참고:** 실제로도, 복잡한 웹사이트들에서, 디자인팀은 보통 종이에 대략적인 스케치를 하는 것으로 일을 시작합니다. 그리고 이후에 시각적인 편집기나 웹 기술을 사용해 디지털 모형화 합니다.

웹 팀들은 그래픽 디자이너와 사용자 경험 (UX) 디자이너 모두와 일합니다. 그래픽 디자이너들은, 분명히, 웹사이트의 시각적인 것들을 합칩니다. UX 디자이너는 사용자들이 웹사이트를 어떻게 경험하고 반응하는지에 대한 무언가 더 추상적인 것을 합니다.

자원 선택하기
-------

여기에서, 여러분의 웹페이지에 최종적으로 나타나게될 내용을 합치는 것을 시작하기에 좋습니다.

### 문자

여러분은 제목이나 문단들을 일찍 작성해야 합니다. 항상 신경쓰는것이 좋습니다.

### 주요 색상

색상을 선택하기 위해, the Color Picker로 가서 여러분이 원하는 색을 찾아보세요. 한 색을 선택하면, 여러분은 #660066같은 여섯 문자의 이상한 코드를 보게 될 것입니다. 이것은 *hex(adecimal)* 코드로 불리고, 여러분의 색을 나타냅니다. 안전한 어느 곳에 복사해두세요.

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-03_17-40-49.png)

### 그림들

그림을 선택하기 위해, Google Images에 가서 적합한 것을 찾아보세요.

1. 원하는 그림을 찾으면, 이미지를 클릭하세요.
2. \*이미지 보기(View image)\*버튼을 누르세요.
3. 다음 페이지에서, 이미지를 우클릭하고 (맥에서는 Ctrl + click), \*다른 이름으로 이미지 저장(Save Image As...)\*를 누르고, 이미지를 저장할 안전한 공간을 선택하세요. 다른 방법으로는, 나중에 사용하기 위해 여러분의 웹 브라우저의 주소에서 이미지의 웹 주소를 복사하는 것이 있습니다.

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-04_15-09-21.png)

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-04_15-20-48.png)

**참고:** Google Images를 포함한, 웹에 있는 대부분의 그림들은 저작권이 있습니다. 저작권 침해의 가능성을 줄이기 위해선, Google's license filter를 사용하는 방법이 있습니다. 1) **검색 도구**(**Search tools**)를 클릭하고, 2) **사용 권한**(**Usage rights**)를 선택하면 됩니다:

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-04_14-27-45.png)

### 글꼴

글꼴을 선택하기 위해:

1. Google Fonts에 가서 원하는 것을 찾을 때까지 스크롤을 내리세요. 결과에 대한 필터를 위해선 왼쪽 메뉴를 사용하면 됩니다.
2. 원하는 폰트의 옆에 있는 *Add to collection* 버튼을 클릭하세요.
3. 페이지의 아래에 있는 *Use* 버튼을 클릭하세요.
4. 다음 페이지에서, 3 과 4 구역으로 스크롤을 내리고, 구글에서 제공한 코드를 여러분의 텍스트 편집기에 복사하고 나중을 위해 저장하세요.

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-04_15-38-14.png)

![](/ko/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like/screenshot_from_2014-11-04_15-51-36.png)

* 이전
* Overview: Getting started with the web
* 다음


웹의 동작 방식 - Web 개발 학습하기

웹의 동작 방식
========

* 이전
* Overview: Getting started with the web

\*'웹의 동작 방식'\*은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.

이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.

클라이언트와 서버
---------

웹에 연결된 컴퓨터는 **클라이언트** 와 **서버** 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

![](/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works/client-server.jpg)

* 클라이언트는 일반적인 웹 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 WI-FI에 연결되어 있고, 또는 여러분의 폰은 모바일 네트워크에 연결되어 있습니다) 과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어 (일반적으로 Firefox 또는 크롬 과 같은 웹 브라우저) 입니다.
* 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터입니다. 클라이언트의 장비가 웹페이지에 접근하길 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 됩니다.
도구 상자의 다른 부분들
-------------

위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.

지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.

![](/ko/docs/Learn/Getting_started_with_the_web/How_the_Web_works/road.jpg)

클라이언트와 서버에 덧붙여서 우리는 다음 내용들도 알아볼 필요가 있습니다.

* **인터넷 연결**: 여러분이 웹에서 데이터를 보내고 받을 수 있게 해줍니다. 기본적으로 여러분의 집과 상점 사이의 거리와 같습니다.
* **TCP/IP**: Transmission Control Protocol (전송 제어 규약) 과 Internet Protocol (인터넷 규약) 은 데이터가 어떻게 웹을 건너 여행해야 하는지 정의하는 통신 규약입니다. 이것은 주문을 하고, 상점에 가고, 또 여러분의 상품을 살 수 있게 해주는 운송 장치와 같습니다. 우리 예시에서, 이것은 차 또는 자전거 (또는 여러분의 두 다리) 와 같습니다.
* **DNS**: Domain Name System Servers (도메인 이름 시스템 서버) 는 웹사이트를 위한 주소록과 같습니다. 여러분이 브라우저에 웹 주소를 입력할 때, 브라우저는 그 웹사이트를 검색하기 전에 DNS 를 살펴봅니다. 브라우저는 HTTP 메시지를 올바른 장소로 전송하기 위해 그 웹사이트가 있는 서버가 어떤것인지 찾아야 합니다 (아래를 보세요). 이것은 여러분이 접근하기 위해 상점의 주소를 찾아보는 것과 같습니다.
* **HTTP**: Hypertext Transfer Protocol (하이퍼텍스트 전송 규약) 은 클라이언트와 서버가 서로 통신할 수 있게 하기 위한 언어를 정의하는 어플리케이션 규약 입니다. 이것은 여러분의 상품을 주문하기 위해 여러분이 사용하는 언어와 같습니다.
* **컴포넌트 파일**: 한 웹사이트는 여러분이 상점에서 사는 다양한 종류의 상품들과 같이 많은 다른 파일들로 만들어집니다. 이 파일들은 두개의 주요한 타입이 있습니다:
    + **코드 파일**: 다른 기술들도 잠시 뒤 보게 되실것이지만, 웹사이트는 근본적으로 HTML, CSS, 그리고 JavaScript 로 생성됩니다.
    + **자원**: 이것은 이미지, 음악, 비디오, 단어 문서, 그리고 PDF 같은, 웹사이트를 만드는 모든 다른 것들을 위한 공동적인 이름입니다.
그래서 정확히 무슨일이 발생할까요?
-------------------

여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):

1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
2. 그 다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메세지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.
3. 이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)
DNS 설명
------

실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기 위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 `63.245.217.105` 같은 숫자 덩어리입니다.

이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그러나 기억하기에 쉽지는 않죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다.

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 IP Checker와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.

패킷 설명
-----

앞서 우리는 서버에서 클라이언트로 전송되는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. 이게 무엇을 의미하는 걸까요? 기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드 할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.

여기도 보세요
-------

* 인터넷 작동 방식
* HTTP — 어플리케이션-계층 규약
* HTTP: Let's GET It On!
* HTTP: 응답 코드
크레딧
---

거리 사진: Street composing, by Kevin D.

* 이전
* Overview: Getting started with the web


웹사이트 출판하기 - Web 개발 학습하기

웹사이트 출판하기
=========

* 이전
* Overview: Getting started with the web
* 다음

일단 여러분의 웹사이트를 만들기 위한 코드 작성과 파일 구성을 끝내셨다면, 이 모든 것을 온라인에 올려 사람들이 찾을 수 있게 할 필요가 있습니다. 이 글은 어떻게 최소한의 노력으로 간단한 예시 코드를 온라인에서 얻을 수 있는지 보여줍니다.

옵션들은 뭐가 있나요?
------------

웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.

### 호스팅과 도메인 이름 얻기

만약 여러분이 출판된 웹사이트에 대한 모든 컨트롤를 원한다면, 이것들을 구매해야 할 것입니다:

* 호스팅 — 호스팅 회사의 웹 서버 에서 빌린 파일 공간. 이 공간에 여러분의 웹사이트 파일을 놓을 것입니다, 그리고 웹 서버는 컨텐트를 요청하는 웹 유저에게 그 컨텐트를 제공합니다.
* 도메인 이름 — `http://www.mozilla.org`, `또는 http://www.bbc.co.uk` 같이, 사람들이 여러분의 웹사이트를 찾을 수 있는 특정 주소. **도메인 등록 기관**으로부터 몇 년간 사용할 수 있는 여러분의 도메인을 빌리세요.

많은 전문적인 웹사이트들은 이 방법으로 온라인에 진출합니다.

게다가, 여러분은 서버로 웹사이트 파일들을 실제로 전송하기 위한 파일 전송 프로토콜 (FTP) 프로그램 (자세한 내용은 얼마나 드나요: 소프트웨어 에서 확인하세요) 이 필요할 것입니다. FTP 프로그램은 아주 다양합니다, 하지만 일반적으로 호스팅 회사에 의해 제공된 정보 (예로 사용자 이름, 비밀번호, 호스트 이름) 를 사용해 여러분의 웹서버에 로그인을 해야 합니다. 그러면 프로그램은 여러분의 로컬 파일들과 웹 서버의 파일을 두 창에서 보여주므로, 그것들을 외부로 전송하거나 다시 돌려 놓을 수 있습니다:

![](/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website/ftp.jpg)

#### 호스팅과 도메인을 찾는 팁

* 저희는 여기서 상업적인 호스팅 회사를 홍보하는 것이 아닙니다. 호스팅 회사와 도메인 이름 등록 기관을 찾기 위해서는, 일단 "웹 호스팅" 과 도메인 이름 등록을 팔고있는 회사를 찾기 위한 "도메인 이름" 을 위한 검색을 하세요. 이러한 모든 회사들은 여러분이 원하는 도메인이름을 위한 검색에 있어 특징을 갖고 있을 것입니다.
* 여러분의 집이나 사무실 인터넷 서비스 공급자는 작은 웹사이트를 위한 어떤 제한된 호스팅을 공급할지도 모릅니다. 가능한 특징들은 제한적일 것이지만, 여러분의 첫 번째 시도를 위해서는 완벽할 것 같습니다 — 그들에게 연락해 요청하세요!
* Neocities, Blogspot, 그리고 Wordpress 같은 몇 개의 무료로 이용가능한 서비스가 있습니다. 다시 말해, 여러분이 지불한 만큼 얻을 수 있지만, 이것들은 여러분의 첫 시도를 위해선 완벽합니다. 무료 서비스들은 대부분 업로드를 위한 FTP 소프트웨어도 요구하지 않습니다 — 그들의 웹 인터페이스에 그냥 끌어다 놓으면 됩니다.
* 어떤 회사들은 하나의 패키지에 호스팅과 도메인 모두를 제공하기도 합니다.
### GitHub 또는 Dropbox 같은 온라인 도구 사용하기

어떤 도구들은 여러분이 여러분의 웹사이트를 온라인에 출판할 수 있게 해줍니다:

* GitHub 은 "소셜 코딩" 사이트입니다. 여러분이 Git **버전 관리 시스템** 안에 저장을 위한 코드 저장소를 업로드하게 해줍니다. 코드 프로젝트에서 협업할 수 있고, 기본적으로 시스템은 오픈 소스가 됩니다, 이 것은 세상의 누구든 여러분의 GitHub 코드를 찾아볼 수 있다는 말입니다, 사용하세요, 이것으로부터 배우세요, 그리고 개선하세요. 여러분으 다른 사람들의 코드에도 마찬가지로 작업 할 수 있습니다! 이건 참여하기에 아주 중요하고 유용한 커뮤니티입니다, 그리고 Git/GitHub 은 아주 유명한 버전 관리 시스템 입니다 — 대부분의 기술 회사들은 현재 이것을 그들의 작업흐름에서 사용하고 있습니다. GitHub 은 웹에서 존재하는 웹사이트 코드를 전시할 수 있도록 해주는 GitHub pages 라는 아주 유용한 특징을 갖습니다.
* Dropbox 는 웹에 여러분의 파일들을 저장하고 어떤 컴퓨터에서든 사용가능하게 해주는 파일 저장 시스템입니다. 인터넷 접속이 되는 누구든 여러분이 공개적으로 접근가능하게 해둔 Dropbox 폴더에 접근할 수 있습니다. 만약 그 폴더가 웹사이트 파일을 포함한다면, 자동적으로 웹사이트로써 제공될 것입니다. 더 많은 정보는 Dropbox 로 웹사이트 관리하기 를 확인하세요.

대부분의 호스팅과 다르게, 많은 도구들은 일반적으로 무료이지만, 여러분은 제한된 기능들만 사용할 수 있습니다.

### Thimble 같은 웹-기반 IDE 사용하기

HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로 만들어 질 때 코드의 결과를 보여주는 웹사이트 개발 환경을 대행하는 웹 앱은 많습니다 — 모든것이 한 브라우저 탭 안에 있습니다! 일반적으로 이러한 도구들을 이야기하기는 매우 쉽고, 배우기에 최고이고, 무료이고 (기본적 기능에대해), 그들은 여러분의 특정 웹 주소에 있는 만들어진 페이지를 관리합니다. 하지만, 그 기본적인 기능들은 매우 한정적이고, 그 앱들은 보통 자원들 (이미지 같은) 을 위한 관리 공간을 제공하지 않습니다.

여기 몇 개의 예시들을 실행해보시고, 어떤것이 제일 좋은지 확인해보세요:

* JSFiddle
* Thimble
* JSBin

![](/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website/jsbin-screen.png)

GitHub 를 통한 출판
--------------

이제 어떻게 GitHub 페이지를 통해 여러분의 사이트를 출판할 수 있는지 알아보도록 합시다. 이게 여러분의 사이트를 출판하는데 유일한 방법이거나 최고의 방법이라고 이야기 하지는 않을 것입니다, 하지만 이것은 무료이고, 꽤 간단하고, 앞으로 유용할 여러분이 알게 될 몇 가지 새로운 기술도 다룰 것입니다.

### 기본 설치

1. 먼저, 여러분의 장치에 Git 을 설치 하세요. 이것은 GitHub 이 위에서 작동하게 되는 기초가 되는 버전 컨트롤 시스템 소프트웨어 입니다.
2. 다음으로, GitHub 계정을 위해 가입하세요. 간단하고 쉽습니다.
3. 가입을 하셨다면, github.com 에 여러분의 유저 이름과 암호로 로그인하세요.
4. 그리고나서, 여러분의 파일들이 들어가게될 새로운 repo 를 생성해야 합니다. GitHub 홈페이지의 오른쪽 상단에 있는 플러스 (+) 를 클릭하고, *New Repository* 를 선택하세요.
5. 이 페이지에서, *Repository name* 박스 안에, *username*.github.io 를 입력하세요, *username* 가 있는 곳이 여러분의 유저 이름입니다. 그러니까 예를 들어, 우리 친구 bobsmith 는 *bobsmith.github.io* 를 입력할 것입니다.
 ![](/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-create-repo.png)
6. *Create repository* 를 클릭하세요. 다음과 같은 페이지로 이동하실 겁니다:
 ![](/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website/github-populate-repo.png)
### GitHub 에 파일 올리기

이것은 GitHub 에 있는 우리의 repository 를 놓기 위해 사용해볼 커맨드 라인입니다. 커맨드 라인은 파일을 생성하거나 프로그램을 실행하는 것 같은 일을 하기 위해 유저 인터페이스 안에서 클릭을 하는 것 대신 명령어를 입력하는 창입니다. 이렇게 생긴 것입니다:

![](/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website/command-line.png)

**참고:** 만약 커맨드라인이 불편하시다면, 같은 일을 하기 위해서 Git graphical user interface 를 사용하는것도 고려해 볼 수 있습니다.

모든 운영 체제는 커맨드 라인 도구를 갖습니다:

* **윈도우즈**: **Command Prompt** 는 윈도우 키를 누르고 명령 프롬프트 를 입력하고 나타난 리스트에서 이것을 선택하는 것으로 접근할 수 있습니다. 윈도우즈는 리눅스와 맥 OS 와는 다른 그들만의 명령 규칙이 있으므로, 여러분의 장치에 따라 서로 다르다는것을 기억하세요.
* **맥 OS**: \_Applications > Utilities 안에 \_**Terminal**\_ 이 있습니다.
* **리눅스**: 보통 *Ctrl + Alt + T* 로 터미널을 꺼낼 수 있습니다. 만약 작동하지 않는다면 app 바 또는 메뉴에서 **Terminal** 을 찾아보세요.

처음에는 좀 두려우실 수 있지만, 걱정하지마세요 — 기본적인 것들은 금방 익히실 수 있을 것입니다. 무언가를 하기 위해선 명령어를 입력하고 엔터를 누르는 것으로 컴퓨터에게 알려줘야합니다.

1. 커맨드 라인을 여러분의 `test-site` 폴더로 향하게 합니다 (또는 여러분의 웹사이트가 포함된 어디든지). 그러기 위해선, `cd` 명령을 사용합니다 (말하자면 "**c**hange **d**irectory"). 여기 만약 `test-site` 폴더 안에 여러분의 웹사이트를 놓으셨다면 여러분이 입력해야 하는 것이 있습니다:

```bash
cd Desktop/test-site
```

2. 커맨드 라인이 여러분의 웹사이트 폴더 안을 가리킬 때, 그 폴더를 git repository 가 되도록 `git` 도구에게 알려주는 다음의 명령을 입력하세요:

```bash
git init
```

3. 다음으로, GitHub 사이트로 돌아가세요. 현재 페이지에서, you are interested in the section *…or push an existing repository from the command line*. 이 구역에 나열된 두 코드를 보게 되실 겁니다. 첫 번째 줄의 코드 전체를 복사하고, 커맨드 라인에 붙여넣은 다음, 엔터를 누르세요. 그 명령은 이렇게 보일 것입니다:

```bash
git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
```

4. 다음으로, 다음 두 명령어를 입력하고, 각 명령마다 엔터를 누릅니다. 이것은 GitHub 에 코드를 올릴 준비를 하는 것이고, Git 에게 그 파일들을 관리하도록 요청합니다.

```bash
git add --all
git commit -m "adding my files to my repository"
```

5. 마지막으로, GitHub 웹 페이지로 가서 3단계에서 봤던 두 개의 명령어중 두 번째 줄을 터미널에 입력하는 것으로 코드를 푸시합니다:

```bash
git push -u origin master
```

6. 이제 새 브라우저 탭 (*username.github.io*) 에서 여러분의 GitHub 페이지의 웹 주소로 갈 때, 여러분의 사이트를 온라인에서 보실 수 있습니다! 친구들에게 메일을 보내서 여러분의 실력을 뽐내보세요.

**참고:** 만약 막히셨다면, GitHub Pages 홈페이지 또한 아주 도움이 될 것입니다.

### 더 많은 GitHub 이해

만약 여러분이 테스트 사이트에 더 많은 변화를 주고 GitHub에 그것들을 업로드하길 원하신다면, 이전에 하신것 처럼 간단하게 파일에 변화를 주면 됩니다. 그리고나서, GitHub에 변화를 푸시하기 위해 다음 명령어를 입력 (각 명령 다음에 엔터누르기) 해야 합니다:
```

git add --all
git commit -m 'another commit'
git push
```

*another commit* 대신에 여러분이 막 변경했던 것을 설명할 수 있는 더 적합한 메시지로 바꾸세요.

우리는 Git 의 겉을 살짝 건드려 보았습니다. 더 많이 배우시려면, GitHub Help 사이트 에서 시작하세요.

마무리
---

이 지점에서, 특정 웹 주소에서 여러분의 예시 웹사이트를 사용하실 수 있을 것입니다. 수고하셨습니다!

![](/ko/docs/Learn/Getting_started_with_the_web/Publishing_your_website/hosted-final-site.png)

더 읽을거리
------

* 웹 서버는 무엇일까요
* 도메인 이름 이해하기
* 웹에서 무언가를 하기 위한 비용은 얼마나 들까요
* Deploy a Website: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.
* Scott Murray 의 Cheap or free static web hosting 에는 이용가능한 서비스를 위한 유용한 정보가 있습니다.
* 이전
* Overview: Getting started with the web
* 다음


기본 소프트웨어 설치하기 - Web 개발 학습하기

기본 소프트웨어 설치하기
=============

* Overview: Getting started with the web
* 다음

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

전문가들이 사용하는 도구는 뭔가요?
-------------------

* **컴퓨터**. 당연한 얘기로 들리겠지만, 여러분 중 누군가는 이 글을 휴대폰이나 도서관의 컴퓨터로 읽고 계실겁니다. 진지한 웹 개발을 위해서는 데스크탑 컴퓨터(윈도우, 맥, 또는 리눅스)에 투자하는것이 좋습니다.
* 코드 작성을 위한 **텍스트 편집기**. 순수 텍스트 편집기(Sublime, Brackets, Atom, Visual Studio Code 등) 또는 하이브리드 편집기(Dreamweaver, WebStorm 등)를 사용하시면 됩니다. 사무용 문서 편집기는 웹 브라우저의 렌더링 엔진을 방해하는 숨겨진 요소를 사용하기 때문에 코드 작성 용도로는 적합하지 않습니다.
* 코드를 테스트하기 위한 **웹 브라우저**. 현재 가장 널리 사용되는 브라우저로는 Firefox, Chrome, Opera, Safari, Internet Explorer, 그리고 Microsoft Edge가 있습니다. 또, 여러분의 웹 사이트가 휴대용 장치와 오래된 브라우저(IE 8~10 등)에서는 어떻게 동작하는지도 시험해보셔야 합니다.
* 웹 페이지를 위한 이미지를 만들 수 있는 **이미지 편집기.** GIMP, Paint.NET, Photoshop 등이 있습니다.
* 서버 파일 관리, 프로젝트 협업, 코드와 자원 공유, 수정 충돌 방지를 위한 **버전 관리 시스템**. 지금은 Git이 제일 대중적인 버전 관리 시스템이며 Git 기반의 코드 공유 서비스인 GitHub도 매우 유명합니다.
* 오래 된 웹 호스팅 계정에 파일을 올리기 위한 **FTP 프로그램**. 지금은 점점 Git이 FTP를 대체하고 있습니다. (S)FTP 프로그램은 Cyberduck, Fetch, FileZilla 외에도 무수히 많습니다.
* 코드 압축과 테스트 등 반복 작업을 자동으로 수행하기 위한 **자동화 시스템**. Grunt나 Gulp 등이 있습니다.
* 흔히 쓰이는 기능의 코드 작성 속도를 높히기 위한 템플릿, 라이브러리, 프레임워크, 기타 등등.
* 이 밖에도 더 많은 도구들을 써요!
지금 당장 필요한 도구는 뭔가요?
------------------

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

### 텍스트 편집기 설치하기

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

### 최신 웹 브라우저 설치하기

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

* Linux: Firefox, Chrome, Opera.
* Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge (Window 10은 Edge를 탑재하고 있습니다. Windows 7 이상에선 Internet Explorer 11을 설치할 수 있습니다. 이외에는 다른 브라우저를 설치해야 합니다)
* Mac: Firefox, Chrome, Opera, Safari (Safari는 iOS와 macOS에 탑재되어 있습니다)

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

### 로컬 웹 서버 설치하기

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!

* Overview: Getting started with the web
* 다음


CSS 기초 - Web 개발 학습하기

CSS 기초
======

* 이전
* Overview: Getting started with the web
* 다음

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. *CSS 기초* 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?

그래서 CSS가 뭔가요?
-------------

HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. *마크업(markup) 언어* 도 아닙니다. *Style sheet 언어* 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 **모든** 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.

```css
p {
  color: red;
}
```

한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 `styles` 디렉토리에 `style.css`로 파일을 저장하세요.

아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)

1. `index.html` 파일을 열고 head의 안쪽 어딘가(즉, `<head>`와 `</head>` 태그 사이)에 아래의 코드를 붙여 넣으세요:

```html
<link href="styles/style.css" rel="stylesheet" type="text/css" />
```

2. `index.html`을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:

![A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.](/ko/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-styled.png)문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!

### CSS의 ruleset 해부

위의 CSS를 좀 더 자세히 살펴 봅시다:

![](/ko/docs/Learn/Getting_started_with_the_web/CSS_basics/css-declaration-small.png)

전체 구조는 **rule set** 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:

선택자(selector)

rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.

선언

`color: red`와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.

속성(property)

주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, `color`는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.

속성 값

속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (`color` 의 값에는 `red` 외에 많은 것이 있습니다).

구문의 다른 중요한 부분들도 주목하세요:

* 각각의 rule set (셀렉터로 구분) 은 반드시 (`{}`) 로 감싸져야 합니다.
* 각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 (:)을 사용해야만 합니다.
* 각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 (;)을 사용해야만 합니다.

그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

```css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```

### 여러 요소 선택하기

여러분은 요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 여러 선택자는 콤마로 구분합니다. 예를 들면:

```css
p,
li,
h1 {
  color: red;
}
```

### 선택자의 여러 종류

선택자는 여러 종류가 있습니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 요소를 선택하는 **요소 선택자**만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 선택자의 일반적인 종류들입니다:

| 선택자 이름 | 선택하는 것 | 예시 |
| --- | --- | --- |
| 요소 선택자 (때때로 태그 또는 타입 선택자라 불림) | 특정 타입의 모든 HTML 요소. | `p` `<p> 를 선택` |
| 아이디 선택자 | 특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다). | `#my-id` `<p id="my-id">` 또는 `<a id="my-id">` 를 선택 |
| 클래스 선택자 | 특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다). | `.my-class` `<p class="my-class">` 와 `<a class="my-class">` 를 선택 |
| 속성 선택자 | 특정 속성을 갖는 페이지의 요소. | `img[src]` `<img src="myimage.png">` 를 선택하지만 `<img>` 는 선택 안함 |
| 수도(Pseudo) 클래스 선택자 | 특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때. | `a:hover` `<a>` 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함 |

탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 선택자 가이드 (en-US)에서 찾아보세요.

글꼴과 문자
------

지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 `style.css` 파일에 더 많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

**참고:** "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /\* 와 \*/ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 **CSS 주석**입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.

1. 먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 구글 글꼴의 결과물 (en-US)을 찾으세요. `index.html` 의 head 안 어딘가에 `<link>` 요소를 추가하세요 (다시 말해서, `<head>` 와 `</head>` 태그 사이 어디에나). 이런식이 될 겁니다:

```html
<link
 href="http://fonts.googleapis.com/css?family=Open+Sans"
 rel="stylesheet"
 type="text/css" />
```

2. 다음으로, `style.css` 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아 보이지는 않습니다.
3. 아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 `font-family` 코드를 placeholder 줄에 덮어쓰세요. (`font-family` 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (`html`이 전체 페이지의 부모 요소일 때, 이 안의 모든 요소는 같은 `font-size` 와 `font-family` 를 물려 받습니다):

```css
html {
  font-size: 10px; /\* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. \*/
  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
}
```

4. 이제 HTML body 안에 문자를 포함하는 요소 `h1`, `li` 및 `p` 를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 body 콘텐츠의 제목을 가운데 정렬하고 줄의 높이(line-height)와 자간(lettet-spacing)도 설정할 것입니다:

```css
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

`px(픽셀)` 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:

![a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered](/ko/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-font-small.png)

박스, 박스, 박스의 모든 것
----------------

CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

![a big stack of boxes or crates sat on top of one another](/ko/docs/Learn/Getting_started_with_the_web/CSS_basics/boxes.jpg)

놀랍지 않게도, CSS 레이아웃은 *박스모델* 을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:

* `padding`, 컨텐트 주위의 공간 (예, 문단 글자의 주위)
* `border`, padding 의 바깥쪽에 놓인 실선
* `margin`, 요소의 바깥쪽을 둘러싼 공간

![three boxes sat inside one another. From outside to in they are labelled margin, border and padding](/ko/docs/Learn/Getting_started_with_the_web/CSS_basics/box-model.png)

여기서 이런 것도 사용합니다:

* `width` (한 요소의 너비)
* `background-color`, 요소의 콘텐츠와 padding 의 배경 색
* `color`, 한 요소의 콘텐츠 색 (일반적으로 글자색)
* `text-shadow`: 한 요소 안의 글자에 그림자를 적용
* `display`: 요소의 표시 형식을 설정합니다 (이것에 대해선 아직 걱정하지마세요)

그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.

### 페이지 색 바꾸기

```css
html {
  background-color: #00539f;
}
```

이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 여러분의 사이트를 계획할 때 선택했던 색으로 변경하세요.

### body 외부 정렬하기

```css
body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}
```

이제는 body 요소를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:

* `width: 600px;` — 이것은 body가 항상 600 pixels 의 너비를 갖도록 강제합니다.
* `margin: 0 auto;` — 여러분이 `margin` 또는 `padding` 처럼 한 속성에 두개의 값을 설정할 때, 첫 번째 값은 요소의 상단과 하단 (이 예시에서는 0입니다) 에 영향을 주고, 두 번째 값은 좌측 **과** 우측 (여기서, `auto` 는 가능한 수평공간의 왼쪽과 오른쪽을 같게 나눠주는 특별한 값입니다) 에 영향을 줍니다. 여러분은 또한 하나, 셋, 또는 네개의 값을 사용할 수도 있습니다. 여기에 문서화 되어 있습니다.
* `background-color: #FF9500;` — 전과 같이, 이것은 요소의 배경색을 설정합니다. `html` 요소를 위한 짙은 파란색에 반대되도록 body 에는 붉은 빛을 띄는 오렌지색 같은 것을 사용했었습니다. 한번 시험해보세요. 흰색이나 여러분이 원하는 어떤 색이든 편하게 사용해보세요.
* `padding: 0 20px 20px 20px;` — padding 에는 콘텐츠의 주위에 약간의 공간을 주기 위한 네 개의 값이 있습니다. 이번엔 body의 상단에 no padding, 그리고 왼쪽, 아래 그리고 오른쪽에 20 pixels 을 설정하고 있습니다. 상단, 우측, 하단, 좌측 순서로 값을 설정합니다.(12시부터 시계방향)
* `border: 5px solid black;` — 이것은 간단하게 body 모든 면의 border 를 5 pixels 두깨의 실선으로 설정합니다.
### 메인 페이지 제목 배치하고 꾸미기

```css
h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}
```

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 `h1` 요소에 (다른 것들 사이에서) 어떤 **초기 스타일링**을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. `margin: 0;`.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

다음으로, 제목의 상단과 하단 padding 을 20 pixels로 설정하고, 제목 글자 색을 html 배경색과 같게 만들었습니다.

여기서 사용했던 꽤 흥미로운 속성 하나는 `text-shadow` 문자로, 요소의 문자 콘텐츠에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:

* 첫 번째 pixel 값은 그림자의 **수평 오프셋**을 설정합니다 — 얼마나 옆으로 이동시킬 것인지.
* 두 번째 pixel 값은 그림자의 **수직 오프셋**을 설정합니다 — 얼마나 아래로 이동시킬 것인지.
* 세 번째 pixel 값은 그림자의 **흐림 반경**을 설정합니다 — 큰 값은 더 흐릿한 그림자를 의미합니다.
* 네 번째 pixel 값은 그림자의 기본 색상을 설정합니다.

다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.

### 이미지 가운데 정렬

```css
img {
  display: block;
  margin: 0 auto;
}
```

마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 body 에서 했듯이 다시 `margin: 0 auto` 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. `body` 요소는 **block level** 입니다. 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 **inline** 요소 입니다. 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는, `display: block;` 을 사용해 이미지에 block-level 성질을 주어야 합니다.

**참고:** 노트: 위의 지침에서는 body에 설정된 너비(600 픽셀) 보다 작은 이미지를 사용한다고 가정합니다. 이미지가 더 크면 body가 넘쳐 페이지의 나머지 부분으로 유출됩니다. 이 문제를 해결하려면 1) 그래픽 편집기를 사용하여 이미지의 너비를 줄이거나 2) 더 작은 값(예: `400px`) 으로 `<img>` 요소에 width 속성을 설정하고 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.

**참고:** 아직 `display: block;` 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 display 참조 (en-US) 페이지에서 찾아보세요.

마무리
---

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

![a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.](/ko/docs/Learn/Getting_started_with_the_web/CSS_basics/website-screenshot-final.png)

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

여기서, 우리는 CSS의 겉만 살짝 맛봤습니다. 더 많은 것이 알고 싶으시면 CSS 배우기 페이지로 가보세요.

* 이전
* Overview: Getting started with the web
* 다음


파일 다루기 - Web 개발 학습하기

파일 다루기
======

* 이전
* Overview: Getting started with the web
* 다음

웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.

웹사이트는 컴퓨터의 어디에 두어야 할까요?
-----------------------

만약 여러분이 로컬컴퓨터에서 웹사이트에 대해 작업한다면, 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 여러분이 원하는 곳이라면 어디에나 둘 수 있지만, 아마도 쉽게 찾을 수 있는 곳에 두어야 할 것입니다. 예를들면 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 루트(root)가 될 것입니다.

1. 여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, `web-projects` (또는 비슷한 이름의 폴더) 라고 불리는 새 폴더를 **생성하세요**. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.
2. 이 첫 번째 폴더에, 또다른 폴더를 하나 만들고 첫 번째 웹사이트를 저장하도록 합시다. 그 폴더를 `test-site` (또는 무언가 더 상상력을 발휘한 다른 이름도 좋습니다) 라고 부릅시다.
포장과 공백에 대한 여담
-------------

이 글을 통해 알게 되겠지만, 폴더와 파일의 이름을 지을 때 공백 없이 영문 소문자로 짓기를 바랍니다. 이것은 다음과 같은 이유 때문입니다.

1. 많은 컴퓨터들 -특히 웹 서버- 은 영문 대소문자를 구분합니다. 그래서 예를 들면, 웹사이트에 `test-site/MyImage.jpg라는`이미지를 저장해 두었는데 여러분이 다른 파일에서 `test-site/myimage.jpg`라는이미지를 호출하는 것은 작동하지 않을 것입니다.
2. 브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 또한, 밑줄문자를 사용하기 보다는 대시(하이픈)으로 단어를 구분하는 것이 훨씬 더 좋습니다.: `my-file.html` vs. `my_file.html`.

간단히 말하자면 여러분은 파일 이름을 지을 때 붙임표(hyphen)를 사용해야 합니다. 구글 검색 엔진은 하이픈를 단어 구분자로 취급합니다. 그러나 밑줄문자는 단어 구분자로 취급하지 않습니다. 이러한 이유로, 여러분이 폴더와 파일 이름을 지을 때에는 공백이 없는 영문 소문자와 대시로 구분된 단어로 작성하는 습관을 들이는 것이 제일 좋습니다. 적어도 여러분이 무엇을 하는지 알 때까지는요. 그렇게하면 나중에 발생할 문제를 줄일 수 있습니다.

웹사이트는 어떤 구조를 가져야 할까요?
---------------------

다음으로, 우리의 테스트 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트 프로젝트를 만들든지간에 가장 공통으로 가지게 되는 것들은 index HTML 파일과 이미지, 스타일 파일(CSS 파일), 스크립트 파일들을 포함하고 있는 폴더입니다. 이것들을 이제 생성해 봅시다.

1. **`index.html`**: 이 파일은 보통은 홈페이지의 내용을 가지고 있습니다. 다시 말하면, 처음 웹사이트에 방문하면 사람들이 볼 수 있는 텍스트나 이미지이 파일 같은 것입니다. 텍스트 에디터를 사용하여, `index.html` 라는 새 파일을 생성하고 `test-site` 폴더 안에 저장하세요.
2. **`images` 폴더**: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함하고 있습니다. `test-site` 폴더 안에, `images` 라는 폴더를 생성하세요.
3. **`styles` 폴더**: 이 폴더는 여러분의 내용을 보기 좋게 꾸며주기(예를 들어, 문자와 배경색을 세팅하는 것) 위한 CSS 코드를 포함할 것입니다. `test-site` 폴더 안에, `styles` 라는 폴더를 생성하세요.
4. **`scripts` 폴더**: 이 폴더는 모든 JavaScript 코드를 포함하고 있는데, 이 코드는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용될 것입니다.예를들면, 클릭할 때 자료를 불러오는 버튼). `test-site` 폴더 안에, `scripts` 라는 폴더를 생성하세요.

**참고:** Windows 컴퓨터에서는 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 **알려진 확장자 자동 숨김**이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, \*\*폴더 옵션...\*\*에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 인터넷에서 검색을 해보세요!

파일 경로
-----

파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다 — 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 `index.html`파일에 약간의`HTML`을 작성할 것입니다, 그리고 "웹사이트의 외관은 어떻게 할까요?" 라는 글에서 여러분이 선택한 이미지를 보여주게 할 것입니다.

1. `images`폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.
2. `index.html` 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무슨 뜻인지 걱정할 필요가 없습니다 — 본 시리즈에서 나중에 이 구조에 대해 더 자세히 살펴볼 겁니다.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>
```

3. `<img src="" alt="My test image">`라는 줄은 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는 이미지가 어디에 있는지에 대해 HTML에게 말해줄 필요가 있습니다. 이미지는 *images라는* 폴더 안에 있는데, 이것은 `index.html` 파일과 같은 폴더에 있습니다. `index.html`파일에서 우리 이미지 파일로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 `images/your-image-filename`입니다. 예를 들어, 우리 이미지가 `firefox-icon.png`라면, 파일 경로는 `images/firefox-icon.png`가 됩니다.
4. 여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.
5. HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!

![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files/website-screenshot.png)

파일 경로를 위한 일반적인 규칙들:

* 호출하는 HTML 파일과 같은 디렉토리에 있는 파일을 연결하려면 파일이름만 사용하면 됩니다. 예시: `my-image.jpg`.
* 하위 폴더에 위치한 파일을 참조하기 위해서는, 디렉토리 이름과 전방향 슬래시(/)를 경로 앞에 추가합니다. 예시: `subdirectory/my-image.jpg`.
* 호출하는 HTML 파일의 상위 디렉토리에 있는 파일을 연결하려면, 두 점을 찍어야 합니다. 예를 들면, 만약 `index.html`가 `test-site`의 하위 폴더 안에 있고 `my-image.png`가 `test-site` 안에 있을 때, 여러분은 `../my-image.png` 경로를 통해 `index.html`에서 `my-image.png`를 참조할 수 있습니다.
* 여러분이 원하는대로 조합해서 사용할 수도 있습니다, 예를 들면, `../subdirectory/another-subdirectory/my-image.png`.

지금으로선, 이것이 여러분이 알아야 할 전부 입니다.

**참고:** 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다. 예시: `C:\windows`. 이것은 HTML에서 문제가 되지않습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도 전방향 슬래시(/)를 코드에 사용해야 합니다.

또 무엇을 더 해야할까요?
--------------

현재로서는 이것이 전부입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:

![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files/file-structure.png)

* 이전
* Overview: Getting started with the web
* 다음


JavaScript 기본 - Web 개발 학습하기

JavaScript 기본
=============

* 이전
* Overview: Getting started with the web
* 다음

JavaScript는 여러분의 웹사이트에 상호작용성(예를 들면, 게임, 버튼이 눌리거나 폼에 자료가 입력될 때 반응, 동적인 스타일링과 애니메이션)을 더해 주는 프로그래밍 언어입니다. 이 글은 여러분이 이 흥미로운 언어를 시작하는 것을 도와드리고 가능한 것에 대한 아이디어를 제공할 것입니다.

JavaScript는 무엇인가?
-----------------

JavaScript (줄여서 "JS")는 HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(dynamic programming language)입니다. 이것은 Mozilla 프로젝트, Mozilla 재단, 그리고 Mozilla 법인의 공동 창설자인 Brendan Eich 에 의해 만들어졌습니다.

JavaScript는 믿을 수 없을 정도로 다재다능합니다. 캐러셀 기능(이미지를 차례대로 바꿔볼 수 있는 기능)을 가진 이미지 갤러리, 변화하는 레이아웃, 그리고 버튼이 클릭될 때의 반응과 같은 간단한 것부터 시작할 것입니다. 경험이 더 쌓이면 게임이나 움직이는 2D 및 3D 그래픽, 포괄적인 데이터베이스 지향적인 앱과 더 많은 것을 만들 수 있을 것입니다!

JavaScript 그 자체는 상당히 작지만 아주 유연합니다. 개발자들은 코어 JavaScript 언어(core JavaScript language) 위에서 동작하는 많은 다양한 도구를 개발해왔는데, 이를 이용하면 최소한의 수고로 엄청나게 많은 확장 기능을 사용할 수 있습니다. 여기에는 다음과 같은 것들이 포함됩니다:

* 브라우저 응용 프로그래밍 인터페이스 (APIs) — 브라우저에 내장된 API로 HTML을 동적으로 생성하고 CSS 스타일을 설정하거나, 사용자의 웹캠으로부터 비디오 스트림을 수집하거나 조작하는 것, 또는 3D 그래픽이나 오디오 샘플을 생성하는 것과 같은 다양한 기능을 제공합니다.
* 제3자 (third-party) API를 활용해 개발자는 트위터나 페이스북 같은 다른 컨텐츠 공급사부터 제공되는 기능을 자신의 사이트에 통합할 수 있습니다.
* 써드파티 프레임워크와 라이브러리를 여러분의 HTML에 적용함으로써 사이트와 어플리케이션을 빠르게 구축할 수 있습니다.

이 글은 JavaScript를 가볍게 설명하기 위한 목적으로 작성되어, 지금 단계에서는 여러분을 혼란스럽게 만들지 않기 위해 코어 JavaScript 언어와 위에 나열된 다른 도구 사이에 어떤 차이가 있는지 상세하게 언급하지 않을 것입니다. 이와 관련해서는 MDN의 나머지 글이나 JavaScript 학습 영역(JavaScript learning area)에서 자세하게 배울 수 있습니다.

"Hello world" 예시
----------------

위의 섹션은 정말 흥분되게 만드는데 — JavaScript는 가장 활발한 웹 기술 중 하나이고, 이것을 잘 활용할 수 있게되면 여러분의 웹사이트는 새로운 차원의 힘과 창의성을 가지게될 것입니다.

하지만, JavaScript에 익숙해지는 것은 HTML과 CSS에 익숙해지는 것보다는 조금 더 어렵습니다. 여러분은 간단한 것부터 시작해 조금씩 지속적으로 꾸준히 나가야 할 것입니다. 시작하기에 앞서 "Hello world!" 예제(기본적인 프로그래밍 예제의 표준)를 작성해 봄으로써 어떻게 페이지에 기본적인 JavaScript를 추가할 수 있는지를 보여드릴 것입니다.

**경고:** **중요**: 여러분이 우리의 나머지 코스를 따라오지 않으셨다면, 이 예제 코드를 다운 받으시고 이것을 시작점으로 사용하세요.

1. 먼저, 여러분의 테스트 사이트로 가서 `scripts`라는 새로운 폴더를 생성하세요. 다음으로 방금 만든 스크립트 폴더 내에 `main.js` 라는 새 파일을 생성하세요. 그 파일을 `scripts` 폴더에 저장하시면 됩니다.
2. 다음은, `index.html` 파일로 가서 닫는 `</body>` 태그의 바로 앞에 새로운 줄을 추가하고 다음 요소를 입력하세요:

```html
<script src="scripts/main.js"></script>
```

3. 이것은 기본적으로 CSS 참조를 위해 `<link>` 요소를 추가할 때와 같은 일을 하는 것입니다 — 페이지에 JavaScript를 적용하여 HTML에 영향을 줄 수 있습니다(CSS와 함께, 페이지의 다른 것들에도).
4. 이제 `main.js` 파일에 다음 코드를 추가하세요:

```js
let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";
```

5. 끝으로, HTML과 JavaScript 파일이 저장되었는지 확인하시고, 브라우저에서 `index.html`를 열어보세요. 여러분은 다음과 같은 것을 보게 될 것입니다:
 ![](/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics/hello-world.png)

**참고:** `<script>` 요소를 HTML 파일의 맨 아래쪽 근처에 둔 이유는 HTML은 파일 내에 나타나는 순서대로 브라우저에 로드(load)되기 때문입니다. 만약 JavaScript가 먼저 로드되고 자신의 아래 쪽에 있는 HTML에 영향을 준다고 하면, 영향을 줄 HTML 보다 먼저 JavaScript가 로드되기 때문에 작동하지 않을 것입니다. 따라서, HTML 페이지의 맨 아래쪽 근처에 JavaScript를 두는 것이 최고의 전략입니다.

### 무슨 일이 발생했나요?

JavaScript를 이용하여 본문 제목 텍스트를 "Hello world!"로 변경하였습니다. 먼저 `querySelector()`라는 함수를 이용하여 본문 제목에 대한 참조를 `myHeading`이라는 변수에 저장하였습니다. 이는 CSS 선택자(selectors)를 이용하는 것과 아주 유사합니다. 어떤 요소에 뭔가 하길 원하면, 먼저 그것을 선택해야 합니다.

그 다음, `myHeading` 변수의 ``textContent`` 프로퍼티의 값(본문 제목의 컨텐츠를 나타내는 것)을 "Hello world!"로 설정했습니다.

**참고:** 위에서 사용한 두 기능은 모두 문서를 조작(manipulate)할 때 사용하는 문서 객체 모델(Document Object Model;DOM) API의 일부입니다.

언어 기본 특강
--------

이 모든 것이 작동하는 방식에 대해 더 잘 이해할 수 있도록 JavaScript 언어의 핵심적인 특징을 몇 가지 설명드리겠습니다. 이런 특징은 모든 프로그래밍 언어에서 공통적으로 나타나는 것에 불과하므로 이런 원칙을 숙지한다면 어떤 것이라도 프로그램할 수 있게 될 것입니다!

**경고:** **중요**: 이 글에서는, 어떤 일이 발생하는지 확인 할 수 있게 JavaScript 콘솔에 예제 코드를 입력합니다. JavaScript 콘솔에 대한 더 자세한 사항은, 브라우저 개발 도구 탐험하기를 보세요.

### 변수

Variables는 여러분이 값을 저장할 수 있는 컨테이너입니다. 변수를 선언할 때 `var` 또는 `let` 키워드 뒤에 원하는 어떤 이름을 붙이면 됩니다:

```js
let myVariable;
```

**참고:** 한 줄의 끝에 있는 세미콜론은 문(statement)의 끝을 나타냅니다; 한 줄에 있는 여러 문을 분리할 필요가 있을 때에만 반드시 필요합니다. 하지만, 어떤 사람은 각 문의 끝에 세미콜론을 넣는 것이 좋은 습관이라 믿습니다. 언제 세미콜론을 넣고 언제 넣으면 안되는지에 대한 다른 규칙이 있습니다 — 자세한 사항은 JavaScript의 세미콜론 안내(Your Guide to Semicolons in JavaScript)를 참고하세요.

**참고:** 거의 모든 이름을 변수 이름으로 사용할 수 있지만, 몇 가지 제한이 있습니다 (변수 이름 규칙에 관한 글 을 보세요). 변수 이름에 대해 확신이 없다면, 변수명 체크하기(check your variable name)에서 적절한 변수명인지 확인해 볼 수 있습니다.

**참고:** JavaScript는 대소문자를 구분합니다 — `myVariable`은 `myvariable`과는 다른 변수입니다. 만약 코드에 문제가 생겼다면, 대소문자를 확인해보세요!

**참고:** `var` 와 `let` 의 차이에 대한 자세한 사항은 The difference between var and let를 참고하세요.

변수를 선언한 후에, 값을 할당할 수 있습니다:

```js
myVariable = "Bob";
```

원한다면, 변수 선언과 값을 주는 작업을 한 줄로 처리할 수 있습니다:

```js
let myVariable = "Bob";
```

이름으로 변수를 호출하기만 하면 값을 추출할 수 있습니다.

```js
myVariable;
```

변수에 어떤 값을 준 후, 나중에 변경할 수도 있습니다.
```

let myVariable = 'Bob';
myVariable = 'Steve';
```

변수는 여러 자료형을 가질 수 있다는 점을 기억하세요:

| 변수 | 설명 | 예시 |
| --- | --- | --- |
| String | 문자열로도 알려진 일련의 텍스트. 그 값이 문자열이라는 것을 나타내기 위해서는 인용부호로 둘러싸야 합니다. | `let myVariable = 'Bob';` |
| Number | 숫자. 숫자는 인용부호를 사용하지 않습니다. | `let myVariable = 10;` |
| Boolean | 참/거짓 값. `true`와 `false`라는 단어는 JS의 특별한 키워드이며, 인용부호가 필요 없습니다. | `let myVariable = true;` |
| Array | 여러 값을 하나의 단일 참조(single reference)에 저장할 수 있도록 해주는 구조 | `let myVariable = [1,'Bob','Steve',10];` 해당 배열의 각 멤버는 다음과 같이 참조할 수 있습니다: `myVariable[0]`, `myVariable[1]`, etc. |
| Object | 기본적으로, 무엇이든. JavaScript의 모든 것은 객체(object)이며 어떤 변수에 저장될 수 있습니다. 학습하는 동안 이 점을 기억하세요. | `let myVariable = document.querySelector('h1');` 위의 모든 예시도 마찬가지입니다. |

그러면 변수가 왜 필요할까요? 글쎄요, 변수는 프로그래밍에서 흥미로운 어떤 일을 하기 위해 필요합니다. 만약 값이 바뀔 수 없다면, 개인별 맞춤 인사 메시지나 이미지 갤러리에 표시되는 이미지를 바꾼다든지 하는 동적인 일을 할 수 없습니다.

### 주석

CSS에서 했던 것처럼 JavaScript 코드 안에 주석을 넣을 수 있습니다:

```js
/\*
사이에 있는 모든 것은 주석입니다.
\*/
```

줄바꿈을 할 필요가 없는 주석이라면, 두 개의 슬래시 뒤에 주석을 놓는 것이 더 쉽습니다:

```js
// 이것은 주석입니다
```

### 연산자

`operator`는 두 값(또는 변수)로부터 결과를 만들어내는 수학 기호입니다. 다음 테이블에서 가장 간단한 연산자 몇 개와 JavaScript 콘솔(console)에서 실행해 볼 수 있는 예제 몇 개를 같이 볼 수 있습니다.

| 연산자 | 설명 | 기호 | 예시 |
| --- | --- | --- | --- |
| 더하기 | 두 수를 합치거나, 또는 두 문자열을 하나로 붙일 때 사용합니다. | `+` | `6 + 9; "Hello " + "world!";` |
| 빼기, 곱하기, 나누기 | 예상하는 바와 같이 기초수학에서 하는 것과 동일하게 동작합니다. | `-`, `*`, `/` | `9 - 3; 8 * 2; // JS 에서의 곱하기는 별표입니다 9 / 3;` |
| 할당 | 이것에 대해서는 이미 보았습니다: 값을 어떤 변수에 할당합니다. | `=` | `let myVariable = 'Bob';` |
| 동등 | 두 값이 서로 같은지 테스트하여 `true`/`false` (불리언) 결과를 반환합니다. | `===` | `let myVariable = 3; myVariable === 4;` |
| 부정, 다름 | 연산자 뒤쪽의 값에 대해 논리적으로 반대인 값을 반환합니다;`true`를 `false`로 바꾸는 등. 동등 연산자와 함께 사용할 경우 부정 연산자는 두 값이 같지 않은지 여부를 테스트합니다. | `!`, `!==` | 기본 표현은 `true`이지만 비교는 `false`를 반환합니다 왜냐하면 우리가 이것을 부정했기 때문입니다:`let myVariable = 3; !(myVariable === 3);`여기서 테스트하고 있는 것은 "`myVariable`이 3 과 같지 않은가"입니다. 이것은 `false`를 반환하는데, `myVariable`이 3 과 같기 때문입니다.`let myVariable = 3;` `myVariable !== 3;` |

살펴볼 연산자가 더 많이 있지만, 지금은 이것으로 충분합니다. 연산자에 대한 완전한 리스트는 표현식과 연산자에서 확인해보세요.

**참고:** 계산을 수행할 때 자료형이 섞이게 되면 이상한 결과를 불러올 수 있으므로, 변수를 올바르게 참조해 예상하는 결과를 얻을 수 있게 주의해야 합니다. 예를 들어 `"35" + "25"`를 콘솔에 입력해 보세요. 왜 예상한 결과를 얻을 수 없을까요? 인용부호가 숫자를 문자열로 변경하였고, 숫자를 더하는 대신에 문자열을 붙인 결과를 얻습니다. `35 + 25`를 입력한다면, 올바른 결과를 얻을 것입니다.

### 조건문

조건문은 어떤 표현식(expression)이 참인지 아닌지를 테스트하고 그 결과에 따라 선택적으로 코드를 실행할 수 있도록 하는 코드 구조입니다. 가장 일반적인 조건문의 형태는 `if ... else` 문입니다. 예를 들어:

```js
let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite...");
}
```

`if ( ... )` 안의 표현식은 테스트입니다 — 여기서는 (위에서 설명한 바와 같이)일치 연산자(identity operator)를 사용하여 변수 `iceCream`과 문자열 `chocolate`이 같은지를 비교합니다. 이 비교에서 `true`가 반환되면 코드의 첫 번째 블록이 실행됩니다. 이 비교가 참(true)이 아닌 경우에는 첫 번째 블록을 건너뛰고 `else`문 뒤에 있는 두 번째 코드 블록이 대신 실행됩니다.

### 함수

Functions는 재사용하기를 원하는 기능을 담는 방법입니다. 그 절차(재사용 기능)가 필요할 때 매번 전체 코드를 다시 작성하는 대신 함수의 이름으로 그 함수를 호출할 수 있습니다. 위에서 이미 몇 가지 함수의 사용법을 봤는데, 예를 들면:

```js
let myVariable = document.querySelector("h1");
```

```js
alert("hello!");
```

이 함수들, `document.querySelector`와 `alert`는 언제든지 사용할 수 있게 브라우저에 내장되어 있습니다.

변수 이름처럼 보이지만 그 뒤에 괄호 — `()` — 가 있다면 그것은 함수일 것입니다. 함수는 보통 인수(arguments) — 함수가 작동하는데 필요한 일련의 데이터 — 를 가집니다. 인수는 괄호 안으로 들어가고, 하나 이상의 인수가 있다면 콤마로 구분됩니다.

예를 들면, `alert()` 함수는 브라우저 창에서 팝업창을 만들지만, 그 함수가 그 팝업창에 표시할 문자열을 인자로 주어야 합니다.

좋은 소식은 여러분 자신만의 함수를 정의할 수 있다는 것입니다 — 다음 예제에서 두 수를 인수로 가지고 그것을 곱하는 간단한 함수를 작성합니다:

```js
function multiply(num1, num2) {
  let result = num1 \* num2;
  return result;
}
```

콘솔에서 위 함수를 실행해보고 여러 인수로 테스트해보세요. 가령:

```js
multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);
```

**참고:** `return` 문은 브라우저에게 함수로부터 나오는 `result` 변수를 반환하게 함으로써 그 변수를 사용할 수 있게 합니다. 이것은 필수적인 것으로 함수 안에서 정의된 변수는 오직 그 함수 내부에서만 사용 가능하기 때문입니다. 이것을 변수 scoping이라고 합니다. (변수 영역에 대한 더 많은 것 을 여기서 읽어보세요.)

### 이벤트

웹사이트의 실질적인 상호작용에는 이벤트가 필요합니다. 이벤트는 브라우저에서 발생하는 일을 듣고 그에 대한 반응으로 코드를 실행하는 코드 구조입니다. 가장 확실한 예는 마우스로 무언가를 클릭하면 브라우저가 발생시키는 클릭 이벤트입니다. 이를 시연하려면 콘솔에 다음 코드를 입력한 후 현재 웹페이지를 클릭해보시기 바랍니다:

```js
document.querySelector("html").onclick = function () {
  alert("Ouch! Stop poking me!");
};
```

요소에 이벤트를 붙이는 방법은 많습니다. 여기서 HTML 요소를 선택하고 그 요소의 `onclick` (en-US) 핸들러 프로퍼티에 클릭 이벤트가 실행할 코드를 갖고 있는 익명(anonymous) 함수를 할당합니다.

유의하세요. 다음은

```js
document.querySelector("html").onclick = function () {};
```

다음과 같습니다.

```js
let myHTML = document.querySelector("html");
myHTML.onclick = function () {};
```

단지 짧을 뿐입니다.

예시 웹사이트 확장하기
------------

지금까지 JavaScript의 기본 중 몇 가지를 살펴보았으니 우리가 작성한 예제 사이트에 적용 가능한 몇 가지 멋진 기능을 추가해 봅시다.

### 이미지 변경자 추가하기

이 섹션에서는 DOM API 특징을 몇 가지 더 사용해 이미지를 하나 더 추가하고, 이미지가 클릭될 때 JavaScript를 이용해 두 이미지 사이에 전환이 이루어지도록 해보겠습니다.

1. 맨 먼저, 사이트에 나타내길 원하는 다른 이미지를 찾으세요. 처음 이미지와 같은 사이즈 또는 가능하면 비슷한 크기여야 합니다.
2. `images` 폴더에 이미지를 저장하세요.
3. 이미지 이름을 'firefox2.png'(인용부호 없이)로 바꾸세요.
4. `main.js` 파일로 가서, 다음 JavaScript를 입력하세요 (만약 "Hello world" JavaScript가 있다면, 지우세요):

```js
let myImage = document.querySelector("img");

myImage.onclick = function () {
  let mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};
```

5. 모든 파일을 저장하고 브라우저에서 `index.html`을 불러오세요. 이제 여러분이 이미지를 클릭할 때 이미지가 다른 이미지로 바뀔 것입니다!

`myImage` 변수에 `<image>` (en-US) 요소에 대한 참조를 저장합니다. 다음으로 이 변수의 `onclick` 이벤트 핸들러 프로퍼티에 이름이 없는 함수("익명" 함수)를 할당합니다. 이제, 매번 이미지 요소가 클릭될 때:

1. 이미지의 `src` 속성 값을 얻습니다.
2. `src` 값이 원래 이미지 경로와 같은지 확인하기 위해 조건문을 사용합니다:
    1. 만약 같다면, `src` 값을 두 번째 이미지 경로로 변경하여 다른 이미지가 `<image>` (en-US) 요소 안에 로드되도록 합니다.
    2. 같지 않다면(이미 변경되었다는 것을 의미), 원래 상태로 되돌리기 위해 `src` 값을 원래 이미지 경로 바꿔 놓습니다.
### 개인화된 환영 메시지 추가하기

다음으로는 다른 코드를 약간 추가할 것인데, 이 코드는 사용자가 처음으로 사이트에 방문했을 때 페이지의 제목을 개인화된 환영 메시지로 바꾸는 것입니다. 이 환영 메시지는 해당 사용자가 사이트를 떠났다가 돌아오더라도 계속 유지될 것입니다 — 이 메시지를 웹 저장소 API(Web Storage API)를 이용해 저장할 것입니다. 사용자를 변경할 수 있는 옵션도 추가하여 언제든지 필요할 때 환영 메시지를 나타나도록 할 것입니다.

1. `index.html` 내의 `<script>` 요소 바로 앞에 다음 줄을 추가하세요:

```html
<button>Change user</button>
```

2. `main.js` 파일의 맨 마지막에 다음 두 줄을 똑같이 추가하세요 — 이 코드는 새로 추가된 버튼과 본문 제목에 대한 참조를 가져와 변수에 저장하는 것입니다:

```js
let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");
```

3. 다음으로 개인화된 인삿말을 설정하기 위해 다음 함수를 추가합니다 — 아직 아무 동작도 하지않지만 좀 이따가 고칠겁니다:

```js
function setUserName() {
  let myName = prompt("Please enter your name.");
  localStorage.setItem("name", myName);
  myHeading.textContent = "Mozilla is cool, " + myName;
}
```

이 함수는 `alert()` 와 약간 닮은 대화상자를 불러오는 `prompt()` 함수를 포함하고 있습니다. `prompt()` 는 사용자에게 어떤 데이터를 입력하길 요청하고, 사용자가 *OK* 를 누른 후에 그 값을 변수에 저장합니다. 이 예시에서는, 사용자에게 그들의 이름을 입력하길 요청하고 있습니다. 다음으로, 브라우저에 데이터를 저장하고 나중에 불러올 수 있도록 해주는 `localStorage` 라는 API 를 부릅니다. 우리는 `'name'` 라는 데이터 항목을 생성하고 저장하기 위해 localStorage 의 `setItem()`함수를 사용합니다. 그리고 사용자가 입력한 이름을 포함하는 그 값을 `myName` 변수에 저장합니다. 마지막으로, 헤딩의 textContent를 유저의 이름을 포함한 스트링으로 설정합니다.
4. 다음으로, 이 `if ... else` 문을 추가합니다 — 처음 불려질 때 앱이 셋업되도록 이 초기화 코드를 불러옵니다:

```js
if (!localStorage.getItem("name")) {
  setUserName();
} else {
  let storedName = localStorage.getItem("name");
  myHeading.textContent = "Mozilla is cool, " + storedName;
}
```

이 구문은 먼저 `name` 데이터 아이템이 존재하는지 확인하기 위해 부정 연산자 (논리적 NOT, !로 표현되는) 를 사용합니다. 존재하지 않는다면 값을 생성하기 위해 `setUserName()` 함수를 실행합니다. 존재한다면 (예로, 이전 방문을 통해 사용자가 세팅되었음), 우리는 `getItem()` 을 사용해 저장된 이름 값을 얻고, 헤딩의 textContent 을 `setUserName()` 안에서 작업한 것과 같은 사용자의 이름을 포함한 문자열로 세팅합니다.
5. 마지막으로, 아래의 `onclick` 이벤트 핸들러를 버튼에 추가해서, 클릭될 때 `setUserName()` 함수가 실행되도록 합니다. 이것은 버튼을 누름으로 인해 유저가 원하는 새 이름을 설정할 수 있도록 해줍니다.

```js
myButton.onclick = function () {
  setUserName();
};
```

이제 여러분이 사이트에 처음으로 방문했을 때, 개인화된 메시지를 제공하기 위해 여러분의 이름을 물을 것입니다. 그리고 언제든 버튼을 누름으로 여러분이 원하는 이름으로 변경할 수 있습니다. 추가 선물로써, 이름은 `localStorage` 에 저장되기 때문에, 사이트가 닫힌 이후에도 이름이 유지됩니다. 그래서 개인화된 메시지는 여러분이 사이트를 다시 열었을 때 그대로 남아있을 것입니다!

### 사용자 이름이 null?

예제를 실행 시키고 바로 나타나는 다이얼로그 상자에 당신의 이름을 입력하고*Cancel* 버튼을 눌러보세요. "Mozilla is cool, null"라는 제목을 보게될 것입니다. 이것은 사용자가 입력을 취소했을 때 값이, 원래 Javascript가 값이 없음을 표현하는 특별한 값인 `null`로 설정되기 때문입니다.

또한, 어떠한 이름도 기입하지 않고 OK를 눌러보세요. — 꽤 분명한 이유로 "Mozilla is cool,"라는 제목을 보게될 것입니다.

이러한 문제들을 피하고 싶다면, `setUserName()` 함수를 수정함으로써 사용자가 null 또는 공백 이름을 입력하지 않았는지 체크해야 합니다. 이와 같이:

```js
function setUserName() {
  let myName = prompt("Please enter your name.");
  if (!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.innerHTML = "Mozilla is cool, " + myName;
  }
}
```

해석하자면 — `myName`에 할당된 값이 없거나 null일 때, `setUserName()`함수를 처음부터 다시 실행합니다. 값이 있으면(위의 if 조건이 not true일 때) `localStorage`에 값을 저장하고 헤딩의 텍스트에 값을 설정합니다.

마무리
---

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

![](/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics/website-screen-scripted.png)

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

여기서, 우리는 JavaScript의 겉을 살짝 맛봤습니다. 즐겁게 배우셨고, 더 깊게 학습하고 싶으시다면, JavaScript 안내서 페이지로 가보세요.

* 이전
* Overview: Getting started with the web
* 다음


HTML 기본 - Web 개발 학습하기

HTML 기본
=======

* 이전
* Overview: Getting started with the web
* 다음

HTML (**H**yper**t**ext **M**arkup **L**anguage)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다.

그래서 HTML은 무엇일까요?
----------------

HTML은 콘텐츠의 구조를 정의하는 *마크업 언어* 입니다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 **요소** 로 이루어져 있습니다. 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 아래에 나오는 줄의 내용과 같이 예를 들 수 있습니다.
```

My cat is very grumpy
```

그 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그로 둘러쌈으로해서 그것이 하나의 문단임을 명시할 수 있습니다.

```html
<p>My cat is very grumpy</p>
```

### HTML 요소 분석

이 문단 요소에 대해 조금 더 탐구해봅시다.

![여는 태그를 포함한 문단 요소, 'my cat is very grumpy'를 읽는 콘텐츠, 그리고 닫는 태그](/ko/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-small.png)

이 요소의 주요 부분은 다음과 같습니다.

1. **여는 태그 (Opening tag)**: 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다. 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
2. **닫는 태그 (Closing tag)**: 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다. 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
3. **콘텐츠 (Content)**: 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
4. **요소 (Element)**: 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어집니다.

요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다.

![class=editor-note가 강조되어있는 클래스 속성이 있는 여는 태그가 있는 문단](/ko/docs/Learn/Getting_started_with_the_web/HTML_basics/grumpy-cat-attribute-small.png)

 속성은 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, 클래스 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.
 `required` (en-US)같은 어떤 속성은 값을 가지지 않습니다.

속성이 항상 가져야 하는 것은 다음과 같습니다.

1. 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
2. 속성 이름 뒤에는 등호(=)가 와야 합니다.
3. 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.

**참고:** ASCII 공백을 포함하지 않는 간단한 속성 값 (또는 문자 `"` `'` `⁇` `=` `<` `>`)은 인용되지 않은 채로 남아 있을 수 있지만, 코드를 더 일관되고 이해할 수 있도록 하기 때문에 모든 속성 값을 인용하는 것이 좋습니다.

### 요소 중첩

요소를 다른 요소의 안에 놓을 수 있습니다. 이것을 **중첩(nesting)** 이라고 부릅니다. out cat is **very** grumpy 라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는`<strong>` (en-US) 요소로 "very"를 감싸면 됩니다.

```html
<p>My cat is <strong>very</strong> grumpy.</p>
```

하지만 요소가 적절히 중첩되었는지 확인할 필요가 있습니다. 위의 예제에서 우리는 `<p>` 요소를 먼저 열었고, 그 다음 `<strong>` (en-US)을 열었습니다. 그러므로 `<strong>` (en-US) 요소를 먼저 닫고, 다음으로 `<p>`를 닫아야 합니다. 다음은 잘못된 것입니다.

```html
<p>My cat is <strong>very grumpy.</p></strong>
```

요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 위와 같이 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 해서 최선을 다해 화면에 보여주겠지만, 여러분이 의도한 것과 다르게 보여질 수 있습니다. 그러니까 이렇게 하지 마세요!

### 빈 요소

어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 **빈 요소** 라고 합니다. `<img>` 요소는 이미 우리 HTML 페이지에 있습니다.

```html
<img src="images/firefox-icon.png" alt="My test image" />
```

이 요소는 두 개의 속성을 포함하고 있으나 닫는 `</img>` 태그가 없습니다. 이미지 요소는 효과를 주기 위해 콘텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.

### HTML 문서 해부

각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. `index.html` 예제(파일 다루기 편에서 처음 봤던)에 넣은 코드를 다시 살펴봅시다.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>
```

여기 살펴볼 것들입니다.

* `<!DOCTYPE html>` — doctype. 이것은 필수 서문입니다. 시간의 안개 속에서, HTML이 막 나왔을 때 (1991년 2월쯤), doctype은 자동 오류 확인이나 다른 유용한 것을 의미하는 좋은 HTML로 인정받기 위해 HTML 페이지가 따라야 할 일련의 규칙으로의 연결통로로써 작동하는 것을 의미하였습니다. 하지만, 최근에는 아무도 그런 것들에 대해 신경쓰지 않으며 그저 모든 것이 올바르게 동작하게 하기 위해 포함되어야 할 역사적인 유물일 뿐입니다. 지금은 그게 알아야 할 전부 입니다.
* `<html></html>` — `<html>` 요소. 이 요소는 페이지 전체의 콘텐츠를 감싸며, 루트(root) 요소라고도 합니다. 이것은 또한 문서의 고유 언어를 설정하는 `lang` 속성을 포함합니다.
* `<head></head>` — `<head>` 요소. 이 요소는 페이지를 조회하는 사람들에게 보여주는 콘텐츠가 *아닌* 당신이 HTML 페이지에 포함하고 싶어하는 모든 재료들을 위한 컨테이너 역할을 합니다. 여기에는 keywords와 검색 결과에 표시되길 원하는 페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들을 포함합니다.
* `<meta charset="utf-8">` — 이 요소는 문서가 사용해야 할 문자 집합을 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함되어 있는 utf-8으로 설정합니다. 본질적으로 여러분이 사용할 수 있는 어떠한 문자 콘텐츠도 다룰 수 있습니다. 이 문자 집합을 설정하지 않을 이유가 없으며, 그렇게 설정하면 나중에 발생할 수 있는 일부 문제를 피할 수 있습니다.
* `<meta name="viewport" content="width=device-width">` — 뷰포트 요소 (en-US)는 뷰포트의 너비에서 페이지가 렌더링하도록하며, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링한 후 축소하는 것을 방지합니다.
* `<title></title>` — `<title>` 요소. 이것은 페이지의 제목을 설정합니다, 로드된 페이지 브라우저의 탭에 나타나는 제목입니다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용됩니다.
* `<body></body>` — `<body>` 요소. 이것은 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 *모든* 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있습니다.
이미지
---

`<img>` 요소를 다시 살펴보도록 합시다.

```html
<img src="images/firefox-icon.png" alt="My test image" />
```

앞에서 설명한 것처럼 이 요소는 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 `src` (source) 속성을 통해 이러한 일을 합니다.

`alt` (대안) 속성도 포함되어 가지고 있습니다. `alt` 속성에서 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명 텍스트를 지정할 수 있습니다.

1. 시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.
2. 무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, `src` 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.

![The words: my test image](/ko/docs/Learn/Getting_started_with_the_web/HTML_basics/alt-text-example.png)

alt 텍스트에서 핵심 단어는 "설명 텍스트" 입니다. 여러분이 작성하는 alt 텍스트는 독자에게 이미지가 전달하는 어떤 것에 대해 좋은 아이디어를 가지기에 충분한 정보를 제공해야 합니다. 이 예제에서 "My test image" 라는 현재의 텍스트는 전혀 좋지 않습니다. Firefox 로고에 대해서는 "The Firefox logo: a flaming fox surrounding the Earth." 가 훨씬 나은 대안이 될 수 있습니다.

지금 여러분의 이미지를 위한 더 나은 alt 텍스트를 만들어보세요.

**참고:** 접근성에 대한 더 많은 것은 MDN의 페이지 접근성 시작하기에서 찾아보세요.

문자 나타내기
-------

이 구획에서는 텍스트를 표시하는 데 사용할 몇 가지 필수 HTML 요소를 다룹니다.

### 제목

제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, <h1> - <h6>, 여러분은 아마 3-4 만을 주로 사용하게 될겁니다.

```html
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
```

**참고:** `<!--` 과 `-->` 사이에 있는 모든 것은 **HTML 주석** 입니다. 코드를 렌더링 할 때 브라우저는 주석을 무시합니다. 다른 의미로, 페이지에 그들은 존재하지 않고 코드에만 존재합니다. HTML 주석은 코드나 로직에 대한 유용한 참고를 적기 위한 방법입니다.

지금 한번 해보세요, 여러분의 HTML 페이지에 있는 `<img>` 요소 위에 적당한 제목을 추가합시다.

**참고:** 당신은 당신의 heading level 1이 암묵적인 스타일을 가진다는 것을 볼 수 있을 것입니다. heading 요소를 문자를 크게 혹은 굵게 만드려고 사용하지 마세요, 왜냐하면 그들은 접근과 SEO와 같은 다른 이유에 사용되기 때문입니다. 단계를 건너뛰지 않고 페이지에 의미 있는 heading 순서를 만들어보세요.

### 문단

위에서 설명했듯이, `<p>` 요소는 문자의 문단을 포함하기 위한 것입니다. 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다.

```html
<p>This is a single paragraph</p>
```

간단한 문자 (*웹사이트의 외관은 어떻게 할까요?*에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, `<img>` 요소 바로 아래 둡시다.

### 목록

많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.

1. **순서 없는 목록**은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다. `<ul>` 요소로 둘러 쌓여 있습니다.
2. **순서 있는 목록**은 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다. `<ol>` 요소로 둘러 쌓여 있습니다.

목록의 각 항목은 `<li>` (목록 항목) 요소 안에 놓여야 합니다.

예를 들어, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면.

```html
<p>
  At Mozilla, we’re a global community of technologists, thinkers, and builders
  working together ...
</p>
```

이렇게 마크업을 변경해볼 수 있습니다.

```html
<p>At Mozilla, we’re a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ...</p>
```

여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.

링크
--

링크는 아주 중요합니다. 이것은 웹을 웹으로 만들어줍니다! 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다. `<a>` "a" 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다.

1. 어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.
2. 문자를 `<a>` 요소로 감쌉니다, 이렇게요.

```html
<a>Mozilla Manifesto</a>
```

3. `<a>` 요소에 `href` 속성을 줍니다, 이렇게요.

```html
<a href="">Mozilla Manifesto</a>
```

4. 이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.

```html
<a href="https://www.mozilla.org/en-US/about/manifesto/"
 >Mozilla Manifesto</a
>
```

만약 웹 주소의 시작부분에 *프로토콜* 이라 불리는 `https://` 또는 `http://` 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.

**참고:** 처음엔 `href` 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 ***h**ypertext **ref**erence*(하이퍼 텍스트 참조)를 나타낸다는 것을 기억하세요.

아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.

결론
--

이 글의 모든 설명을 따라오셨다면 이와 같이 보이는 페이지가 될 겁니다. (여기서도 볼 수 있습니다).

![firefox logo가 보이는 웹 페이지 스크린샷, 제목은 mozilla is cool 이라고 말한다, 그리고 두 단락의 필러 텍스트](/ko/docs/Learn/Getting_started_with_the_web/HTML_basics/finished-test-page-small.png)

잘 안 된다면 여러분의 코드를 Github에 있는 저희의 완성된 예제 코드와 비교해 볼 수 있습니다.

여기서 우리는 HTML 맛보기를 하였습니다. 더 알아보기 위해, HTML 배우기 페이지로 가보세요.

* 이전
* Overview: Getting started with the web
* 다음


Node server without framework - Web 개발 학습하기

Node server without framework
=============================

소개
--

물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:

* Express: 가장 많이 사용하는 프레임워크
* Total: 올인원 통합 프레임워크로, 다른 프레임워크나 모듈에 의존성이 없습니다.

하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.

예제
--

다음은 짧고 간단한 정적 파일 nodejs 서버입니다.

```js
var http = require("http");
var fs = require("fs");
var path = require("path");

http
  .createServer(function (request, response) {
    console.log("request ", request.url);

    var filePath = "." + request.url;
    if (filePath == "./") {
      filePath = "./index.html";
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
      ".html": "text/html",
      ".js": "text/javascript",
      ".css": "text/css",
      ".json": "application/json",
      ".png": "image/png",
      ".jpg": "image/jpg",
      ".gif": "image/gif",
      ".svg": "image/svg+xml",
      ".wav": "audio/wav",
      ".mp4": "video/mp4",
      ".woff": "application/font-woff",
      ".ttf": "application/font-ttf",
      ".eot": "application/vnd.ms-fontobject",
      ".otf": "application/font-otf",
      ".wasm": "application/wasm",
    };

    var contentType = mimeTypes[extname] || "application/octet-stream";

    fs.readFile(filePath, function (error, content) {
      if (error) {
        if (error.code == "ENOENT") {
          fs.readFile("./404.html", function (error, content) {
            response.writeHead(404, { "Content-Type": "text/html" });
            response.end(content, "utf-8");
          });
        } else {
          response.writeHead(500);
          response.end(
            "Sorry, check with the site admin for error: " +
              error.code +
              " ..\n",
          );
        }
      } else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      }
    });
  })
  .listen(8125);
console.log("Server running at http://127.0.0.1:8125/");
```


Server-side website programming first steps - Web 개발 학습하기

Server-side website programming first steps
===========================================

서버사이드 프로그래밍 모듈에서 우리는 서버사이드 프로그래밍에 대해 몇 가지 근본적인 질문을 합니다. — "그게 뭐야?", "클라이언트 사이드 프로그래밍과 뭐가 달라?", "왜 쓸만해?". 여기서 우리는 여러분의 첫 웹사이트를 만드는 데에 필요한 가장 적합한 프레임워크를 어떻게 정하는 지에 대한 적절한 지도와 함께 가장 인기있는 서버 사이드 웹 프레임워크들의 개요를 제공합니다. 끝으로 높은 수준의 웹 서버 보안에 대한 소개를 제공합니다.

전제 조건
-----

이 모듈을 시작하기 전에, 서버사이드 프로그래밍이나 혹은 사실상 다른 어떠한 프로그래밍 지식도 필요 하지 않습니다.

"웹이 어떻게 동작하는가" 를 이해해야 합니다. 다음의 토픽들을 우선 읽어보는 것을 추천합니다.

* 웹 서버란 무엇인가 (What is a web server)
* 웹사이트를 만들기 위해서는 어떤 소프트웨어가 필요한가 (What software do I need to build a website?)
* 어떻게 웹 서버에 파일을 업로드 하는가 (How do you upload files to a web server?)

이러한 기본적인 이해가 있다면, 이 섹션의 모듈들을 공부할 준비가 되었습니다.

가이드
---

서버 사이드에 대한 소개 (Introduction to the server side)

MDN의 초급자 서버 사이드 프로그래밍 코스에 오신 것을 환영합니다! 첫 글에서는, '서버사이드란 무엇인가', '클라이언트 사이드 프로그래밍과 어떤 점이 다른가', 그리고 '왜 유용한가' 와 같은 질문들에 답하며 서버 사이드 프로그래밍을 상위 단계부터 살펴봅니다. 이 글을 읽고 난 후, 서버 사이드 코딩을 통해 웹사이트에 추가적인 작업들을 할 수 있다는 것을 이해하게 될 것입니다.

클라이언트 - 서버 개요 (Client-Server overview)

당신이 서버 사이드 프로그래밍의 목적과 잠재적인 이점에 대해 알고 있기 때문에, 이제 서버가 브라우저로 부터 "동적 요청"을 받으면 어떤 일이 일어나는 지를 자세히 알아보고자 합니다. 대부분의 웹사이트 서버 사이드 코드는 요청 및 응답을 비슷한 방식으로 다루기 때문에, 이것은 당신이 코드를 짤 때 무엇을 해야 하는지 이해하도록 도울 것입니다.

서버 사이드 웹 프레임워크 (Server-side web frameworks)

마지막 글은 서버 사이드 웹 어플리케이션이 웹 브라우저의 요청에 응답하기 위해 무엇을 해야하는 지를 보여줍니다. 이제 웹 프레임워크가 어떻게 이러한 일들을 간소화 하는지 보여주고, 당신이 첫 서버 사이드 웹 어플리케이션에 맞는 프레임워크를 선택하도록 도울 것입니다.

웹사이트 보안 (Website security (en-US))

웹사이트 보안은 웹사이트 설계 및 이용의 모든 측면에서 주의를 필요로 합니다. 이 입문 글이 당신을 웹사이트 보안 전문가로 만들어주지는 않지만, 가장 일반적인 위협들로 부터 웹 어플리케이션을 튼튼하게 만드는 첫 중요한 단계들을 이해하게끔 도울 것입니다.

평가
--

이 "개요" 모듈은 아직 어떠한 코드도 보여주지 않았기 때문에 어떠한 평가도 없습니다. 우리는 현 시점에서, 당신이 서버 사이드 프로그래밍을 통해 어떤 기능들을 보여줄 수 있는지 제대로 이해하고, 당신의 첫 웹사이트를 만드는데에 어떤 서버 사이드 웹 프레임 워크를 사용할 지 결정했기를 바랍니다.


Django 웹 프레임워크 (파이썬) - Web 개발 학습하기

Django 웹 프레임워크 (파이썬)
====================

Django는 파이썬으로 구성된, 인기 많고 완벽한 기능을 갖춘 서버-사이드 웹 프레임워크입니다. 이 모듈은 Django가 웹 서버 프레임워크 중 가장 유명한 이유, 개발환경을 설정하는 방법, 그리고 이를 통해 자신만의 웹 애플리케이션을 만드는 방법을 알려줍니다.

전제조건
----

이 모듈을 시작하기에 앞서, 당신이 Django에 대해 미리 알 필요는 전혀 없습니다. 하지만 Server-side website programming first steps 모듈을 보면서 과연 서버-사이드 웹 프로그래밍과 웹 프레임워크가 무엇인가에 대해서는 이해 할 필요가 있습니다.

프로그래밍 개념 그리고 Python에 대한 일반적인 지식을 공부하는 것은 권장합니다. 하지만 이것이 Django의 핵심 개념을 이해하는데 반드시 필요한 것은 아닙니다.

**참고:**: Python은 초보자가 읽고 이해할 수 있는 가장 쉬운 프로그래밍 언어 중 하나 입니다. 즉, 만약 당신이 이 모듈을 더 깊이 이해하고 싶다면, 인터넷에서 많은 무료 서적과 자습서들을 이용할 수 있습니다. ( 초보 프로그래머들은 python.org wiki 에서 Python for Non Programmers 페이지를 확인해도 좋습니다.).

가이드
---

Django 소개

이 문서에서는 "Django란 무엇인가?" 라는 물음에 답을 합니다. 그리고 이 웹 프레임워크를 특별하게 만드는 요소에 대해 대략적으로 살펴볼 것입니다. 우리는 여기서 Django의 주요 특징들 (자세히 설명할 시간은 없는 심화된 기능들 포함) 을 훑어볼 것입니다. 또한 Django 애플리케이션의 주요 구성 요소들 중 일부를 보여줍니다. 따라서 당신이 Django 애플리케이션을 설정하고 시작하기 전에, 우리는 Django가 무슨 일을 해 줄 수 있는지에 대해 알려줄 것입니다.

Django 개발 환경 설정

이제 Django가 무엇인지 알았으므로 Windows, Linux (Ubuntu) 및 Mac OS X에서 Django 개발 환경을 설정하고 테스트하는 방법을 살펴봅시다. 이 문서에서는 당신이 어떠한 운영 체제를 사용하든지 상관없습니다. 우리는 당신이 Django로 앱 개발을 시작하기 전에 필요한 것을 마땅히 알려줘야 합니다.

Django Tutorial: The Local Library website

이 (실용적) 튜토리얼의 첫번째 문서에서는 앞으로 무엇을 배울지 알아봅니다. - 우리가 후속 문서에서 계속 작업하고 개발해 나갈 "로컬 저장소" 의 예제 웹사이트를 살펴봅니다.

Django Tutorial Part 2: Creating a skeleton website

이 수업에서는 웹사이트의 기본인 "뼈대"를 만드는 방법을 살펴봅니다. 그런 다음 사이트별로 settings, urls, models, views, templates 을 사용하여 채워 넣을 것입니다.

Django Tutorial Part 3: Using models

이 수업에서는 로컬 저장소 웹사이트에서 모델을 저장하는 방법에 대해 알아봅니다. 모델이란 웹 앱의 자료구조를 나타내며, Django의 데이터 베이스에 데이터를 저장할 수 있도록 해줍니다. 여기서는 모델이 무엇인지, 어떻게 선언하는지, 그리고 몇몇 중요한 필드 타입도 살펴볼 것입니다. 그리고 모델 데이터에 접근하는 몇가지 주요 방법도 간단하게 알아봅니다.

Django Tutorial Part 4: Django admin site

앞에서 로컬라이브러리 웹사이트의 모델을 생성했다면, 이제는 Django 관리자 사이트를 사용해서 "실제" 책 데이터를 추가할 차례입니다. 먼저 관리자 사이트에 모델에 등록하는 방법을 보여줄 것입니다. 그 다음에 로그인 하고 데이터를 생성하는 방법도 배울 것입니다. 마지막 순서에서는 관리자 사이트의 PT를 향상시키는 더 많은 방법도 알아볼 것입니다.

Django Tutorial Part 5: Creating our home page

이제 우리는 처음으로 완성된 페이지(홈페이지 개념으로 모델 종류를 기록하고 사이드바나 다른 페이지의 링크들이 있음)를 표시하기 위한 코드를 입력할 준비가 되었습니다. 이 방법을 통해 기본적인 URL 맵이나 뷰를 작성하고, 데이터베이스에 기록하고, 템플릿을 사용하는 실용적인 경험을 얻을 것입니다.

Django Tutorial Part 6: Generic list and detail views

이 수업에서는 우리가 만든 local library의 웹사이트를 확장해 볼 것입니다. 목록, 책이나 저자 정보를 담은 자세한 페이지들을 추가할 것입니다. 여기서는 일반적인 클래스 기반의 view를 배우고 보통 상황에서 어떻게 코드의 양을 줄일 수 있는지 살펴볼 것입니다. 우리는 또한 URL 핸들링에 대해 정말 자세히 들어가서, 기본적인 패턴 매칭을 어떻게 해야 하는지도 볼 것입니다.

Django Tutorial Part 7: Sessions framework

여기서는 우리가 만든 로컬 라이브러리의 웹사이트에 '세션 기반 방문자 수 계산기' 를 홈페이지에 추가할 것입니다. 이것은 비교적 간단한 예제입니다. 하지만 귀하는 이 예제를 통해, 세션 프레임워크를 사용해서 어떻게 사이트에 방문하는 이름없는 사용자들의 반복적인 행동을 볼 수 있는지 (그 방법을) 알 수 있습니다.

Django Tutorial Part 8: User authentication and permissions (en-US)

이 수업에서는 유저들에게 그들의 계정으로 웹사이트에 로그인 하게 하는 방법에 대해 배웁니다. 그리고 로그인 상태에 따라 그들이 보고 작성할 수 있는 범위를 통제하는 방법, 그들에게 허가를 내주는 방법을 배웁니다. 우리는 연습을 위해서 로컬 라이브러리 웹사이트를 확장해 볼 것입니다. 로그인 및 로그아웃 페이지를 추가하고, 대출 도서를 보여주는 페이지를 사용자용, 관리자용 각각 따로 만들어 볼 것입니다.

Django Tutorial Part 9: Working with forms

여기서는 Django에서 HTML Forms (en-US)을 어떻게 사용하는 살펴볼 것입니다. HTML은 특히 모델을 생성하고, 갱신하고, 지우는 등의 폼을 작성하는 가장 쉬운 방법입니다. 이번 연습에서는 로컬 라이브러리의 웹사이트를 확장하는 것도 포함되어 있습니다. 여기서 우리는 도서관 사서들이 (관리자 어플리케이션 보다는) 우리가 작성한 폼을 이용해서 책을 고치고, 생성하고, 업데이트하고 정보를 삭제할 수 있도록 웹사이트를 확장해 볼 것입니다.

Django Tutorial Part 10: Testing a Django web application

웹사이트가 확장되어감에 따라 일일이 확인하기가 점점 어려워질 것입니다. 테스트해야할 요소 자체가 많아질 뿐만 아니라 요소간의 상호관계도 복잡해지면서 작은 요소의 변화가 다른 큰 요소들에까지 영향을 미치게됩니다. 이런 문제에 대한 걱정을 덜어줄 수 있는 방법은 자동 테스트 코드를 작성하는 것입니다. 자동 테스트 코드는 소스에 변화가 생길때마다 작동하는 코드입니다. 이번 강좌에서는 성능이 우수하면서도 작성이 간단한 Django의 테스트 프레임워크로 어떻게 당신의 웹사이트를 단위 테스트할수 있는지 알아봅니다.

Django Tutorial Part 11: Deploying Django to production

이제 당신은 훌륭한 로컬저장소 웹사이트를 만들었으니, 로컬저장소가 아닌 공개 서버에 업로드 함으로써 인터넷을 통해 관리자와 사용자들이 접근할 수 있도록 하고싶을 겁니다. 이 수업에서는 호스트 업체를 찾고 웹사이트를 등록하는 방법과 사이트에 상품가치를 부여하는 방법을 알아봅니다.

Django web application security (en-US)

사용자의 데이터를 보호하는 것은 웹사이트 디자인에서 중요한 부분입니다. 이전에 Web security 수업에서 일반적인 보안 위협들에 대해 알아보았습니다. 이번 항목에서는 Django에 내장된 보호 시스템이 이런 위협을 어떻게 처리하는지 실질적인 예시에 대해 살펴봅니다.

평가
--

밑에 제시되어있는 평가는 위에 설명 된 대로, 장고(Django)를 사용하여 웹 사이트를 만드는 방법에 대한 이해도를 테스트합니다.

DIY Django 미니 블로그 (en-US)

이 평가에서, 귀하는 여기서 배운 지식을 활용해서 자신만의 블로그를 만들 수 있습니다.


Express 웹 프레임워크 (Node.js/JavaScript의 활용) - Web 개발 학습하기

Express 웹 프레임워크 (Node.js/JavaScript의 활용)
========================================

Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 구동되는 인기 있는 웹 프레임워크입니다. 이 장에서는 Express 프레임워크의 몇 가지 장점과 개발환경 설치 방법, 웹 개발과 배포작업의 방법을 다룹니다.

알아야할 것들
-------

이 장의 내용은 Server-side 웹 프로그래밍과 웹 프레임워크에 대한 이해가 필요합니다. 잘 모르겠다면 Server-side website programming first steps 을 먼저 확인해보세요. 일반적인 프로그래밍 컨셉과 JavaScript 의 지식이 요구되지만, 핵심까지 세세하게 알 필요는 없습니다.

**참고:** 여기서는 클라이언트 측에서의 자바스크립에 관한 많은 유용한 자료들을 이용할 수 있다. JavaScript, JavaScript Guide, JavaScript Basics, JavaScript (한 번 배워보자). JavaScript의 핵심과 컨셉은 Node.js를 이용한 서버측 개발과 같으므로, 여기의 자료들을 이용하는 게 좋을 것이다. Node.js 는HTTP서버를 구축하고 파일 시스템에 접근하는 등의 브라우저가 필요없는 환경에서에서 유용한 기능을 제공하는 additional APIs를 제공하지만, 브라우저나 DOM에서 작동되는 JavaScript API는 지원하지 않는다.

다음 목차에서는 Node.js와 Express 그리고 인터넷과 책에서의 방대한 좋은 자료들에 있는 정보들을 알려준다. 이들은 How do I get started with Node.js (StackOverflow) 나 What are the best resources for learning Node.js? (Quora)에 참고해보자

목차
--

Express/Node introduction (en-US)

처음으로 Express에 배우는 이 곳에서는 "Node가 뭐지?", "Express는 뭐지?"의 물음에 답하고, Express 웹 프레임워크의 전반적인 사항에 대해 알아볼 것이다. 주된 내용의 뼈대를 완성하고, Express 어플리케이션을 하나하나씩 배워볼 것이다. (하지만, 이 곳에서는 아직 어디서 테스팅이 이루어질 지 개발 환경등에서는 다루지 않을 것이다.).

Setting up a Node (Express) development environment (en-US)

이제 Express가 어디에 이용되는지 알아볼 것이다. Windows, Linux(Ubuntu), Mac OS X에서 Node/Express의 개발환경을 구축하기 위한 방법도 살펴볼 것이다. 운영체제에 관계없이, 여기서는 Express 개발을 시작하기위해서 어떤 것이 필요한지도 알려준다.

Express Tutorial: The Local Library website (en-US)

실질적인 튜토리얼에 해당하는 이번 수업에서는 어떤 것을 배우고 차후 수업에 필요한 "로컬 라이브러리"에서의 웹사이트의 전반적인 개요도 알아본다.

Express Tutorial Part 2: Creating a skeleton website (en-US)

여기서는 웹사이트의 뼈대를 구성해 나갈 것이다. 웹사이트의 뼈대란 사이트의 사이트맵, 템플릿 및 데이터베이스등을 말하므로 이를 만들어볼 것이다.

Express Tutorial Part 3: Using a Database (with Mongoose) (en-US)

여기서는 간단하게나마 Node/Express에 필요한 데이터베이스의 개요에 대해 소개할 것이다. 그리고 로컬의 웹사이트의 DB에 접근하기 위해 Mongoose를 사용하는 법도 알아본다. DB에서의 스키마와 모델이 어떻게 정의되는지, 필드의 타입과 기본적인 유효성에 대해서도 알아본다. 또한, 짧게나마 모델 데이터를 접근하는 주된 방법도 알아본다.

Express Tutorial Part 4: Routes and controllers (en-US)

이 수업에서는 *LocalLibray* 웹사이트에 사용하기 위해 "더미" 핸들러 함수를 통한 라우터(URL 핸들링 코드)에 대해 배운다. 여러분의 라우팅 핸들링 코드를 사용할 수 있는 모듈 구조를 가지고 있으며, 다음 장에서 실제로 핸들러 기능을 확장할 수 있게 된다. 또한, Express에서 사용가능한 모듈 형식의 라우팅에 대해 쉽게 이해할 수 있을 것이다.

Express Tutorial Part 5: Displaying library data (en-US)

자, 이제 웹사이트에 책이나 데이터들을 표시할 페이지를 추가할 수 있다. 페이지에는 사이트에 관련된 자세한 부분과 리스트 및 모델 타입들이 얼마나 많이 기록되는지에 관한 홈 페이지가 포함되어 있다. 따라서 우리들은 데이터베이스에서 기록을 얻고 템플릿을 사용하는 데 실질적인 경험을 가질 수 있다.

Express Tutorial Part 6: Working with forms (en-US)

이 수업에서는 Pug를 사용해서 어떻게 Express에서 HTML Forms (en-US) 이 사용되는지 보여주고, 특히 데이터베이스에서 폼을 작성하고 업데이트하고 지우기 위해 사용하는 방법에 대해 배울 것이다.

Express Tutorial Part 7: Deploying to production (en-US)

이제 꽤 훌륭한 로컬라이브러리 웹사이트 만들 수 있으며 , 웹 서버에 업로드 함으로서 여러 사람들이 인터넷을 통해 접근할 수 있게 만들 수 있다. 이 수업은 전반적으로 웹 사이트를 배포하기 위해 호스트와 연결하는 등을 배우고, 실제 서비스를 하기위해 준비해야할 것들을 알려 준다.

튜토리얼 추가하기
---------

**자습서의 끝입니다.** (지금은 말이죠). 만약 이 자습서의 내용을 보충하고 싶으시다면 아래와 같은 주제를 해 주시면 좋을 것 같네요:

* 세션 이용하기
* 사용자 인증
* 사용자 권한 부여 및 허가
* Express 웹 어플리케이션 테스트
* Express 웹 어플리케이션 보안

그리고 평가 작업도 있으면 정말 좋을 것 같아요!


Django Tutorial Part 5: Creating our home page - Web 개발 학습하기

Django Tutorial Part 5: Creating our home page
==============================================

* 이전
* Overview: Django
* 다음

우리는 이제 첫 전체 페이지를 보여주는 코드를 추가할 때가 되었습니다 — LocalLibrary website를 위한 홈페이지를요. 이 홈페이지는 각각의 모델 타입마다 갖고 있는 레코드들의 숫자를 보여주고, 우리의 다른 페이지들로 이동할 수 있는 사이드바 내비게이션 링크들을 제공합니다. 이 섹션에서 우리는 기본 URL 맵과 뷰들을 작성하고, 데이터베이스에서 레코드들을 가져오고 그리고 탬플릿을 사용하는 것에 대한 연습 경험을 가질 수 있습니다.

|  |  |
| --- | --- |
| 사전 준비: | Django Introduction을 읽어보세요. 이전 튜토리얼들을 완료하세요 (Django Tutorial Part 4: Django admin site
 포함).
  |
| 목표: |
 간단한 url 맵과 뷰를 생성하고(URL 안에 아무런 데이터도 인코드되지 않은),
 모델로부터 데이터를 가져오고, 탬플릿을 생성하는 방법을 배우기.
  |

개요
--

지금까지는 우리의 모델을 정의하고 약간의 초기 도서관 레코드들을 만들어 왔고, 이제는 사용자에게 정보를 제공하기 위한 코드를 작성할 때입니다. 첫 번째 우리가 할 일은 우리의 페이지에서 어떤 정보를 보여줄 것인지를 결정하고, 그 요소들을 반환하는 데 사용되는 URL들을 정의하는 것입니다. 다음으로 우리는 페이지를 나타내기 위한 URL 매퍼, views, 그리고 탬플릿들을 생성할 것입니다.

아래 다이어그램은 주요 데이터 흐름 그리고 HTTP 요청과 응답을 처리하는 데 필요한 요소들을 보여줍니다. 모델은 이미 구현되었기 떄문에, 우리가 생성할 주요 요소들은 다음과 같습니다:

* URL 매퍼들 : 적절한 view 함수들을 위해 지원되는 URL들(그리고 URL들 안에 인코딩된 어떤 정보라도)을 포워딩하기 위해.
* View 함수들: 요청된 데이터를 모델들에게서 가져오고, 데이터를 표시하는 HTML 페이지를 생성하고 그리고 브라우저 안의 view로 페이지들을 사용자에게 반환하기 위해.
* 탬플릿들: 데이터를 뷰들 안에 렌더링할 때 사용하기 위해.

![](/ko/docs/Learn/Server-side/Django/Home_page/basic-django.png)

우리가 표시해야 할 페이지는 총 다섯 페이지입니다. 하나의 글에 담기에는 너무 많은 정보죠. 따라서, 이 글의 대부분은 홈 페이지를 어떻게 구현하는 지에 대해 집중하고, 다음 글에서 다른 페이지들에 대해 다루겠습니다. 이렇게 하면 URL 매퍼들, view들, 그리고 모델이 실제로 작동하는 방식에 대해 완벽하고 철저하게 이해할 수 있을 것입니다.

resource URLs 정의하기
------------------

이 버전의 LocalLibrary는 근본적으로 최종 사용자들에게는 읽기 전용이기 때문에, 우리는 사이트의 방문 페이지(홈 페이지) 그리고 책들과 저자들에 대한 목록 및 세부 view들을 보여주는 페이지만 제공하면 됩니다.

우리의 페이지들을 위해 필요한 URL들은:

* `catalog/` — 홈/색인(index) 페이지.
* `catalog/books/` — 모든 책들의 목록.
* `catalog/authors/` — 모든 저자들의 목록.
* `catalog/book/<id>` — `<id>` 라는 이름의(기본값) 프라이머리 키(primary key) 필드를 가지는 특정한 책을 위한 세부 사항 뷰(detail view). 예를 들어, 목록에 추가된 세 번째 책은 `/catalog/book/3`이 될 것입니다.
* `catalog/author/<id>` — `<id>` 라는 이름의 프라이머리 키(primary key) 필드를 가지는 특정한 저자를 위한 세부 사항 뷰(detail view). 예를 들어, 목록에 추가된 11번째 저자는 `/catalog/author/11`이 될 것입니다.

처음 세 개의 URL들은 인덱스 페이지, 책 목록, 그리고 저자 목록을 반환합니다. 이것들은 아무런 추가적인 정보도 인코드하지 않고, 데이터베이스에서 데이터를 가져오는 쿼리들도 항상 똑같습니다. 그러나, 쿼리들이 반환할 결과들은 데이터베이스의 내용물에 따라 다를 것입니다.

그에 반해서 마지막 두 개의 URL들은 특정한 책 또는 저자에 대한 세부 정보를 나타낼 것입니다. 이 URL들은 표시할 항목의 ID를 인코딩합니다(위에서 `<id>` 로 표시). URL 매퍼는 인코딩된 정보를 추출하여 view로 전달합니다. 그리고 view는 데이터베이스에서 무슨 정보를 가져올지 동적으로 결정합니다. URL의 정보를 인코딩하여 우리는 모든 책들(또는 저자들)을 처리하기 위해 단일 모임의 url 매핑, 뷰, 탬플릿을 사용할 것입니다.

**참고:** **주의:** 장고를 이용해서 당신이 필요로 하는 대로 URL들을 만들 수 있습니다 — 위와 같이 URL의 본문(body)에 정보를 인코딩할 수도 있고, 또는 URL 안에 GET 매개 변수들을 포함시킬 수 있습니다(예: /book/?id=6). 어떤 방식이건 URL들은 깨끗하고, 논리적이고, 읽기 쉬워야 합니다. (check out the W3C advice here).
 장고 문서는 더 나은 URL 설계(design)를 위해 URL의 본문(body)에 정보를 인코딩하는 것을 권장합니다.

개요에서 다룬 것 처럼, 이 글의 나머지는 색인(index) 페이지를 만드는 방법을 보여줍니다.

index page 만들기
--------------

우리가 만들 첫 번째 페이지는 index page입니다 (`catalog/`). index 페이지는 데이터베이스 안의 서로 다른 레코드들의 생성된 "개수(count)" 와 함께 몇 가지 정적 HTML을 포함합니다. 이것이 작동하도록 하기 위해서 우리는 URL 매핑, 뷰 그리고 탬플릿을 생성하겠습니다.

**참고:** **주의**:이 섹션에 조금 더 집중해 봅시다. 대부분의 정보들이 우리가 생성할 다른 페이지들에도 적용되기 때문입니다.

### URL 매핑

skeleton website를 만들었을 때, 우리는 **locallibrary/urls.py** 파일을 업데이트했습니다. `catalog/`로 시작하는 URL을 받았을 때, URLConf 모듈인 `catalog.urls` 가 나머지 문자열을 처리하도록 하기 위해서죠.

**locallibrary/urls.py** 의 아래 코드 조각은 `catalog.urls` 모듈을 포함합니다:
```

urlpatterns += [
    path('catalog/', include('catalog.urls')),
]
```

**참고:** **주의**: 장고는 import 함수 django.urls.include()를 만날 때 마다 지정된 마지막 문자에서 문자열을 나누고, 나머지 부분 문자열을 추가 작업을 위해 포함된 URLconf 모듈로 보냅니다.

우리는 또한 **/catalog/urls.py**로 이름지어진 URLConf 모듈을 위한 자리 표시자(placeholder) 파일도 생성했습니다. 그 파일에 아래 줄을 추가하세요

```python
urlpatterns = [
    path('', views.index, name='index'),
]
```

이 `path()` 함수는 아래를 정의합니다 :

* 빈 문자열인 URL 패턴 :`''`. 다른 뷰들을 작업할 때 URL 패턴들에 관해 자세히 다룰겁니다.
* URL 패턴이 감지되었을 때 호출될 view 함수:`views.index`. 이 함수는 **views.py** 파일 안에서 `index()`로 이름지어져 있습니다.

이 `path()` 함수는 또한 `name` 매개 변수를 지정합니다. 그것은 이 특정한 URL 매핑을 위한 고유 ID 입니다. 당신은 이 이름을 매퍼를 "반전" 시킬 수 있습니다. 즉, 매퍼가 처리하도록 설계된 리소스를 향하는 URL을 동적으로 생성하기 위해서죠. 예를 들자면, 우리는 아래 링크를 탬플릿에 추가해서 이름 매개 변수를 사용하여 다른 모든 페이지에서 홈 페이지로 링크를 걸 수 있습니다:

```html
<a href="{% url 'index' %}">Home</a>.
```

**참고:** **주의**: 우리는 위 링크를 하드코딩할 수 있지만(예: `<a href="/catalog/">Home</a>`), 그렇게 하면 만약에 우리가 홈페이지를 바꿨을 때 (예: `/catalog/index`로 바꿨을 때) 탬플릿들은 더이상 알맞게 링크되지 않습니다. 반전된 url 매핑을 사용하는 것이 훨씬 유연하고 강력합니다.

### View (함수-기반의)

뷰는 HTTP 요청을 처리하고, 데이터베이스에서 요청된 데이터를 가져오고, HTML 탬플릿을 이용해서 데이터를 HTML 페이지에 렌더링하고 그리고 생성된 HTML을 HTTP 응답으로 반환하여 사용자들에게 페이지를 보여주는 함수입니다. 색인(index) 뷰는 이 구조(model)를 따라갑니다 — 이것은 데이터베이스 안에 있는`Book`, `BookInstance`, 사용 가능한 `BookInstance` 그리고 `Author` 레코드들의 개수에 대한 정보를 가져오고, 그 정보를 디스플레이(display)를 위해 탬플릿으로 전달합니다.

**catalog/views.py** 를 열어서, 파일이 이미 탬플릿과 데이터를 이용해 HTML 파일을 생성하는 render() 바로가기 함수를 포함(import)하고 있음을 확인하세요.

```python
from django.shortcuts import render

# Create your views here.
```

파일의 하단에 아래 코드를 복사 붙여넣기 하세요.

```python
from catalog.models import Book, Author, BookInstance, Genre

def index(request):
    """View function for home page of site."""

    # Generate counts of some of the main objects
    num_books = Book.objects.all().count()
    num_instances = BookInstance.objects.all().count()

    # Available books (status = 'a')
    num_instances_available = BookInstance.objects.filter(status__exact='a').count()

    # The 'all()' is implied by default.
    num_authors = Author.objects.count()

    context = {
        'num\_books': num_books,
        'num\_instances': num_instances,
        'num\_instances\_available': num_instances_available,
        'num\_authors': num_authors,
    }

    # Render the HTML template index.html with the data in the context variable
    return render(request, 'index.html', context=context)
```

첫번째 줄은 우리의 모든 뷰들 안에서 데이터에 접근하는 데 사용할 모델 클래스들을 포함(import)합니다.

view 함수의 첫번째 부분은 모델 클래스들에서 `objects.all()` 속성을 사용하는 레코드들의 개수를 가져옵니다. 이 함수는 또한 상태 필드에서 'a'(Available) 값을 가지고 있는 `BookInstance` 객체들의 목록도 가져옵니다. 이전 튜토리얼에서 모델 데이터에 접근하는 방법에 대한 더 많은 정보를 찾을 수 있습니다 : Django Tutorial Part 3: Using models > Searching for records.

view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 응답으로서 반환하기 위해 `render()` 함수를 호출합니다. 이 바로가기(shortcut) 함수는 아주 일반적으로 사용되는 경우들을 간단히 하기 위해 여러 다른 함수들을 포함합니다. `render()` 함수는 아래 매개 변수들을 허용합니다:

* `HttpRequest`인 원본 `request` 객체.
* 데이터에 대한 플레이스홀더(placeholder)들을 갖고 있는 HTML 탬플릿.
* 파이썬 딕셔너리(dictionary)인, 플레이스홀더에 삽입할 데이터를 갖고 있는 `context`변수.

다음 섹션에서 탬플릿과 context 변수에 대해 더 다루도록 하겠습니다. 이제 탬플릿을 생성하여 사용자들에게 실제로 무언가를 표시해 봅시다!

### 탬플릿(Template)

탬플릿은 파일(HTML 페이지 같은)의 구조(structure)나 배치(layout)을 정의하는 텍스트 파일입니다. 탬플릿은 실제 내용물(content)를 나타내기 위해 플레이스홀더(placeholder)들을 사용합니다. 장고는 당신의 어플리케이션 안에서 'templates' 라고 이름지어진 경로 안에서 자동적으로 탬플릿들을 찾을 것입니다. 예를 들어서, 우리가 방금 추가한 색인(index) 뷰 안에서, `render()` 함수는 **/locallibrary/catalog/templates/** 경로 안에서\*\* *index.html* \*\**파일을 찾으려 할 것이고, 파일이 없다면 에러를 표시할 것입니다. 이것은 이전의 변경점들을 저장하고 브라우저에서 `127.0.0.1:8000`으로 접근해서 확인할 수 있습니다 - 이것은 다른 세부 사항들과 함께 상당히 직관적인 오류 메세지를 표시할 것입니다 : "`TemplateDoesNotExist at /catalog/`".*

**참고:** **주의:** 프로젝트의 settings 파일에 기초해서, 장고는 여러 장소에서 탬플릿들을 찾아볼 것입니다. 기본적으로는 설치된 어플리케이션에서 검색합니다. 장고가 어떻게 탬플릿들을 찾는지, 그리고 어떤 탬플릿 양식(format)들을 지원하는지에 관해 여기(Templates (Django docs))에서 찾아볼 수 있습니다.

#### 탬플릿 확장(extend)하기

색인(index) 팀플릿은 head 및 body를 위해 표준 HTML 마크업이 필요할 것입니다. 우리가 아직 생성하지 않은 사이트들의 다른 페이지들을 향한 링크를 걸기 위한 탐색(navigation) 섹션도 필요하고요. 그리고 소개 텍스트 및 책 데이터를 표시하는 섹션 또한 필요합니다. 대부분의 HTML과 탐색 구조는 사이트의 모든 페이지에서 동일할 것입니다. 모든 페이지마다 똑같은 코드를 복사하는 대신, 기본 템플릿을 선언하기 위해 장고 탬플릿 언어(Django templating language)를 사용하고, 탬플릿을 확장하여 각각의 페이지 마다 다른 부분들만을 대체(replace)할 수 있습니다.

아래 코드 조각은 **base\_generic.html** 파일의 기본 탬플릿 샘플입니다. 이 샘플은 제목, 사이드바를 위한 섹션과 이름이 지정된 `block` 및 `endblock` 탬플릿 태그(굵게 표시)가 마크된 주요 내용(main contents)들이 포함된 일반적인 HTML을 포함합니다. 블럭(block)들을 비워두거나, 또는 탬플릿에서 파생된 페이지들을 렌더링할 때 사용할 기본 내용을 포함할 수 있습니다.

**참고:** **주의:** 탬플릿 태그들은 목록을 반복하거나, 변수 값을 기반으로 조건부 연산을 수행하거나, 여타 다른 일들을 할 수 있는 함수입니다. 탬플릿 태그 외에도 탬플릿 구문(syntax)을 사용하면 view에서 탬플릿으로 전달된 변수들을 참조할 수 있고, 탬플릿 필터(filters)를 사용해서 변수의 형식을 지정할 수 있습니다(예를 들어, 문자열을 소문자로 변환).

```django
<!DOCTYPE html>
<html lang="en">
<head>
  {% block title %}<title>Local Library</title>{% endblock %}
</head>
<body>
  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
</body>
</html>
```

특정한 view를 위해 탬플릿을 정의할 땐, 먼저 `extends` 탬플릿 태그를 이용하여 기본 탬플릿을 지정합니다 — 아래 코드 샘플을 참조하세요. 그리고 나서 기본 탬플릿에서와 같이 `block`/`endblock` 섹션들을 이용해서 대체할 탬플릿의 섹션들을 선언합니다(있을 경우).

예를 들어, 아래 코드 조각은 extends 탬플릿 태그의 사용 및 content 블럭(block)을 재정의하는 방법을 보여줍니다. 생성된 HTML은 기본 탬플릿에서 정의된 코드와 구조를 포함할 것입니다(`title` 블럭에서 정의한 기본 내용은 포함하지만, 기본 `contents` 블럭 대신 새로운 `contents` 블럭 포함).

```django
{% extends "base\_generic.html" %}

{% block content %}
  <h1>Local Library Home</h1>
  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
{% endblock %}
```

#### LocalLibrary 기본 탬플릿

우리는 아래 코드 조각을 LocalLibrary 웹사이트의 베이스 탬플릿으로 사용할 것입니다. 보시는 바와 같이, 이것은 HTML 코드를 조금 포함하고 `title`, `sidebar` 그리고 `content` 블럭을 정의합니다. 우리는 기본 제목과 모든 책들 및 저자들에 대한 링크를 갖고 있는 기본 사이드바를 갖고 있습니다. 둘 다 미래에 쉽게 변경하기 위해 블럭들 안에 묶여 있습니다.

**참고:** **주의**: 우리는 또한 두 개의 추가적인 탬플릿 태그를 소개합니다: `url` 과 `load static`. 이 태그들은 아래 섹션들에서 설명될 것입니다.

새로운 파일 **base\_generic.html** 을 **/locallibrary/catalog/templates/*base\_generic.html*** 경로 안에 생성해서 아래 코드를 파일에 복사 붙여넣기 하세요:

```django
<!doctype html>
<html lang="en">
<head>
  {% block title %}<title>Local Library</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
      {% block sidebar %}
        <ul class="sidebar-nav">
          <li><a href="{% url 'index' %}">Home</a></li>
          <li><a href="">All books</a></li>
          <li><a href="">All authors</a></li>
        </ul>
     {% endblock %}
      </div>
      <div class="col-sm-10 ">{% block content %}{% endblock %}</div>
    </div>
  </div>
</body>
</html>
```

탬플릿에는 HTML 페이지의 레이아웃과 프리젠테이션을 개선하기 위한 Bootstrap 의 CSS가 포함되어 있습니다. 부스트스트랩(또는 다른 클라이언트-사이드 웹 프레임워크)를 사용해서 서로 다른 크기의 화면에서도 잘 표시되는 매력적인 페이지를 빠르게 만들 수 있습니다.

또한 기본 탬플릿은 추가적인 꾸미기(styling)를 제공하는 로컬 css 파일(styles.css)을 참조합니다. **styles.css** 파일을 **/locallibrary/catalog/static/css/** 경로 안에 생성하고 아래 코드를 파일 안에 복사 붙여넣기 하세요:

```css
.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
```

#### 색인(index) 탬플릿

새로운 HTML 파일 **index.html** 을 **/locallibrary/catalog/templates/** 경로 안에 생성해서 아래 코드를 파일 안에 복사 붙여넣기 하세요. 보시는 바와 같이 첫째 행에서 우리의 기본 탬플릿을 확장하고, 탬플릿의 기본 `content` 블럭을 새로운 블럭으로 대체합니다.

```django
{% extends "base\_generic.html" %}

{% block content %}
  <h1>Local Library Home</h1>
  <p>Welcome to LocalLibrary, a website developed by <em>Mozilla Developer Network</em>!</p>
  <h2>Dynamic content</h2>
  <p>The library has the following record counts:</p>
  <ul>
    <li><strong>Books:</strong> {{ num\_books }}</li>
    <li><strong>Copies:</strong> {{ num\_instances }}</li>
    <li><strong>Copies available:</strong> {{ num\_instances\_available }}</li>
    <li><strong>Authors:</strong> {{ num\_authors }}</li>
  </ul>
{% endblock %}
```

동적 콘텐츠 섹션에서 우리는 우리가 포함하고 싶은 view의 정보를 위한 플레이스홀더(탬플릿 변수)를 선언합니다. 이 변수들은 코드 샘플에서 굵게 표시된 것과 같이 이중 중괄호로(핸들 바)로 묶입니다.

**참고:** **주의:** 탬플릿 변수와 탬플릿 태그(함수)들을 쉽게 알 수 있습니다 - 변수들은 이중 중괄호로 감싸여져 있고(`{{ num_books }}`) , 태그들은 퍼센트 기호와 단일 중괄호로 감싸여 있습니다(`{% extends "base_generic.html" %}`).

여기서 주의해야 할 중요한 것은 변수들의 이름은 열쇠(key)들로 정해진다는 것입니다. 이 열쇠(key)들은 우리의 view의 `render()`함수 안의 `context` 사전(dictionary)로 전달하는 열쇠입니다(아래를 확인하세요). 변수들은 탬플릿이 렌더링 될 때 그것들과 연관된 값들로 대체될 것입니다.

```python
context = {
    'num\_books': num_books,
    'num\_instances': num_instances,
    'num\_instances\_available': num_instances_available,
    'num\_authors': num_authors,
}

return render(request, 'index.html', context=context)
```

#### Templates 에 정적 파일 참조하기(referencing)

당신의 프로젝트는 JavaScript, CSS 그리고 이미지를 포함하는 정적 리소스들을 사용할 가능성이 높습니다. 이 파일들의 위치가 알 수 없기 때문에(또는 바뀔 수 있기 때문에), 장고는 `STATIC_URL` 전역 설정을 기준으로 탬플릿에서의 위치를 특정할 수 있도록 합니다. 기본 뼈대 웹사이트(skeleton website)는 `STATIC_URL`의 값을 '`/static/`'으로 설정하지만, 당신은 이것들을 콘텐츠 전달 네트워크(content delivery network)나 다른 곳에서 호스트할 수도 있습니다.

아래 코드 샘플처럼, 탬플릿 안에서 당신은 먼저 탬플릿 라이브러리를 추가하기 위해 "static"을 지정하는 `load` 탬플릿 태그를 호출합니다. 그러고 나서 `static` 탬플릿 태그를 사용할 수 있고 관련 URL을 요구되는 파일에 지정할 수 있습니다.

```django
<!-- Add additional CSS in static file -->
{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />
```

비슷한 방법으로 이미지를 페이지에 추가할 수 있습니다. 예를 들어:

```django
{% load static %}
<img
 src="{% static 'catalog/images/local\_library\_model\_uml.png' %}"
 alt="UML diagram"
 style="width:555px;height:540px;" />
```

**참고:** **주의**: 위의 샘플은 파일들의 위치를 특정하지만, 장고는 기본적으로 파일을 제공하지 않습니다. 우리는 우리가 웹사이트 뼈대를 생성했을 때(created the website skeleton) 전역 URL 매퍼(/locallibrary/locallibrary/urls.py)를 수정하여 개발 웹 서버가 파일을 제공하도록 설정했습니다만, 제품화되었을(in production)때도 파일을 제공할 수 있어야 합니다. 이것에 관해 차후에 다루겠습니다.

정적 파일들로 작업하는 것에 대한 더 많은 정보는 장고 문서 안의 Managing static files 를 참고하세요.

#### URL 링크하기(Linking to URLs)

위의 기본 탬플릿은 `url` 탬플릿 태그를 소개했습니다.

```python
<li><a href="{% url 'index' %}">Home</a></li>
```

이 태그는 **urls.py**에서 호출된 `path()` 함수의 이름 및 연관된 view가 그 함수에서 수신받을 모든 인자들을 위한 값들을 허용하고, 리소스에 링크하는 데 사용할 수 있는 URL을 반환합니다 .

#### 탬플릿을 찾을 수 있는 곳 설정하기

탬플릿 폴더 안에서 탬플릿을 찾아볼 수 있도록 장고에게 위치를 가르쳐 주어야 합니다. 그것을 하기 위해서, 아래 코드 샘플에 굵게 표시된 것 처럼 **settings.py** 파일을 수정하여 TEMPLATES 객체에 templates 경로(dir)를 추가하세요.
```

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```

어떻게 보일까요?
---------

이 시점에서 우리는 색인(index) 페이지를 나타내기 위해 필요한 모든 요소들을 생성했습니다. 서버를 실행하고 (`python3 manage.py runserver`) 브라우저에서 http://127.0.0.1:8000/으로 이동하세요. 모든 것이 알맞게 설정되었다면, 당신의 사이트는 아래 스크린샷과 같이 보여야 합니다.

![Index page for LocalLibrary website](/ko/docs/Learn/Server-side/Django/Home_page/index_page_ok.png)

**참고:** **주의:** All books와 All authors 링크들에 대한 경로, 뷰 그리고 탬플릿들이 정의되지 않았기 때문에 그 링크들은 작동하지 않을 것입니다. 우리는 단지 `base_generic.html` 탬플릿 안에 그 링크들을 위한 플레이스홀더(placeholder)들을 삽입했을 뿐입니다.

도전 과제
-----

모델 쿼리, 뷰 그리고 탬플릿들과의 친밀함을 시험할 수 있는 두 가지 임무가 있습니다.

1. LocalLibrary 기본 탬플릿(base template)에는 `title` 블록이 정의되어 있습니다. 색인 탬플릿(index template) 안에 이 블록을 덮어쓰기하고 페이지를 위한 새로운 제목을 만들어 보세요.

**참고:** **힌트:** Extending templates 섹션은 블럭(block)을 생성하고 다른 탬플릿에서 블럭을 확장(extend)하는 방법을 설명합니다.
2. 대소문자 구분 없이 특정한 단어를 포함하는 장르와 책들의 개수(count)를 생성하도록 view 를 수정하고, 결과를 `context`에 전달해 보세요. 이것은 `num_books`와 `num_instances_available`을 생성하고 사용하는 것과 비슷한 방법으로 달성할 수 있습니다. 그리고 나서 이 변수들을 포함시키기 위해 index template 를 업데이트 하세요.
요약
--

이제 우리의 사이트를 위한 홈 페이지를 생성했습니다 — 데이터베이스의 여러 레코드들을 표시하고 아직 생성되지 않은 페이지로 링크하는 HTML 페이지 입니다. 그 과정에서 우리는 url 매퍼, view, 모델을 이용한 데이터베이스 쿼리, view에서 탬플릿으로의 정보 전달 그리고 탬플릿의 생성과 확장에 관한 기본적인 정보를 배웠습니다.

다음 글에서는 이 지식들을 토대로 우리 웹사이트의 나머지 네 개의 페이지들을 생성할 것입니다.

See also
--------

* Writing your first Django app, part 3: Views and Templates (Django docs)
* URL dispatcher (Django docs)
* View functions (DJango docs)
* Templates (Django docs)
* Managing static files (Django docs)
* Django shortcut functions (Django docs)
* 이전
* Overview: Django
* 다음