diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/learn/common_questions | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/learn/common_questions')
13 files changed, 1682 insertions, 0 deletions
diff --git a/files/ko/learn/common_questions/how_does_the_internet_work/index.html b/files/ko/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..f75add9c5a --- /dev/null +++ b/files/ko/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,93 @@ +--- +title: 인터넷은 어떻게 동작하는가? +slug: Learn/Common_questions/How_does_the_Internet_work +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div class="summary"> +<p>이 글에서는 인터넷의 개념과 작동 원리에 대해 설명합니다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선행지식:</th> + <td>선행지식은 필요없습니다. 하지만 '프로젝트의 목표 설정에 대한 글(<a href="/en-US/docs/Learn/Thinking_before_coding">Article on setting project goals</a>)에 대한 글을 먼저 읽어보세요.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td><span id="result_box" lang="ko"><span>웹 기술 인프라의 기초와 인터넷과 웹의 차이점을 배우게 됩니다.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p><strong>인터넷</strong>은 웹의 핵심적인 기술입니다. 인터넷의 가장 기본적인 것은, 컴퓨터들이 서로 통신 가능한 거대한 네트워크라는 것입니다.</p> + +<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">인터넷의 역사는 잘 알려지지 않았습니다</a>. 인터넷은 1960년 대 미육군에서 기금한 연구 프로젝트에서 시작되었습니다. 그리고 1980년 대에 많은 국립 대학과 비공개 기업의 지원으로 공공의 기반으로 변화되었습니다. <span id="result_box" lang="ko"><span>인터넷을 지원하는 다양한 기술은 시간이 지남에 따라 진화 해 왔지만 작동 방식은 그다지 변하지 않았습니다. 인터넷은 모든 컴퓨터를 연결하고 어떤 일이 있어도 연결 상태를 유지할 수있는 방법을 찾는 방법입니다.</span></span></p> + +<h2 id="활동적으로_배우기">활동적으로 배우기</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: Aaron Titus의 인터넷에 대한 기초를 이해하기 위한 5분짜리 동영상</li> +</ul> + +<h2 id="깊게_들어가기">깊게 들어가기</h2> + +<h3 id="단순한_네트워크">단순한 네트워크</h3> + +<p>두 개의 컴퓨터가 통신이 필요할 때, 우리는 다른 컴퓨터와 물리적으로 (보통 <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">이더넷 케이블</a>) 또는 무선으로 (예를 들어, <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> 나 <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> 시스템) 연결되어야 합니다. 모든 현대 컴퓨터들은 이러한 연결 중 하나를 이용하여 연결을 지속할 수 있습니다.</p> + +<div class="note"> +<p><strong>Note:</strong> 이 글의 나머지 부분에서는 유선 케이블에 대해서만 이야기 하지만 무선 네트워크도 동일한 방식입니다.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>이러한 네트워크는 두 대의 컴퓨터로 제한되지 않습니다. 원하는 만큼의 컴퓨터를 연결할 수 있습니다. 그러나 이렇게 연결할 수록 매우 복잡해집니다. 예를 들어 10대의 컴퓨터를 연결하려는 경우 컴퓨터 당 9개의 플러그가 달린 45개의 케이블이 필요합니다!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p><span id="result_box" lang="ko"><span>이 문제를 해결하기 위해 네트워크의 각 컴퓨터는 라우터라고하는 특수한 소형 컴퓨터에 연결됩니다.</span> <span>이 라우터에는 단 하나의 작업만 있습니다. 철도역의 신호원처럼 주어진 컴퓨터에서 보낸 메시지가 올바른 대상 컴퓨터에 도착하는지 확인합니다.</span> <span>컴퓨터 B에게 메시지를 보내려면 컴퓨터 A가 메시지를 라우터로 보내야하며, 라우터는 메시지를 컴퓨터 B로 전달하고 메시지가 컴퓨터 C로 배달되지 않도록해야합니다.</span></span></p> + +<p><span id="result_box" lang="ko"><span>이 라우터를 시스템에 추가하면 10대의 컴퓨터 네트워크에는 10개의 케이블만 필요합니다. 각 컴퓨터마다 단일 플러그와 10개의 플러그가 있는 하나의 라우터가 필요합니다.</span></span></p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="네트워크_속의_네트워크">네트워크 속의 네트워크</h3> + +<p>지금까지는 <span id="result_box" lang="ko"><span>그런대로 잘되었습니다.</span> <span>수백, 수천, 수십억 대의 컴퓨터를 연결하는 것은 어떨까요?</span> <span>물론 단일 라우터는 그 정도까지 확장 할 수는 없지만 신중하게 읽으면 라우터는 다른 컴퓨터와 마찬가지로 컴퓨터라고 말했습니다. 그럼, 두 대의 라우터를 연결하지 못하게 하는 것이 있을까요? 없죠!</span></span></p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>컴퓨터를 라우터에 연결하고, 라우터에서 라우터로, 우리는 무한히 확장할 수 있습니다.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p><span id="result_box" lang="ko"><span>이러한 네트워크는 우리가 인터넷이라고 부르는 것에 매우 가깝지만, 우리는 뭔가를 놓치고 있습니다.</span> <span>우리는 우리의 목적을 가지고 네트워크를 구축했습니다. 하지만 그밖에 </span><span>다른 네트워크들 : 친구, 이웃, 누구든지 컴퓨터로 이루어진 그들만의 네트워크를 가질 수 있습니다.</span> <span>하지만 집과 다른 지역 사이에, 아주 먼 곳에 케이블을 연결할 수는 없습니다. 이 문제를 어떻게 처리 할 수 있을까요?</span> <span>예를 들어 전력 및 전화와 같이 이미 집에 연결된 케이블이 있습니다.</span> <span>전화기 기반의 시설은 이미 세계 어느 곳과도 연결되어 있으므로 우리가 필요로 하는 완벽한 배선이라고 할 수 있습니다.</span> 따라서 <span>우리의 네트워크를 전화 시설과 연결하기 위해선, 모뎀이라는 특수 장비가 필요합니다.</span> <span>이 모뎀은 우리 네트워크의 정보를 전화 시설에서 처리 할 수있는 정보로 바꾸며, 그 반대의 경우도 마찬가지입니다.</span></span></p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p><span id="result_box" lang="ko"><span>그래서 우리의 네트워크는 전화 시설에 연결됩니다.</span> <span>다음 단계는 우리의 네트워크에서 도달하려는 네트워크로 메시지를 보내는 것입니다.</span> <span>그렇게하기 위해 네트워크를 인터넷 서비스 제공 업체 (</span></span>Internet Service Provider, <span lang="ko"><span>ISP)에 연결합니다.</span> <span>ISP는 모두 함께 연결되는 몇몇 특수한 라우터를 관리하고 다른 ISP의 라우터에도 액세스 할 수 있는 회사입니다.</span> <span>따라서 우리 네트워크의 메시지는 ISP 네트워크의 네트워크를 통해 대상 네트워크로 전달됩니다.</span> <span>인터넷은 이러한 전체 네트워크 인프라로 구성됩니다.</span></span></p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="컴퓨터_찾기">컴퓨터 찾기</h3> + +<p><span id="result_box" lang="ko"><span>컴퓨터에 메시지를 보내려면 메시지를 받을 특정 컴퓨터를 지정해야합니다.</span> <span>따라서 네트워크에 연결된 모든 컴퓨터에는 IP 주소 (IP는 인터넷 프로토콜을 나타냄)라는 고유한 주소가 있습니다.</span> <span>주소는 점으로 구분 된 네 개의 숫자로 구성된 주소입니다 </span></span> . 예: <code>192.168.2.10</code>.</p> + +<p><span id="result_box" lang="ko"><span>컴퓨터는 이러한 주소로 다른 컴퓨터를 찾아가는데 문제가 없습니다. 그러나 우리들은 IP주소를 기억하기 어렵죠.</span> <span>그래서 우리는 '도메인 이름' 이라고하는 사람이 읽을 수 있는 IP 주소의 이름을 지정할 수 있습니다.</span> <span>예를 들어 </span></span><code>'google.com'</code><span lang="ko"><span>은 IP 주소로 </span></span><code>'173.194.121.32'</code><span id="result_box" lang="ko"><span> 입니다. </span><span>따라서 '도메인 이름'은 'IP주소'보다 인터넷을 사용하기에 쉽습니다.</span></span></p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="인터넷과_웹">인터넷과 웹</h3> + +<p><span id="result_box" lang="ko"><span>웹 브라우저를 사용하여 웹을 탐색 할 때 일반적으로 도메인 이름을 사용하여 웹 사이트에 접속합니다.</span> <span>그것은 인터넷과 웹이 같은 것을 의미할까요?</span> <span>그렇게 간단하지 않습니다.</span> <span>앞에서 보았 듯이 인터넷은 수십억 대의 컴퓨터를 모두 연결하는 기술 인프라입니다.</span> 이러한 컴퓨터들 중에 일부는 '웹 서버'로서 <span>웹 브라우저가 이해할 수 있는 서비스를 제공합니다.</span> <span>인터넷은 인프라이며, 웹은 그 인프라 기반 위에 구축된 서비스입니다.</span> 웹 뿐만 아니라 인터넷 위에 구축된 다른 서비스들(이메일, </span>{{Glossary("IRC")}} 등)도 있음을 알아야합니다.</p> + +<h2 id="다음_단계">다음 단계</h2> + +<ul> + <li><a href="/ko/docs/Learn/Getting_started_with_the_web/%EC%9B%B9%EC%9D%98_%EB%8F%99%EC%9E%91_%EB%B0%A9%EC%8B%9D">How the Web works(웹이 작동하는 방법)</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine(웹 페이지, 웹 사이트, 웹 서버, 검색 엔진의 차이점 이해하기)</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names(도메인 이름 이해하기)</a></li> +</ul> diff --git a/files/ko/learn/common_questions/html_features_for_accessibility/index.html b/files/ko/learn/common_questions/html_features_for_accessibility/index.html new file mode 100644 index 0000000000..fd22e4d8cc --- /dev/null +++ b/files/ko/learn/common_questions/html_features_for_accessibility/index.html @@ -0,0 +1,49 @@ +--- +title: 어떤 HTML 기능이 접근성을 촉진할까? +slug: Learn/Common_questions/HTML_features_for_accessibility +translation_of: Learn/Common_questions/HTML_features_for_accessibility +--- +<p>{{draft}}</p> + +<p class="summary">이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다. </p> + +<h2 id="탭(Tabbing)">탭(Tabbing)</h2> + +<p>pointing devices를 사용 하지 않거나 사용 할 수 없는 유저들은 <kbd>Tab</kbd> 을 links를 통해 할 수 있습니다.(links는 논리적 순서로 이루어져 있어야 합니다.) tabindex 속성은 당신이 이러한 순서를 정의 할 수 있도록 허락합니다. 만약 HTML이 선형이라면, 논리적 탭 순서는 자동적으로 맞춰집니다. </p> + +<pre class="brush: html"><ul> + <li><a href="here.html" tabindex="1">Here</a></li> + <li><a href="there.html" tabindex="3">There</a></li> + <li><a href="anywhere.html" tabindex="2">Anywhere</a></li> +</ul></pre> + +<p>이번 예시는(순수히 데모를 위해 사용되었으니 따라하지 마세요), 탭이 여기서부터 여기저기를 점프합니다. </p> + +<h2 id="링크_제목(Link_Titles)">링크 제목(Link Titles)</h2> + +<p>만약 당신이 자신을 설명하지 않는 링크를 가지고 있거나, 링크 목적지가 더 자세하게 설명되지 않으면, 그 링크에 제목 속성을 추가 할 수 있습니다. </p> + +<pre class="brush: html"><p>I'm really bad at writing link text. <a href="inept.html" title="Why I'm rubbish at writing link text: An explanation and an apology.">Click here</a> to find out more.</p></pre> + +<h2 id="접근_키(Access_Keys)">접근 키(Access Keys)</h2> + +<p><em>접근 키는 </em>링크에 사용자가 <kbd>Alt</kbd> or <kbd>Ctrl</kbd> + 접근 키를 입력하여 얻을 수 있는 키보드 단축키를 할당하여 쉬운 네비게이션을 제공합니다. 정확한 키 조합은 플래폼에 따라 다릅니다.</p> + +<pre class="brush: html"><a href="somepage.html" accesskey="s">Some page</a></pre> + +<h2 id="링크_넘어가기(Skip_Links)">링크 넘어가기(Skip Links)</h2> + +<p>탭을 지원하기 위하여, 당신은 유저가 당신의 웹 페이지 모음으로 넘어갈 수 있는 링크를 제공할 수 있습니다. 당신은 아마도 다른 사람이 네비게이션 링크를 따라 점프하기를 원할 것입니다. 그렇게 함으로써, 페이지의 메인 내용을 읽을 수 있습니다. </p> + +<pre class="brush: html"><header> + <h1>The Heading</h1> + <a href="#content">Skip to content</a> +</header> + +<nav> + <!-- navigation stuff --> +</nav> + +<section id="content"> + <!--your content --> +</section></pre> diff --git a/files/ko/learn/common_questions/index.html b/files/ko/learn/common_questions/index.html new file mode 100644 index 0000000000..d3d5fe0261 --- /dev/null +++ b/files/ko/learn/common_questions/index.html @@ -0,0 +1,127 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics + - 웹 + - 인프라 +translation_of: Learn/Common_questions +--- +<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> + +<div> +<h2 id="HTML_and_CSS_questions">HTML and CSS questions</h2> + +<p>Try our <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> and <a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> pages for common solutions to HTML/CSS problems.</p> +</div> + +<h2 id="웹의_동작_방식">웹의 동작 방식</h2> + +<p>이 섹션에서는 웹의 원리 - 웹의 생태계와 작동 방식에 대한 일반적인 지식과 관련된 질문들을 다룬다.</p> + +<dl> + <dt> + <h3 id="인터넷은_어떻게_동작하는가"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">인터넷은 어떻게 동작하는가?</a></h3> + </dt> + <dd><strong>인터넷</strong>은 웹을 가능하게 하는 기술적 기반 구조의 중추이다. 기본적으로, 인터넷은 서로 통신하는 컴퓨터들의 큰 네트워크이다. 이 article은 기초적인 수준에서 인터넷이 어떻게 동작하는지 설명한다.</dd> + <dt> + <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> + </dt> + <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> + <dt> + <h3 id="URL이란"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URL이란?</a></h3> + </dt> + <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> + <dt> + <h3 id="도메인_네임이란"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">도메인 네임이란?</a></h3> + </dt> + <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> + <dt> + <h3 id="웹서버란"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">웹서버란?</a></h3> + </dt> + <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> + <dt> + <h3 id="하이퍼링크란"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">하이퍼링크란?</a></h3> + </dt> + <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> +</dl> + +<h2 id="Tools_and_setup">Tools and setup</h2> + +<p>Questions related to the tools/software you can use to build websites.</p> + +<dl> + <dt> + <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> + </dt> + <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> + <dt> + <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> + </dt> + <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> + <dt> + <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> + </dt> + <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> + <dt> + <h3 id="How_do_I_set_up_a_basic_working_environment"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">How do I set up a basic working environment?</a></h3> + </dt> + <dd>When working on a web project, you'll want to test it locally before you show it to the world. Some types of code require a server to test, and in this article we'll show you how to set one up. We'll also cover how to put a scalable structure in place so that your files stay organized even when your project gets big.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one fo the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> diff --git a/files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..a35ea0eedf --- /dev/null +++ b/files/ko/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,125 @@ +--- +title: '웹페이지, 웹사이트, 웹서버 그리고 검색엔진의 차이는 무엇일까요?' +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +tags: + - 웹동작 + - 웹작동 + - 초보자 +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +<div class="summary"> +<p><span class="seoSummary">이번 글에서는 다양한 웹 관련 개념들을 이야기합니다: 웹, 페이지, 웹사이트, 웹서버, 검색엔진. 이런 용어들은 흔히ㅣ웹을 처음 배우는 사람이나 잘못 배운 사람들에게 혼란스럽습니다. 이것들이 무엇을 의미하는 지 배워봅시다!</span></p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">요구지식:</th> + <td><a href="/en-US/Learn/How_the_Internet_works">how the Internet works(인터넷이 작동하는 법)</a>을 배워야 한다.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>웹페이지, 웹사이트, 웹서버, 검색엔진의 차이점을 논할 수 있다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p>지식의 범위에 따라, 웹은 많은 용어가 있습니다. 걱정마세요, 우리는 그런 모든 것들로 여러분을 억누르지 않을 것입니다. (궁금하시다면, <a href="/en-US/docs/Glossary">glossary(용어사전)</a> 이 있습니다.) 하지만 여러분이 처음에 이해할 필요가 있는 기본적인 용어들이 있습니다. 왜냐하면, 읽는 내내, 이런 표현들을 보게될 것이기 때문이다. 때때로 이런 용어들은 혼동하기 쉽습니다. 왜냐하면 다른 기능을 가지고 있지만 관련있는 것으로 언급되기 때문이죠. 사실, 뉴스 기사 등에서 이따금 잘못 사용된 이런 용어들을 볼 수 있을 것입니다. 그래서 그것들이 혼동되는 것은 당연합니다!</p> + +<p>나아가서 더 자세한 용어와 기술들을 다룰 것입니다. 하지만, 앞서 정의해보는 것은 시작하는 데 도움이 될 것입니다:</p> + +<dl> + <dt>웹 페이지</dt> + <dd>파이어폭스, 구글 크롬, 오페라, MS 익스플로러나 엣지, 애플의 사파리 같은 웹 브라우저에서 보여지는 문서이다. 이런 것들을 단순히 "페이지"라고 하기도 한다.</dd> + <dt>웹사이트</dt> + <dd>다양한 방식으로 그룹으로 묶이거나 연결된 웹 페이지들의 모음이다. 보통 "웹사이트"나 단순히 "사이트"라고 한다.</dd> + <dt>웹 서버</dt> + <dd>인터넷에 웹사이트를 호스팅하는 컴퓨터이다.</dd> + <dt>검색 엔진</dt> + <dd>구글, 빙, 야후 같은 다른 웹 페이지들을 찾게 도와주는 웹사이트이다.</dd> +</dl> + +<p>도서관과 간단한 유사점을 보자. 아래는 도서관에 방문했을 때, 일반적으로 하는 일이다:</p> + +<ol> + <li>검색 색인을 발견하고 원하는 책의 제목을 찾는다.</li> + <li>책의 분류번호를 기록한다.</li> + <li>그 책이 있는 구역으로 간 뒤, 올바른 분류번호를 찾고, 책을 얻는다.</li> +</ol> + +<p>웹 서버와 도서관을 비교해보자.</p> + +<ul> + <li>도서관은 웹 서버와 같다. 도서관은 여러 구역이 있는데, 이것은 다양한 웹사이트들을 호스팅하는 서버와 비슷합니다.</li> + <li>도서관에 있는 과학, 수학, 역사와 같은 각기 다른 구역들은 웹사이트와 같습니다. 각각의 구역은 유일한 웹사이트입니다. (두 개의 구역이 같은 책을 포함하지 않는다.)</li> + <li>구역에 있는 책들은 웹페이지와 같다. 한 웹사이트는 여러 웹페이지들을 가지고 있을 수 있습니다. 예를 들어, 과학 섹션(웹사이트)는 열, 소리, 열역학, 정역학 등의 책(웹페이지)를 가지고 있을 것이다.</li> + <li>검색 색인은 검색 엔진과 같다. 각각의 책은 도서관에서 자신만의 위치를 가지고 있다. (두 개의 책이 같은 위치에 놓일 수 없다.) 이 위치는 분류번호로 정해진다.</li> + <li>비슷하게, 웹페이지는 유일한 주소를 갖습니다. 이런 주소들은 파이폭스, 크롬, 사파리같은 웹 브라우저의 주소창에 주소를 적으면 웹 서버에서 웹페이지를 검색하기 위해 사용됩니다.</li> +</ul> + +<dl> + <dt></dt> +</dl> + +<h2 id="Active_learning">Active learning</h2> + +<p><em>There is no active learning available yet. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="깊게_들어가기">깊게 들어가기</h2> + +<p>4개의 용어가 얼마나 관련됐는지, 서로 헷갈리는 이유가 무엇인지를 더 깊게 알아봅시다.</p> + +<h3 id="웹_페이지">웹 페이지</h3> + +<p>웹 페이지는 {{Glossary("browser")}}(브라우저)를 통해 보여지는 단순한 문서입니다. 이런 문서는 {{Glossary("HTML")}} 언어로 쓰여집니다. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">다른 글</a>에서 더 자세히 알 수 있다) 웹 페이지는 다양한 다른 종류의 자원을 포함할 수 있습니다:</p> + +<ul> + <li><em>style information(스타일 정보) </em>— 페이지의 외관과 느낌을 관리</li> + <li> + <p><em>scripts(스크립트)</em> — 페이지에 interactivity(대화식 이용)을 첨가</p> + </li> + <li><em>media</em>(미디어) — 사진, 소리, 동영상</li> +</ul> + +<div class="note"> +<p><strong>Note: </strong>브라우저는 또한 {{Glossary("PDF")}} 파일이나 이미지를 보여줄 수 있다. 그러나 <strong>웹 페이지</strong>는 HTML 문서를 의미하는 용어이다. 아니라면 우리는 <strong>문서(document)</strong>라는 용어를 사용한다.</p> +</div> + +<p>웹에서 이용하는 모든 웹 페이지는 유일한 주소를 통해 접근할 수 있습니다. 한 페이지에 접근하기 위해서는, 브라우저의 주소창에 주소를 적으면 됩니다.</p> + +<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> + +<p><em>웹사이트</em> 는 유일한 도메인 이름을 같이 사용하는 연결된 웹 페이지들의 모음입니다. (관련된 자원도 포함된다.) 각각의 웹사이트에서 분명한 링크가 주어진 웹 페이지들은 유저가 그 웹사이트의 한 페이지에서 다른 페이지로 이동하게 합니다. 보통 클릭할 수 있는 형태로 되어있습니다.</p> + +<p>웹사이트에 접근하기 위해서, 브라우저 주소 창에 도메인 이름을 적으면, 브라우저는 웹사이트의 메인 페이지나<em> 홈페이지 </em>(보통 "홈"이라 하는)를 보여줄 것이다:</p> + +<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> + +<p><em>웹 페이지 </em>와 <em>웹사이트 에 대한 생각은</em> 특히 하나의<em>웹 페이지</em>만 포함하는 <em>웹사이트</em>에서 혼동하기 쉽습니다. 이런 웹사이트를 보통 a <em>single-page website(싱글 페이지 웹사이트)</em>라고 합니다.</p> + +<h3 id="웹_서버">웹 서버</h3> + +<h5 id="웹_서버는_한_개_이상의_웹사이트를_호스팅하는_컴퓨터입니다._호스팅은_모든_웹_페이지_및_웹_페이지가_지원하는_파일들을_컴퓨터에서_이용할_수_있다는_것을_의미한다._웹_서버는_유저의_request요청마다_호스팅하는_웹사이트에서_유저의_브라우저로_웹_페이지를_보낼_것이다."><em>웹 서버</em>는 한 개 이상의 <em>웹사이트</em>를 호스팅하는 컴퓨터입니다. "호스팅"은 모든 <em>웹 페이지</em> 및 웹 페이지가 지원하는 파일들을 컴퓨터에서 이용할 수 있다는 것을 의미한다. <em>웹 서버</em>는 유저의 request(요청)마다 호스팅하는 <em>웹사이트</em>에서 유저의 브라우저로 <em>웹 페이지</em>를 보낼 것이다.</h5> + +<p><em>웹 사이트</em>와<em> 웹 서버</em>를 혼동하지 마라. 예를 들어, 당신이 누군가 "내 웹사이트가 반응하지 않는다." 라고 말하는 것을 들었다면, 그것은 사실 <em>웹 서버</em>가 반응하지 않는다는 의미이다. 그러므로 <em>웹사이트</em>를 이용하지 못 한다. 더 중요하게, <em>웹 서버</em>는 여러 웹사이트에 호스팅될 수 있기 때문에, 웹 서버라는 용어는 절대 웹사이트를 지정하기 위해 사용하지 않는다. 그것이 큰 혼란을 일으킬 수 있기 때문이다. 아까의 예처럼, 만약 우리가 "내 웹 서버가 반응하지 않는다." 라고 하면, 그것은 웹 서버가 이용할 수 있는 웹 사이트가 없다는 것을 의미한다.</p> + +<h3 id="검색_엔진">검색 엔진</h3> + +<p>검색 엔진은 웹에서 흔한 혼란의 근원입니다. 검색 엔진은 웹 페이지를 <em>다른</em> 웹사이트에서 찾을 수 있게 도와주는 특별한 종류의 웹사이트입니다.</p> + +<p>검색 엔진은 다음과 같습니다: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, 그리고 더 많은 검색 엔진들이 있습니다. 일부는 일반적인 것을 위한 것이고, 일부는 특정한 주제에 특화되어 있습니다. 선호하는 것을 사용하면 됩니다.</p> + +<p>많은 웹 초보자들은 검색 엔진과 브라우저를 혼돈합니다. 분명히 합시다: <em><strong>브라우저</strong></em>는 소프트웨어의 한 조각으로, 웹 페이지를 검색하고 보여줍니다; <em><strong>검색 엔진</strong></em>은 사람들이 다른 웹사이트에서 웹 페이지를 찾도록 도와주는 웹 사이트입니다. 혼란이 생기는 이유는, 처음 브라우저를 실행하면, 브라우저는 검색 엔진의 홈페이지를 보여주기 때문입니다. 이것이 의미있는 이유는 브라우저로 가장 하고 싶은 일이 보여줄 웹 페이지를 찾는 것이기 때문이다. 브라우저같은 기반 시설을 검색엔진 같은 서비스와 혼동하지마세요. 이것을 구별하는 것이 상당히 도움이 될 것입니다. 그러나 몇몇의 전문가들도 느슨하게 말하므로, 염려하지 않아도 됩니다.</p> + +<p>기본 시작 페이지로 구글 검색 상자를 보여주는 파이어폭의 한 예입니다.</p> + +<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> + +<h2 id="다음_단계">다음 단계</h2> + +<ul> + <li>더 깊게 들어가기: <a href="/en-US/docs/Learn/What_is_a_web_server">What is a web server(웹 서버란 무엇인가)</a></li> + <li>웹 페이지들이 웹 사이트로 연결되는 방법 보기: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Understanding links on the web(웹에서의 연결 이해하기)</a></li> +</ul> diff --git a/files/ko/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ko/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..5cc1d21caa --- /dev/null +++ b/files/ko/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,112 @@ +--- +title: 로컬 테스트 서버 설치하기 +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Express + - Flask + - Learn + - Node + - PHP + - django + - lamp + - 서버 + - 서버측 + - 초보자 + - 파이썬 +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +<div class="summary"> +<p>이 글에서는 간단한 로컬 테스트 서버를 여러분의 장비에 설치하는 법과 기본적인 사용법을 설명합니다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">사전 준비:</th> + <td><a href="/en-US/docs/Learn/How_the_Internet_works">인터넷의 작동 방법</a>과 <a href="/en-US/docs/Learn/What_is_a_Web_server">웹서버</a>에 대해 알고 있어야 합니다.</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>로컬 테스트 서버를 설치하는 법을 배울 것입니다.</td> + </tr> + </tbody> +</table> + +<h2 id="로컬_파일과_원격_파일">로컬 파일과 원격 파일</h2> + +<p>대부분의 학습 분야에 걸쳐서 여러분은 그냥 웹브라우저로 예제들을 직접 열어보기만 하면 됩니다. — 브라우저를 통해 예제들을 직접 열어보는 것은 HTML 파일을 더블 클릭하거나 브라우저 창으로 예제들을 드래그 앤 드롭하거나 또는 <em>File</em> > <em>Open...</em> 메뉴에서 해당하는 HTML 파일을 선택하면 됩니다. 이를 수행하는 방법은 많습니다.</p> + +<p>웹 주소 경로가 <code>file://</code>로 시작하고 뒤에 오는 경로가 여러분의 로컬 하드 드라이브에 있는 파일의 경로인 경우, 로컬 파일이 사용되는 것입니다. 이와는 달리, GitHub (또는 다른 원격 서버에 있는) 예제를 보는 경우에는 웹 주소가 <code>http://</code>나 <code>https://</code>로 시작하며, 이는 그 파일이 HTTP를 통해 수신된 파일이라는 것을 나타냅니다.</p> + +<h2 id="로컬_파일로_테스트할_때의_문제점">로컬 파일로 테스트할 때의 문제점</h2> + +<p>일부 예제는 로컬 파일과 같은 방식으로 열면 동작하지 않습니다. 여기에는 여러 가지 원인이 있을 수 있으며, 대부분은 다음과 같습니다:</p> + +<ul> + <li><strong>비동기 요청인 경우</strong>. 일부 브라우저(크롬을 포함하는)에서는 로컬 파일의 예제를 실행할 경우에 비동기 요청(<a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">서버로부터 데이터 가져오기 - Fetching data from the server</a>를 참고)이 작동하지 않을 것입니다. 이는 보안 제한(웹 보안과 관련된 자세한 내용은 <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">웹사이트 보안- Website security</a>을 참고하세요) 때문입니다.</li> + <li><strong>서버측 언어인 경우</strong>. 서버측 언어(PHP나 Python과 같은)는 코드를 해석하고 결과를 내보낼 수 있는 특별한 서버가 필요합니다.</li> +</ul> + +<h2 id="간단한_로컬_HTTP_서버_실행하기">간단한 로컬 HTTP 서버 실행하기</h2> + +<p>비동기 요청 문제를 해결하려면 로컬 웹 서버에서 예제를 실행하여 테스트해야 합니다. 이를 위한 가장 쉬운 방법은 파이썬(Python)의 <code>SimpleHTTPServer</code> 모듈을 사용하는 것입니다. (설치된 파이썬 버전에 따라 <code>http.server</code> 모듈을 사용해야 할 수도 있습니다.)</p> + +<p>이를 위해:</p> + +<ol> + <li> + <p>파이썬을 설치합니다. 리눅스나 맥OS 사용자라면 이미 시스템에 설치되어 있을 것입니다. 윈도우 사용자일 경우, 다음과 같이 파이썬 홈페이지로부터 설치 프로그램을 다운 받고 설치합니다:</p> + + <ul> + <li>파이썬 홈페이지(<a href="https://www.python.org/">python.org</a>)로 이동합니다.</li> + <li>다운로드(download) 영역에서 Python "3.xxx" 링크를 클릭합니다.</li> + <li>페이지의 아래쪽에 있는 <em>Windows x86 executable installer</em>를 선택하고 다운로드 받습니다.</li> + <li>다운로드가 완료되면 실행합니다.</li> + <li>설치 프로그램의 첫 번째 페이지에서 "Add Python 3.xxx to PATH" 체크박스를 체크해야 합니다.</li> + <li><em>Install</em>을 클릭하고 설치가 완료되면 <em>Close</em>를 클릭합니다.</li> + </ul> + </li> + <li> + <p>명령 실행창(윈도우의 경우는 command prompt, OS/X나 리눅스인 경우에는 터미널창)을 엽니다. 파이썬이 설치되었는지 확인하기 위해 다음 명령을 입력합니다.:</p> + + <pre class="brush: bash notranslate">python -V</pre> + </li> + <li> + <p>이 명령은 버전 번호를 반환합니다. 정상적으로 작동하면, <code>cd</code> 명령을 이용해 여러분의 예제가 존재하는 디렉토리로 이동합니다.</p> + + <pre class="brush: bash notranslate"># 들어가고자 하는 디렉토리 명을 입력합니다. 예를 들어, +cd Desktop +# 한 단계 상위 디렉토리로 이동하려면 점 두 개를 사용합니다. +cd ..</pre> + </li> + <li> + <p>그 경로에 있는 서버를 구동하기 위한 명령을 입력합니다:</p> + + <pre class="brush: bash notranslate"># 위에서 반환된 파이썬 버전이 3.X인 경우 +python -m http.server +# 위에서 반환된 파이썬 버전이 2.X인 경우 +python -m <code>SimpleHTTPServer</code></pre> + </li> + <li> + <p>이 명령은 기본적으로 로컬 웹 서버의 8000번 포트를 이용해 해당 경로의 컨텐츠를 실행시킵니다. 웹 브라우저에서 주소줄에 <code>localhost:8000</code>를 입력하면 이 서버로 이동할 수 있습니다. 그러면 그 디렉토리의 컨텐츠 목록을 볼 수 있는데 실행하고자 하는 HTML 파일을 클릭합니다.</p> + </li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 8000번 포트에 이미 실행 중인 무언가가 있다면 서버 실행 명령에 다음과 같이 대체 포트 번호를 명시함으로써 다른 포트로 서버를 구동할 수 있습니다.</p> + +<p>예: <code>python -m http.server 7800</code> (Python 3.x일 경우) 또는 <code>python -m SimpleHTTPServer 7800</code> (Python 2.x일 경우). 이 경우, <code>localhost:7800</code>를 통해 서버로 이동할 수 있습니다. </p> +</div> + +<h2 id="서버측_언어를_로컬에서_실행하기">서버측 언어를 로컬에서 실행하기</h2> + +<p>파이썬의 <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> 모듈은 유용하기는 하나 파이썬이나 PHP 또는 자바스크립트와 같은 언어로 작성된 코드를 실행하지 못합니다. 이런 코드를 처리하기 위해서는 뭔가가 더 필요합니다 — 정확하게 무엇이 필요한지는 실행하고자 하는 서버측 언어가 무엇인지에 따라 다릅니다. 다음에 몇 가지 사례를 소개합니다:</p> + +<ul> + <li>파이썬으로된 서버측 코드를 실행하기 위해서는 파이썬 웹 프레임워크(Python web framework)를 사용할 필요가 있습니다. <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>를 읽어보면 Django framework를 이용하는 법을 알 수 있습니다. <a href="http://flask.pocoo.org/">Flask</a>는 Djang를 대신할 좋은(조금 더 가벼운) 대안이될 수 있습니다. Flask를 실행하기 위해서는 Python/PIP(<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>)를 설치하고, <code>pip3 install flask</code> 명령으로 Flask를 설치해야 합니다. 이 때부터 파이썬 Flask 예제를 실행할 수 있는데, 예를 들어, <code>python3 python-example.py</code>명령을 실행하고 브라우저에서 <code>localhost:5000</code>으로 이동하면 됩니다.</li> + <li>Node.js (JavaScript)라는 서버측 코드를 실행하기 위해서는 기본 node(raw node)나 그 위에 설치되는 프레임워크를 이용해야 합니다. Express가 좋은 선택이될 수 있습니다 — <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>를 살펴보시기 바랍니다.</li> + <li>PHP로된 서버측 코드를 실행하려면 PHP에 내장된 개발서버(<a href="http://php.net/manual/en/features.commandline.webserver.php">PHP's built-in development server</a>)를 실행시킵니다:</li> +</ul> + +<pre class="shellcode notranslate">$ cd path/to/your/php/code +$ php -S localhost:8000</pre> diff --git a/files/ko/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ko/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..225b587dc7 --- /dev/null +++ b/files/ko/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,134 @@ +--- +title: How do you upload files to a web server? +slug: Learn/Common_questions/Upload_files_to_a_web_server +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +<div class="summary"> +<p>본 글은 어떻게 {{Glossary("FTP")}} 도구를 사용하여 사이트를 발행(publish) 할 수 있는지를 다루고 있습니다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선행조건:</th> + <td> + <p>먼저 웹 서버가 무엇인지(<a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">what a web server is</a>)와 어떤 식으로 도메인이 작동하는지(<a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">how domain names work</a>)를 알아야 합니다. 더불어 어떻게 기본 환경을 구성하는지(<a href="/en-US/Learn/Set_up_a_basic_working_environment">set up a basic environment</a>)와 간단한 웹 페이지 작성법(<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">write a simple webpage</a>)을 알고 있어야 합니다.</p> + </td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>FTP를 이용해 파일들을 서버에 올리기.</td> + </tr> + </tbody> +</table> + +<h2 id="개요">개요</h2> + +<p>당신은 이미 간단한 웹 페이지를 만들었습니다.(<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">you have built a simple page</a> 참조), 이제 웹 서버에 올려 온라인에 공개하고 싶을 겁니다. 우리는 이러한 방법을 {{Glossary("FTP")}}를 통해 다뤄보고자 합니다.</p> + +<h2 id="따라해보기">따라해보기</h2> + +<p><em>아직 좋은 예제가 없습니다. 누군가 나서 주세요(<a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>).</em></p> + +<h2 id="깊이_파보기">깊이 파보기</h2> + +<h3 id="FTP_클라이언트와_함께_해보기_FireFTP">FTP 클라이언트와 함께 해보기: FireFTP</h3> + +<p>세상에는 다양한 종류의 FTP 클라이언트들이 있습니다. 본 문서에서는 FireFTP를 다룰 겁니다. FireFTP는 파이어 폭스에서 다루기 쉽습니다. 만약 파이어폭스를 사용하신다면 FireFTP 애드온 페이지(<a href="https://addons.mozilla.org/firefox/addon/fireftp/">FireFTP's addons page</a>) 에 가셔서l FireFTP를 설치하시면 됩니다.</p> + +<div class="note"> +<p>물론 FireFTP 외에도 수 많은 대안이 있습니다. 관심이 있다면 퍼블리싱 도구: FTP 클라이언트(<a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools: FTP clients</a>) 항목을 참조하시면 되겠습니다.</p> +</div> + +<p>FireFTP를 새로운 탭에서 열어보세요. 파이어폭스에서 열기 위한 방법도 두가지 있습니다.</p> + +<ol> + <li><strong>Firefox menu <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li> + <li><strong>Tools </strong>➤ <strong>Web Develope</strong>r ➤ <strong>FireFTP</strong></li> +</ol> + +<p>이제 다음과 같이 보이게 될겁니다.</p> + +<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p> + +<h3 id="로그인_하기">로그인 하기</h3> + +<p>이 예시에서 우리는 호스팅 제공자가 "Example Hosting Provider"라는 가상의 회사라고 가정합니다. 이 회사의 URLs는 다음과 같습니다 : <code>mypersonalwebsite.examplehostingprovider.net</code>.</p> + +<p>우리는 방금 계정을 만들었고 호스팅제공자로부터 아래와 같은 계정정보를 받았습니다.</p> + +<blockquote> +<p>Congratulations for opening an account at Example Hosting Provider.</p> + +<p>Your account is: <code>demozilla</code></p> + +<p>Your website will be visible at <code>demozilla.examplehostingprovider.net</code></p> + +<p>To publish to this account, please connect through FTP with the following credentials:</p> + +<ul> + <li>FTP server: <code>ftp://demozilla.examplehostingprovider.net</code></li> + <li>User: <code>demozilla</code></li> + <li>Password: <code>quickbrownfox</code></li> + <li>To publish on the web, put your files into the <code>Public/htdocs</code> directory.</li> +</ul> +</blockquote> + +<p>먼저 이곳을 봅시다. <code>http://demozilla.examplehostingprovider.net/</code> — 보시다시피 아직 아무런 정보도 없습니다.</p> + +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p> + +<div class="note"> +<p><strong>Note:</strong> 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 “This website is hosted by [Hosting Service].”과 같은 페이지를 보게될 것입니다.</p> +</div> + +<p>이제 우리의 FTP 클라이언트를 멀리 떨어진 서버에 접속하기 위해 <em>"Create an account..." 버튼을 누릅니다. </em>그리고 호스팅제공자로 부터 받은 정보를 해당 필드에 채워줍니다.</p> + +<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p> + +<h3 id="이곳과_저곳_로컬_과_원격_화면">이곳과 "저곳" : 로컬 과 원격 화면</h3> + +<p>이제 새로 만든 계정으로 접속을 해봅시다.</p> + +<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p> + +<p>어떤 것이 보이는지 조사해봅시다.</p> + +<ul> + <li>왼쪽에는, 여러분 컴퓨터의 로컬파일들이 보입니다. 여러분이 올리고 싶은 파일들이 있는 디렉토리로 이동합시다. (여기에서는 <code>mdn</code>폴더입니다)</li> + <li>오른쪽에는, 원격 파일이 보입니다. 우리는 멀리 떨어진 FTP서버의 디렉토리에 들어온 것입니다. (in this case, <code>users/demozilla</code>)</li> + <li>아래부분은 지금은 무시하셔도 좋습니다. 이 부분은 여러분의 FTP클라이언트와 서버사이의 상호작용(업로드, 다운로드)을 기록해 놓은 곳입니다.</li> +</ul> + +<h3 id="서버에_업로딩">서버에 업로딩</h3> + +<p>여러분이 기억하듯이, 우리의 호스팅제공자는 우리에게 <code>Public/htdocs</code> 디렉토리에 파일을 저장해야한다고 했습니다. 오른쪽 패널에서 해당 디렉토리로 이동해봅시다.</p> + +<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p> + +<p>이제, 여러분의 파일을 서버에 업로드하기 위해서 드래그-앤-드롭하여 파일들을 왼쪽에서 오른쪽 패널로 이동합니다.</p> + +<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p> + +<h3 id="우리가_올린_것이_진짜로_온라인으로_되어있나요">우리가 올린 것이 진짜로 온라인으로 되어있나요?</h3> + +<p>지금까지는 좋습니다. 하지만 여러분의 브라우저에서 <code>http://demozilla.examplehostingprovider.net/</code> 주소로 이동하여 재확인 해봅시다.</p> + +<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p> + +<p>맙소사! 우리의 웹사이트가 잘 올라와있습니다!</p> + +<h3 id="파일_업로드를_위한_다른_방법들">파일 업로드를 위한 다른 방법들</h3> + +<p>FTP 프로토콜은 웹사이트를 출시하기 위해 잘 알려진 방법입니다. 하지만 유일한 방법은 아닙니다. 여기 몇개의 다른 방법들도 있습니다.</p> + +<ul> + <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service. 여러분의 호스팅제공자는 HTML 인터페이스로 된(브라우저에서 업로드 가능한) 원격 파일 업로드 서비스를 지원해줄 수도 있습니다.</li> + <li><strong>GitHub</strong> (advanced). {{Glossary("git")}}을 이용해 commit/push 와 같은 방법으로 업로드할 수도 있습니다. <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> 가이드에서 <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> 를 읽어보세요.</li> + <li><strong>{{Glossary("Rsync")}}</strong> (advanced). 로컬과 원격의 파일을 동기화하는 방법입니다.</li> + <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} 프로토콜의 확장으로 보다 나은 파일 관리를 가능하게 해주는 확장입니다.</li> +</ul> + +<h2 id="다음_단계">다음 단계</h2> + +<p>잘하셨습니다. 이제 거의 끝났습니다. 마지막으로 중요한 일은 <a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">make sure your web site is working properly</a> 입니다.</p> diff --git a/files/ko/learn/common_questions/what_are_hyperlinks/index.html b/files/ko/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..e036903bd6 --- /dev/null +++ b/files/ko/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,91 @@ +--- +title: What are hyperlinks? +slug: Learn/Common_questions/What_are_hyperlinks +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +<div class="summary"> +<p>이 글에서, 우리는 하이퍼링크가 무엇이고 왜 중요한지를 살필 것이다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선수지식:</th> + <td><a href="/en-US/Learn/How_the_Internet_works">인터넷이 작동하는 법</a>을 알아야 하고 <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">웹 페이지, 웹사이트, 웹 서버 그리고 검색엔진의 차이</a>에 익숙해야 한다.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>하이퍼링크가 무엇이고 왜 중요한지를 배울 것이다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p>보통 링크라고 불리는 하이퍼링크는 웹에서 기본적인 개념이다. 링크가 무엇인 지 설명하기 위해, 웹의 매우 기본적인 구조로 돌아볼 필요가 있다.</p> + +<p>1989년으로 돌아가, 웹의 발명가인 Tim Berners-Lee는 웹을 대표하는 3가지 축에 대해 말하였다. :</p> + +<ol> + <li>{{Glossary("URL")}}, 웹 문서를 추적하는 주소 시스템</li> + <li>{{Glossary("HTTP")}}, URL들이 주어졌을 때, 문서들을 찾는 전송 프로토콜</li> + <li>{{Glossary("HTML")}}, 내장된 <em>hyperlinks </em>를 허용하는 문서 형식</li> +</ol> + +<p>3가지 축에서 본 것처럼, 웹에 대한 모든 것들은 문서들과 어떻게 문서에 접근할 것인 지에 관련되어 있다. 웹의 기본 목적은 텍스트 문서를 통해서 도달하고, 읽고, 찾기쉬운 방식을 제공하는 것이다. 그리고 나서, 웹은 이미지와 동영상, 이진 데이터에 접근하는 것을 제공하도록 진화했다. 그러나, 이런 발전은 3가지 축은 거의 바꾸지 못 하였다.</p> + +<p>웹 이전에는, 문서에 접근하고 문서끼리 이동하는 것은 꽤 어려웠다. 인간이 읽을 수 있는 URL은 이런 것들을 훨씬 쉽게 만들었다. 하지만, 문서에 접근할 때마다 긴 URL을 타이핑하는 것은 어려웠다. 이것이 하이퍼링크가 개혁한 모든 것이다. 링크는 URL을 가진 텍스트와 연결될 수 있다. 그렇게 된 링크를 활성화함으로써, 타겟 문서에 즉시 도달할 수 있다.</p> + +<p>기본적으로 파란색으로 밑줄이 된 링크는 주위 텍스트에서 보여진다. 활성화하기 위해 링크를 클릭하거나 Tab키로 링크를 선택하고 Enter키나 Space바를 누르면 된다.</p> + +<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> + +<p>링크는 웹을 유용하고 성공적으로 만든 돌파구이다. 이 글의 나머지엔, 다양한 유형의 링크와 현대 웹 디자인의 중요성을 얘기할 것이다.</p> + +<h2 id="깊게_들어가기">깊게 들어가기</h2> + +<p>다시 말하면, 링크는 URL이 연결된 텍스트이다. 그리고, 링크를 사용하면, 하나의 문서에서 다른 문서로 쉽게 이동할 수 있다. 이런 내용들을 말하다보면, 몇몇의 생각해볼 뉘앙스차이가 있다.</p> + +<h3 id="링크의_유형들">링크의 유형들</h3> + +<dl> + <dt>Internal link(내부 링크)</dt> + <dd>당신의 웹사이트에 속하는 두 개의 웹사이트 사이의 링크는 내부 링크라고 불린다. 내부 링크가 없다면, 웹 사이트와 같은 것은 없을 것이다. (물론, 한 페이지의 웹 사이트 빼고).</dd> + <dt>External link(외부 링크)</dt> + <dd>당신의 웹사이트에서 다른 사람의 웹사이트로 가는 링크이다. 외부 링크가 없다면, 웹이 존재하지 않는다. 왜냐하면 웹은 웹페이지들의 네트워크이기 때문이다. 당신이 유지하는 내용 외의 정보를 제공하기위해 외부 링크를 사용해라.</dd> + <dt>Incoming links(들어오는 링크)</dt> + <dd>다른 사람의 웹 사이트에서 당신의 사이트로 가는 링크이다. 단지 외부링크의 반대이다. 누군가 당신의 사이트로 링크를 걸 때 당신이 역으로 링크를 걸 필요하는 없다는 것을 기록해라.</dd> +</dl> + +<p>당신이 웹사이트를 구축할 때, 내부링크에 집중해야 한다. 왜냐하면 내부링크가 당신의 사이트를 사용가능하게 해주기 때문이다. 링크가 너무 많거나 너무 적지 않게 좋은 밸런스를 찾아야 한다. 우리는 다른 글에서 웹 사이트 네비게이션을 디자인하는 것에 대해 이야기 할 것이다. 그러나 룰로써, 당신이 새 웹페이지를 추가할 때마다, 적어도 당신의 1개 이상의 페이지에는 새 페이지에 대한 링크를 걸어야 한다. 반면에, 만약 당신의 사이트가 10페이지 이상이라면, 모든 페이지에 링크를 거는 것은 역효과이다.</p> + +<p>당신이 처음 시작할 때, 외부와 들어오는 링크를 많이 걱정할 필요가 없다. 그러나, 그것들은 검색 엔진에서 당신의 사이트를 찾을 때, 매우 중요하다. (자세한 사항은 밑에 있다.)</p> + +<h3 id="Anchors(앵커)">Anchors(앵커)</h3> + +<p>대부분의 링크는 두 개의 웹사이트를 연결한다. <strong>앵커</strong>는한 문서에서 다른 부분들을 연결한다. 앵커가 가리키는 링크를 따라가면, 브라우저는 새 문서를 불러오는 것 대신에 현재 문서의 다른 부분으로 이동한다. 그러나 다른 링크과 같은 방식으로 만들고 사용한다.</p> + +<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> + +<h3 id="링크와_검색엔진">링크와 검색엔진</h3> + +<p>링크는 유저와 검색엔진 모두에게 중요하다. 검색 엔진이 웹페이지를 크롤링할 때마다, 검색엔진은 웹 페이지에서 이용가능한 링크를 따라가면서 웹 사이트를 인덱싱한다. 검색 엔진이 웹 사이트의 다양한 페이지를 발견하기 위해 링크를 따라가는 것뿐만 아니라 타켓 웹페이지에 도달하기 위해 어떤 검색 쿼리가 적절한 지를 결정하기 위해 링크의 텍스트를 사용한다.</p> + +<p>그래서 링크는 얼마나 쉽게 검색 엔진이 너의 사이트를 찾는 지에 영향을 미친다. 문제는 검색 엔진의 활동을 측정하는 것은 어렵다. 회사들은 그들의 사이트가 검색 결과에 높은 랭크가 되기를 자연스럽게 원한다. 그리고, 모든 연구 결과는 적어도 몇몇은 분명하게 해준다.</p> + +<ul> + <li>링크의 <em>텍스트</em>는 어떤 컴색 쿼리들이 주어진 URL을 찾는 지에 영향을 미친다.</li> + <li>웹 페이지가 더 많은 <em>들어오는 링크</em>를 자랑할 수 있다면, 검색 결과 랭킹은 더 높이진다.</li> + <li><em>외부 링크</em>는 소스 웹페이와 타겟 웹페이지의 검색 랭킹에 영향을 미친다. 그러나 얼마나 많은 지는 분명치 않다.</li> +</ul> + +<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (search engine optimization, 검색 엔진 최적화)는 검색 결과에 웹페이지 랭크를 높게 만드는 법에 대한 연구이다. 웹페이지의 링크 사용을 증가시키는 것이 유용한 SEO 기법이다.</p> + +<h2 id="다음_단계">다음 단계</h2> + +<p>그래서 이젠, 당신은 링크가 있는 웹페이지들을 설정하고 싶을 것이다!</p> + +<ul> + <li>더 많은 이론적인 배경을 배우기 위해, <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs 과 구조</a>를 배울 것이다. 왜냐하면 모든 링크는 URL을 가리키기 때문이다.</li> + <li>좀 더 실용적인 것을 원하나요? <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 도입</a> 중 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">하이퍼 링크 만들기</a> 모듈은 링크를 구현하는 법에 대한 상세한 내용을 설명한다.</li> +</ul> diff --git a/files/ko/learn/common_questions/what_is_a_domain_name/index.html b/files/ko/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..8fecee0342 --- /dev/null +++ b/files/ko/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,149 @@ +--- +title: What is a domain name? +slug: Learn/Common_questions/What_is_a_domain_name +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +<div class="summary"> +<p>이 글에서 domain name(도메인명)에 대해 다룹니다. : 도메인이 무엇인 지, 어떻게 구성되어있는지, 도메인을 어떻게 얻을 수 있는지.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선행사항:</th> + <td>우선, <a href="/en-US/docs/Learn/How_the_Internet_works">인터넷이 작동하는 법</a>을 알 필요가 있고, <a href="/en-US/Learn/Understanding_URLs">무엇이 URLs 인 지 이해할 필요가 있다.</a>.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>도메인 이름이 무엇인 지에 배우고 그것들이 어떻게 작동하고 왜 중요한 지에 대해 배운다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p><span class="seoSummary">도메인 이름은 인터넷 인프라의 핵심 부분입니다. 인터넷에서 사용할 수있는 모든 웹 서버에 대해 사람이 읽을 수있는 주소를 제공합니다.</span></p> + +<p>Any Internet-connected computer can be reached through a public {{Glossary("IP")}} Address, which consists of 32 bits for IPv4 (they are usually written as four numbers between 0 and 255, separated by dots (e.g., <code>173.194.121.32</code>) or which consists of 128 bits for IPv6 (they are usually written as eight groups of 4 hexadecimal numbers, separated by colons (e.g., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Computers can handle those addresses easily, but people have a hard time finding out who's running the server or what service the website offers. IP addresses are hard to remember and might change over time. To solve all those problems we use human-readable addresses called domain names.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<p><em>아직 이용가능한 Active Learning이 없습니다. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<h3 id="Domain_name의_구조">Domain name의 구조</h3> + +<p>도메인 이름은 몇개의 파트로 이루어진 간단한 구조를 이루고 있습니다. 점으로 구분하고 오른쪽에서 왼쪽으로 읽습니다.</p> + +<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p> + +<p>각각의 파트들은 전체 도메인 이름에 대해 특별한 정보를 제공합니다. </p> + +<dl> + <dt>{{Glossary("TLD")}} (Top-Level Domain; 최고레벨 도메인).</dt> + <dd>TLD은 가장 일반적인 정보를 제공합니다. TLDs tell users the general purpose of the service behind the domain name. The most generic TLDs (.com, .org, .net) don't require web services to meet strict criteria, but some TLDs enforce stricter policies. For example, local TLDs such as .us, .fr, or .sh can require the service to be provided in a given language or hosted in a certain country.</dd> + <dt>Label (or component)</dt> + <dd>The labels are what follow the TLD. A label can be anything, from one letter to a full sentence. The label located right before the TLD can also be referred as a <em>Secondary Level Domain</em> (SLD). A domain name can have many labels (or components), it is not mandatory nor necessary to have 3 labels to form a domain name. For instance, www.inf.ed.ac.uk is a correct domain name. When controlling the "upper" part of a domain name (e.g. <a href="https://mozilla.org">mozilla.org</a>), one can create other domain names (sometimes called "subdomains") (e.g. <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd> +</dl> + +<h3 id="Domain_name_구매하기">Domain name 구매하기</h3> + +<h4 id="누가_도메인_이름을_갖고_있나요">누가 도메인 이름을 갖고 있나요?</h4> + +<p>You cannot “buy a domain name”. You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name.</p> + +<p>Companies called registrars use domain name registries to keep track of technical and administrative information connecting you to your domain name.</p> + +<div class="note"> +<p><strong>Note : </strong>For some domain name, it might not be a registrar which is in charge of keeping track. For instance, every domain name under .fire is managed by Amazon.</p> +</div> + +<h4 id="이용가능한_Domain_Name_찾기">이용가능한 Domain Name 찾기</h4> + +<p>To find out whether a given domain name is available,</p> + +<ul> + <li>Go to a domain name registrar's website. Most of them provide a “whois” service that tells you whether a domain name is available.</li> + <li>Alternatively, if you use a system with a built-in shell, type a <code>whois</code> command into it, as shown here for <code>mozilla.org</code>:</li> +</ul> + +<pre>$ whois mozilla.org +Domain Name:MOZILLA.ORG +Domain ID: D1409563-LROR +Creation Date: 1998-01-24T05:00:00Z +Updated Date: 2013-12-08T01:16:57Z +Registry Expiry Date: 2015-01-23T05:00:00Z +Sponsoring Registrar:MarkMonitor Inc. (R37-LROR) +Sponsoring Registrar IANA ID: 292 +WHOIS Server: +Referral URL: +Domain Status: clientDeleteProhibited +Domain Status: clientTransferProhibited +Domain Status: clientUpdateProhibited +Registrant ID:mmr-33684 +Registrant Name:DNS Admin +Registrant Organization:Mozilla Foundation +Registrant Street: 650 Castro St Ste 300 +Registrant City:Mountain View +Registrant State/Province:CA +Registrant Postal Code:94041 +Registrant Country:US +Registrant Phone:+1.6509030800 +</pre> + +<p>보시는 바와 같이 <code>mozilla.org</code>는 Mozilla Foundation에 의해 이미 등록되어 있기 때문에 등록이 안되네요.</p> + +<p><code>afunkydomainname.org</code>을 등록하는 것도 봅시다</p> + +<pre>$ whois afunkydomainname.org +NOT FOUND +</pre> + +<p>위에 나온 것 같이 도메인이 <code>whois</code> 데이터베이스에 존재하지 않네요. 따라서 이건 등록할수 있습니다. 좋은 정보네요.</p> + +<h4 id="도메인_네임_얻기">도메인 네임 얻기</h4> + +<p>과정은 다음과 같습니다.</p> + +<ol> + <li>등록 웹사이트로 가세요.</li> + <li>일반적으로 눈에 ㄸㅟ게 “Get a domain name” 이라는 글자가 있을거에요. 클릭하세요.</li> + <li>요구하는 상세 정보를 채우세요. 그리고 특별히 원하는 도메인 네임의 스펠링을 정확하게 입력했는지 다시한번 확인해주세요. 한번 지불하면 돌이킬 수 없습니다.</li> + <li>등록이 잘 되었다면 등록 웹사이트에서 연락이 올 것입니다. 그리고 몇시간내로 모든 DNS 서버들이 당신의 DNS 정보를 받을거구요.</li> +</ol> + +<div class="note"> +<p><strong>Note:</strong> In this process the registrar asks you for your real-world address. Make sure you fill it properly, since in some countries registrars may be forced to close the domain if they cannot provide a valid address.</p> +</div> + +<h4 id="DNS_갱신">DNS 갱신</h4> + +<p>DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called “authoritative name server” or “top-level DNS servers.” Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information.</p> + +<div class="note"> +<p><strong>Note :</strong> This time is often called <strong>propagation time</strong>. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it.</p> +</div> + +<h3 id="DNS_리퀘스트는_어떻게_작동할까요">DNS 리퀘스트는 어떻게 작동할까요?</h3> + +<p>As we already saw, when you want to display a webpage in your browser it's easier to type a domain name than an IP address. Let's take a look at the process:</p> + +<ol> + <li>Type <code>mozilla.org</code> in your browser's location bar.</li> + <li>Your browser asks your computer if it already recognizes the IP address identified by this domain name (using a local DNS cache). If it does, the name is translated to the IP address and the browser negotiates contents with the web server. End of story.</li> + <li>If your computer does not know which IP is behind the <code>mozilla.org</code> name, it goes on to ask a DNS server, whose job is precisely to tell your computer which IP address matches each registered domain name.</li> + <li>Now that the computer knows the requested IP address, your browser can negotiate contents with the web server.</li> +</ol> + +<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p> + +<h2 id="다음_단계">다음 단계</h2> + +<p>지금까지 많은 프로세스와 architecture에 대해 이야기 했으니 이제 다음으로 넘어갈 시간이네요.</p> + +<ul> + <li>If you want to get hands-on, it's a good time to start digging into design and explore <a href="/en-US/Learn/Anatomy_of_a_web_page">the anatomy of a web page</a>.</li> + <li>It's also worth noting that some aspects of building a website cost money. Please refer to <a href="/en-US/docs/Learn/How_much_does_it_cost">how much it costs to build a web site</a>.</li> + <li>Or read more about <a href="http://en.wikipedia.org/wiki/Domain_name">Domain Name</a> on Wikipedia.</li> +</ul> diff --git a/files/ko/learn/common_questions/what_is_a_url/index.html b/files/ko/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..cc203af11b --- /dev/null +++ b/files/ko/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,158 @@ +--- +title: What is a URL? +slug: Learn/Common_questions/What_is_a_URL +tags: + - URL + - urls + - 자원 + - 초급자 + - 초보자 +translation_of: Learn/Common_questions/What_is_a_URL +--- +<div class="summary"> +<p>이 글은 Uniform Resource Locators (URLs) 를 설명한다. 또한, URL이 무엇이고 어떻게 구성되어 있는 지도 설명한다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선수지식:</th> + <td><a href="/en-US/docs/Learn/How_the_Internet_works">인터넷이 작동하는 법</a>, <a href="/en-US/docs/Learn/What_is_a_Web_server">웹서버가 무엇인가</a> 그리고 <a href="/en-US/docs/Learn/Understanding_links_on_the_web">웹상의 링크 속에 있는 개념</a>에 대해 먼저 알아야 한다.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>URL을 배울 것이고, 웹에서 어떻게 URL이 작동하는 지 배운다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p><span class="seoSummary">{{Glossary("Hypertext")}} 와 {{Glossary("HTTP")}} 함께, <strong><dfn>URL</dfn></strong> 은 웹에서 중요한 개념 중 하나이다. URL은 웹에 게시된 어떤 자원을 찾기 위해서 {{Glossary("Browser","browsers")}}에 의해 사용되는 메카니즘이다 .</span></p> + +<p><strong>URL</strong> 은 <em>Uniform Resource Locator</em>(인터넷에서 자원 위치)을 나타낸다. URL은 웹에서 정해진 유일한 자원의 주소일 뿐이다. 이론적으로, 각각의 유일한 URL은 유일한 자원을 가리킨다. 그런 자원은 HTML 페이지, CSS 문서, 이미지 등이 될 수 있다. 실제로, 여러 예외가 있는데, 가장 흔한 URL은 더 이상 존재하지 않는 자원이나 옮겨진 자원을 가리키는 것이다. URL에 의해 표현된 자원과 URL 자체는 웹서버에 의해 다루어지기 때문에, 자원과 관련 URL을 주의 깊게 관리하기 위해서 웹서버의 소유자에게 달려있다..</p> + +<h2 id="Active_Learning(능동_학습)">Active Learning(능동 학습)</h2> + +<p><em>아직 이용 가능한 능동학습이 없습니다. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="깊게_들어가기">깊게 들어가기</h2> + +<h3 id="기본_URL의_구조">기본: URL의 구조</h3> + +<p>여기에 URL의 예제들이 있습니다:</p> + +<pre>https://developer.mozilla.org +https://developer.mozilla.org/en-US/docs/Learn/ +https://developer.mozilla.org/en-US/search?q=URL</pre> + +<p>관련 페이지를 불러오기 위해서, 저 URL들 중 어떤 것이든 주소 창에 적을 수 있습니다. (자원).</p> + +<p>URL 은 다른 파트들과, 몇몇의 의무와 선택사항들로 구성됩니다. 다음 URL을 사용하여 가장 중요한 부분을 봅시다:</p> + +<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument</pre> + +<dl> + <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/15766/mdn-url-protocol@x2_update.png" style="height: 70px; width: 440px;"></dt> + <dd><code>http</code> 는 프로토콜(규약)입니다. URL의 첫 파트는 브라우저가 어떤 규약을 사용해야 하는 지를 나타냅니다. 프로토콜은 컴퓨터 네트워크에서 데이터를 교환하거나 전송하기 위한 방법들의 세트입니다. 보통 웹사이트들을 위해, 이것은 HTTP 프로토콜이나 HTTP 프로토콜의 보안 버전입니다. 웹은 이 두 가지 중 하나를 요구합니다, 그러나 브라우저는 <code>mailto:</code> (메일 클라이언트를 열기 위한) 또는 파일을 전송하기 위해 <code>ftp:</code> 와 같은 다른 프로토콜들을 다루는 법 또한 알고 있습니다, 그러므로 만약 이런 프로토콜들을 보더라도 놀라지 마십시오.</dd> + <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>www.example.com</code> 은 도메인 이름입니다. 이것은 어떤 웹 서버가 요구되는 것인 지를 가리킵니다. 대안으로, 직접 {{Glossary("IP address")}}를 사용하는 것도 가능합니다, 그러나 덜 편리하기 때문에, 그것은 웹에서 주로 사용되지는 않습니다.</dd> + <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>:80</code> 은 포트입니다. 이것은 기술적으로 웹서버에서 자원을 접근하기 위해 사용하는 "관문(gate)"을 가리킵니다. 만약 웹서버가 자원의 접근 하기 위해 표준 HTTP 포트 (HTTP를 위한 80, HTTPS를 위한 443)를 사용한다면, 포트 번호는 보통 생략합니다. 그렇지 않으면 포트 번호는 필수입니다.</dd> + <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>/path/to/myfile.html</code> 은 웹서버에서 자원에 대한 경로입니다. 초기의 웹에서는, 웹서버상에서 물리적 파일 위치를 나타냈습니다. 요즘에는, 실제 물리적 경로를 나타내지 않고, 웹 서버에서 추상화하여 보여줍니다.</dd> + <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>?key1=value1&key2=value2</code> 는 웹서버에 제공하는 추가 파라미터입니다. 이 파라미터들은 <code>&</code> 기호로 구분된 키/값으로 짝을 이룬 리스트입니다. 웹 서버는 자원을 반환하기 전에 추가적인 작업을 위해 이런 파라미터들을 사용할 수 있습니다. 각각의 웹서버는 파라미터들을 언급하는 자신의 규칙을 갖고 있습니다. 그리고, 특정한 웹서버가 파라미터를 다루는 지 알기 위한 유일한 방법은 웹서버 소유자에게 묻는 것입니다.</dd> + <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt> + <dd><code>#SomewhereInTheDocument</code> 는 자원 자체의 다른 부분에 대한 anchor(닻) 입니다. An anchor 는 일종의 자원 안에서 "bookmark" 입니다. 즉, "bookmarked" 지점에 위치된 내용을 보여주기 위해 브라우저에게 방향을 알려줍니다. 예를 들어, HTML 문서에서 브라우저는 anchor가 정의한 곳의 점을 스크롤할 것입니다; 비디오나 오디오 문서에서, 브라우저는 앵커가 나타내는 시간을 찾으려 할 것입니다. <strong>#</strong>뒤에 오는 부분은 가치가 없습니다. 또한,<em> <strong>fragment identifier(부분 식별자)</strong> 라고 알려져, 요청이 서버에 절대 보내지지 않습니다.</em></dd> +</dl> + +<p>{{Note('URLs을 말하면 <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">몇몇의 추가적인 부분과 규칙</a>이 있다, 그러나 그것들은 일반적인 유저와 웹 개발자들에게 상관이 없다. 이것에 대해 걱정하지 말고, 완전한 기능적인 URLs를 구축하고 사용하기 위해 알 필요는 없다.')}}</p> + +<p>당신은 일반적인 우편 메일 주소처럼 URL을 생각할 것이다: <em>프로토콜</em>은 사용하고 싶은 우편 서비스다, <em>도메인 이름</em>은 도시나 마을이다, 그리고 <em>포트</em> 우편 번호이다; <em>경로</em>는 메일이 전달되어야 하는 건물을 나타낸다; <em>파라미터</em>는 건물 번호와 같은 정보를 나타낸다; 그리고, 마지막으로, <em>anchor(앵커)</em>는 메일을 받는 실제 사람을 나타낸다.</p> + +<h3 id="URLs_을_사용하는_법">URLs 을 사용하는 법</h3> + +<p>어떤 URL이든 자원을 얻기 위해 브라우저의 주소창에 올바르게 적으면 된다!</p> + +<p>{{Glossary("HTML")}} 언어 — <a href="/en-US/docs/Learn/HTML/HTML_tags">나중에 이야기할 것</a> — 가 URLs을 광범위하게 사용하게 만들었다:</p> + +<ul> + <li>{{HTMLElement("a")}} 요소로 다른 문서와의 링크를 만들기 위해;</li> + <li>{{HTMLElement("link")}} 또는 {{HTMLElement("script")}}처럼 다양한 요소를 통해서 관련된 자원을 가진 문서를 연결시키기 위해;</li> + <li>이미지 ({{HTMLElement("img")}} 요소), 비디오 ({{HTMLElement("video")}} 요소), 소리 또는 음악 ({{HTMLElement("audio")}} 요소), 등과 같은 미디어를 보여주기 위해;</li> + <li>{{HTMLElement("iframe")}} 요소를 다른 HTML 문서에 보여주기 위해.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> 한 페이지의 일부로서, 자원을 불러오기 위해 URLs 특정할 때, (<code><script></code>, <code><audio></code>, <code><img></code>, <code><video></code>, 와 같은 것을 사용할 때 처럼), 오직 HTTP와 HTTPS URL을 사용해야만 한다. 예를 들어, FTP를 사용하는 것은 부분적으로 안전하지 않고, 더 이상 많은 브라우저에서 지원하지 않는다.</p> +</div> + +<p>{{Glossary("CSS")}} 또는 {{Glossary("JavaScript")}}와 같은 다른 기술들은 URLs를 광범위하게 사용한다 그리고, 이런 것들이 정말로 웹의 심장이다.</p> + +<h3 id="절대_URLs_vs_상대_URLs">절대 URLs vs 상대 URLs</h3> + +<p>우리가 위에서 얘기한 것은 <em>절대 URL</em> 이다. 그러나 또한 <em>상대 URL</em>도 있다. 그 차이가 의미하는 것을 더 자세히 알아봅시다.</p> + +<p>요구한 부분의 URL은 URL이 사용되는 문맥에서 크게 의존한다. 브라우저의 주소바에서, URL은 어떤 문맥도 가지고 있지 않다, 그래서 위에서 본 것 처럼 전체 (또는 <em>절대</em>) URL을 제공해야 한다. 프로토콜(브라우저는 기본적으로 HTTP 를 사용한다)또는 포트(해당 웹서버가 몇몇의 흔치 않은 포트를 사용할 때만 요구한다.)를 포함할 필요는 없다. 그러나, URL의 모든 다른 부분(part)은 필요하다.</p> + +<p>URL이 HTML 페이지와 같은 문서 내에서 사용될 때는 조금 다르다. 왜냐하면, 브라우저는 이미 문서의 자체 URL을 갖고 있기 때문에, 문서 내에서 이용가능한 어떤 URL의 잃어버린 부분(part)에 정보를 채우기 위해 사용한다. 오직 URL의 <em>path </em>부분을 보면, <em>절대 URL</em>과 <em>상대 URL</em>을 구별할 수 있다. 만약 URL의 경로 부분이 <code>"/</code>" 문자로 시작한다면, 그 브라우저는 현재 문서에서 주어진 문맥에서 참조없이, 서버의 루트(top root)에서 자원을 가지고 올 것이다.</p> + +<p>더 분명하게 알기 위해 예제를 봅시다.</p> + +<h4 id="절대_URLs의_예">절대 URLs의 예</h4> + +<dl> + <dt>전체 URL (이전에 사용한 것과 같은)</dt> + <dd> + <pre>https://developer.mozilla.org/en-US/docs/Learn</pre> + </dd> + <dt>내포된 프로토콜</dt> + <dd> + <pre>//developer.mozilla.org/en-US/docs/Learn</pre> + + <p>이 경우에, 브라우저는 URL을 호스팅한 문서를 불러오기 위해 사용한 것과 같은 프로토콜을 가진 URL을 부를 것이다.</p> + </dd> + <dt>내포된 도메인명</dt> + <dd> + <pre>/en-US/docs/Learn</pre> + + <p>이것은 HTML 문서 내에서 절대 URL을 위한 가장 흔한 사용법이다. 브라우저는 같은 프로토콜과 그 URL을 호스팅한 문서를 불러오기 위해 사용한 것과 같은 도메인명을 사용할 것이다. <strong>Note:</strong> <em>프로토콜을 생략하는 것 없이, 도메인명을 생략하는 것을 가능하지 않다</em>.</p> + </dd> +</dl> + +<h4 id="상대_URLs의_예">상대 URLs의 예</h4> + +<p>다음의 예를 더 잘 이해하기 위해, URL은 다음의 URL이 위치한 문서 내에서 불린다고 가정해봅시다: <code>https://developer.mozilla.org/en-US/docs/Learn</code></p> + +<dl> + <dt>Sub-resources</dt> + <dd> + <pre>Skills/Infrastructure/Understanding_URLs +</pre> + URL이 <code>/</code>로 시작하지 않기 때문에, 브라우저는 현재 자원을 포함하는 서브 디렉토리에 있는 문서를 찾으려 할 것이다. 그래서 예를 들어, 이 URL에 도달하길 원하는 것이다: <code>https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></dd> + <dt>디렉토리 트리에서 뒤로 가기</dt> + <dd> + <pre>../CSS/display</pre> + + <p>이 경우에, <code>../</code> 를 쓰는 것을 관례로 사용한다 — UNIX 파일 시스템에서 유래했다 — 브라우저에게 한 디렉토리에서 상위로 가고 싶다고 말하는 것이다. 여기서, 이 URL에 도달하고 싶은 것이다: <code>https://developer.mozilla.org/en-US/docs/Learn/../CSS/display</code>, 이렇게 단순화 된다: <code>https://developer.mozilla.org/en-US/docs/CSS/display</code></p> + </dd> +</dl> + +<h3 id="Semantic(의미있는)_URLs">Semantic(의미있는) URLs</h3> + +<p>매우 기술적인 것에도 불구하고, URLs은 웹 사이트를 위한 인간이 읽을 수 있는 시작점을 나타낸다. URL은 저장될 수 있고, 누군가가 URL을 주소바에 기입할 수 있다. 사람들이 웹에 핵심에 있다. 그리고, <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>semantic URLs</em></a>이라 불리는 것을 구축하기 위해 최선을 고려한다. Semantic URLs은 기술적인 노하우와 상관없이 누구나 이해할 수 있게 하는 의미로 단어들을 사용한다.</p> + +<p>언어학적 의미론(Semantics)은 컴퓨터와 상관없는 코스다. 아마도 자주 임의의 문자들의 조합처럼 보이는 URL을 봤을 것이다. 그러나 인간이 읽을 수 있는 URL들을 만드는 것에는 많은 장점이 있다:</p> + +<ul> + <li>당신이 URL을 조작하기 쉽게 한다.</li> + <li>어디에 있고, 무엇을 하고, 무엇을 읽거나 웹에서 상호작용하는 지에 대해 유저들에게 분명히 알려준다.</li> + <li>몇몇의 검색엔진은 관련 페이지들을 잘 분류하기 위해 이런 의미론을 사용할 수 있다.</li> +</ul> + +<h2 id="다음_단계">다음 단계</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">도메인 명 이해하기</a></li> +</ul> diff --git a/files/ko/learn/common_questions/what_is_a_web_server/index.html b/files/ko/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..9e57fc8391 --- /dev/null +++ b/files/ko/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,118 @@ +--- +title: 웹 서버란 무엇일까? +slug: Learn/Common_questions/What_is_a_web_server +translation_of: Learn/Common_questions/What_is_a_web_server +--- +<div class="summary"> +<p>여기서 우리는 웹 서버가 무엇인지, 어떻게 동작하는지, 왜 중요한지를 알아볼 것입니다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선수 지식:</th> + <td><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">web page와 web site, web server, 그리고 search engine의 차이점</a>에 대해 이해하고 <a href="/en-US/docs/Learn/How_the_Internet_works">인터넷이 어떻게 동작하는지</a>를 이미 알아야 합니다.</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>web server가 무엇인지를 배우고, 어떻게 동작하는지에 대한 전반적인 이해를 얻을 것입니다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p>"Web server"는 하드웨어, 소프트웨어 혹은 두 개가 같이 동작하는 것을 의미할 수 있습니다. </p> + +<ol> + <li>하드웨어 측면에서, web server는 web server의 소프트웨어와 website의 컴포넌트 파일들을 저장하는 컴퓨터입니다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript files가 있습니다.) Web server는 인터넷에 연결되어 웹에 연결된 다른 기기들이 웹 서버의 데이터(컴포넌트 파일들)를 주고받을 수 있도록 합니다.</li> + <li>소프트웨어 측면에서, web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리합니다. 이 문서에서 web server는 HTTP서버로 국한합니다. HTTP 서버는 URL(Web addresses)과 HTTP(당신의 브라우저가 웹 페이지를 보여주기 위해 사용하는 프로토콜)의 소프트웨어 일부입니다.</li> +</ol> + +<p>가장 기본적인 단계에서, 브라우저가 웹 서버에서 불려진 파일을 필요로 할때, 브라우저는 HTTP를 통해 파일을 요청합니다. 요청이 올바른 웹 서버(하드웨어)에 도달하였을 때, HTTP 서버(software)는 요청된 문서를 HTTP를 이용해 보내줍니다. </p> + +<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/8659/web-server.svg" style="height: 200px; width: 600px;"></p> + +<p>웹 사이트를 공개하기 위해서는, 당신은 정적 혹은 동적 웹 서버가 필요합니다.</p> + +<p>정적 웹 서버 혹은 스택은 HTTP 서버 (소프트웨어)가 있는 컴퓨터(하드웨어)로 구성되어 있습니다. 서버가 그 불려진 파일을 당신의 브라우저에게 전송하기 때문에, 저희는 그것을 "정적"이라고 부릅니다.</p> + +<p>동적 웹 서버는 정적 웹 서버와 추가적인 소프트웨어(대부분 일반적인 애플리케이션 서버와 데이터베이스)로 구성되어 있습니다. 애플리케이션 서버가 HTTP 서버를 통해 당신의 브라우저에게 불려진 파일들을 전송하기 전에, 애플리케이션 서버가 업데이트하기 때문에 우리는 이것을 동적이라고 부릅니다.</p> + +<p>예를 들어, 당신이 브라우저에서 보는 최종 웹페이지들을 생성하기 위해, 애플리케이션 서버는 아마 데이터베이스로 온 컨텐츠들로 이루어진 HTML 템플릿을 채울지 모릅니다. MDN 혹은 Wikipedia와 같은 사이트들은 수 천개의 웹페이지들을 가지고 있지만, 그것들은 실제의 HTML 문서가 아니라 오직 약간의 HTML 템플릿과 엄청 큰 데이터베이스로 되어있습니다. 이 구성은 내용들을 전달하고 관리하기 쉽고 빠르게 만들어 줍니다.</p> + +<h2 id="활발한_교육">활발한 교육</h2> + +<p>아직 자료가 없습니다. 부디 <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">기여하여주세요</a>.</p> + +<h2 id="더_깊은_부분">더 깊은 부분</h2> + +<p>웹 페이지를 가져오기 위해, 우리가 이미 말했듯이, 당신의 브라우저는 저장 공간에 있는 요청된 파일들을 찾는 웹 서버에게 요청을 보냅니다. 한번 좀더 자세히 알아봅시다. </p> + +<h3 id="호스팅_파일들">호스팅 파일들</h3> + +<p>웹 서버는 처음에 HTML 문서라고 불리는 웹 사이트의 파일들과 이미지, CSS 스타일시트, JavaScript 파일, 폰트, 비디오를 포함한 관련된 것들을 저장해야합니다. </p> + +<p>기술적으로, 당신은 컴퓨터에 있는 그 파일들을 불러올수 있지만, 그것들을 전담하는 웹 서버에 저장하는것이 훨씬 더 편리합니다. 전담하는 웹서버는: </p> + +<ul> + <li>항상 실행 중입니다</li> + <li>항상 인터넷과 연결되어 있습니다</li> + <li>항상 같은 IP주소를 가지고 있습니다(모든 {{Glossary("ISP", "ISPs")}}가 홈 라인에 대해 고정된 IP주소를 제공하는 것은 아닙니다.)</li> + <li>제 3자에 의해 유지보수 됩니다</li> +</ul> + +<p>이러한 이유들로, 좋은 호스팅 제공자를 찾는 것은 당신의 웹 사이트를 구축하는 것의 핵심 부분입니다. 다양한 서비스 회사들의 조건을 살펴보고 당신의 필요와 예산을 충족하는 하나를 선택하세요 (서비스는 무료부터 매달 수 백만원까지 있습니다.) 더 많은 자세한 사항은 <a href="https://developer.mozilla.org/en-US/Learn/How_much_does_it_cost#Hosting">여기서 </a>찾을 수 있습니다.</p> + +<p>당신이 웹 호스팅 솔루션을 설정했다면, 그저 당신의 <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">웹 서버에 파일들을 업로드 하시면 됩니다.</a></p> + +<h3 id="HTTP를_이용해_통신하기">HTTP를 이용해 통신하기</h3> + +<p>두 번째로, 웹 서버는 {{Glossary("HTTP")}} (hypertext transfer protocol)을 위한 지원합니다. 이름이 의미하듯이, HTTP는 어떻게 두 컴퓨터간의 hypertext(예를 들어, 연결된 웹 문서)를 전송하는지를 서술합니다.</p> + +<p>프로토콜은 두 컴퓨터간의 통신를 위한 규칙의 집합입니다. HTTP는 문자로 된, 독립적인 프로토콜입니다.</p> + +<dl> + <dt>Textual(문자로 된)</dt> + <dd>모든 명령어들은 기본 문자이며 사람들이 읽을 수 있습니다. </dd> + <dt>Stateless(독립적인)</dt> + <dd>서버 혹은 클라이언트는 이전의 통신을 기억하지 않습니다. 예를 들어, HTTP에만 의존하면, 서버는 당신이 입력한 비밀번호 혹 당신이 처리한 단계를 기억하지 못합니다. 당신은 그러한 일들을 위한 애플리케이션 서버가 필요합니다. (우리는 그러한 기술을 뒤에 나올 기사에서 다룰 것입니다.)</dd> +</dl> + +<p>HTTP는 어떻게 클라이언트와 서버가 통신을 하는지 명확한 규칙을 제공합니다. 우리는 HTTP 그 자체를 나중에 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">technical article</a> 에서 다룰 것입니다. 현재는, 이러한 것들을 기억해주세요.</p> + +<ul> + <li>오직 클라이언트만이 HTTP 요청을 만들 수 있으며, 서버에게만 보낼 수 있습니다. 서버는 오직 클라이언트의 HTTP 요청에 응답할 수 있습니다. </li> + <li>HTTP를 통해 파일을 요청할때, 클라이언트는 반드시 {{Glossary("URL")}} 파일들을 제공해야 합니다.</li> + <li><font color="#3B3C40" face="Open Sans, Arial, sans-serif">웹 서버는 반드시 </font><font color="#3B3C40" face="Open Sans, Arial, sans-serif">최소한의 에러 메시지를 포함하여</font> <font color="#3B3C40" face="Open Sans, Arial, sans-serif">모든 HTTP 요청에 응답해야합니다. </font></li> +</ul> + +<p><a href="https://developer.mozilla.org/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="https://mdn.mozillademos.org/files/8661/mdn-404.jpg" style="float: right; height: 300px; width: 300px;"></a>웹 서버에서, HTTP 서버는 들어오는 요청들에 대해 응답하고, 처리해야 합니다. </p> + +<ol> + <li>요청을 받으면, HTTP 서버는 먼저 요청받은 URL이 존재하는 파일과 매칭이 되는지를 확인합니다.</li> + <li> + <p>만약 매칭된다면, 웹 서버는 그 파일 내용을 브라우저에게 되돌려줍니다. 만약 그렇지 않다면, 애플리케이션 서버는 필요한 파일을 구축합니다.</p> + </li> + <li>만약 위 둘의 과정이 불가능하다면, 웹 서버는 브라우저에게 에러 메시지를 반환합니다, 대부분의 에러 메시지는 "404 Not Found" 입니다.(이 에러는 너무 많이 발생하여 많은 웹 디자이너들은<a href="http://www.404notfound.fr/" rel="external">404 error pages</a>를 디자인하는데 많은 시간을 할애합니다. </li> +</ol> + +<h3 id="정적_vs._동적_컨텐츠">정적 vs. 동적 컨텐츠</h3> + +<p>대략적으로 말하자면, 서버는 정적 혹은 동적 컨텐츠 모두 제공할 수 있습니다. "정적"은 "있는 그대로 제공되는 것(served as-is)"를 의미합니다. 정적 웹 사이트들은 설치하기 가장 쉽기때문에 우리는 당신이 첫 사이트를 정적 사이트로 만들기를 제안합니다.</p> + +<p>"동적"은 서버가 컨텐츠를 처리하는 것, 심지어는 컨텐츠를 데이터베이스로부터 생성하는 것을 의미합니다. 이 방법은 더 많은 유연성을 제공하지만, 기술적 스택이 더 다루기 힘들어지고, 웹사이트를 구축하는 것이 훨씬 더 복잡해집니다.</p> + +<p>당신이 지금 읽고있는 페이지를 예시로 봅시다. 이 사이트를 호스팅하고 있는 웹 서버에는, 데이터베이스로부터 내용들을 받고, 구성하고, HTML 템플릿 안에 집어넣고, 당신에게 결과를 보내는 애플리케이션 서버가 있습니다. 이러한 경우, 애플리케이션 서버는 <a href="https://developer.mozilla.org/en-US/docs/MDN/Kuma">Kuma</a>라고 불리고, <a href="https://www.python.org/">Python</a>(<a href="https://www.djangoproject.com/">Django</a> 프레임워크를 이용한)으로 구축됩니다. Mozilla 팀은 MDN의 특수한 목적으로 Kuma를 만들었지만, 많은 다른 기술들로 만들어진 비슷한 애플리케이션이 존재합니다.</p> + +<p>애플리케이션 서버는 아주 많이 있어서 특정한 하나만 추천하기는 어렵습니다. 어떤 애플리케이션 서버는 블로그나 위키, 인터넷 쇼핑, {{Glossary("CMS", "CMSs")}}라고 불리는 다른 것들(컨텐츠 관리 시스템) 같은 특수한 웹 사이트에 특화되어 있습니다. 만약 당신이 동적 웹 사이트를 구축한다면, 당신의 필요에 맞는 도구를 선택하는 시간을 가져보세요. 웹 서버 프로그래밍을 배우기를 원하는 경우가 아니라면(믈론, 그 자체로도 흥미진진한 영역입니다!), 애플리케이션 서버를 새로 만들 필요가 없습니다. 그것은 휠을 다시 재발명 하는 것과 같은 일입니다.</p> + +<h2 id="다음_과정">다음 과정</h2> + +<p>이제 당신은 웹 서버에 익숙해졌으니, 아래와 같은 것들을 할 수 있습니다:</p> + +<ul> + <li><a href="/en-US/docs/Learn/How_much_does_it_cost">웹에서 어떤 것을 하는 것이 얼마나 많은 비용이 들지</a>를 읽어보기</li> + <li><a href="/en-US/docs/Learn/What_software_do_I_need.">당신이 웹 사이트를 생성하기 위해 필요한 다양한 소프트웨어</a>를 배우기</li> + <li><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">웹 서버에 어떻게 파일을 업로드 하는 지</a>와 같은 실용적인 것으로 넘어가기</li> +</ul> diff --git a/files/ko/learn/common_questions/what_software_do_i_need/index.html b/files/ko/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..f50ef17dd2 --- /dev/null +++ b/files/ko/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,180 @@ +--- +title: What software do I need to build a website? +slug: Learn/Common_questions/What_software_do_I_need +tags: + - 초보자 +translation_of: Learn/Common_questions/What_software_do_I_need +--- +<div class="summary"> +<p>이 글에서, 우리는 당신이 편집하고, 업로드하고, 웹사이트를 볼 때 어떤 소프트웨어 구성품이 필요한 지 제시한다.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">요구사항:</th> + <td><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">웹페이지, 웹사이트, 웹서버, 검색엔진의 차이</a>를 알아야 한다.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>만약 당신이 웹사이트를 편집하거나 업로드하거나 볼 때, 필요한 소프트웨어 구성품이 무엇인지 배웁니다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p>당신은 웹 개발에 필요한 대부분의 프로그램들을 무료로 다운 받을 수 있습니다. 우리는 이 글에서 몇 개의 링크를 제공할 것입니다. 당신은 1) 웹페이지를 생성하고 편집하기, 2) 웹 서버에 파일을 업로드하기, 3) 웹 페이지 보기 를 위한 툴들이 필요할 것입니다.</p> + +<p>거의 모든 운영체제는 기본적으로 텍스트 에디터와 웹 뷰어(브라우저)를 포함하고 있습니다. 그래서 보통 웹 서버로 파일을 전송할 소프트웨어 필요합니다.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="깊게_들어가기">깊게 들어가기</h2> + +<h3 id="웹_페이지를_생성하고_편집하기">웹 페이지를 생성하고 편집하기</h3> + +<p>웹사이트를 생성하고 편집하기 위해, 텍스트 에디터가 필요합니다. 텍스트 에디터는 무서식의 텍스트 파일을 생성하고 수정합니다. (<strong>{{Glossary("RTF")}}</strong> 같은 다른 형식(format)들은, 볼드체와 밑줄같은 포멧을 추가하게 합니다. 이런 포맷들은 웹 페이지를 쓰는 데 적합하지 않습니다.) 당신은 현명하게 텍스트 에디터를 선택해야 합니다. 왜냐하면, 웹사이트를 구축하는 동안에, 광범위하게 사용해야하기 때문입니다.</p> + +<p>모든 데스크탑 운영체제는 기본적인 텍스트 에디터가 딸려 있습니다. 이런 에디터들은 모두 간단하지만, 웹페이지 코딩에 특별한 기능들이 부족합니다. 만약 당신이 더 복잡한 것을 원한다면, 많은 이용가능한 다른(third-party) 툴들이 있습니다. 서드-파티 에디터들은 구문 색표시, 자동완성, 섹션접기, 코드검색을 포함하는 추가 기능이 딸려 있습니다. 에디터들의 간략한 리스트입니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">운영 체제</th> + <th scope="col">내장 에디터</th> + <th scope="col">Third-party 에디터</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></td> + <td> + <p><a href="http://notepad-plus-plus.org/">Notepad++</a></p> + + <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p> + + <p><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></p> + + <p><a href="http://brackets.io/">Brackets</a></p> + + <p><a href="https://shiftedit.net/">ShiftEdit</a></p> + </td> + </tr> + <tr> + <td>Mac OS</td> + <td><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></td> + <td> + <p><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></p> + + <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p> + + <p><a href="http://brackets.io/">Brackets</a></p> + + <p><a href="https://shiftedit.net/">ShiftEdit</a></p> + </td> + </tr> + <tr> + <td>Linux</td> + <td><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)<br> + <a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)<br> + <a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)<br> + <a href="http://en.wikipedia.org/wiki/Kate_(text_editor)" rel="external">LeafPad</a> (Xfce)</td> + <td> + <p><a href="http://www.gnu.org/software/emacs/">Emacs</a><br> + <a href="http://www.vim.org/" rel="external">Vim</a></p> + + <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p> + + <p><a href="http://brackets.io/">Brackets</a></p> + + <p><a href="https://shiftedit.net/">ShiftEdit</a></p> + </td> + </tr> + <tr> + <td>Chrome OS</td> + <td> </td> + <td><a href="https://shiftedit.net/">ShiftEdit</a></td> + </tr> + </tbody> +</table> + +<p>이것은 하나의 고급 텍스트 에디터의 스크린샷입니다:</p> + +<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"> </p> + +<p>이것은 온라인 텍스트 에디터의 스크린샷입니다:</p> + +<p><img alt="Screenshot of ShiftEdit" src="https://mdn.mozillademos.org/files/15837/shiftedit.png" style="height: 311px; width: 475px;"></p> + +<h3 id="웹에_파일_업로드하기">웹에 파일 업로드하기</h3> + +<p>당신의 웹사이트가 대중들에게 보여지기 전에, 웹 서버에 웹페이지를 업로드 해야할 것입니다. 당신은 다양한 제공장로부터 서버의 공간을 살 수 있습니다. (<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a>를 보십시오). 일단, 당신이 어떤 제공자를 사용할 지 정했다면, 제공자는 당신에게 FTP(파일 전송 프로토콜) 접근 정보를 이메일로 보낼 것입니다.웹 사이트를 만들 때, 웹 서버에 파일을 업로드 하는 것은 매우 중요한 단계입니다, 그래서 우리는 상세한 부분은 <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">a separate article(따로 분리한 글)</a>에서 다루겠습니다. 아래는 무료 기본 FTP 클라이언트의 목록입니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">운영체제</th> + <th colspan="2" rowspan="1" scope="col" style="text-align: center;"> FTP 소프트웨어</th> + </tr> + </thead> + <tbody> + <tr> + <td>Windows</td> + <td> + <p><a href="http://winscp.net" rel="external">WinSCP</a></p> + + <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p> + </td> + <td colspan="1" rowspan="3"> + <p><a href="https://filezilla-project.org/">FileZilla</a> (All OS)</p> + + <p> </p> + </td> + </tr> + <tr> + <td>Linux</td> + <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br> + <a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</td> + </tr> + <tr> + <td>Mac OS</td> + <td><a href="http://cyberduck.de/">Cyberduck</a></td> + </tr> + <tr> + <td>Chrome OS</td> + <td><a href="https://shiftedit.net/">ShiftEdit</a> (All OS)</td> + <td colspan="1"> </td> + </tr> + </tbody> +</table> + +<h3 id="웹사이트_보기">웹사이트 보기</h3> + +<p>알다시피, 웹사이트를 보기 위해 웹 브라우저가 필요합니다. 개인적인 사용을 위한 <a href="http://en.wikipedia.org/wiki/List_of_web_browsers">수 십개</a>의 브라우저 선택권이 있습니다. 그러나, 웹 사이트를 개발할 때, 대부분의 사람들이 당신의 사이트를 잘 이용하기 위해서는 다음의 주요 브라우저에서 테스트해야합니다.</p> + +<ul> + <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox(파이어폭스)</a></li> + <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome(크롬)</a></li> + <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer(인터넷 익스플로러)</a></li> + <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari(사파리)</a></li> +</ul> + +<p>만약 당신이 기술적인 플랫폼이나 국가 등 특정한 그룹을 목적으로 한다면, <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>,<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a> 같은 추가적인 브라우저도 테스트해야할 지도 모릅니다.</p> + +<p>그러나 몇몇의 브라우저는 특정한 운영체제에서만 동작하기 때문에 테스트하는 것이 복잡합니다. 애플의 사파리는 iOS와 Max OS 에서만 동작하는 반면에, 인터넷 익스플로러는 윈도우에서만 동작합니다. <a href="http://browsershots.org/" rel="external">Browsershots</a>나 <a href="http://www.browserstack.com/" rel="external">Browserstack</a> 같은 서비스를 이용하는 것이 좋습니다. Browsershots은 다양한 브라우저에서 볼 때, 웹사이트의 스크린샷을 제공합니다. Browserstack은 사실 당신에게 가상머신에서 완전한 원거리 접근을 가능하게 해줍니다. 그래서 당신은 대부분의 공통 환경에서 사이트를 테스트할 수 있습니다. 그렇지 않으면, 당신 자신의 가상 머신을 설치하면 됩니다. 하지만 이것은 약간의 전문지식이 필요한 작업입니다. (만약 당신이 이런 길을 가고자 한다면, 마이크로소프트에서는 <a href="https://modern.ie" rel="external">modern.ie</a>.에서 사용 준비가 완료된 가상 머신이 포함된 개발자를 위한 툴들을 가지고 있습니다.)</p> + +<p>물론, 실제 장치에서 몇 번의 테스트를 해봐야한다. 특히, 실제 모바일 장치에서는. 모바일 장치 시뮬레이션은 새롭고, 진화하고 있는 기술이고 데스트탑 시뮬레이션보다 신뢰가 떨어진다. 물론, 모바일 장치는 돈이 든다. 그래서 우리는<a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>에서 보는 것을 제안한다. 당신이 너무 많은 소비없이 많은 플랫폼을 테스트하고 싶다면, 장치를 공유할 수 있다.</p> + +<h2 id="다음_단계">다음 단계</h2> + +<ul> + <li>몇몇의 소프트웨어는 무료이나, 모두 무료는 아니다. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">웹에서 무언가를 하기 위해 얼마나 비용이 드는 지 알아보기</a><a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">.</a></li> + <li>당신이 더 많은 텍스트 에디터에 대해 배우고 싶다면, <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">텍스트 에디터를 선택하고 설치하는 법</a>에 대한 글을 읽으세요.</li> + <li>당신이 웹에서 웹사이트를 퍼블리싱하는 법에 대해 궁금하다면, <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"웹 서버에 파일을 업로드하는 법"</a>을 보십시오.</li> +</ul> + +<p> </p> diff --git a/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html b/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html new file mode 100644 index 0000000000..d39ea4069f --- /dev/null +++ b/files/ko/learn/common_questions/웹_사이트가_제대로_동작하는지_확인/index.html @@ -0,0 +1,170 @@ +--- +title: 웹 사이트가 제대로 동작하는지 확인하는 방법 +slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +<div class="summary"> +<p>이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제 조건:</th> + <td>먼저, <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">upload files웹 서버에 파일 업로드 방법</a>을 알아야 합니다.</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.</td> + </tr> + </tbody> +</table> + +<p id="Summary">개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?</p> + +<p>종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.</p> + +<p>이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<p><em>There is no active learning available yet. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p> + +<h2 id="Dig_deeper">Dig deeper</h2> + +<h3 id="브라우저에서_테스트하기">브라우저에서 테스트하기</h3> + +<p>웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.</p> + +<h4 id="어_이미지가_어디갔죠">어?, 이미지가 어디갔죠?</h4> + +<p>우리의 개인 사이트를 봅시다.(동작x), <code>http://demozilla.examplehostingprovider.net/</code>. It's not showing the image we expected!</p> + +<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/9643/image-missing.png" style="height: 189px; width: 380px;"></p> + +<p>Open Firefox's Network tool (<strong>Tools ➤ Web Developer ➤ Network</strong>) and reload the page:</p> + +<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/9645/error404.png" style="height: 304px; width: 562px;"></p> + +<p>There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.</p> + +<h4 id="HTTP_statuses">HTTP statuses</h4> + +<p>Servers respond with a status message whenever they receive a request. Here are the most common statuses:</p> + +<dl> + <dt><strong><span id="cke_bm_110S" style="display: none;"> </span>200: OK</strong></dt> + <dd>The resource you asked for was delivered.</dd> + <dt><strong>301: Moved permanently</strong></dt> + <dd>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.</dd> + <dt><strong>304: Not modified</strong></dt> + <dd>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.</dd> + <dt><strong>403: Forbidden</strong></dt> + <dd>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).</dd> + <dt><strong>404: Not found</strong></dt> + <dd>Self-explanatory. We'll discuss how to solve this below.</dd> + <dt><strong>500: Internal server error</strong></dt> + <dd>Something went wrong on the server. For instance, maybe the server-side language ({{Glossary("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.</dd> + <dt><strong>503: Service unavailable</strong></dt> + <dd>Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.</dd> +</dl> + +<ul> +</ul> + +<p>As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.</p> + +<h4 id="Fixing_the_404">Fixing the 404</h4> + +<p>So what went wrong?</p> + +<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/9649/demozilla-images-list.png" style="height: 71px; width: 407px;"></p> + +<p>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: <code>unicorn_pics.png</code> rather than <code>unicorn_pic.png</code>. So correct the typo in your code editor by changing the image's <code>src</code> attribute:</p> + +<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/9651/code-correct.png" style="height: 125px; width: 775px;"></p> + +<p>Save, <a href="/en-US/Learn/Upload_files_to_a_web_server">push to the server</a>, and reload the page in your browser:</p> + +<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/9655/image-corrected.png" style="height: 554px; width: 565px;"></p> + +<p>There you go! Let's look at the {{Glossary("HTTP")}} statuses again:</p> + +<ul> + <li><strong>200</strong> for <code>/</code> and for <code>unicorn_pic.png</code> means that we succeeded in reloading the page and the image.</li> + <li><strong>304</strong> for <code>basic.css</code> 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.</li> +</ul> + +<p>So we fixed the error and learned a few HTTP statuses along the way!</p> + +<h3 id="Frequent_errors">Frequent errors</h3> + +<p>The most frequent errors that we find are these:</p> + +<h4 id="Typos_in_the_address">Typos in the address</h4> + +<p>We wanted to type <code>http://demozilla.examplehostingprovider.net/</code> but typed too fast and forgot an “l”:</p> + +<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/9657/cannot-find-server.png" style="height: 425px; width: 908px;"></p> + +<p>The address cannot be found. Indeed.</p> + +<h4 id="404_errors">404 errors</h4> + +<p>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.</p> + +<h4 id="JavaScript_errors">JavaScript errors</h4> + +<p>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.</p> + +<p>Open the console (<strong>Tools ➤ Web developer ➤ Web Console</strong>) and reload the page:</p> + +<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/9659/js-error.png" style="height: 511px; width: 523px;"></p> + +<p>In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in <a href="/en-US/Learn/JavaScript">another series </a>of articles).</p> + +<h3 id="More_things_to_check">More things to check</h3> + +<p>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:</p> + +<h4 id="Hows_the_performance">How's the performance?</h4> + +<p>Does the page load fast enough? Resources like <a href="http://www.webpagetest.org/">WebPagetest.org</a> or browser add-ons like <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> can tell you a few interesting things:</p> + +<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p> + +<p>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 {{Glossary("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.</p> + +<h4 id="Is_the_server_responsive_enough">Is the server responsive enough?</h4> + +<p><code>ping</code> is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:</p> + +<pre>$ 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</pre> + +<p>Just keep in mind a handy keyboard shortcut: <strong>Ctrl+C</strong>. Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop. If you don't stop the runtime, <code>ping</code> will ping the server indefinitely.</p> + +<h3 id="A_simple_checklist">A simple checklist</h3> + +<ul> + <li>Check for 404s</li> + <li>Make sure all webpages are behaving as you expect</li> + <li>Check your website in several browsers to make sure it renders consistently</li> +</ul> + +<h2 id="Next_steps">Next steps</h2> + +<p>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.</p> + +<ul> + <li>Since people can come to your website from all over the world, you should consider making it <a href="/en-US/docs/Learn/What_is_accessibility">accessible to everybody</a>.</li> + <li>Is the design of your website a bit too rough? It's time to <a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">learn more about CSS</a>.</li> +</ul> diff --git a/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html b/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html new file mode 100644 index 0000000000..8885c5999b --- /dev/null +++ b/files/ko/learn/common_questions/코딩하기_전에_생각하기/index.html @@ -0,0 +1,176 @@ +--- +title: 나의 웹사이트를 설계하기 위해서는? +slug: Learn/Common_questions/코딩하기_전에_생각하기 +tags: + - 능동학습필요 + - 초보자 +translation_of: Learn/Common_questions/Thinking_before_coding +--- +<p class="summary">이 글은 모든 프로젝트에서 중요한 첫 단계 - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선이수:</th> + <td>없음</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.</td> + </tr> + </tbody> +</table> + +<h2 id="요약">요약</h2> + +<p><span class="seoSummary">웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 </span>정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.</p> + +<p>따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.</p> + +<ul> + <li>내가 달성하고 싶은 것은 정확히 무엇인가?</li> + <li>내 목적 달성을 웹사이트가 어떻게 돕는가?</li> + <li>목적 달성을 위해 무엇을, 어떤 순서로 해야할까?</li> +</ul> + +<p>이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.</p> + +<h2 id="능동_학습">능동 학습</h2> + +<p><em>아직 가능한 능동 학습이 없다. <a href="https://developer.mozilla.org/ko/docs/MDN/Getting_started">기여를 고민해보라</a>.</em></p> + +<h2 id="깊게_들어가기">깊게 들어가기</h2> + +<p>프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.</p> + +<p>기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.</p> + +<p>친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.</p> + +<div class="note"> +<p><strong>메모:</strong> 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이 <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Project Ideation(관념화)</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Project Planning(계획)</a> 그리고 <a href="http://en.wikipedia.org/wiki/Project_management">Project Management(관리)</a> 라고 부르는 것을 다루는 단순한 방법이다.</p> +</div> + +<h3 id="내가_정확히_달성하고_싶은_것은_무엇인가">내가 정확히 달성하고 싶은 것은 무엇인가?</h3> + +<p>이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기, 음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.</p> + +<p>당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.</p> + +<ul> + <li>다른 사람들이 내 음악을 듣게 하기</li> + <li>관련 상품 팔기 </li> + <li>다른 음악가들과 만나기</li> + <li>내 음악에 대해 이야기하기</li> + <li>동영상으로 음악 가르치기</li> + <li>내 고양이 사진 출판하기</li> + <li>새로운 애인 찾기</li> +</ul> + +<p>일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.</p> + +<ol> + <li>새로운 애인 찾기</li> + <li>다른 사람들이 내 음악을 듣게 하기</li> + <li>내 음악에 대해 이야기하기</li> + <li>다른 음악가들과 만나기</li> + <li>관련 상품 팔기 </li> + <li>동영상으로 음악 가르치기</li> + <li>내 고양이 사진 출판하기</li> +</ol> + +<p>단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)</p> + +<p>우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.</p> + +<h3 id="어떻게_웹사이트가_나를_목적지로_데려다_줄_수_있을까">어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?</h3> + +<p>그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?</p> + +<p>우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.</p> + +<p>애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.</p> + +<p>음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.</p> + +<p>어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.</p> + +<h3 id="내_목표를_달성하기_위해_무엇을_어떤_순서로_해야할까">내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?</h3> + +<p>이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.</p> + +<p>긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">목표</th> + <th scope="col">해야할 것</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;">사람들이 당신의 음악을 듣게 하기</td> + <td> + <ol> + <li>음악을 녹음한다.</li> + <li>온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)</li> + <li>사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">음악에 대해 이야기하기</td> + <td> + <ol> + <li>토의를 시작하기 위한 몇몇의 글을 쓴다.</li> + <li>어떻게 글이 보여야 하는 지 정해라.</li> + <li>웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">다른 음악가들 만나기</td> + <td> + <ol> + <li>사람들이 너와 연락할 방법을 제공해라.</li> + <li>너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">goodies 팔기</td> + <td> + <ol> + <li>goodies 만든다.</li> + <li>goodies 저장한다.</li> + <li>쇼핑을 하는 방식 찾는다.</li> + <li>결제 방식 찾는다.</li> + <li>사이트에서 사람들의 주문 메카니즘 만든다.</li> + </ol> + </td> + </tr> + <tr> + <td style="vertical-align: top;">동영상을 통해 음악 가르치기</td> + <td> + <ol> + <li>동영상 강의 녹화한다.</li> + <li>온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)</li> + <li>웹사이트의 한 부분에서 비디오 접근 가능하게 한다.</li> + </ol> + </td> + </tr> + </tbody> +</table> + +<p>공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.</p> + +<p>둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)</p> + +<h2 id="결론">결론</h2> + +<p>당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.</p> + +<p>이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">how the Internet works(인터넷이 작동하는 법)</a> 을 읽어야 할 것이다.</p> + +<p> </p> |