korean translation

exercises/each/problem.ko.md

@@ -0,0 +1,30 @@
+# EACH 반복문
+
+`@each` 지시어는 보통 `@each $var in <list or map>`의 형식으로 사용됩니다. `$var`는 어떠한 변수나 들어갈 수 있습니다. `$length`, `$name` 같은 변수가 들어갈 수 있으며 `<list or map>` 와 같이 리스트나 맵을 반환하는 Sass 스크립트 표현도 가능합니다.
+
+`@each`는 리스트나 맵의 각각의 항목에 `$var`를 할당하여, `$var`가 가진 값을 이용해 스타일을 출력합니다. 예를 보시죠.
+
+```scss
+@each $animal in puma, sea-slug, egret, salamander {
+  .#{$animal}-icon {
+    background-image: url('/images/#{$animal}.png');
+  }
+}
+```
+
+컴파일되는 CSS입니다.
+
+```css
+.puma-icon {
+  background-image: url('/images/puma.png'); }
+.sea-slug-icon {
+  background-image: url('/images/sea-slug.png'); }
+.egret-icon {
+  background-image: url('/images/egret.png'); }
+.salamander-icon {
+  background-image: url('/images/salamander.png'); }
+```
+
+# 과제
+
+`@each` 를 사용해서 선택자들을 생성하는 Sass 스크립트를 한 번 만들어 보세요. 선택자의 이름은 `.#{$big-cat}-picture`의 형식으로 `$big-cat`에는 'cheetah', 'puma', 'jaguar', 'panther', 'tiger', 'leopard'가 들어가야 합니다. 그리고 모든 선택자에 '3em' 값을 가진 `padding` 스타일을 설정하세요.

exercises/extend_inheritance/problem.ko.md

@@ -0,0 +1,52 @@
+# 확장/상속
+
+Sass의 강력한 기능 중 하나가 바로 확장과 상속입니다. `@extend`를 사용하여 선택자 간에 css 속성들을 공유할 수 있습니다. 이것은 Sass에서 불필요한 반복 작업을 줄여줍니다. 그럼 한 번 예제를 볼까요? 에러, 경고, 성공 메시지를 만들어 보겠습니다.
+
+```scss
+.message {
+  border: 1px solid #ccc;
+  padding: 10px;
+  color: #333;
+}
+
+.success {
+  @extend .message;
+  border-color: green;
+}
+
+.error {
+  @extend .message;
+  border-color: red;
+}
+
+.warning {
+  @extend .message;
+  border-color: yellow;
+}
+```
+
+위의 코드는 `.message` 선택자에 있는 속성들을 `.success`, `.error`, `.warning` 선택자들이 상속을 받고 있습니다. 이것은 HTML에 여러 개의 클래스 이름을 쓰지 않아도 되도록 도와줍니다. 이 scss파일로 생성되는 CSS는 다음과 같습니다.
+
+```css
+.message, .success, .error, .warning {
+  border: 1px solid #cccccc;
+  padding: 10px;
+  color: #333;
+}
+
+.success {
+  border-color: green;
+}
+
+.error {
+  border-color: red;
+}
+
+.warning {
+  border-color: yellow;
+}
+```
+
+# 과제
+
+`.push-button` 선택자에 `background-color: blue` 스타일을 추가한 뒤, .main-button 선택자가 그것을 상속받게 하세요. 그리고 추가로 .main-button 선택자에는 `font-weight: bold` 스타일도 설정해주세요.

exercises/for_loop/problem.ko.md

@@ -0,0 +1,27 @@
+# FOR 반복문
+
+`@for` 지시어는 일련의 스타일을 반복해서 출력합니다. 반복마다 카운터 변수를 사용해서 출력을 조정합니다. 지시어는 두 가지의 형태가 있습니다. `@for $var from <start> through <end>`와
+`@for $var from <start> to <end>` 입니다. `through`와 `to`의 차이점에 주의하세요. `$var`는 `$i`와 같이 어떤 변수도 들어갈 수 있습니다. `<start>`와 `<end>`는 항상 정수를 반환하는 Sass 스크립트입니다. `<start>`가 `<end>`보다 큰 값이 지정되면, 카운터 변수는 반복마다 증가 대신 감소합니다.
+
+`@for`문은 `$var`에 지정한 범위 내의 연속된 숫자들을 할당하여, 반복마다 `$var`의 값을 사용하여 중첩된 스타일을 지정합니다. `from ... through`의 형식의 경우 `<start>`와 `<end>`의 값을 포함하지만, `from ... to`의 형식인 경우 `<start>`와 `<end>`의 값은 포함되지 않습니다. 다음은 `through`를 사용한 경우입니다.
+
+```scss
+@for $i from 1 through 3 {
+  .item-#{$i} { width: 2em * $i; }
+}
+```
+
+컴파일되는 CSS입니다.
+
+```css
+.item-1 {
+  width: 2em; }
+.item-2 {
+  width: 4em; }
+.item-3 {
+  width: 6em; }
+```
+
+# 과제
+
+`@for` 지시어를 사용하여 `h1`부터 `h6`까지의 요소를 만드세요. 각 요소는 `font-size` 스타일을 갖고 있고 값은 `24px`에서 `3px` 곱하기 헤딩 레벨의 숫자를 뺀 값입니다. 예를 들어 헤딩 레벨이 `h1` 이라면 `font-size`의 값은 `24px - 3px * 1`가 되어 `21px`가 할당됩니다.

exercises/imports/problem.ko.md

@@ -0,0 +1,47 @@
+# 가져오기(IMPORTS)
+
+CSS는 파일들을 작게 나누어 관리를 쉽게 하는 가져오기(IMPORTS) 기능이 있습니다. 하지만 단점이 있는데 CSS 내에서 `@import`를 사용할 때마다 HTTP request가 만들어집니다. Sass도 CSS와 같이 `@import`를 사용합니다. 하지만 HTTP request는 만들어지지 않고, 대신에 가져온 파일들을 하나의 CSS로 합쳐서 브라우저에 전달합니다.
+
+실제 코드로 확인해봅시다. \_reset.scss 와 base.scss 두 파일이 있습니다. \_reset.scss을 base.scss에 가져와 봅시다.
+
+```scss
+// _reset.scss
+
+html,
+body,
+ul,
+ol {
+   margin: 0;
+  padding: 0;
+}
+```
+
+```scss
+// base.scss
+
+@import 'reset';
+
+body {
+  font: 100% Helvetica, sans-serif;
+  background-color: #efefef;
+}
+```
+
+reset.scss을 가져오기 위해, base.scss의 상단에 `@import 'reset';` 을 사용했습니다. 파일을 가져올 때 .scss 확장자는 필요하지 않습니다. Sass는 똑똑하거든요. 알아서 파일을 가져옵니다. 이 파일로 CSS를 만들면 이렇게 됩니다:
+
+
+```css
+html, body, ul, ol {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font: 100% Helvetica, sans-serif;
+  background-color: #efefef;
+}
+```
+
+# 과제
+
+'#ff0000' 값을 가진 `$color` 변수를 선언한 뒤 별도의 스타일 시트로 저장하세요. 그리고 그 스타일 시트를 포함한 다음 `$color` 변수를 body 선택자의 color 스타일로 설정해보세요.

exercises/interpolation/problem.ko.md

@@ -0,0 +1,39 @@
+# 삽입
+
+선택자 이름을 지정하거나 선택자 안에서도 변수를 사용할 수 있습니다. `#{}`를 삽입해서 변수가 들어갈 곳을 지정하세요. 예제를 보시죠.
+
+```scss
+$name: foo;
+$attr: border;
+p.#{$name} {
+  #{$attr}-color: blue;
+}
+```
+
+컴파일되는 CSS입니다.
+
+```css
+p.foo {
+  border-color: blue; }
+```
+
+ `#{}`를 사용해서 스타일의 값을 지정할 수도 있습니다. 하지만 대부분의 경우 그냥 변수를 사용하는 것이 더 좋습니다. `#{}`를 사용함으로써의 좋은 점은 `#{}`를 둘러 싼 모든 연산이 일반 CSS로 처리된다는 것입니다. 예제를 보시죠.
+
+```scss
+p {
+  $font-size: 12px;
+  $line-height: 30px;
+  font: #{$font-size}/#{$line-height};
+}
+```
+
+컴파일되는 CSS입니다.
+
+```css
+p {
+  font: 12px/30px; }
+```
+
+# 과제
+
+문자열 'article'을 가진 변수 `$selector`를 선언하세요. 그리고 선택자의 이름에 `$selector`를 삽입하세요. 그리고 color 스타일을 추가해서 #ff0000를 할당하세요.

exercises/mixin_content/problem.ko.md

@@ -0,0 +1,34 @@
+# MIXIN CONTENT
+
+Mixin에 스타일 블록을 넘겨주기
+
+mixin 내부의 스타일을 설정하는 방법으로, 스타일 블록을 통째로 넘겨줄 수도 있습니다. 이 스타일 블록은 mixin 내부의 `@content` 에 설정됩니다. 이 기능은 선택자와 지시어의 구성에 관한 추상화를 가능하게 합니다.
+
+예를 들면:
+
+```scss
+@mixin apply-to-ie6-only {
+  * html {
+    @content;
+  }
+}
+@include apply-to-ie6-only {
+  #logo {
+    background-image: url(/logo.gif);
+  }
+}
+```
+
+css 생성결과:
+
+```css
+* html #logo {
+  background-image: url(/logo.gif);
+}
+```
+
+주의: `@content` 지시어가 한 번 이상 혹은 루프 문 안에서 사용되는 경우, 스타일 블록이 각각의 호출에 중복되어 나타납니다.
+
+# 과제
+
+이전 과제에서 만든 `border` mixin에 `@content` 지시어를 추가하세요. 그리고 이전 과제에서 만든 `img` 선택자에서 border를 `@include` 할 때, `@content`에 추가될 내용으로 `border-style` 스타일을 `solid` 값으로 설정하세요.

exercises/mixins/problem.ko.md

@@ -0,0 +1,29 @@
+# MIXINS
+
+CSS 작성 시에 지루한 작업이 몇몇 있습니다. 특히 CSS3에 존재하는 많은 접두사가 그렇습니다. 이때 mixin을 사용하면 css 그룹 선언을 할 수 있습니다. 함수처럼 인자를 받아서 값을 설정할 수도 있습니다. 특히 mixin은 각 업체가 제공하는 접두사를 그룹 선언할 때 유용합니다. 예를 한번 보시죠.
+
+```scss
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+     -moz-border-radius: $radius;
+      -ms-border-radius: $radius;
+          border-radius: $radius;
+}
+
+.box { @include border-radius(10px); }
+```
+
+mixin을 만들려면 `@mixin` 이라는 지시어와 함께 이름을 지정해줘야 합니다. 여기서 우리는 `border-radius` 이라는 이름을 지정해 줬습니다. 또한 `$radius` 라는 변수를 괄호 안에 지정해서 어떤 값이라도 지정할 수 있도록 만들었습니다. mixin을 사용하려면 `@include` 뒤에 mixin의 이름을 지정한 뒤에 css 스타일처럼 사용하면 됩니다.
+
+```css
+.box {
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  border-radius: 10px;
+}
+```
+
+# 과제
+
+직접 mixin을 만들어봅시다. 이름은 `border`, 인자로 `$thickness` 를 받고, `border-width` 스타일에 인자로 받은 `$thickness` 를 설정하세요. 그러고 나서 `img` 선택자의 스타일에 방금 만든 `border` 를 인자 `10px` 를 넣어서 설정해주세요.

exercises/nested_properties/problem.ko.md

