Index

Found 153 pages:

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

코딩을 처음 접하는 분들에게 웹개발은 어려울 수 있습니다(그렇지만 저희가 최선을 다해 설명해드릴께요!). 그렇지만 당신이 웹 개발을 배우고 싶은 학생이든, 수업 자료를 찾는 선생님이든, 그리고 취미로 웹기술을 알고 싶은 사람이든 상관없이 편하게 공부할 수 있도록 하겠습니다.
2 CSS를 이용한 HTML 스타일링 익히기 Beginner, CSS, CodingScripting, Landing, Topic
CSS(Cascading Stylesheets – 종속형 스타일시트)는 HTML을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, CSS를 사용하면 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.
3 CSS 구성 블록 Beginner, CSS, Learn, NeedsTranslation, TopicStub, building blocks
이 강의에서는 CSS 첫 번째 단계 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서는 계단식 및 상속, 사용 가능한 모든 선택자 유형, 단위 크기 조정, 배경 및 테두리 스타일 지정, 디버깅 등을 살펴 봅니다.
4 CSS 값 과 단위
CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위를 살펴 보겠습니다.
5 CSS 구성
더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리성을 개선하기 위해, 다른 사용자가 사용하는 해결책을 간략하게 살펴보겠습니다.
6 CSS 디버깅
때로는 CSS 를 작성할 때 CSS 가 예상한 대로 동작하지 않는 문제가 발생합니다. 아마도 특정 선택자가 요소와 일치해야 하지만, 아무일도 일어나지 않거나 박스의 크기가 예상과 다릅니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고 모든 최신 브라우저에 포함된 DevTools 가 진행 상황을 찾는 데 어떻게 도움이 되는지 보여줍니다.
7 CSS 선택자
CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.
8 CSS 에서 항목 크기 조정
지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서는 CSS 를 통해 요소의 크기를 결정하는 다양한 방법을 요약하고 크기 조정과 관련하여 향후 도움이 될 몇 가지 용어를 정의합니다.
9 계단식 및 상속
이 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.
10 배경 및 테두리
이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.
11 상자 모델 디스플레이, 상자 모델, 씨에스에스, 여백, 초보자, 테두리, 패딩, 학습
씨에스에스에 포함되는 모든 요소의 외장은 상자이며, 이 상자를 이해하는 것은 씨에스에스 조판을 생성하거나, 항목을 다른 항목과 대비해 정렬 능력을 갖추게 해주는 열쇠입니다. 이번 단원에서 우리는 씨에스에스 상자 모델을 제대로 살펴보겠습니다. 상자의 작동 방식과 상자와 관련된 용어를 이해함으로써 더 복잡한 조판 작업으로 넘어갈 수 있도록합니다.
12 이미지, 미디어 및 양식 요소nts
In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
13 콘텐츠 overflow
이번 수업에서는 CSS 의 또 다른 중요한 개념인 — overflow 를 살펴봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.
14 텍스트 표시 방향 제어하기
CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되는 콘텐츠에 매우 깔끔하게 매핑되며, 기본적으로 웹은 오른쪽에서 왼쪽으로 쓰는 언어 (예: 아랍어) 보다 왼쪽에서 오른쪽으로 쓰는 언어 (예: 영어 또는 프랑스어) 를 더 잘 지원하는 경향이 있습니다.
15 표 스타일링
HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기좋게 만드는 방법에 대한 안내서를 제공합니다.
16 CSS 레이아웃 가변상자, 격자, 다단, 단위, 부동, 부동체, 씨에스에스, 안내서, 위치잡기, 조판, 초보자, 테이블, 학습
이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치하는 방법을 살펴볼 때입니다. 우리는 필요한 전제조건을 다루었기 때문에 이제 CSS 레이아웃에 깊이 뛰어들어 다른 디스플레이 설정, 플렉스박스, CSS 그리드, 포지셔닝과 같은 현대적인 레이아웃 도구, 그리고 당신이 여전히 알고 싶어할 만한 레거시 기술들을 살펴볼 수 있다.
17 CSS 레이아웃 입문서 가변상자, 격자, 글, 대열, 부동체, 씨에스에스, 위치잡기, 입문서, 조판, 초보용, 테이블, 학습
이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 display 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.
18 Flexbox 문서, 안내서, 용어집, 초보자, 코딩스크립팅, 학습
flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.
19 Floats 다단, 안내서, 정리, 초보자, 코딩스크립팅
원래 텍스트 블록 내에서 float 이미지를 위한 float 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 float 속성은 이 문서에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.
20 그리드 그리드, 그리드 레이아웃, 씨에스에스, 아티클, 안내서, 자습서, 초보자, 코딩스크립팅, 학습
CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.
21 다단 레이아웃 CSS 붕괴, 다단, 다단 레이아웃, 안내서, 초보자, 학습
CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 문서는 그 기능을 어떻게 사용하는지 설명합니다.
22 레거시 조판 메서드 격자 시스템, 레거시, 부동체, 씨에스에스, 안내서, 조판, 초보자, 학습
격자 시스템은 씨에스에스 조판에서 사용되는 매우 일반적인 기능이며, 씨에스에스 격자 조판 이전에는 부동체 또는 기타 조판 기능을 이용하여 격자 조판이 구현되는 경향이 있었습니다. 당신의 조판을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 당신의 콘텐츠 열을 그 가상의 열 안에 끼워맞춥니다. 이 문서에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.
23 미디어 쿼리 초보자 안내서 미디어 쿼리, 씨에스에스, 조판, 초보자, 학습
CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.
24 반응형 디자인 가변상장, 격자, 다단, 미디어 쿼리, 반응형 웹 디자인, 유동 격자, 이미지, 타이포크래피
웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.
25 위치잡기 고정, 글, 상대, 씨에스에스, 안내서, 위치잡기, 절대, 조판, 초보자, 코딩스크립팅
당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 position 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.
26 이전 브라우저 지원 가변상자, 격자, 기능 쿼리, 레거시, 부동체, 씨에스에스, 안내서, 조판, 초보자, 학습
이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.
27 일반 대열 격자형, 부동, 씨에스에스, 일반 대열, 조판, 초보자, 학습
이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.
28 CSS 첫 번째 단계
CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 모듈은 작동 방식, 구문의 모양 및 HTML에 스타일을 추가하기 위해, 이를 사용하는 방법에 대한 기본 사항을 통해 CSS 를 마스터 하는 과정을 부드럽게 시작합니다.
29 CSS 란 무엇인가?
CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.
30 CSS 로 시작하기
이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.
31 CSS 의 구조
CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 혼란스러워 하는 개념을 발견하면, 이 개념으로 돌아와서 요약할 수 있습니다.
32 CSS 작동 방식
CSS 기본 사항, CSS 의 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.
33 새로운 지식을 사용하기
지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.
34 일반적인 CSS 문제 해결하기
다음 링크들은 일반적인 CSS 문제들에 대한 해결방법을 제공합니다.
35 내용물
CSS 시작하기 안내서 9번째 장; 이번에는 CSS에서Document에 표시될 내용물을 추가 하는 방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.
36 텍스트 스타일링 CSS, 그림자, 리스트, 모듈, 웹 폰트, 초보자, 폰트
CSS 기초가 어느 정도 완성되었다면,  여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 글꼴 과 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 사용자 정의 글꼴을 설정하고 리스트와 링크를 꾸며줌으로써 이 강의를 끝마칩니다.
37 기본적인 텍스트 및 글꼴 스타일링
We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.
38 목록 스타일링
Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.
39 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.
40 How do you upload files to a web server?
당신은 이미 간단한 웹 페이지를 만들었습니다.(you have built a simple page 참조), 이제 웹 서버에 올려 온라인에 공개하고 싶을 겁니다. 우리는 이러한 방법을 FTP를 통해 다뤄보고자 합니다.
41 What are hyperlinks?
보통 링크라고 불리는 하이퍼링크는 웹에서 기본적인 개념이다. 링크가 무엇인 지 설명하기 위해, 웹의 매우 기본적인 구조로 돌아볼 필요가 있다.
42 What is a URL? URL, urls, 자원, 초급자, 초보자
HypertextHTTP 함께, URL 은 웹에서 중요한 개념 중 하나이다.  URL은 웹에 게시된 어떤 자원을 찾기 위해서 browsers에 의해 사용되는 메카니즘이다 .
43 What is a domain name?
도메인 이름은 인터넷 인프라의 핵심 부분입니다. 인터넷에서 사용할 수있는 모든 웹 서버에 대해 사람이 읽을 수있는 주소를 제공합니다.
44 What software do I need to build a website? 초보자
당신은 웹 개발에 필요한 대부분의 프로그램들을 무료로 다운 받을 수 있습니다. 우리는 이 글에서 몇 개의 링크를 제공할 것입니다. 당신은 1) 웹페이지를 생성하고 편집하기, 2) 웹 서버에 파일을 업로드하기, 3) 웹 페이지 보기 를 위한 툴들이 필요할 것입니다.
45 나의 웹사이트를 설계하기 위해서는? 능동학습필요, 초보자
웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 
46 로컬 테스트 서버 설치하기 Express, Flask, Learn, Node, PHP, django, lamp, 서버, 서버측, 초보자, 파이썬
학습 영역의 대부분에서 여러분의 예제를 브라우저에서 직접 열기만 하면 된다고 말할 것입니다 — HTML 파일을 더블 클릭하거나 그 파일을 브라우저 창에 끌어다 놓거나, 또는 File > Open... 메뉴에서 해당 HTML 파일을 선택하면 됩니다. 이를 수행하는 방법은 많습니다.
47 어떤 HTML 기능이 접근성을 촉진할까?
이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다.
48 웹 사이트가 제대로 동작하는지 확인하는 방법
개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?
49 웹 서버란 무엇일까?
"Web server"는 하드웨어, 소프트웨어 혹은 두 개 모두를 의미할 수 있습니다.
50 웹페이지, 웹사이트, 웹서버 그리고 검색엔진의 차이는 무엇일까요? 웹동작, 웹작동, 초보자
이번 글에서는 다양한 웹 관련 개념들을 이야기합니다: 웹, 페이지, 웹사이트, 웹서버, 검색엔진. 이런 용어들은 흔히ㅣ웹을 처음 배우는 사람이나 잘못 배운 사람들에게 혼란스럽습니다. 이것들이 무엇을 의미하는 지 배워봅시다!
51 인터넷은 어떻게 동작하는가?
인터넷은 웹의 핵심적인 기술입니다. 인터넷의 가장 기본적인 것은, 컴퓨터들이 서로 통신 가능한 거대한 네트워크라는 것입니다.
52 HTML Beginner, HTML, 입문자
웹사이트를 만들기 위해서는 웹 페이지 구조 정의의 토대가 되는 기술인 HTML에 대해 알아야 합나다. HTML은 작성하고자 하는 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지인지, 멀티미디어 플레이어인지, 폼 요소인지 아니면 기타 사용 가능한 다른 요소들 중의 하나인지, 혹은 새롭게 정의한 요소인지를 명확하기 인지할 수 있도록 하는데 사용됩니다.
53 HTML tables HTML, 가이드, 모듈, 초보자, 테이블
HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화하는 것이며, 이 목적을 위해 여러 요소와 속성을 가지고 있습니다. 스타일링을 위해 약간의 CSS 와 HTML을 함께 사용하면 학교 수업 계획, 지역 수영장 시간표 또는 좋아하는 공룡이나 축구 팀 통계와 같은 웹 테이블 정보를 쉽게 표시 할 수 있습니다. 이 모듈은  HTML을 사용하여 표 형식의 데이터를 구성하는데 필요한 모든 정보를 제공 합니다.
54 HTML 소개 CodingScripting, HTML, Landing
HTML은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어입니다. 이번 과정은 이 두 가지 주제에 대한 소개와 HTML을 이해하기 위해 알아야 하는 기본 개념과 문법을 설명합니다.
55 Advanced text formatting
텍스트 서식에 있어서  HTML text fundamentals 에서 이야기 하지 않은 수많은 요소들이 있습니다. 이 글에서 설명하는 요소들은 비교적 많이 알려져 있지않지만 여전히 유용합니다. (그리고 이것은 완전한 목록이 아닙니다.). 이 글에서 여러분은 인용구, 서술문, 컴퓨터 코드 및 관력 텍스트, 첨자, 위첨자, 연락처 정보 등을 표시하는 방법에 대해 알아봅시다.
56 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.
57 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.
58 HTML 디버깅
HTML을 작성을 할 수 있지만, 문제가 생겼을 때  코드의 오류가 발생한 부분을 해결할 수 없나요? 이 기사에서는 HTML의 오류를 찾고 수정하는 데 도움이되는 몇 가지 도구를 소개합니다.
59 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!
60 Marking up a letter
프로젝트를 시작하기 위해서는 두 가지가 필요합니다. raw text you need to mark up와 CSS you need to include입니다. 텍스트 편집기를 이용해 .html 파일을 만들거나 사이트 - JSBin 이나 Thimble 를 이용하여 프로젝트를 할 수도 있습니다.
61 head 태그에는 무엇이 있을까? HTML의 메타데이터
HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 <title> 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면),  파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 이 글에서는 위 내용들과 그 이상에 대해 다룰 것입니다. 이것은 head에 있어야하는 마크업이나 다른 코드들을 다루는데 좋은 기초가 될 것입니다.
62 하이퍼링크 만들기 a태그, 웹하이퍼링크, 하이퍼링크
하이퍼 링크는 중요하다. — 웹을 웹답게 만들기 때문이다. 이 글에서는 링크를 만드는데 필요한 구문을 보여주고 링크의 모범 사례를 설명한다.
63 HTML 폼 가이드
이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다.
64 HTML_폼_구성_방법
HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.
65 Sending and retrieving form data
많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.
66 나의 첫 HTML 폼
이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTMLCSS)
67 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.
68 데이터 속성 사용하기 HTML, HTML5, 가이드, 예제, 웹, 전용 데이터 속성
HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.
69 약자 표시 및 이해시키는 방법 HTML, 초보
항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)
70 Multimedia and embedding Assessment, Audio, Beginner, CodingScripting, Flash, Guide, HTML, Images, Landing, Learn, NeedsTranslation, SVG, TopicStub, Video, iframes, imagemaps, responsive
우리는 이 과정에서 지금까지 많은 텍스트를 살펴 봤지만 텍스트만을 사용한 웹은 따분합니다. 보다 흥미로운 내용으로 웹을 생생하게 만드는 방법을 살펴 보도록 합시다! 여기에서는 HTML을 사용하여 이미지를 포함 할 수있는 다양한 방법과 비디오, 오디오 및 웹 페이지 전체를 포함하는 방법을 비롯하여 웹 페이지에 멀티미디어를 포함하는 방법을 살펴 보도록 하겠습니다.
71 HTML의 이미지
처음에는 웹에 텍스트만 있었고 조금 지루했습니다. 다행히도 웹 페이지 안에 이미지 (및 보다 흥미로운 유형의 컨텐츠)를 삽입하는 기능이 추가되기까지는 오래 걸리지 않았습니다. 시작해볼 수 있는 다른 유형의 멀티미디어가 있지만 단순한 이미지를 웹 페이지에 삽입하는 데 사용되는 <img> 요소로 쉽게 시작해 보겠습니다. 이 글에서는 기초내용 부터 심층적으로 사용하는 방법, <figure>를 사용하여 캡션을 주석으로 추가하는 방법, <css>배경 이미지와 관련된 사용 방법을 자세히 설명합니다.
72 반응형 이미지
전형적인 시나리오를 생각해 보자. 전형적인 웹사이트에는 헤더 이미지가 있을 것이고, 헤더 밑 본문에는 이미지가 몇 개 있을 것이다. 헤더 이미지는 헤더의 전체 가로 너비를 자치할 것이고, 본문 이미지는 본문 열 너비 안에서 어느정도를 차지할 것이다. 예를 들면 이런 식으로 말이다.
73 비디오 그리고 오디오 컨텐츠
And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>.
74 Index Index, Learn, MDN Meta
Found 153 pages:
75 Infrastructure
이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:
76 JavaScript - 동적인 클라이언트측 스크립트 언어 Beginner, JavaScript, 입문, 입문자, 자바스크립트, 자바스크립트 입문자
JavaScript 는 웹 페이지의 복잡한 것들을 구현할 수 있는 프로그래밍 언어입니다. 웹페이지는 단순히 변하지 않고 정적인 정보들만 보여주는 것 이상의 일을 합니다. 시간의 흐름에 따라 업데이트 되는 콘텐츠, 동적인 지도와 움직이는 2D/3D 그래픽, 또는 스크롤 가능한 비디오 쥬크박스들과 여러 가지들을 보여줍니다. 여러분은 '아마도 JavaScript 그 일들을 하고 있겠구나'라고 생각하실 수 있습니다.
77 Asynchronous JavaScript Beginner, CodingScripting, Guide, JavaScript, Landing, NeedsTranslation, Promises, TopicStub, async, asynchronous, await, callbacks, requestAnimationFrame, setInterval, setTimeout
In this module we take a look at asynchronous JavaScript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.
78 Cooperative asynchronous JavaScript: Timeouts and intervals
이 장에서는 자바스크립트가 설정된 시간이 경과하거나 혹은 정해진 시간 간격(예 : 초당 설정된 횟수)으로 비동기 코드를 작동하는 전형적인 방법을 살펴본다. 그리고 이 방법들이 어떤 것에 유용한지 얘기해 보고, 그 본질적인 문제에 대해 살펴본다.
79 Graceful asynchronous programming with Promises
Promises 는 이전 작업이 완료될 때 까지 다음 작업을 연기 시키거나, 작업실패를 대응할 수 있는 비교적 새로운 JavaScript 기능입니다.
80 Introducing asynchronous JavaScript
이 문서에선 JavaScript의 동기식 처리와 관련된 문제를 간략하게 요약하고, 앞으로 접하게 될 다른 비동기 기술들을 살펴보며, 어떻게 우리에게 도움이 될 수 있는지 살펴봅니다.
81 Making asynchronous programming easier with async and await
Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 async functions 그리고 await 키워드 입니다.(ECMAScript Next support in Mozilla를 참조하세요). 이러한 기능들은 Promise기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 만들어줍니다. 이 기능을 사용하면 비동기 코드를 구식 동기 코드처럼 보여주기 때문에 충분히 배울 가치가 있습니다.이번 문서에서 위의 기능을 어떻게 사용하는지 배울 것 입니다.
82 일반적인 비동기 프로그래밍 개념 비동기, 비동기 프로그래밍, 자바스크립트
이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.
83 Client-side web APIs
웹 사이트 또는 응용 프로그램 용 client-side JavaScript를 작성할때 API (응용 프로그램 프로그래밍 인터페이스)를 사용하지 않으면 많은것을 만들기 어렵습니다. API는 사이트가 실행되고 있는 브라우저와 운영 체제의 다양한 부분 그리고 웹 사이트 혹은 서비스의 데이터를 다룰 수 있는 인터페이스입니다. 이번장에서 우리는 API가 무엇인지, 그리고 개발할 때 자주 접하게 될 보편적인 API를 사용하는 방법에 대해 살펴볼 것입니다.
84 Client-side storage
That's it for now. We hope you've found our rundown of client-side storage technologies useful.
85 JavaScript 객체 소개 객체, 배우기, 입문자, 자바스크립트, 지침, 코딩스크립트, 평가
자바스크립트에서는 스트링과 배열과같은 기본적인 기능부터 가장 상단에 놓여진 브라우저 API에 이르기까지 대부분의 것들이 객체입니다. 사용자는 관련된 함수들과 변수들을 효율적인 패키지로 추상화하거나 편리한 데이터 컨테이너로 작동하는 객체를 만들 수 있습니다. 언어에 대한 지식을 가지고 더 멀리 나아고자 한다면 자바스크립트의 객체 기반의 본질을 이해하는 것이 중요하므로, 여러분을 돕기위해 이 모듈을 제공하였습니다. 여기에서는 객체 이론과 구문을 자세히 가르쳐드리며, 사용자 정의 객체를 만드는 방법도 알아볼 것입니다.
86 Inheritance in JavaScript
OOJS에 대한 온갖 잡지식을 설명했으니, 이 글에서는 부모 클래스에서 자식 클래스를 상속하는 방법을 알아봅니다. 덤으로 OOJS를 구현하는데 몇 가지 참고사항도 있습니다.
87 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.
88 JavaScript 객체 기본 API, this, 객체, 객체 리터럴, 괄호 표기법, 구문, 배우기, 이론, 인스턴스, 입문자, 자바스크립트, 점 표기법, 코딩스크립트
이 글에서는 JavaScript 객체와 관련된 기본적인 문법을 살펴보고 이전 코스에서 학습해서 이미 알고 있는 JavaScript 의 특징들과 우리가 이미 사용하고 있는 기능들이 이미 객체와 관련되어 있다는 사실을 다시 한번 복습할 것입니다.
89 Object prototypes 객체 지향, 상속, 자바스크립트, 프로토타입
Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아봅니다.
90 Object-oriented JavaScript for beginners Article, Beginner, CodingScripting, JavaScript, Learn, l10n:priority
자, 이제 기초 단계를 벗어나서,객체지향 JavaScript (OOJS) 을 보도록 하죠 — 이 문서에서 객체지향 (OOP) 이론에 대한 기초를 훑어본 후, 자바스크립트가 생성자와 함수를 통해 객체 클래스 개념을 따라했는지, 그리고 어떻게 객체를 만드는지 알아볼겁니다.
91 JavaScript 구성요소 가이드, 국제화, 소개, 자바스크립트, 초보자, 함수
이번 장에서는 조건문, 반복문, 함수, 이벤트 등 일반적으로 발생하는 코드 종류를 중심으로 JavaScript의 중요한 기본 기능에 대해 설명합니다. 지금까지의 과정을 지나면서 여기서 다룰 내용을 살짝 보셨겠지만 좀 더 심도있게 다루겠습니다.
92 Build your own function
이번 장에선 앞의 글에서 배운 function이론을 사용하여 사용자 정의 함수를 만들어 봅니다. 사용자 정의 함수 연습과 더불어, 함수를 다루는 몇 가지 유용한 사항들도 설명을 하겠습니다.
93 Looping code for문, 반복문, 초보자
프로그래밍 언어는 다양한 작업을 통해 반복적 인 작업을 신속하게 처리 할 수 ​​있습니다. 이제 우리는 JavaScript를 사용하여 반복 구문을 사용하여 편리하게 처리 할 수 ​​있습니다.
94 Making decisions in your code — 조건문
어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.
95 함수 — 재사용 가능한 코드 블록
코딩에 있어서 또 하나의 중요한 개념은 바로 '함수'입니다. 함수란, 한 가지의 일을 수행하는 코드가 블럭으로 묶여있는 것을 말하며, 간단한 명령만으로 동일한 코드를 필요한 곳마다 반복해서 사용하지 않을 수 있게 만들어 줍니다. 이번 장에서는 함수에 대한 기본 문법과 파라미터(parameter) 및 범위(scope), 그리고 호출 방법에 대해 설명합니다.
96 JavaScript 첫걸음 Article, Beginner, CodingScripting, Guide, JavaScript, Landing, l10n:priority
첫 과정에서는 "JavaScript가 뭔가요?", "어떻게 생겼나요?", "뭘 할 수 있나요?"와 같은 근본적인 질문을 먼저 해결한 뒤에 JavaScript를 직접 사용해봅니다. 그 다음으로는 변수, 문자열, 숫자, 배열 등 중요한 구성 성분을 하나씩 자세히 알아봅니다.
97 Arrays
배열은 하나의 변수에 다수의 데이터를 저장하는 좋은 방법이며, 이 글에서 배열의 생성, 검색, 추가, 삭제 등과 같은 내용을 통해 배열에 대해 알아볼 것입니다.
98 JavaScript가 뭔가요? Article, Beginner, CodingScripting, Guide, JavaScript, Learn, Script
MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.
99 Silly story generator
이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼 것이다. 즐겨보자!!
100 문자열 다루기 — 문자열 가이드, 강좌, 따옴표, 문자열, 자바스크립트, 초보자, 코딩
다음으로, 프로그래밍에서 어떤 텍스트가 호출되는지 문자열에 대해 알아볼까요? 이 게시물에서는 문자열 작성, 문자열의 따옴표 이스케이프 및 문자열 결합과 같이 JavaScript를 배울 때 문자열에 대해 알아야 할 모든 일반적인 사항을 살펴보겠습니다.
101 문자열 제대로 다루기
이제까지 문자열의 기초를 살펴보았습니다. 이제부터 - 텍스트 문자열의 길이 찾기, 문자열 합치기 및 쪼개기 등과 같은- 내장된 메서드를 사용하여 문자열에서 수행할 수 있는 유용한 작업에 대해 생각해 봅시다. 문자열의 한 문자를 다른 문자로 대체하는 등의 작업을 수행합니다.
102 자바스크립트 기초
이제 우리는 자바스크립트에 대한 이론적인 몇몇 부분을 살펴볼 것이다. 이곳에서 무엇을 할 수 있는지 실용적인 연습을 통한 자바스크립의 기본적 사항들을 다루는 과정이 되겠다. 하나하나씩 "숫자맞추기" 게임을 간단하게 구성해나갈 것이다.
103 자바스크립트 문제해결
이전 수업에서 "숫자맞추기" 프로그램을 만들어봤을때, 프로그램이 돌아가지 않는다는 것을 볼 것이다. 하지만 여기서 자바스크립트의 에러를 찾고 고치는 방법에 대해 알려주니 겁먹지 말고 도전해보자!
104 자바스크립트의 기본적인 연산 - 숫자와 연산자
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.
105 필요한 정보를 저장하기-변수
앞선 두 수업을 듣고, 자바스크립트에 대해(웹 기술에서 어떻게 사용되는지, 큰 범위에서의 특징) 알아보았다. 이번 수업에서는 기본중에 기본인 자바스크립트의 주된 구성중 하나인 변수가 어떻게 이루어져 있는지 알아볼 것이다.
106 Solve common problems in your JavaScript code 자바스크립트, 초보자, 학습
코드가 작동하지 않거나 브라우저가 무언가가 undefined라고 불평하면 모든 변수 이름, 함수 이름 등을 정확하게 입력했는지 확인하십시오.
107 MDN의 학습 영역에 기여하는 방법 Documentation, MDN Meta, l10n:priority, 가이드, 배우기, 참여, 초보자
처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다. 그건 좋은 소식입니다!
108 Server-side website programming Beginner, CodingScripting, Intro, Landing, Learn, Server, Server-side programming, Topic
The Dynamic Websites(동적 웹사이트)  Server-side programming(서버-사이드 프로그래밍) 에 대한 주제는 동적 웹사이트를 생성하는 방법을 보여주는 과목(module) 시리즈이다;  (Dynamic Websites: HTTP 요구(requests)에 응답하여 요구에 맞는 정보를 전달하는 웹사이트) 각 과목들은 서버-사이드 프로그래밍의 포괄적인 소개를 제공한다. 기본적인 어플리케이션들을 생성하기 위한 Django (Python) 와Express (Node.js/JavaScript) 같은 웹 프레임워크를 사용하는 방법에 대한 초보자 레벨(beginner level)의 가이드도 포함한다.
109 Django 웹 프레임워크 (파이썬) 서버 사이드 프로그래밍, 장고, 초보자, 파이썬
Django는 파이썬으로 구성된, 인기 많고 완벽한 기능을 갖춘 서버-사이드 웹 프레임워크입니다. 이 모듈은 Django가 웹 서버 프레임워크 중 가장 유명한 이유, 개발환경을 설정하는 방법, 그리고 이를 통해 자신만의 웹 애플리케이션을 만드는 방법을 알려줍니다.
110 Django Tutorial Part 3: Using models
이 문서에서는 LocalLibrary 웹사이트의 모델을 어떻게 정의할지 보여줄 것입니다. 모델이라는 것이 무엇인지, 어떻게 선언하는지, 그리고 주된 필드 타입들에 대해서 설명합니다. 그리고 모델의 데이터에 접근할 수 있는 몇몇 방법에 대해서 간단히 보여줄 것입니다.
111 Django Tutorial Part 4: Django admin site
LocalLibrary website의 모델을 만들었으므로, 우리는 Django Admin 을 이용해서 "실제" book data를 추가할 것입니다. 첫째로 우리는 당신에게 관리자 사이트에 모델들을 등록는 방법과, 이후 어떻게 로그인해서 데이터를 만들지를 보여줄 것입니다. 끝으로는 Admin site를 더 개선할 수 있는 방법들에 대해서 알아볼 것입니다.
112 Django Tutorial Part 5: Creating our home page
우리는 이제 첫 전체 페이지를 보여주는 코드를 추가할 때가 되었습니다 — LocalLibrary website를 위한 홈페이지를요. 이 홈페이지는 각각의 모델 타입마다 갖고 있는 레코드들의 숫자를 보여주고, 우리의 다른 페이지들로 이동할 수 있는 사이드바 내비게이션 링크들을 제공합니다. 이 섹션에서 우리는 기본 URL 맵과 뷰들을 작성하고, 데이터베이스에서 레코드들을 가져오고 그리고 탬플릿을 사용하는 것에 대한 연습 경험을 가질 수 있습니다.
113 Django Tutorial Part 6: Generic list and detail views
이 튜토리얼은 LocalLibrary website에 책과 저자의 목록과 세부 페이지를 추가 하여 확장할 것입니다. 이 글에서 우리는 제네릭 클래스-기반 뷰(generic class-based views)에 대해 배울 것이며, 그것이 일반적인 사용 사례를 위해 작성해야 하는 코드들을 줄이는 방법을 보여줄 것입니다. 우리는 또한 URL 처리에 대해 더 세부적으로 알아볼 것이며, 기본 패턴 매칭(basic pattern matching)을 수행하는 방법을 보여줄 것입니다.
114 Django Tutorial Part 7: Sessions framework
이 튜토리얼에서는 LocalLibrary website을 확장시킬 것입니다. 방문 수를 셀 수 있는 session-based 기능을 더한 홈페이지입니다. 이것은 상대적으로 간단한 예제인데, 이는 당신의 홈페이지에서 익명의 유저들에게 지속적으로 서비스를 제공하는 session framework의 사용법입니다.
115 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.
116 Django web application security
Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our LocalLibrary website. We've also provided a brief overview of some of the other protections.
117 Django 개발 환경 세팅하기 개발환경, 들어가기, 설치, 장고, 초심자, 파이썬
이제 장고가 무엇인지 알았으니, 윈도우, 리눅스(우분투), 맥 OS X에서 어떻게 장고 개발환경을 세팅하는지, 설치 후에는 어떻게 테스트하는지 살펴보겠습니다. 즉 이 문서를 통해서는 사용하고 있는 운영체제가 무엇인지와 상관없이 장고 어플리케이션 개발을 시작하기 위해 필요한 것들을 배우게 됩니다.
118 Django 소개 장고
Django의 첫번째 문서에서는 "Django가 뭐지?"라는 질문에 답해보고, Django 웹 프레임워크의 특별한 부분에 대해 전반적으로 살펴봅니다. 우리가 이 수업에서 자세히 다루지는 않을 고급 기능들까지 포함하여 간단하게 전반적인 부분을 살펴 볼겁니다. 또한, Django 애플리케이션을 구성하는 중요한 요소도 살펴보겠습니다. (물론 지금 시점에서는 테스트를 할 개발환경을 가지고 있지 않겠지만요.)
119 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.
120 Django 튜토리얼 파트 11: Django 웹사이트 공개하기 Django deployment, django, heroku, whitenoise, 웹 서버, 장고, 장고 배포
당신은 이제 놀라운 LocalLibrary 웹사이트를 (테스트도 마치고) 만들었으니, 도서관 스태프나 회원들이 인터넷을 통해 이용할 수 있도록 공개된 웹 서버에 설치하길 원할 것이다. 이번 장에서는 웹사이트를 배포할수 있는 호스트를 살펴보는 방법에 대한 개요와 사이트를 실제 운운영하기위해 필요한 것들에 대해 설명한다.
121 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.
122 Django 튜토리얼: 지역 도서관 웹사이트
이번은 실전 튜토리얼 시리즈의 첫번째 파트로서 당신이 배울 내용을 설명하고, 이어지는 튜토리얼 시리즈에서 개발하고 개선시켜볼  "지역 도서관" 예제 웹사이트에 대한 개요를 제공한다.
123 장고 튜토리얼 강좌 2 : 뼈대 사이트 만들기 가이드, 입문서, 장고, 초심자, 튜토리얼
장고 튜트리얼의 두 번째 기사에서는 웹 사이트 프로젝트의 기본 뼈대(skeleton)를 만들고, 사이트의 특성에 맞춰 설정, 경로, 모델, 뷰 및 템플릿을 다루는 방법을 보여줍니다.
124 Express 웹 프레임워크 (Node.js/JavaScript의 활용) Express, node.js, 서버, 시작, 웹프레임워크, 자바스크립트, 초보개발자
Express는 JavaScript로 작성되고 Node.js 런타임 환경에서 구동되는 인기 있는 웹 프레임워크입니다. 이 장에서는 Express 프레임워크의 몇 가지 장점과 개발환경 설치 방법, 웹 개발과 배포작업의 방법을 다룹니다.
125 Express Tutorial Part 2: 스켈레톤 웹사이트 만들기
You have now created a skeleton website project for the Local Library and verified that it runs using node. Most importantly, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.
126 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.
127 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.
128 Express/Node 소개
첫번째 Express 수업에서는 Node, Express를 알아보고, Express 웹 프레임워크 제작의 전반에 대해 배우게 됩니다.
우선 주요 특징들에 대한 틀을 정리한 후 Express 어플리케이션을 구성하는 주요 구성요소들을 살펴볼 것입니다. (테스트할 개발환경은 아직이겠지만요)
129 Node 개발 환경을 설치하기 CodingScripting, Express, Node, nodejs, npm, 개발 환경, 배움, 서버-사이드, 인트로, 초보자
You now have a Node development environment up and running on your computer that can be used for creating Express web applications. You've also seen how NPM can be used to import Express into an application, and also how you can create applications using the Express Application Generator tool and then run them.
130 Node server without framework
물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:
131 Server-side website programming first steps
서버사이드 프로그래밍 모듈에서 우리는 서버사이드 프로그래밍에 대해 몇 가지 근본적인 질문을 합니다.  — "그게 뭐야?", "클라이언트 사이드 프로그래밍과 뭐가 달라?",  "왜 쓸만해?". 여기서 우리는 여러분의 첫 웹사이트를 만드는 데에 필요한 가장 적합한 프레임워크를 어떻게 정하는 지에 대한 적절한 지도와 함께 가장 인기있는 서버 사이드 웹 프레임워크들의 개요를 제공합니다. 끝으로 높은 수준의 웹 서버 보안에 대한 소개를 제공합니다.
132 Client-Server overview 서버측 프로그래밍
이 시점에서 서버 측 코드가 수행해야하는 작업을 잘 살펴보고 서버 측 웹 프레임 워크가 이를 쉽게 수행 할 수있는 몇 가지 방법을 알고 있어야합니다.
133 Introduction to the server side 서버, 서버측 프로그래밍, 초보자
MDN의 초심자용 서버측 프로그래밍 코스에 오신 것을 환영합니다! 첫번째 기사는 높은 수준의 서버측 프로그래밍을 살펴보고, "이게 뭐야?" , "클라이언트 측 프로그래밍과 어떻게 다르지?", 그리고 "이게 왜 유용한데?"같은 질문에 답할 것입니다. 이 기사를 읽은 뒤 당신은 웹 사이트가 서버측 코딩을 통해 이용 할 수 있는 추가적인 효과를 이해 할 수 있을것 입니다.
134 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.
135 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.
136 Tools and testing
HTML, CSS, 자바스크립트와 같은 핵심 웹 기술들에 익숙해지고, 다양한 경험을 쌓고, 다양한 자원을 활용하고, 새로운 팁과 방법들을 배우면서, 여러분은 여러 종류의 도구들을 활용할 수 있게 될 겁니다. 미리 작성된 CSS 또는 자바스크립트 코드부터, 앱 테스트와 자동화 등. 여러분의 웹 프로젝트가 점점 커지고 복잡해지면 여러분은 이런 도구들과 신뢰성 있는 테스트를 필요로 할 것입니다. 이 파트에서는 이러한 도구들을 쓰거나 선택하기 위해 무엇을 알아야 하는지 알려줍니다.
137 Git and GitHub GitHub, git, 깃허브
모든 개발자는 버전 관리 시스템 (VCS)을 사용하거나 앞으로 그럴 것이다. VCS는 다른 개발자와의 협업 시 코드 중복작성으로 인한 손실을 방지해 주고, 문재가 생겼을 시 이전 버전으로의 롤백을 쉽게 해준다. 가장 유명한 VCS는 Git이고, 그와 관련된 소셜 코딩 사이트는 GitHub이다. 이 글은 이 두가지에 대해 설명할 것이다.
138 Understanding client-side JavaScript frameworks
자바스크립트 프레임워크는 최신 프론트엔드 웹 개발의 필수 부분으로, 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공합니다. 많은 현대 기업들은 프레임워크를 도구화(tooling)의 표준 부분으로 사용하기때문에, 프론트엔드 개발에는 이제 프레임워크 경험이 필요합니다.
139 Web 기술 Beginner, WebMechanics
이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.
140 Web과 함께 시작하기 Beginner, CSS, Design, Guide, HTML, Index, l10n:priority, 가이드, 초보자
전문적인 웹사이트를 생성하기 위해서는 매우 많은 작업이 필요합니다. 그러니 웹 개발이 처음이라면, 처음은 작게 시작해보세요. 지금 당장 Facebook을 만들 수는 없지만, 자신만의 간단한 온라인 웹사이트를 만드는 건 그리 어렵지 않으니 여기부터 시작하겠습니다.
141 CSS 기초 CSS, l10n:priority, 꾸미기, 스크립트 코딩, 웹, 초보자, 학습
HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.
142 HTML 기본 Beginner, HTML, Learn, Web, l10n:priority, 입문자
HTML 은 프로그래밍 언어가 아닙니다;  컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소(elements)로 이루어져 있습니다. tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:
143 JavaScript 기본 자바스크립트
JavaScript (줄여서 "JS")는 HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(dynamic programming language)입니다. 이것은 Mozilla 프로젝트, Mozilla 재단, 그리고 Mozilla 법인의 공동 창설자인 Brendan Eich 에 의해 만들어졌습니다.
144 기본 소프트웨어 설치하기 Beginner, Browser, Learn, Setup, Tools, WebMechanics, l10n:priority
전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.
145 웹사이트 출판하기
웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.
146 웹사이트의 외관은 어떻게 할까요? Beginner, Learn, l10n:priority
무언가를 하기 전에, 여러분은 어떤 아이디어가 필요합니다. 웹사이트가 실제로 무엇을 해야하는지? 웹사이트가 기본적으로 무엇을 할 수 있는지, 하지만 여러분의 첫 시도를 위해선 이것을 간단히 할 필요가 있습니다. 우리는 제목과 사진, 그리고 몇 개의 문단을 포함한 간단한 웹페이지를 제작하는 것부터 시작할 것입니다.
147 웹의 동작 방식
이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.
148 파일 다루기 Beginner, CodingScripting, Files, Guide, HTML, l10n:priority
여러분의 웹사이트가 여러분이 소유한 컴퓨터에서 동작할 때, 여러분은 서버로 출판된 웹사이트의 파일 구조 그대로 담고 있는 한 폴더안에 관련된 모든 파일들을 유지해야 합니다. 이 폴더는 여러분이 원하는 어디에나 둘 수 있지만, 쉽게 찾을 수 있는 곳에 두어야 합니다. 아마도 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 최상위가 될 것입니다.
149 스킬 Index
여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:
150 접근성 ARIA, CSS, HTML, JavaScript, 랜딩, 모듈, 문서, 배우기, 비기너, 접근성
웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여 모범 사례(HTMLCSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.
151 HTML: 접근성을 위한 기초 HTML, HTML 접근성, 스크린리더, 시멘틱, 시멘틱 웹, 시멘틱웹, 웹 접근성, 접근성 향상
You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.
152 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.
153 모바일 접근성
In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing.