recursal/MDN huggingface dataset:
새로운 지식을 사용하기
============

* 이전
* Overview: First steps

지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.

|  |  |
| --- | --- |
| 전제조건: | 
 이 평가를 시도하기 전에 나머지 CSS 기본 과목을 살펴보고 HTML 기본 사항
 (HTML 소개
 학습) 을 이해해야 합니다.
  |
| 목적: | CSS 를 가지고 놀면서 새로운 지식을 테스트하기 |

시작점
---

아래의 라이브 편집기에서 작업하거나 , 시작점을 다운로드 하여 자신의 편집기에서 작업할 수 있습니다. 이 페이지는 HTML 과 문서 head 의 시작점 CSS 가 포함된 단일 페이지 입니다. 원하는 경우 로컬 컴퓨터에서 예제를 만들 때, 이 CSS 를 별도의 파일로 옮길수 있습니다. 또는 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 도구를 사용하여 작업을 수행하십시오.

**참고:** 문제가 발생하면, 도움을 요청하십시오 — 이 페이지 하단의 평가 또는 추가 도움말 섹션을 참조하십시오.

CSS 를 사용한 작업
------------

다음 라이브 예는 CSS 를 사용하여 스타일이 지정된 전기(biography) 를 보여줍니다. 내가 사용한 CSS 속성은 다음과 같습니다 — 각 속성은 MDN 의 속성 페이지에 연결되어 더 많은 사용 예를 제공합니다.

* `font-family` (en-US)
* `color`
* `border-bottom`
* `font-weight`
* `font-size`
* `text-decoration`

나는 선택자, h1 및 h2 와 같은 스타일 요소를 혼합하여 사용했지만, 작업 제목 및 스타일을 위한 class 를 만들었습니다.

CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.

1. CSS color 키워드인 `hotpink` 를 사용하여 h1 제목을 분홍색으로 만듭니다.
2. CSS color 키워드 `purple` 을 사용하는 10px 점선 `border-bottom` 을 제목으로 지정하십시오.
3. h2 제목을 기울임 꼴로 만듭니다.
4. 연락처 세부 정보에 사용된 `ul` 에 `background-color` 를 `#eeeeee` 및 5px 의 단색 자주색 `border` 으로 만듭니다. `padding` 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.
5. 마우스를 가리키면 `green` 으로 만듭니다.

이 이미지와 비슷한 결과가 나옵니다.

![Screenshot of how the example should look after completing the assessment.](/ko/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

그런 다음 MDN CSS 참조 에서 이 페이지에 언급되지 않은 일부 속성을 찾아보고 시도해 보십시오!

여기에 오답이 없다는 것을 기억하십시오 — 이 단계의 학습에서는 약간의 즐거움을 가질 수 있습니다.

평가 또는 추가 도움
-----------

작업을 평가하고 싶거나 작업이 정체되어 도움을 요청하려는 경우:

1. 작업을 CodePen, jsFiddle 또는 Glitch 와 같은 온라인 공유 가능 편집기에 입력합니다.
2. MDN 토론 포럼 학습 카데고리 에 평가 및 도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다:
    * "CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.
    * 당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.
    * 온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.
    * 실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.
다음은 뭐죠?
-------

첫 번째 강의를 완료한 것을 축하합니다. 이제 CSS 에 대해 잘 이해하고 스타일 시트에서 발생하는 많은 부분을 이해할 수 있어야 합니다. 다음 강의인 CSS building blocks 에서는 여러 가지 주요 영역을 자세히 살펴보겠습니다.

* 이전
* Overview: First steps
일반 대열
=====

* 이전
* Overview: CSS layout
* 다음

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.) |
| 목표: | 
 변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는
 방법을 설명하기
  |

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

기본값으로 요소들은 어떻게 배치되는가?
---------------------

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 `display: block;` 속성값이나 양쪽의 성격이 혼합된 `display: inline-block;`을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드 (en-US)(*initial*: horizontal-tb)에 기초해 *블록 flow 방향*에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

이 모든 것을 설명하는 간단한 예를 살펴봅시다.


```html
<h1>기본 문서 flow</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p>
  기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의
  최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리
  너비 및 높이입니다.
</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 오버플로할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```



```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
}

span {
  background: white;
  border: 1px solid black;
}
```

요약정리
----

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

* 이전
* Overview: CSS layout
* 다음
HTML 테이블
========

HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화하는 것이며, 이 목적을 위해 여러 요소와 속성을 가지고 있습니다. 스타일링을 위해 약간의 CSS 와 HTML을 함께 사용하면 학교 수업 계획, 지역 수영장 시간표 또는 좋아하는 공룡이나 축구 팀 통계와 같은 웹 테이블 정보를 쉽게 표시 할 수 있습니다. 이 모듈은 HTML을 사용하여 표 형식의 데이터를 구성하는데 필요한 모든 정보를 제공 합니다.

전제조건
----

이 모듈을 시작하기 전에, 당신은 이미 HTML의 기본 지식을 가지고 있어야 합니다. — Introduction to HTML.

**참고:** 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.

가이드
---

이 모듈은 다음의 내용을 담고 있습니다.

HTML 테이블 기본

이 내용에서는 행(row)과 셀(cell), 머리말, 셀을 여러 열(col)과 행(row)으로 확장(span)하는 것과 같은 기본 사항을 다루는 HTML 표를 시작하고 스타일 지정을 위해 열의 모든 셀을 함께 그룹화하는 방법에 대해 설명합니다.

HTML 테이블 고급 기능 및 접근성

이 모듈의 두 번째 내용에서는 HTML 테이블의 캡션/요약 및 행을 테이블 머리, 본문 및 바닥글 세션으로 그룹화 하는 것과 같은 몇 가지 고급 기능을 살펴볼 뿐만 아니라 시각 장애가 있는 사용자를 위한 테이블의 접근성도 살펴보게 됩니다.

평가
--

행성 데이터 구성

우리의 테이블 평가에서 태양계의 행성에 대한 데이터 일부를 당신에게 제공하며, 그것을 가지고 HTML 테이블로 구성 하도록 합니다.
HTML 소개
=======

HTML은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어입니다. 이번 과정은 이 두 가지 주제에 대한 소개와 HTML을 이해하기 위해 알아야 하는 기본 개념과 문법을 설명합니다.

전제 조건
-----

이번 과정을 시작하기 전에, HTML에 대한 사전 지식은 필요하지 않습니다만, 기본적으로 컴퓨터 사용에 친숙해야 하고, 웹사이트의 콘텐츠를 탐색하는 정도의 웹을 사용할 줄 알아야 합니다. 기본 소프트웨어 설치에 있는 기본적인 작업 환경이 구축되어 있어야 하고, 파일 다루기에 있는 파일을 생성하고 관리하는 방법을 이해하고 있어야 합니다. 이 두가지 내용은 웹 시작하기를 위한 초급 과정입니다.

**참고:** 혹시, 파일을 생성하기 힘든 컴퓨터/테블릿 혹은 다른 기기에서 작업한다면, JSBin 이나 Thimble 같은 온라인 코딩 프로그램을 이용하여 대부분의 코드 예제를 작성해 볼 수 있습니다.

안내서
---

이 과정은 HTML의 모든 기초 이론을 학습하고, 몇몇 기법을 실습해 볼 수 있는 충분한 기회를 제공합니다. 아래와 같은 내용을 담고 있습니다.

HTML 시작하기

HTML을 시작하기 위한 초급 내용을 다룹니다. 요소, 속성을 정의하고, 한번쯤은 들어봤을지도 모르는 중요한 용어들을 알아보고 어디에 사용되는지 살펴봅니다. 또, HTML 요소를 구조화 하는 방법, 일반적인 HTML 페이지가 어떻게 구조화되는지를 알아보고, 언어의 중요한 기본 특징에 대해 설명합니다. 그러면서, 여러분들이 흥미를 가질 수 있도록 HTML 코드를 직접 작성해 보도록 하겠습니다.

head 안에는 무엇이 있나? HTML 메타 데이터

HTML 문서의 헤드는 페이지가 로딩될 때 웹 브라우저에는 보이지 않는 부분입니다. 페이지의 `<title>`, (HTML 콘텐츠에 스타일을 적용하고 싶다면) CSS 링크, 파비콘 링크, 그리고 메타데이터(문서의 작성자, 문서를 설명하기 위한 중요한 키워드와 같은 HTML에 대한 정보)와 같은 정보를 담고 있습니다.

HTML 텍스트 기본

HTML을 사용하는 주요 목적 중의 하나는 텍스트에 의미를 부여(**시맨틱**)하는 것인데, 그렇게 하면 브라우저는 화면에 어떻게 노출되어야 하는지 명확하게 알 수 있습니다. 이 글에서는 HTML을 이용하여 글의 제목과 문단의 구조에서 텍스트를 분리해 보고, 단어에 강조/중요도를 부여해보고, 리스트 만드는 법 등을 살펴 보겠습니다.

하이퍼링크 만들기

하이퍼링크는 웹을 웹(web, 거미줄, 연결을 의미)으로 만들어주는 것이기 때문에 굉장히 중요합니다. 이 글에서는 링크를 만드는데 필요한 문법을 설명하고, 링크의 사례들을 논의해 봅니다.

텍스트 조작 고급기법

HTML에는 텍스트를 조작하기 위한 많은 요소들이 있습니다. 이 글에는 다 담을 수는 없습니다. 이 글에서는 잘 알려지진 않았지만 알아두면 굉장히 유용한 요소들을 살펴보겠습니다. 인용구, 설명 목록, 소스 코드 혹은 관련 텍스트, 위첨자, 아래첨자, 연락 정보 등을 마크업 하는 방법을 알아보겠습니다.

문서와 웹사이트 구조 (en-US)

'문단'이나 '이미지'와 같은 페이지의 부분을 정의하는 것처럼, HTML은 '헤더', '네비게이션 메뉴', '주요 내용 컬럼'과 같은 웹사이트의 영역을 정의하는데도 사용됩니다. 이 글에서는 기본 웹사이트 구조를 설계하는 법을 살펴보고, 이 구조를 표현하기 위해 HTML로 직접 작성해 보겠습니다.

HTML 디버깅 (en-US)

HTML 작성은 잘 되었는데, 무언가 잘못되었고, 작업을 할 수 없다면 코드에서 에러가 발생하는 부분은 어디일까요? 이 글은 이런 상황에 도움을 줄 수 있는 도구들을 소개합니다.

평가
--

다음의 평가들은 위의 가이드에 있는 HTML 기본을 얼마나 이해하고 있는지 테스트 합니다.

마크업

우리는 모두 글자를 쓰는 법을 금방 배우게 됩니다. 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 여러분이 마크업 하는 것을 평가합니다.

페이지 콘텐츠 구조화

이 평가는 헤더, 푸터, 네비게이션 메뉴, 주요 콘텐츠, 사이드바를 담고 있는 간단한 웹 페이지의 구조를 HTML로 작성하는 능력을 테스트합니다.

같이 보기
-----

웹 지식 기본 1

HTML 소개 과정에서 논의된 많은 기법들을 살펴보고 테스트 해볼 수 있는 Mozilla 재단 과정이 있습니다. 학습자들은 이 여섯 가지의 과정에서 글을 읽고, 글을 작성하고, 참석하는데 친숙해 질 것입니다. 만들어 보고 협업하면서 탄탄한 웹의 토대를 찾아보세요.
멀티미디어와 임베딩
==========

우리는 이 과정에서 지금까지 많은 텍스트를 살펴 봤지만 텍스트만을 사용한 웹은 따분합니다. 보다 흥미로운 내용으로 웹을 생생하게 만드는 방법을 살펴 보도록 합시다! 여기에서는 HTML을 사용하여 이미지를 포함 할 수있는 다양한 방법과 비디오, 오디오 및 웹 페이지 전체를 포함하는 방법을 비롯하여 웹 페이지에 멀티미디어를 포함하는 방법을 살펴 보도록 하겠습니다.

전제조건
----

이 단원을 시작하기 전에 앞서 HTML소개에서 설명한대로 HTML에 대한 기본 지식이 있어야합니다. 이 모듈 (또는 이와 비슷한 것)을 사용해 보지 않았다면, 처음부터 다시 시작후 돌아오세요!

**참고:** 자신만의 파일을 만들수 없는 컴퓨터/테블릿/그외 기기에서 작업하는 경우, 코드 예제를 (대부분을) JSBin 이나 Glitch같은 온라인 코딩 프로그램을 통해 수행해 볼 수 있습니다

가이드
---

이 단원에는 웹 페이지에 멀티미디어를 삽입하는 모든 기본 사항을 설명하는 다음 문서가 포함되어 있습니다.

HTML 이미지

여기에는 고려해야할 다른 종류의 멀티미디어들이 있지만, 간단한 이미지를 웹페이지에 삽입하는데 사용되는 일반적인 `<img>` 엘리먼트를 사용하는것이 합리적입니다. 이번 내용에서는 `<figure>` 사용하여, 기본적인 내용 및 캡션을 주석으로 추가하는 방법, CSS 배경 이미지와의 관계에 대해 자세히 다룰 것입니다.

비디오와 오디오 컨텐츠 (en-US)

다음으로, `<video>` 와`<audio>` (en-US) 엘리먼트를 사용하여 페이지에 비디오 및 오디오를 포함하는 방법을 살펴 보겠습니다. 기본기능을 포함, 여러종류의 브라우저에 다양한 파일 포맷에 접근하는 법, 캡션 및 자막 추가, 구형 브라우저에 대한 폴백 (fallback) 추가 방법 등 다양한 기능을 제공합니다.

<object> 로부터 <iframe>까지 — 기타 임베딩 기술

여기서는 웹 페이지에 다양한 콘텐츠 유형을 삽입 할 수있게 해주는 몇가지 추가적인 요소를 살펴봅니다 : `<iframe>` (en-US), `<embed>` 그리고 `<object>` 엘리먼트입니다. `<iframe>`은 다른 웹 페이지를 삽입하기위한 것이고, 나머지 두 개는 PDF, SVG 및 플래시까지 포함 할 수 있습니다. — 이 기술들은 사라지는 중이지만 여전히 볼수 있을것입니다.

Vector graphics 웹에 추가하기

Vector graphics 는 특정한 상황에서 매우 유용할 수 있습니다. Vector graphics 는 PNG/JPG와 같은 일반적인 형식과 달리 확대 시 왜곡/픽셀레이트가 발생하지 않으며, 스케일링 시 매끄러운 상태를 유지할 수 있습니다. 이 글에서는 Vector graphics 가 무엇인지, 웹 페이지에 인기 있는 SVG 포맷을 포함시키는 방법에 대해 소개합니다.

Responsive images(반응형 이미지)

휴대전화에서 데스크톱 컴퓨터에 이르기까지, 웹을 검색할 수 있는 매우 다양한 유형의 장치들로 인해서 형성된 현대 웹 세계를 마스터하기 위한 필수적인 개념은 반응형 디자인입니다. 이는 다양한 화면 크기, 해상도 등에 맞춰 기능을 자동으로 변경할 수 있는 웹 페이지를 만드는 것을 말합니다. 이것은 나중에 CSS 모듈에서 훨씬 더 자세히 살펴보겠지만, 현재로서는 HTML이 `<picture>` (en-US) 요소를 포함하여 반응형 이미지를 만드는 데 사용할 수 있는 도구를 살펴보기로 하겠습니다.