@@ -0,0 +1,46 @@
+# 중첩(스타일)
+
+CSS는 같은 네임스페이스를 가지고 있는 스타일이 많습니다. 예를 들어 `font-family`, `font-size`, `font-weight` 에는 `font`라는 같은 네임스페이스를 가지고 있습니다. 이것들 전부 타이핑하려면 손이 아프겠죠? Sass는 이런 상황에 효율적인 방법을 가지고 있습니다. 네임스페이스를 한 번만 선언한 뒤, 중첩된 스타일 형식으로 그것을 포함할 수 있습니다.
+예를 보시죠.
+
+```scss
+.funky {
+  font: {
+    family: fantasy;
+    size: 30em;
+    weight: bold;
+  }
+}
+```
+
+컴파일되는 CSS입니다.
+
+```css
+.funky {
+  font-family: fantasy;
+  font-size: 30em;
+  font-weight: bold; }
+```
+
+namespace는 자체적로 값을 가지고 있을 수도 있습니다. 한 번 보시죠.
+
+```scss
+.funky {
+  font: 20px/24px fantasy {
+    weight: bold;
+  }
+}
+```
+
+컴파일되는 CSS입니다.
+
+```css
+.funky {
+  font: 20px/24px fantasy;
+    font-weight: bold;
+}
+```
+
+# 과제
+
+`.sassy`라는 선택자를 생성하세요. 그리고 중첩을 활용해 `border-width`에는 '10px'를, `border-color`에는 'red'를, `border-radius`에는 '5px'를 설정해보세요.

exercises/nesting/problem.ko.md

@@ -0,0 +1,45 @@
+# 중첩(선택자)
+
+HTML을 작성해보셨다면 내용이 태그로 중첩돼있고 시각적인 계층을 이루고 있다는걸 눈치채셨을 겁니다. 반면에 CSS는 어떤가요? 네. 없습니다. 그럼 Sass는 어떤 구조일까요? nav 선택자로 예를 들어보겠습니다:
+
+```scss
+nav {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li { display: inline-block; }
+
+  a {
+    display: block;
+    padding: 6px 12px;
+    text-decoration: none;
+  }
+}
+```
+
+ul, li, a 선택자가 nav 선택자 안에 중첩되 있다는걸 눈치채셨나요? 중첩은 CSS의 가독성을 높여주는 좋은 방법입니다. 위 파일로 CSS를 만들면 이렇게 됩니다:
+
+```css
+nav ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav li {
+  display: inline-block;
+}
+
+nav a {
+  display: block;
+  padding: 6px 12px;
+  text-decoration: none;
+}
+```
+
+# 과제
+
+스타일 시트를 만들어봅시다. `ul` 선택자에 `margin: 0`를 설정하고 `a` 선택자에 `color: red`를 설정한 다음 `aside` 선택자 안에 두 선택자를 중첩해 보세요.

exercises/operators/problem.ko.md

@@ -0,0 +1,39 @@
+# 연산자
+
+CSS에서 연산자를 사용할 수 있다는 건 매우 유용합니다. Sass는 `+`, `-`, `*`, `/,`,`%`와 같은 표준 수학 연산자들을 제공합니다. `aside`와 `article` 선택자의 넓이를 연산자를 사용하여 계산하는 예제를 한번 보시죠.
+
+```scss
+.container { width: 100%; }
+
+article[role="main"] {
+  float: left;
+  width: 600px / 960px * 100%;
+}
+
+aside[role="complimentary"] {
+  float: right;
+  width: 300px / 960px * 100%;
+}
+```
+
+960px기준의 간단한 가변성 그리드를 만들어 봤습니다. pixel값을 받아서 백분율을 구하는 식입니다. 아주 간단하죠? 생성되는 CSS는 다음과 같습니다.
+
+```css
+.container {
+  width: 100%;
+}
+
+article[role="main"] {
+  float: left;
+  width: 62.5%;
+}
+
+aside[role="complimentary"] {
+  float: right;
+  width: 31.25%;
+}
+```
+
+# 과제
+
+`1400px`값을 갖는 `$page-width` 변수와 `20px`값을 갖는 `$padding` 변수를 선언하세요. 그다음 `.container` 선택자를 만들고 `padding` 스타일을 추가해서 $padding 변수를 할당하고 `width` 스타일을 추가해서 `$page-width` 변수에 `0.8` 을 곱한 값에서  `$page-width`에 2를 곱한 값을 빼서 할당하세요.