Found 129 pages:

# Page Tags and summary
1 Web 개발 학습하기 Beginner, Index, Landing, Learn, NeedsTranslation, TopicStub, 웹, 초보자, 학습
여기에서는 여러분을 "초보자"에서 "전문가"로 이끄는 걸 목표로 하지 않습니다. 다만, 여러분을 "초보자"에서 "안정된 단계"로 이끄는 걸 목표로 합니다. 그 이후에는 자신만의 스타일을 찾아야만 합니다. 그리고 그때 보게 될 MDN의 나머지 문서들이나 다른 문서들은 많은 사전지식을 필요로 할 것입니다.

코딩을 처음 접하는 분들에게 웹개발은 어려울 수 있습니다(그렇지만 저희가 최선을 다해 설명해드릴께요!). 그렇지만 당신이 웹 개발을 배우고 싶은 학생이든, 수업 자료를 찾는 선생님이든, 그리고 취미로 웹기술을 알고 싶은 사람이든 상관없이 편하게 공부할 수 있도록 하겠습니다.
2 CSS를 이용한 HTML 스타일링 익히기 Beginner, CSS, CodingScripting, Landing, Topic
CSS(Cascading Stylesheets – 종속형 스타일시트)는 HTML을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, CSS를 사용하면 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.
3 CSS layout
지금까진 CSS 기본, 글자를 스타일링하는 법과 내용이 담긴 박스를 스타일링하고 다루는 법에 대해 살펴보았다.  이제 뷰포트와 관련하여 박스를 위치시키는 법과 다른 것들을 살펴볼 차례다. 우리는 필수조건들을 다뤄왔기에 CSS 배치와 관련하여- 다른 배치 설정, 플로팅과 포지셔닝과 연관된 일반적인 배치 방법 및 플렉스박스와 같이 새롭게 유행하는 배치 도구에 대해- 좀 더 깊게 들어가 볼 수 있다.
4 Floats Article, Clearing, Floats, Layout, columns, multi-column
At this point, you should already have some powerful tools at your disposal for creating fairly complex web layouts. Excellent! In the next article we'll take it even further by looking at positioning.
5 Grids
그리드는 기존의 설계 도구이며 다수의 웹 사이트 레이아웃은 그리드를 기반으로 하고 있습니다. 이 기사에서는 그리드 기반 디자인과 CSS를 사용하여 그리드를 생성하는 방법을 살펴 봅니다. 현재 브라우저에서 사용 가능한 새로운 기술을 이용합니다.
6 Introduction to CSS layout
This article has provided a brief summary of all the layout technologies you should know about. Read on for more information on each individual technology!
7 CSS 소개 Beginner, CSS, CodingScripting, Introduction to CSS, Landing
CSS(Cascading Style Sheets)는 웹페이지의 스타일과 레이아웃을 지정하는 데에 사용됩니다. 예를 들면, 폰트, 색상, 콘텐츠의 크기와 간격을 변경하거나, 여러 열로 나누거나, 애니메이션 또는 꾸밈 효과들을 더할 수 있습니다. 이 강좌에서 CSS의 기초지식(작동 방법, 선택자와 특성, CSS 규칙 작성, HTML에 적용하기, 길이 지정 방법, 색상, CSS의 다른 단위들, 직렬화와 상속, 디버깅 등)을 습득할 수 있습니다.
8 CSS 값과 단위 Article, Beginner, CSS, CodingScripting, Guide
We hope you enjoyed learning about CSS values and units — don't worry if this doesn't all make complete sense right now; you'll get more and more practice with this fundamental part of CSS syntax as you move forward!
9 CSS 구문 Beginner, CSS, CodingScripting, Guide
이번엔 CSS 구문에 관해 훨씬 깊게 들어가며 속성과 값이 선언문을 이루고, 여러 선언문이 선언 블록을, 선언 블록과 선택자가 완전한 CSS 규칙을 만드는 과정을 살펴보겠습니다. 주석과 공백 등 다른 구문도 알아보며 마무리 짓겠습니다.
10 CSS 작동 원리 Beginner, CSS, CodingScripting, DOM, Guide
CSS(Cascading Style Sheets)를 이용하면 멋진 외견을 가진 웹페이지를 작성할 수 있는데, 그 뒤쪽에선 무슨 일이 일어나는 걸까요? 이 글은 CSS가 무엇인지, 브라우저가 HTML을 Document Object Model (DOM)로 어떻게 전환하는지와 CSS가 DOM에 적용되는 방법, 아주 기본적인 문법 예시 몇 가지, 그리고 실제로 CSS를 홈페이지에 포함하려면 어떤 코드를 써야 하는지 설명합니다.
11 결합자와 다중 선택자 Article, Beginner, CSS, Guide, Learn, Selectors
선택자의 마지막 장에서는 여러 선택자를 조합해 더 유용한 선택을 하기 위한 방법, 결합자다중 선택자을 알아보겠습니다.
12 단순 선택자 Article, Beginner, CSS, Guide, Learn
선택자의 첫 번째 에서는 "단순" 선택자들에 대해 배워보겠습니다. 단순 선택자는 문서 내 하나 이상의 요소를 요소 유형, class, id를 통해 선택합니다.
13 선택자 Article, Beginner, CSS, Element, Guide, Learn, Selectors
CSS에서 선택자는 스타일을 적용하려는 웹 페이지의 HTML 요소를 고를 때 사용합니다. 다양한 종류의 CSS 선택자로 어떤 요소를 선택할 지 세밀하게 조절할 수 있습니다. 다음 몇 장 동안 서로 다른 종류의 선택자에 대해 자세하게 알아보겠습니다.
14 속성 선택자 Article, Attribute, Beginner, CSS, Guide, Learn, Selectors
속성 선택자는 요소의 속성에 따라 선택하는 특별한 선택자입니다. 일반적인 구문은 대괄호([])와 그 안의 속성 이름으로 이루어지며 선택적으로 속성 값에 따른 조건을 붙일 수 있습니다. 속성 선택자는 두 종류, 존재와 값 속성 선택자와 부분일치 선택자로 나눌 수 있습니다.
15 의사 클래스와 의사 요소 Article, Beginner, CSS, Guide, Learn, Pseudo-class, Pseudo-element
선택자의 세 번째 글에서는 의사(pseudo) 선택자를 다루겠습니다. 의사 선택자는 요소를 그냥 선택하지 않고, 요소의 일정 부분만 혹은 특정 상황에 처한 요소만 선택합니다. 의사 클래스의사 요소의 두 종류가 있습니다.
16 Styling boxes Beginner, Boxes, CSS, CodingScripting, Landing, Module, NeedsTranslation, Tables, TopicStub, backgrounds, borders, effects
Hello and welcome to Styling CSS boxes — in the last module we looked at the content inside your boxes; in this module we'll look at styling the actual box itself, by manipulating background color and images, borders, and other parts of the box. We'll also look at other topics, from making HTML tables look good to applying advanced effects like filters and blend modes.
17 Changing background styles using CSS
This article should have taught you most of what you'll ever need to know about styling element backgrounds. Hopefully you'll have had some fun along the way too! In the next article we'll play with borders, and look at how to style those.
18 Styling text CSS, 그림자, 리스트, 모듈, 웹 폰트, 초보자, 폰트
CSS 기초가 어느 정도 완성되었다면,  여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 폰트와 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 커스텀 폰트를 설정하고 리스트와 링크를 꾸며줌으로써 이 모듈을 끝마칩니다.
19 일반적인 CSS 문제 해결하기
다음 링크들은 일반적인 CSS 문제들에 대한 해결방법을 제공합니다.
20 Common questions CodingScripting, Infrastructure, Learn, NeedsTranslation, TopicStub, Web, WebMechanics
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 HTML or CSS learning articles.) These articles are designed to work on their own.
21 How do you upload files to a web server?
당신은 이미 간단한 웹 페이지를 만들었습니다.(you have built a simple page 참조), 이제 웹 서버에 올려 온라인에 공개하고 싶을 겁니다. 우리는 이러한 방법을 FTP를 통해 다뤄보고자 합니다.
22 How does the Internet work?
인터넷은 웹의 척추이다. 즉, 웹을 가능하게 하는 기술적인 기반이다.
23 What are hyperlinks?
보통 링크라고 불리는 하이퍼링크는 웹에서 기본적인 개념이다. 링크가 무엇인 지 설명하기 위해, 웹의 매우 기본적인 구조로 돌아볼 필요가 있다.
24 What is a URL? URL, urls, 자원, 초급자, 초보자
HypertextHTTP 함께, URL 은 웹에서 중요한 개념 중 하나이다.  URL은 웹에 게시된 어떤 자원을 찾기 위해서 browsers에 의해 사용되는 메카니즘이다 .
25 What is a domain name?
Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.
26 What is the difference between webpage, website, web server, and search engine? 웹동작, 웹작동, 초보자
이번 글에서는 다양한 웹 관련 개념들을 논한다: 웹, 페이지, 웹사이트, 웹서버, 검색엔진. 이런 용어들은 종종 웹을 처음 배우는 사람이나 잘못 배운 사람들에게 혼란스럽다. 이것들이 무엇을 의미하는 지 배워보자!
27 What software do I need to build a website? 초보자
당신은 웹 개발에 필요한 대부분의 프로그램들을 무료로 다운 받을 수 있습니다. 우리는 이 글에서 몇 개의 링크를 제공할 것입니다. 당신은 1) 웹페이지를 생성하고 편집하기, 2) 웹 서버에 파일을 업로드하기, 3) 웹 페이지 보기 를 위한 툴들이 필요할 것입니다.
28 나의 웹사이트를 설계하기 위해서는? 능동학습필요, 초보자
웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 
29 로컬 테스트 서버 설치하기 Express, Flask, Learn, Node, PHP, django, lamp, 서버, 서버측, 초보자, 파이썬
학습 영역의 대부분에서 여러분의 예제를 브라우저에서 직접 열기만 하면 된다고 말할 것입니다 — HTLM 파일을 더블 클릭하거나 그 파일을 브라우저 창에 끌어다 놓거나, 또는 File > Open... 메뉴에서 해당 HTML 파일을 선택하면 됩니다. 이를 수행하는 방법은 많습니다.
30 어떤 HTML 기능이 접근성을 촉진할까?
이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다.
31 웹 서버란 무엇일까?
"Web server"는 하드웨어, 소프트웨어 혹은 두 개 모두를 의미할 수 있습니다.
32 Drafts NeedsTranslation, TopicStub
This page links to incomplete drafts, and material we really don't know what to do with yet.
33 How email works
이메일(즉 전자 메일)은 인터넷에서 가장 많이 쓰이는 기능일것입니다. 당신은 이메일을 이용하여 인터넷에 간접적으로 혹은 직접적으로 연결된 누군가에게 메시지를 보낼 수 있습니다.
34 Python Beginner, Python, 입문자
Python is a widely used, general-purpose, interpreted scripting language. It is available on a broad range of platforms, including Windows, Linux, and Mac OS X. Python helps you work quickly and integrate systems effectively, and it encourages programmers to program without boilerplate (prepared) code.
35 상호작용하는 인터프리터 알아가기
파이썬은 기본적으로 2가지 방법으로 사용될 수 있습니다.: 상호작용적인 방법과 그렇지 않은 방법. 인터프리터가 어떤 명령어 라인 옵션도 없이 불려졌을 때는, 상호작용 모드로 들어가게 됩니다. 이것은 당신이 파이썬 문장을 직접 prompt에 입력할 수 있다는 것을 의미합니다. 이러한 모드를 사용하는 것은 당신이 짧은 코드 조각을 아이디어를 테스트하고 그 언어로 실험하기 위해 입력하는 것을 허락하는 것입니다.
36 파이썬 설치하기
당신은 최신 파이썬 버젼을 여기서 다운로드 받으실 수있습니다. 다운로드가 완료되면, 당신의 mac의 finder에서 애플리케이션을 실행시키세요.
37 어떻게 이미지 맵이 동작하는가
이미지 맵이라고 불리는 그래픽은 HTML의 가장 일반적이고 도움이 되는 것들중 하나입니다. 이미지 맵은 클릭할 수 있는 부분이 있어 클릭할 수 있는 이미지로 변경된 정적 이미지입니다. 이미지 맵은 Common Gateway Interface(CGI)를 이용하여 만들어졌습니다. CGI는 웹 서버가 다른 애플리케이션들과 통신할 수 있는 통신 프토토콜입니다.
38 클라우드 구조 이해
클라우드 컴퓨팅은 인터넷을 통해 컴퓨터 서비스를 전달하는데 사용되는 일반적 용어입니다.
39 HTML Beginner, HTML, 입문자
웹사이트를 만들기 위해서는 웹 페이지 구조 정의의 토대가 되는 기술인 HTML에 대해 알아야 합나다. HTML은 작성하고자 하는 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지인지, 멀티미디어 플레이어인지, 폼 요소인지 아니면 기타 사용 가능한 다른 요소들 중의 하나인지, 혹은 새롭게 정의한 요소인지를 명확하기 인지할 수 있도록 하는데 사용됩니다.
40 HTML tables HTML, 가이드, 모듈, 초보자, 테이블
HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화하는 것이며, 이 목적을 위해 여러 요소와 속성을 가지고 있습니다. 스타일링을 위해 약간의 CSS 와 HTML을 함께 사용하면 학교 수업 계획, 지역 수영장 시간표 또는 좋아하는 공룡이나 축구 팀 통계와 같은 웹 테이블 정보를 쉽게 표시 할 수 있습니다. 이 모듈은  HTML을 사용하여 표 형식의 데이터를 구성하는데 필요한 모든 정보를 제공 합니다.
41 HTML 소개
HTML은 문서의 특정 텍스트 영역이  문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어입니다. 이번 과정은 이 두 가지 주제에 대한 소개와 HTML을 이해하기 위해 알아야 하는 기본 개념과 문법을 설명합니다.
42 Advanced text formatting
That marks the end of our study of HTML text semantics. Bear in mind that what you have seen during this course is not an exhaustive list of HTML text elements — we wanted to try to cover the essentials, and some of the more common ones you will see in the wild, or at least might find interesting. To find way more HTML elements, you can take a look at our HTML element reference (the Inline text semantics section would be a great place to start.) In the next article we will look at the HTML elements you'd use to structure the different parts of an HTML document.
43 Document and website structure
At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.
44 HTML text fundamentals
That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to create hyperlinks, possibly the most important element on the Web.
45 HTML 디버깅
HTML을 작성을 할 수 있지만, 문제가 생겼을 때  코드의 오류가 발생한 부분을 해결할 수 없나요? 이 기사에서는 HTML의 오류를 찾고 수정하는 데 도움이되는 몇 가지 도구를 소개합니다.
46 HTML 시작하기
You've reached the end of the article — hope you enjoyed your tour of the very basics of HTML. At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!
47 head 태그에는 무엇이 있을까? HTML의 메타데이터
HTML의 head는 페이지를 열때 웹브라우저에 표시되지 않습니다. head는 <title> 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면),  파비콘(favicon, ), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 이 글에서 위 내용들과 그 이상에 대해 다룰 것입니다. 이것은 head에 있어야하는 마크업이나 다른 코드들을 다루는데 좋은 기초가 될 것입니다.
48 하이퍼링크 만들기
That's it for links, for now anyway! You'll return to links later on in the course when you start to look at styling them. Next up for HTML, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — Advanced text formatting is your next stop.
49 HTML 폼 가이드
이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다.
50 HTML_폼_구성_방법
HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.
51 Sending and retrieving form data
많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.
52 나의 첫 HTML 폼
이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTMLCSS)
53 Learn HTML to solve problems CodingScripting, HTML, NeedsTranslation, TopicStub
Once you've covered the basics, there isn't one right path to learn HTML. You can pick up whatever you like at your own pace. HTML is simply a set of tags you can use to set up your document structure and add extra functionality to your document. The following articles explain thoroughly, with full working examples, how to use HTML for the most common, frequent Web development tasks. If you need a quick explanation of a tag, please head over to our HTML reference.
54 데이터 속성 사용하기
HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
55 약자 표시 및 이해시키는 방법 HTML, 초보
항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)
56 Multimedia and embedding Assessment, Audio, Beginner, CodingScripting, Flash, Guide, HTML, Images, Landing, Learn, NeedsTranslation, SVG, TopicStub, Video, iframes, imagemaps, responsive
We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the Web come alive, with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
57 HTML의 이미지
처음에는 웹에 텍스트만 있었고 조금 지루했습니다. 다행히도 웹 페이지 안에 이미지 (및 보다 흥미로운 유형의 컨텐츠)를 삽입하는 기능이 추가되기까지는 오래 걸리지 않았습니다. 시작해볼 수 있는 다른 유형의 멀티미디어가 있지만 단순한 이미지를 웹 페이지에 삽입하는 데 사용되는 <img> 요소로 쉽게 시작해 보겠습니다. 이 글에서는 기초내용 부터 심층적으로 사용하는 방법, <figure>를 사용하여 캡션을 주석으로 추가하는 방법, <css>배경 이미지와 관련된 사용 방법을 자세히 설명합니다.
58 Index Index, Learn, MDN Meta
{{Index("/ko/docs/Learn")}}
59 Infrastructure
이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:
60 JavaScript Beginner, JavaScript, 입문자, 자바스크립트, 자바스크립트 입문자
JavaScript 는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어입니다. 웹페이지는 여러분이 볼 수 있는 정적인 정보들만 보여주는 것을 더해 시간이 지남에 따라 업데이트되고 동적인 지도와 움직이는 2D/3D 그래픽, 또는 스크롤 가능한 비디오 쥬크박스들과 여러 가지들을 보여줍니다. 여러분은 '아마도 JavaScript 그 일들을 하고 있겠구나'라고 생각하실 수 있습니다.
61 Client-side web APIs
웹 사이트 또는 응용 프로그램 용 client-side JavaScript를 작성할때 API (응용 프로그램 프로그래밍 인터페이스)를 사용하지 않으면 많은것을 만들기 어렵습니다. API는 사이트가 실행되고 있는 브라우저와 운영 체제의 다양한 부분 그리고 웹 사이트 혹은 서비스의 데이터를 다룰 수 있는 인터페이스입니다. 이번장에서 우리는 API가 무엇인지, 그리고 개발할 때 자주 접하게 될 보편적인 API를 사용하는 방법에 대해 살펴볼 것입니다.
62 Introducing JavaScript objects 자바스크립트 객체
자바스크립트에서는 스트링과 배열 같은 기본적인 자바스크립트 기능부터 자바스크립트 가장 상단에 놓여진 브라우저 API에 이르기까지 대부분의 것들이 객체들이다.  사용자는 관련된 함수들과 변수들을 효율적인 패키지로 추상화하거나 편리한 데이터 컨테이너로 작동하는 객체를 만들 수 있다. 언어에 대한 지식을 가지고 더 멀리 나아고자 한다면 자바스크립트의 객체 기반의 본질을 이해하는 것이 중요하다. 따라서 도움이 되는 모듈을 제공한다. 여기서 객체 이론 및 구문을 자세히 알려 줄 것이고, 사용자 정의 객체를 만드는 방법도 알아보도록 하겠다.
63 Inheritance in JavaScript
OOJS에 대한 온갖 잡지식을 설명했으니, 이 글에서는 부모 클래스에서 자식 클래스를 상속하는 방법을 알아봅니다. 덤으로 OOJS를 구현하는데 몇 가지 참고사항도 있습니다.
64 JSON으로 작업하기
In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.
65 JavaScript object basics API, this, 객체, 인스턴스, 자바스크립트
이 문서에서는 자바 스크립트 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 자바스크립트의 특징들도 다시 복습할 것입니다.  우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 사실을 다시 한번 복습하게 될 것입니다.
66 Object prototypes 객체 지향, 상속, 자바스크립트, 프로토타입
Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아봅니다.
67 Object-oriented JavaScript for beginners
자, 이제 기초 단계를 벗어나서,객체지향 JavaScript (OOJS) 을 보도록 하죠 — 이 문서에서 객체지향 (OOP) 이론에 대한 기초를 훑어본 후, 자바스크립트가 생성자와 함수를 통해 객체 클래스 개념을 따라했는지, 그리고 어떻게 객체를 만드는지 알아볼겁니다.
68 JavaScript 구성요소 가이드, 국제화, 소개, 자바스크립트, 초보자, 함수
이번장에서는 조건문, 루프, 함수, 이벤트 등 일반적으로 발생하는 코드 블록의 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정속에서 여기서 다룰내용을 살짝 지나가면서 보셨겠지만 여기서 좀더 심도있게 다루도록 하겠습니다.
69 Functions — reusable blocks of code
코딩에 있어서 또 하나의 중요한 개념은 바로 '함수'입니다. 함수란, 한 가지의 일을 수행하는 코드가 블럭으로 묶여있는 것을 말하며, 간단한 명령만으로 동일한 코드를 필요한 곳 마다 반복해서 사용하지 않을 수 있게 만들어 줍니다. 이번 장에서는 함수에 대한 기본 문법과 parameter및 scope, 그리고 호출 방법에 대해 설명합니다.
70 Making decisions in your code — 조건문
어느 프로그래밍 언어에서 코드는 결정을 해야하고, 다른 입력에 따라서 적절하게 행동해야 합니다. 예를 들어 게임에서 플레이어의 생명이 0이라면, 게임 오버입니다. 날씨 앱을 아침에 본다면, 일출 그래픽을 보여줘야 하고, 야간이 본다면 별과 달은 보여줘야합니다. 이 글에서 자바스크립트에서 조건문이 어떻게 동작하는지 알아볼 것입니다.
71 자바스크립트 첫걸음
먼저 자바스크립트로 뭔가를 만들기 전에, "자바스크립트가 뭐지?", "어떻게 생겼지?", "무엇을 할 수 있지?" 와 같은 근원적인 질문이 필요하다. 그러고 나서, 변수, 문자열, 숫자, 배열과 같은 벽돌을 하나하나씩 맞추는 것처럼 자세히 알아보아야 한다.
72 Arrays
배열은 하나의 변수에 다수의 데이터를 저장하는 좋은 방법이며, 이 글에서 배열의 생성, 검색, 추가, 삭제 등과 같은 내용을 통해 배열에 대해 알아볼 것입니다.
73 Handling text — strings in JavaScript
다음으로, 프로그래밍에서 어떤 텍스트가 호출되는지 문자열에 대해 알아볼까요? 이 게시물에서는 문자열 작성, 문자열의 따옴표 이스케이프 및 문자열 결합과 같이 JavaScript를 배울 때 문자열에 대해 알아야 할 모든 일반적인 사항을 살펴보겠습니다.
74 Silly story generator
이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼 것이다. 즐겨보자!!
75 문자열 제대로 다루기
이제까지 문자열의 기초를 살펴보았습니다. 이제부터 - 텍스트 문자열의 길이 찾기, 문자열 합치기 및 쪼개기 등과 같은- 내장 된 메서드를 사용하여 문자열에서 수행 할 수 있는 유용한 작업에 대해 생각해 봅시다. 문자열의 한 문자를 다른 문자로 대체하는 등의 작업을 수행합니다.
76 자바스크립트 기초
이제 우리는 자바스크립트에 대한 이론적인 몇몇 부분을 살펴볼 것이다. 이곳에서 무엇을 할 수 있는지 실용적인 연습을 통한 자바스크립의 기본적 사항들을 다루는 과정이 되겠다. 하나하나씩 "숫자맞추기" 게임을 간단하게 구성해나갈 것이다.
77 자바스크립트 문제해결
이전 수업에서 "숫자맞추기" 프로그램을 만들어봤을때, 프로그램이 돌아가지 않는다는 것을 볼 것이다. 하지만 여기서 자바스크립트의 에러를 찾고 고치는 방법에 대해 알려주니 겁먹지 말고 도전해보자!
78 자바스크립트란? Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Script
MDN의 JavaScript(자바스크립트) 초보자 과정에 온 걸 환영합니다. 먼저, 이 과정에서는 JavaScript를 좀 더 넓은 범위에서 알아보고, "JavaScript?", "어떻게 작동하지?" 와 같은  질문들에 스스로 답변해보면서 자바스크립트의 목적과 그 편리성에 대해 알아보겠습니다.
79 자바스크립트의 기본적인 연산 - 숫자와 연산자
In this article we have covered the fundamental information you need to know about numbers in JavaScript, for now. You'll see numbers used again and again, all the way through your JavaScript learning, so it's a good idea to get this out of the way now. If you are one of those people that doesn't enjoy math, you can take comfort in the fact that this chapter was pretty short.
80 필요한 정보를 저장하기-변수
앞선 두 수업을 듣고, 자바스크립트에 대해(웹 기술에서 어떻게 사용되는지, 큰 범위에서의 특징) 알아보았다. 이번 수업에서는 기본중에 기본인 자바스크립트의 주된 구성중 하나인 변수가 어떻게 이루어져 있는지 알아볼 것이다.
81 MDN의 학습 영역에 기여하는 방법 Documentation, MDN Meta, l10n:priority, 가이드, 배우기, 참여, 초보자
처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다. 그건 좋은 소식입니다!
82 Server-side website programming Beginner, CodingScripting, Intro, Landing, Learn, NeedsTranslation, Server, Server-side programming, Topic, TopicStub, 배우기, 서버, 서버 사이드 프로그래밍, 주제, 초보자
The Dynamic Websites(동적 웹사이트)  Server-side programming(서버-사이드 프로그래밍) 에 대한 주제는 동적 웹사이트를 생성하는 방법을 보여주는 과목(module) 시리즈이다;  (Dynamic Websites: HTTP 요구(requests)에 응답하여 요구에 맞는 정보를 전달하는 웹사이트) 각 과목들은 서버-사이드 프로그래밍의 포괄적인 소개를 제공한다. 기본적인 어플리케이션들을 생성하기 위한 Django (Python) 와Express (Node.js/JavaScript) 같은 웹 프레임워크를 사용하는 방법에 대한 초보자 레벨(beginner level)의 가이드도 포함한다.
83 Django 웹 프레임워크 (파이썬) 서버 사이드 프로그래밍, 장고, 초보자, 파이썬
Django는 파이썬으로 구성된 매우 인기 있고 완벽한 기능을 갖춘 서버측 웹 프레임워크입니다. 이 모듈에서는 Django가 웹 서버 프레임워크 중 가장 유명한 이유와 개발환경을 설정하는 방법, 그리고 이를 통해 자신만의 웹 애플리케이션을 만드는 법을 보여줍니다.
84 Django Tutorial Part 2: Creating a skeleton website
You have now created a complete skeleton website project, which you can go on to populate with urls, models, views, and templates.
85 Django Tutorial Part 3: Using models
In this article we've learned how models are defined, and then used this information to design and implement appropriate models for the LocalLibrary website.
86 Django Tutorial Part 4: Django admin site
That's it! You've now learned how to set up the administration site in both its simplest and improved form, how to create a superuser, and how to navigate the admin site and view, delete, and update records. Along the way you've created a bunch of Books, BookInstances, Genres and Authors that we'll be able to list and display once we create our own view and templates.
87 Django Tutorial Part 5: Creating our home page
We've now created the home page for our site — an HTML page that displays some counts of records from the database and has links to our other still-to-be-created pages. Along the way we've learned a lot of fundamental information about url mappers, views, querying the database using our models, how to pass information to a template from your view, and how to create and extend templates.
88 Django Tutorial Part 6: Generic list and detail views
Congratulations, our basic library functionality is now complete!
89 Django Tutorial Part 7: Sessions framework
You now know how easy it is to use sessions to improve your interaction with anonymous users.
90 Django Tutorial Part 8: User authentication and permissions
Excellent work — you've now created a website that library members can log in into and view their own content and that librarians (with the correct permission) can use to view all loaned books and their borrowers. At the moment we're still just viewing content, but the same principles and techniques are used when you want to start modifying and adding data.
91 Django 개발 환경 세팅하기
You now have a Django development environment up and running on your computer.
92 Django 소개 장고
Django의 첫번째 문서에서는 "Django가 뭐지?"라는 질문에 답해보고, Django 웹 프레임워크의 특별한 부분에 대해 전반적으로 살펴봅니다. 우리가 이 수업에서 자세히 다루지는 않을 고급 기능들까지 포함하여 간단하게 전반적인 부분을 살펴 볼겁니다. 또한, Django 애플리케이션을 구성하는 중요한 요소도 살펴보겠습니다. (물론 지금 시점에서는 테스트를 할 개발환경을 가지고 있지 않겠지만요.)
93 Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기
Writing test code is neither fun nor glamorous, and is consequently often left to last (or not at all) when creating a website. It is however an essential part of making sure that your code is safe to release after making changes, and cost-effective to maintain.
94 Django 튜토리얼 파트 11: Django 웹사이트 공개하기 Django deployment, django, heroku, whitenoise, 웹 서버, 장고, 장고 배포
당신은 이제 놀라운 LocalLibrary 웹사이트를 (테스트도 마치고) 만들었으니, 도서관 스태프나 회원들이 인터넷을 통해 이용할 수 있도록 공개된 웹 서버에 설치하길 원할 것이다. 이번 장에서는 웹사이트를 배포할수 있는 호스트를 살펴보는 방법에 대한 개요와 사이트를 실제 운운영하기위해 필요한 것들에 대해 설명한다.
95 Django 튜토리얼 파트 9: 폼(form)으로 작업하기
Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render and validate forms. Furthermore, Django provides generic form editing views that can do almost all the work to define pages that can create, edit, and delete records associated with a single model instance.
96 Django 튜토리얼: 지역 도서관 웹사이트
이번은 실전적인 튜토리얼 시리즈의 첫번째 파트로서 당신이 배울 내용을 설명하고, 이어지는 튜토리얼 시리즈에서 개발하고 개선시켜볼  "지역 도서관" 예제 웹사이트에 대한 개요를 제공한다.
97 Express 웹 프레임워크 (Node.js/JavaScript의 활용) Express, node.js, 서버, 시작, 웹프레임워크, 자바스크립트, 초보개발자
Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 제공되는 웹 프레임워크입니다. 이 장에서는 Express 프레임워크의 몇 가지 장점과 개발환경 설치 방법, 웹 개발과 배포작업의 방법을 다룹니다.
98 Express Tutorial Part 3: Using a Database (with Mongoose)
In this article we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement Book, BookInstance, Author and Genre models for the LocalLibrary website.
99 Express Tutorial Part 4: Routes and controllers
We've now created all the routes for our site, along with dummy controller functions that we can populate with a full implementation in later articles. Along the way we've learned a lot of fundamental information about Express routes, and some approaches for structuring our routes and controllers.
100 Express/Node 소개
첫번째 Express 수업에서는 Node, Express를 알아보고, Express 웹 프레임워크 제작의 전반에 대해 배우게 됩니다.
우선 주요 특징들에 대한 틀을 정리한 후 Express 어플리케이션을 구성하는 주요 구성요소들을 살펴볼 것입니다. (테스트할 개발환경은 아직이겠지만요)
101 Node server without framework
물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:
102 Server-side website programming first steps
서버사이드 프로그래밍 모듈에서 우린 서버사이드 프로그래밍에 대해 몇 가지 근본적인 질문을 한다.  — "그게 뭐야?", "클라이언트 사이드 프로그래밍과 뭐가 달라?",  "왜 쓸만해?". 그러면 우린 당신의 첫 웹사이트를 만드는 데에 필요한 가장 적합한 프레임 워크를 어떻게 정하는 지에 대한 적절한 지도와 함께가장 인기있는 서버 사이드 웹 프레임 워크들의 개요를 제공한다. 끝으로 높은 수준의 웹 서버 보안에 대한 소개를 제공한다.
103 Client-Server overview 서버측 프로그래밍
이 시점에서 서버 측 코드가 수행해야하는 작업을 잘 살펴보고 서버 측 웹 프레임 워크가 이를 쉽게 수행 할 수있는 몇 가지 방법을 알고 있어야합니다.
104 Introduction to the server side 서버, 서버측 프로그래밍, 초보자
MDN의 초심자용 서버측 프로그래밍 코스에 오신 것을 환영합니다! 첫번째 기사는 높은 수준의 서버측 프로그래밍을 살펴보고, "이게 뭐야?" , "클라이언트 측 프로그래밍과 어떻게 다르지?", 그리고 "이게 왜 유용한데?"같은 질문에 답할 것입니다. 이 기사를 읽은 뒤 당신은 웹 사이트가 서버측 코딩을 통해 이용 할 수 있는 추가적인 효과를 이해 할 수 있을것 입니다.
105 Server-side web frameworks
This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.
106 Website security 가이드, 보안, 서버측 프로그래밍, 웹 보안, 초보자, 학습
This article has explained the concept of web security and some of the more common threats that your website should attempt to protect against. Most importantly, you should understand that a web application cannot trust any data from the web browser! All user data should be sanitized before it is displayed, or used in SQL queries or file system calls.
107 Tools and testing
HTML, CSS, 자바스크립트와 같은 핵심 웹 기술들에 익숙해지고, 다양한 경험을 쌓고, 다양한 자원을 활용하고, 새로운 팁과 방법들을 배우면서, 여러분은 여러 종류의 도구들을 활용할 수 있게 될 겁니다. 미리 작성된 CSS 또는 자바스크립트 코드부터, 앱 테스트와 자동화 등. 여러분의 웹 프로젝트가 점점 커지고 복잡해지면 여러분은 이런 도구들과 신뢰성 있는 테스트를 필요로 할 것입니다. 이 파트에서는 이러한 도구들을 쓰거나 선택하기 위해 무엇을 알아야 하는지 알려줍니다.
108 Web 기술 Beginner, WebMechanics
이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.
109 WebGL Beginner, NeedsContent, NeedsTranslation, TopicStub, WebGL, 초보자
No summary!
110 WebGL by example Beginner, Example, Graphics, Learn, NeedsTranslation, TopicStub, WebGL
No summary!
111 Hello GLSL
No summary!
112 Hello vertex attributes
No summary!
113 WebGL 찾기
No summary!
114 간단한 색깔 애니메이션
No summary!
115 애니메이션 잘라내기
No summary!
116 코드에서의 텍스쳐
No summary!
117 클릭을 통한 청소
No summary!
118 Web과 함께 시작하기 Beginner, CSS, Design, Guide, HTML, Index, l10n:priority
전문적인 웹사이트를 생성하기 위해서는 아주 많은 작업이 필요합니다. 그러니 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는건 그리 어렵지 않으니 여기부터 시작하겠습니다.
119 CSS 기본 CSS, l10n:priority, 꾸미기, 스크립트 코딩, 웹, 초보자, 학습
HTML처럼, CSS는 진짜 프로그래밍 언어는 아닙니다. 마크업(markup) 언어도 아닙니다 — 그것은 style sheet 언어입니다. 즉, HTML 문서의 요소를 선택적으로 꾸밀 수 있게 해줍니다. 예를 들면, 어떤 HTML 페이지의 모든 문단(paragraph) 요소를 선택하고 그 문단 의 텍스트를 빨간색으로 바꾸기 위해 다음과 같은 CSS를 작성할 수 있습니다:
120 HTML 기본 Beginner, HTML, Learn, Web, l10n:priority
HTML 은 진짜 프로그래밍 언어가 아닙니다; 여러분의 컨텐츠에 구조를 정의하기 위한 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:
121 JavaScript 기본 자바스크립트
JavaScript (줄여서 "JS")는 HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(dynamic programming language)입니다. 이것은 Mozilla 프로젝트, Mozilla 재단, 그리고 Mozilla 법인의 공동 창설자인 Brendan Eich 에 의해 만들어졌습니다.
122 기본 소프트웨어 설치하기 Beginner, Browser, Learn, Setup, Tools, WebMechanics, l10n:priority
전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.
123 웹사이트 출판하기
웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.
124 웹사이트의 외관은 어떻게 할까요? Beginner, Learn, l10n:priority
무언가를 하기 전에, 여러분은 어떤 아이디어가 필요합니다. 웹사이트가 실제로 무엇을 해야하는지? 웹사이트가 기본적으로 무엇을 할 수 있는지, 하지만 여러분의 첫 시도를 위해선 이것을 간단히 할 필요가 있습니다. 우리는 제목과 사진, 그리고 몇 개의 문단을 포함한 간단한 웹페이지를 제작하는 것부터 시작할 것입니다.
125 웹의 동작 방식
이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.
126 파일 다루기 Beginner, CodingScripting, Files, Guide, HTML, l10n:priority
여러분의 웹사이트가 여러분이 소유한 컴퓨터에서 동작할 때, 여러분은 서버로 출판된 웹사이트의 파일 구조 그대로 담고 있는 한 폴더안에 관련된 모든 파일들을 유지해야 합니다. 이 폴더는 여러분이 원하는 어디에나 둘 수 있지만, 쉽게 찾을 수 있는 곳에 두어야 합니다. 아마도 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 최상위가 될 것입니다.
127 스킬 Index
여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:
128 접근성 ARIA, CSS, HTML, JavaScript, 랜딩, 모듈, 문서, 배우기, 비기너, 접근성
웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여 모범 사례(HTMLCSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.
129 What is accessibility?
This article should have given you a useful high level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. You should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why HTML is a good basis for accessibility.

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: urty5656
최종 변경자: urty5656,