평가
--

아래의 평가는 위의 가이드에서 다루는 HTML 기본 사항에 대한 이해를 테스트합니다.

Mozilla 스플래시 페이지 (en-US)

이 평가에서, 우리는 당신이 Mozilla 에 관한 모든 펑키한 스플래시 페이지에 몇 개의 이미지와 비디오를 추가하도록 하며, 이 모듈의 기사에서 논의된 몇 가지 기술에 대하여 당신의 지식을 테스트할 것입니다!

같이 보기
-----

이미지 위에 히트맵 추가 (en-US)

이미지 맵은 이미지 링크의 다른 부분을 다른 곳에 연결하는 메커니즘을 제공합니다(당신이 클릭하는 각 나라에 대한 추가 정보들과 연결되는 지도를 생각해 봅시다). 이 기술은 때때로 유용하게 활용될 수 있습니다.

Web literacy basics 2

멀티미디어 및 임베딩 모듈에서 다룬 몇 가지 기술을 탐구하고 테스트하는 훌륭한 Mozilla 기초 과정입니다. 웹 페이지 작성, 접근성을 위한 디자인, 리소스 공유, 온라인 미디어 사용, 오픈 작업(콘텐츠를 다른 사람이 자유롭게 사용할 수 있고 공유할 수 있도록 하는 것)의 기본 사항에 대해 자세히 알아볼 수 있습니다.
데이터 속성 사용하기
===========

HTML은 특정 요소와 연관되어야 하지만, 정의된 의미를 갖지 않는 데이터에 대한 확장성을 고려하여 설계되었습니다. `data-*` 속성은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와줍니다.

HTML 문법
-------

문법은 간단합니다. 속성의 이름이 `data-`로 시작하는 모든 속성은 데이터 속성입니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있습니다. 아래 `data` 사용법이 있습니다.


```html
<article
 id="electriccars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

JavaScript에서 접근하기
-----------------

JavaScript에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 `getAttribute()` (en-US)를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다. 예를 들어, `DOMStringMap` (en-US)은 `dataset` (en-US) 속성을 통해 읽어낼 수 있습니다.

`dataset` 객체를 통해 `data` 속성을 가져오기 위해선, `data-` 뒤의 속성 이름 부분을 사용해 속성을 가져옵니다(대시들은 camel case (en-US)로 변환되는 것에 주의하세요).


```js
const article = document.querySelector("#electric-cars");
// 아래 코드도 작동합니다.
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```


각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 `article.dataset.columns = 5`와 같이 설정하면 해당 속성을 `"5"`로 변경할 것입니다.

CSS에서 접근하기
----------

데이터 속성은 평문 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 `attr()` (en-US) 함수의 생성된 content 를 사용하면 됩니다.


```css
article::before {
  content: attr(data-parent);
}
```


CSS의 속성 선택자도 데이터에 따라 스타일을 변경하는 데 사용할 수 있습니다.


```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```


JSBin 예제에서 함께 작동하는 것을 볼 수 있습니다.

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS 선택자와 JavaScript 접근을 이용해서, display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast를 확인하세요(JSBin 예제).

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

문제점
---

보여야 하고 접근 가능한 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 인덱싱하지 못할 수도 있습니다.

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 `dataset`을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 `getAttribute()` (en-US)를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

Firefox 49.0.2(아마도 이전/이후의 버전)에서는, 1022 데이터를 초과하는 데이터 속성은 JavaScript(EcmaScript 4)가 읽지 못할 것입니다.

더 알아보기
------

* 이 글은 hacks.mozilla.org에서 JavaScript 및 CSS의 데이터 속성 사용에서 발췌되었습니다.
* 사용자 정의 속성은 SVG 2에서도 지원됩니다. 자세한 내용은 `SVGElement.dataset` 및 `data-\* (en-US)`를 참조하세요.
* Sitepoint의 HTML5 데이터 속성 사용 방법
과제: 문서 마크업하기
============

* 이전  (en-US)
* Overview: Introduction to HTML
* 다음

우리는 모두 글자를 쓰는 법을 금방 배우게 됩니다. 이 페이지에서 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 이 장에서는 하이퍼링크와 HTML `<head>` 요소뿐만이 아니라, 주어진 글을 HTML 기본/혹은 고급 텍스트 포맷팅 방식에 맞춰 다듬는 연습을 할 예정입니다.

|  |  |
| --- | --- |
| 필요한 사전 지식 | 
 이 장에 들어서기에 앞서 필요한 사전 지식에는
 HTML 시작하기,
 head 안에는 무엇이 있나? HTML 메타 데이터,
 HTML 텍스트 기본,
 하이퍼링크 만들기,
 텍스트 조작 고급기법
 등이 있습니다.
  |
| 목표 | 
 HTML 기본/고급 텍스트 포맷팅 방법, 하이퍼링크, HTML `<head>` 부분에
 무엇이 들어가는지에 대해 학습합니다.
  |

시작하기에 앞서
--------

프로젝트를 시작하기 위해서는 두 가지가 필요합니다. 마크업을 할 기본 텍스트와 HTML에 스타일을 입힐 CSS 코드입니다. 텍스트 편집기를 이용해 .html 파일을 만들거나 CodePen, jsFiddle 또는 Glitch와 같은 온라인 코딩 도구를 사용하여 작업을 진행합니다.

**참고:** 문제가 해결되지 않으면 이 페이지 하단의 평가 또는 추가 도움말 구획을 참조해 도움을 요청하세요.

프로젝트 요약
-------

이 프로젝트에서 여러분은 대학 인트라넷에 호스팅 되어야하는 편지를 마크업하는 것입니다. 이 문서는 예비 박사 과정 학생들이 보낸 질문에 대한 연구원의 답변입니다.

### 블록/구조적인 의미

* 당신은 전체 문서를 doctype을 비롯해 `<html>`, `<head>`, `<body>` 요소들을 이용하여 문서를 다듬어야 합니다.
* 일반적으로 이 문서는 다음과 같은 예시를 제외하고 단락과 제목의 구조로 마크업 해야합니다. 예시에는 가장 높은 단계의 제목("Re:" 줄) 1개와 두 번째 단계의 제목 3개가 있습니다.
* 적절한 목록 유형을 사용하여 학기 시작 날짜, 학습 과목, 이국적인 춤들을 표시 해야합니다.
* 2개의 주소를 `<address>` 요소 안에 넣어야 합니다. 주소의 각 줄은 새로운 줄에 배치하되, 새 문단에 넣지 않아야 합니다.
### 인라인 구조

* 발신자 및 수신자의 이름, "Tel:", "Email:"은 강조하여 표시해야 합니다.
* 문서의 네 날짜에는 기계가 읽을 수 있는 날짜가 포함된 적절한 요소가 있어야 합니다.
* 문서의 첫 번째 주소와 첫 번째 날짜에는 발신자 열의 클래스 속성 값이 있어야 합니다. 나중에 추가할 CSS는 원본 문서 레이아웃처럼 올바르게 정렬되도록 합니다.
* 문서의 본문에 "PhD", "HTML", "CSS", "BC", "Esq." 등 5가지 약어를 표기하여 각 약어의 확장어를 제공해야 합니다.
* 화학식 및 숫자 103과 104(10의 3과 4 거듭제곱)에 6개의 하위/상위 첨자를 적절하게 표시해야 합니다.
* 본문에서 중요도가 높은 적절한 단어를 두 개 이상 표시해야 합니다.
* 본문에 하이퍼링크가 있어야 하는 위치는 두 곳입니다. 제목과 함께 적절한 링크를 추가합니다. 링크가 가리키는 위치의 URL은 `http://example.com`처럼 기재하면 됩니다.
* 대학 모토 인용문과 인용문에 적절한 요소를 표시합니다.
### 문서의 머리글

* 문서의 문자 집합은 적절한 메타 태그를 사용하여 utf-8로 설정해야 합니다.
* 문서의 작성자는 적절한 메타 태그에 명시해야 합니다.
* 제공된 CSS는 적절한 태그 안에 포함되어야 합니다.
힌트와 팁
-----

* W3C HTML 유효성 검사기를 사용하여 HTML의 유효성을 검사합니다. 유효성 검사를 통과하면 보너스 점수를 받을 수 있습니다.
* 이 프로젝트를 수행하기 위해 CSS를 몰라도 상관없습니다. 제공된 CSS를 HTML 요소 안에 넣기만 하면 됩니다.
예제
--

다음 스크린샷은 마크업 후 문자가 어떻게 보일 수 있는지 보여주는 예시입니다.

![Example](/ko/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter/letter_screengrab_2.png)

평가 또는 추가 도움말
------------

평가를 받고 싶거나 막혀서 도움을 요청하고 싶은 경우에 읽으시면 됩니다.

1. CodePen, jsFiddle, Glitch와 같은 공유 가능한 온라인 편집기에 작성 코드를 넣습니다.
2. MDN 토론 포럼 학습 카테고리에서 평가 또는 도움을 요청하는 게시글을 작성합니다. 게시글에는 다음 내용이 포함되어야 합니다.
    * "문서 마크업에 대한 평가 필요"와 같은 설명이 포함된 제목입니다.
    * 이미 시도한 사항과 바라는 사항(예시: 문제가 발생하여 도움이 필요하거나 평가를 원하는 경우)에 대한 세부 내용을 작성합니다.
    * 평가받고 싶거나 도움이 필요한 경우에 대한 위의 1단계에서 제시한 것 처럼, 온라인 공유 가능 편집기 링크가 있어야합니다. 코드를 볼 수 없다면 코딩에 관한 문제가 있는 사람을 도와주기가 매우 어렵기 때문입니다.
    * 링크는 실제 프로젝트 또는 평가 페이지로 연결되는 링크로, 도움을 받고자 하는 문제를 확인할 수 있습니다.
* 이전  (en-US)
* Overview: Introduction to HTML
* 다음
콘텐츠 페이지 구조화
===========

* 이전
* Overview: Introduction to HTML

CSS를 사용하여 콘텐츠 페이지를 레이아웃할 수 있도록 구조화하는 것은 숙달해야 할 매우 중요한 기술이므로 이 장에서는 페이지가 어떻게 보일지 고려하고 그 위에 레이아웃을 구축할 적절한 구조적 의미론(Structural Semantics)을 선택하는 능력을 테스트합니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: | 
 이 장에 참여하기 전에
 문서 및 웹사이트 구조 (en-US)에 특히 중점을 두고 나머지 과정을 먼저 완료 해주시기 바랍니다.
  |
| 목표: | 웹 페이지 구조에 대한 지식과 예비 레이아웃 디자인을 마크업으로 표현하는 방법을 테스트합니다. |

시작 지점
-----

이 장을 시작하기 위해, 시작 에셋(asset)들을 담고 있는 zip 파일을 다운로드 해주시기 바랍니다.

zip 파일에는 다음이 포함되어 있습니다:

* 구조적 마크업을 추가하는 데 필요한 HTML.
* 마크업에 적용할 CSS.
* 페이지에서 사용되는 이미지들.

로컬 컴퓨터에서 예제를 만들거나, 또는 CodePen, jsFiddle, 또는 Glitch와 같은 온라인 도구를 사용하여 작업을 수행합니다.

**참고:** 만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 Assessment or further help 섹션을 보세요.

프로젝트 개요
-------

이 프로젝트의 과제는 조류 관찰 웹사이트의 홈페이지 콘텐츠를 가져와 페이지 레이아웃을 적용할 수 있도록 구조적인 요소를 추가하는 것입니다. 다음과 같은 요소들이 필요합니다:

* 페이지의 주요 제목(main title), 사이트 로고 및 탐색 메뉴가 포함된 사이트의 전체 너비에 걸친 헤더(header). 스타일이 적용되면 제목과 로고가 옆에 나란히, 그리고 탐색 메뉴는 이 두 항목 아래에 표시됩니다.
* 두 개의 열로 이루어진 메인 콘텐츠 영역 — 환영하는 텍스트를 담을 주요 블록(main block)과 이미지 썸네일을 담을 사이드바(sidebar).
* 저작권 정보 및 크레딧이 포함된 푸터(footer).

다음에 적합한 래퍼(wrapper)를 추가 해주시기 바랍니다:

* 헤더
* 탐색 메뉴
* 메인 콘텐츠
* 환영하는 텍스트
* 이미지 사이드바
* 푸터

또한 다음을 수행 해주시기 바랍니다:

* 시작 부분에서 제공된 기존 요소 바로 아래에 다른 `<link>` 요소를 추가하여 제공된 CSS를 페이지에 적용합니다.
힌트 및 팁
------

* W3C Nu HTML Checker를 사용하면 HTML, CSS, SVG에서 의도하지 않은 실수 — 다른 방법으로는 놓쳤을 수 있는 실수 — 를 찾아내어 수정할 수 있습니다.
* 이 장을 수행하기 위해 CSS를 알 필요 없이 제공된 CSS를 HTML 요소 안에 넣어주시기만 하면 됩니다.
* 제공된 CSS는 올바른 구조적인 요소들이 마크업에 추가되면 렌더링된 페이지에서 녹색으로 표시되도록 설계되었습니다.
* 만약 어떤 요소를 어디에 넣어야 할지 막히신다면 페이지 레이아웃의 간단한 블록 다이어그램을 그려서 각 블록을 감싸고 있어야 한다고 생각하는 요소를 적어보시기를 바랍니다. 이 방법은 매우 유용합니다.
예제
--

다음 스크린샷은 마크업이 적용된 후 홈페이지가 어떻게 보일 수 있는지 보여주는 예제입니다.

![The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message](/ko/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content/example-page.png)

평가 혹은 추가적인 도움
-------------

만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면:

1. 여러분의 작업을 CodePen, jsFiddle, 또는 Glitch와 같은 온라인에서 공유 가능한 에디터에 올리세요. 여러분은 코드를 직접 작성할 수도 있고, 혹은 위 섹션에 링크된 시작 파일을 사용할 수도 있습니다.
2. MDN Discourse forum Learning category에 평가 및/또는 도움을 요청하는 글을 작성하세요. 여러분의 글은 다음을 포함해야만 합니다:
    * "콘텐츠 페이지 구조화를 위한 평가 원함"과 같은 서술적인 제목.
    * 여러분이 이미 무엇을 시도해 봤는지, 그리고 우리가 무엇을 하기를 원하는지에 대한 설명. 예를 들자면, 막혀서 도움이 필요하다거나, 평가를 원한다거나 하는 설명을 포함해야 합니다.
    * (위의 단계 1에서 언급된) 온라인에서 공유 가능한 에디터에 있는, 여러분이 평가를 원하거나 도움이 필요한 예제의 링크. 이것은 익숙해지기에 좋은 습관입니다. 코딩 문제가 있는 누군가를 도울 때, 그들의 코드를 보지 못한다면 그들을 돕는 것은 몹시 힘듭니다.
    * 우리가 여러분이 도움을 원하는 문제를 찾을 수 있도록, 실제 과제나 평가 페이지의 링크.
* 이전
* Overview: Introduction to HTML
행성 데이터 구조화
==========

* 이전
* Overview: Tables

테이블 평가에서 우리는 태양계의 행성에 대한 일부 데이터를 제공하고, 이를 HTML 테이블로 구조화하도록 요청합니다.

|  |  |
| --- | --- |
| 사전 요구 사항: | 이 평가를 시도하기 전에 이 모듈의 모든 문서를 이미 읽어야 합니다. |
| 목표: | HTML 테이블 및 관련 기능에 대한 이해를 테스트합니다. |

시작점
---

평가를 시작하려면 blank-template.html, minimal-table.css, planets-data.txt의 로컬 복사본을 새 디렉토리에 만듭니다.

또는 JSBin 또는 Glitch와 같은 사이트를 사용하여 HTML, CSS 및 JavaScript를 붙여넣어 평가를 수행할 수 있습니다. 별도의 JavaScript/CSS 패널이 없는 온라인 편집기를 사용하는 경우, HTML 문서 내에 인라인 `<script>` 또는 `<style>` 요소로 넣을 수 있습니다.

**참고:** 궁금한 점이 있거나 도움이 필요하면 문의하세요. 이 페이지 하단의 평가 또는 추가 도움 섹션을 참조하세요.

프로젝트 개요
-------

당신은 학교에서 일하고 있습니다. 현재 학생들은 태양계의 행성을 공부하고 있으며, 행성에 대한 사실과 숫자를 쉽게 찾을 수 있는 데이터 세트를 제공하려고 합니다. 이 경우에는 HTML 데이터 테이블이 좋습니다. 사용 가능한 원시 데이터를 가져와서 아래의 단계를 따라 테이블로 변환해야 합니다.

### 완료해야 할 단계

다음 단계는 테이블 예제를 완료하기 위해 수행해야 할 작업을 설명합니다. 필요한 모든 데이터는 `planets-data.txt` 파일에 포함되어 있습니다. 데이터를 시각화하는 데 어려움이 있다면 아래의 실시간 예제를 참조하거나 다이어그램을 그려보십시오.

1. `blank-template.html`의 복사본을 열고, 외부 컨테이너, 테이블 헤더, 테이블 바디로 테이블을 시작합니다. 이 예제에는 테이블 푸터가 필요하지 않습니다.
2. 제공된 캡션을 테이블에 추가합니다.
3. 모든 열 헤더를 포함하는 행을 테이블 헤더에 추가합니다.
4. 모든 행 헤더를 의미론적으로 제목으로 만들어야 함을 기억하면서 테이블 바디 내에 모든 콘텐츠 행을 생성합니다.
5. 모든 콘텐츠가 관련 행성 옆에 표시된 원시 데이터와 동일한 셀에 배치되도록 합니다.
6. 행 및 열 헤더를 그들이 헤딩으로 작동하는 행, 열 또는 행 그룹과 명확하게 연결하기 위해 속성을 추가합니다.
7. 모든 행성 이름 행 헤더를 포함하는 열 주위에 검은색 테두리를 추가합니다.
힌트와 팁
-----

* 헤더 행의 첫 번째 셀은 비워 두어야 하며 두 열을 병합해야 합니다.
* 행성 이름 행 헤더(예: Saturn) 옆에 있는 그룹 행 헤더(예: Jovian planets)는 조금 까다롭습니다 — 각 항목이 올바른 수의 행과 열에 걸쳐 있는지 확인해야 합니다.
* 헤더를 행/열과 연결하는 한 가지 방법은 다른 방법보다 훨씬 쉽습니다.
예제
--

완성된 테이블은 다음과 같아야 합니다.

![복잡한 테이블에는 위에 캡션이 있습니다. 상단 행 셀은 열 헤더입니다. 헤더의 세 열이 있습니다. 첫 두 열은 병합된 셀을 가지며, 세 번째 열은 각 행에 대한 개별 헤더입니다. 모든 텍스트는 가운데 정렬됩니다. 헤더와 다른 모든 행에는 약간의 배경색이 있습니다.](/ko/docs/Learn/HTML/Tables/Structuring_planet_data/assessment-table.png)

또한 여기에서 실시간 예제를 확인할 수 있습니다(소스 코드를 보지 마세요 — 속임수를 쓰지 마세요!)

평가 또는 추가 도움
-----------

작업을 평가받고 싶거나 궁금한 점이 있거나 도움이 필요하면,

1. CodePen, jsFiddle, Glitch와 같은 온라인 공유 편집기에 작업을 넣습니다.
2. MDN Discourse 포럼 학습 카테고리에서 평가 및/또는 도움을 요청하는 게시물을 작성합니다. 게시물에는 다음이 포함되어야 합니다.
    * "행성 데이터 구조화에 대한 평가 원함"과 같은 설명적인 제목
    * 이미 시도한 것의 세부 사항과 우리에게 원하는 것; 예를 들어, 궁금한 점이 있거나 도움이 필요하거나 평가를 원한다고 알려주세요.
    * 평가하거나 도움이 필요한 예제의 링크를 온라인 공유 편집기에 제공합니다(위의 1단계에서 언급한 대로). 이것은 좋은 습관입니다 — 코드를 볼 수 없다면 코딩 문제에 도움을 주기가 매우 어렵습니다.
    * 도움을 원하는 질문이나 평가 페이지의 링크를 제공하여 해당 질문을 찾을 수 있도록 합니다.
* 이전
* Overview: Tables
JavaScript 첫걸음
==============

우리의 첫 번째 JavaScript 과정에서는, 현실적인 첫 JavaScript 예제 작성에 앞서 "JavaScript란 뭘까", "JavaScript는 어떻게 생겼을까", "JavaScript는 뭘 할 수 있을까"와 같은 핵심적인 질문에 답을 하겠습니다. 그다음으로는 변수, 문자열, 숫자, 배열과 같은 핵심 개념을 자세히 논의해 보겠습니다.

#### 프론트엔드 웹 개발자가 되고자 하시나요?

목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.

**시작하기**

필요한 사전 지식
---------

JavaScript를 몰라도 이번 과정 시작에는 문제가 없지만, HTML과 CSS는 어느 정도 친숙해야 합니다. JavaScript를 시작하기 이전에 우선 다음 과정부터 진행하시는 게 좋습니다.

* Web과 함께 시작하기 (아주 기본적인 JavaScript 소개도 포함)
* HTML 소개
* CSS 소개

**참고:** 파일을 만들 수 없는 컴퓨터나 태블릿, 기타 장치에서 작업을 하신다면 예제 코드의 대부분을 JSBin이나 Glitch 같은 온라인 코딩 프로그램에서도 시험할 수 있습니다.

구성
--

JavaScript가 뭔가요?

MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 첫 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다.

JavaScript에 발 담그기

JavaScript에 관한 이론과 용도를 약간 배우셨으니, 실용적인 따라해보기와 함께 하는 기초과정 단기 특강을 제공해드리겠습니다. 여기서는 간단한 "숫자 알아맞히기" 게임을 단계별로 차근차근 만들어봅니다.

뭐가 잘못됐을까요? JavaScript 문제 해결

이전 글에서 "숫자 알아맞히기" 게임을 만든 뒤에, 프로그램이 돌아가지 않는다는 것을 발견하실 겁니다. 두려워하지 마세요. 세 번째 글에서 JavaScript 프로그램의 오류를 찾고 고치는 팁을 배울 수 있습니다.

필요한 정보 저장하기 — 변수

앞선 글을 모두 읽으셨으면 이제 JavaScript가 뭔지, 뭘 할 수 있는지, 다른 웹 기술과 함께 어떻게 사용하는지, 주요 기능이 어떻게 생겼는지 등 넓은 윤곽을 그리실 수 있을겁니다. 이제 진짜 기초로 돌아가, JavaScript의 제일 기본적인 구성 요소를 어떻게 사용하는지 알아보겠습니다. 바로 변수입니다.

JavaScript의 기본 수학 — 숫자와 연산자

여기서는 JavaScript에서의 수학을 이야기하면서, 연산자와 다른 기능을 이리 저리 조합하여 숫자를 여러분의 뜻에 맞게 바꾸는 법을 배웁니다.

텍스트 다루기 — 문자열

우리의 시선을 이제 문자열로 돌릴 차례입니다. 프로그래밍에서 텍스트를 일컫는 단어죠. 이번 글에서는 JavaScript를 배울 때 문자열에 대해 알아둬야 하는 것, 예를 들어 문자열 생성, 문자열 안의 따옴표 처리, 문자열 합치기 등을 알아봅니다.

유용한 문자열 메서드

문자열의 기초를 탐구했으니, 한 단계 더 나아가 문자열의 길이 찾기, 문자열 합치고 나누기, 문자를 다른 문자로 치환하기 등 내장 메서드로 할 수 있는 유용한 작업에 대해 생각해봅니다.

배열

본 과정의 마지막 글에서는 배열에 대해 알아봅니다. 배열은 하나의 변수 이름 아래에 여러 데이터 목록을 저장하는 깔끔한 방법입니다. 배열이 왜 유용한지, 배열을 어떻게 생성하는지, 저장한 데이터를 회수하고, 추가하고, 제거하는 법 등을 배웁니다.

평가
--

다음 평가를 통해 JavaScript의 기초를 얼마나 이해했는지 시험할 수 있습니다.

바보같은 이야기 생성기

각자 배운 내용을 돌이켜보면서, 바보같은 이야기를 무작위로 만들어내는 앱을 제작해야 합니다. 행운을 빌어요!

같이 보기
-----

Learn JavaScript

성장하려는 웹 개발자에게 완벽한 자료입니다. 상호작용형 환경에서 자동화 평가의 안내를 받으며 짧은 강의들과 시험을 통해 JavaScript를 배워보세요. 처음 40개의 강의는 무료고, 전체 코스는 저렴한 1회 결제로 볼 수 있습니다.