Merge pull request codemakebros#3 from prodia4/master

fix typos and refactor

Author: Noah_Yang

README.md

@@ -28,7 +28,7 @@
 
 ### 규칙 선언부
 
-"규칙 선언부(Rule declaration)"는 특정 속성 그룹을 따르는 선택자(또는 선택자로 묶인 그룹)에게 부여되는 이름입니다. 다음 예시를 참조해주세요:
+"규칙 선언부(Rule declaration)"는 선택자와 그에 동반되는 속성들을 일컫는 이름입니다. 다음 예시를 참조해주세요:
 
 ```css
 .listing {
@@ -67,8 +67,8 @@
 ### 형식
 
 * 부드러운 탭(띄어쓰기 2칸) 들여쓰기를 사용하세요.
-* 클래스 이름에는 camelCase 방식보다 대시(-)를 사용하세요.
-  - 만약 당신이 BEM(아래 [OOCSS와 BEM](#oocss와-bem) 참조)을 사용하고 계신다면 밑줄(_)과 PalcalCase 방식을 사용하셔도 괜찮습니다.
+* 클래스 이름에는 camelCase 방식보다 `-`를 사용하세요.
+  - 만약 당신이 BEM(아래 [OOCSS와 BEM](#oocss와-bem) 참조)을 사용하고 계신다면 `_`와 PalcalCase 방식을 사용하셔도 괜찮습니다.
 * ID 선택자를 사용하지 마세요.
 * 당신이 규칙 선언부에서 다중 선택자를 사용하실 때, 선택자를 한 줄에 한개씩 적어주세요.
 * 규칙 선언부의 여는 괄호 `{` 이전에 띄어쓰기를 넣어주세요.
@@ -107,7 +107,7 @@
 
 ### 주석
 
-* 블록 형식 주석보다 라인 형태 주석(Sass일 경우 `//`)을 권장합니다.
+* 블록주석보다 라인주석(Sass일 경우 `//`)을 권장합니다.
 * 주석을 새로운 줄에 적어주세요. 선택자 또는 속성과 같은 줄에 주석을 작성하는 방식을 피해주세요.
 * 코드 자체만으로 이해하기 어려운 경우 자세한 주석을 작성해주세요:
   - z-index를 사용하는 경우
@@ -117,22 +117,22 @@
 
 우리는 다음과 같은 이유로 OOCSS와 BEM의 혼용을 권장합니다:
 
-  * CSS와 HTML 사이의 명확하고, 엄격한 관계를 형성하는 데에 도움을 줍니다
-  * 재사용 가능하고, 작성 가능한 컴포넌트를 만드는 데에 도움을 줍니다
-  * 보다 적은 중첩과 낮은 특수성을 갖게 합니다
-  * 확장성 있는 스타일시트를 작성하도록 도움을 줍니다
+  * CSS와 HTML 사이의 명확하고, 엄격한 관계를 형성하는 데에 도움을 줍니다.
+  * 재사용 가능하고, 작성 가능한 컴포넌트를 만드는 데에 도움을 줍니다.
+  * 보다 적은 중첩과 낮은 특수성을 갖게 합니다.
+  * 확장성 있는 스타일시트를 작성하도록 도움을 줍니다.
 
-**OOCSS**, 또는 “Object Oriented CSS”는 당신의 스타일시트를 "객체"의 모음(한 웹사이트에서 독립적으로 사용되는, 재사용 가능하고 반복 가능한 단편들)로 판단하게 만드는 CSS 작성을 위한 접근 방식입니다.
+**OOCSS**, 또는 “Object Oriented CSS”는 당신의 스타일시트를 "객체"의 모음(한 웹사이트에서 독립적으로 사용되는, 재사용 가능하고 반복 가능한 단편들)으로 생각하게 만드는 CSS 작성 방식입니다.
 
   * Nicole Sullivan의 [OOCSS wiki](https://github.com/stubbornella/oocss/wiki)
   * Smashing Magazine의 [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
 
-**BEM**, 또는 “Block-Element-Modifier”는 HTML과 CSS 내부의 클래스에 대한 _명명 협약_입니다. 이것은 원래 대량의 코드베이스와 확장 가능성을 염두해두고 Yandex에서 개발되었으며, OOCSS 구현을 위한 견고한 가이드라인으로 사용될 수 있습니다.
+**BEM**, 또는 “Block-Element-Modifier”는 HTML과 CSS 내부의 클래스에 대한 _명명 협약_입니다. 이것은 원래 대량의 코드베이스와 확장 가능성을 염두에 두고 Yandex에서 개발되었으며, OOCSS 구현을 위한 견고한 가이드라인으로 사용할 수 있습니다.
 
   * CSS Trick의 [BEM 101](https://css-tricks.com/bem-101/)
   * Harry Roberts의 [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
 
-우리는 React와 같은 컴포넌트들과 결합할 때 부분적으로 잘 작동하는 PascalCase 형태의 "블록들"과 함께 BEM의 변형을 권장합니다. 밑줄과 대시는 아직 변형자와 자식에게 사용됩니다.
+PascalCase 형태의 블록과 함께 사용하는 BEM의 변형 방식을 권장합니다. 이는 React에서 쓰이는 컴포넌트 등과 결합할 때 효과적입니다. 이 경우에도 `_`와 `-`는 계속 변형자와 자식을 나타내기 위해 사용됩니다.
 
 **예시**
 
@@ -184,7 +184,7 @@ CSS 클래스 명에 자바스크립트 훅을 거는 것을 권장하지 않습
 
 ### Border
 
-border가 없을 경우에는 `0` 대신 `none`을 사용하세요.
+border가 없을 경우에는 `none` 대신 `0`을 사용하세요.
 
 **Bad**
 
@@ -207,7 +207,7 @@ border가 없을 경우에는 `0` 대신 `none`을 사용하세요.
 ### 문법
 
 * 항상 `.sass`가 아닌 `.scss` 문법을 사용해주세요.
-* 보통 CSS와 `@include` 선언은 논리적으로 순서를 정리해주세요. (아래 예시를 참조)
+* 일반적인 CSS와 `@include` 선언은 논리적으로 순서를 정리해주세요. (아래 예시를 참조)
 
 ### 속성 선언 순서
 
@@ -238,7 +238,7 @@ border가 없을 경우에는 `0` 대신 `none`을 사용하세요.
 
 3. 중첩 선택자
 
-    중첩 선택자는 마지막에 위치합니다. 그리고 그 다음으로는 아무것도 오지 않습니다. 규칙 선언부와 중첩 선택자 사이에는 여백을 추가하며, 중첩 선택자 사이에도 마찬가치입니다. 중첩 선택자 내부 속성들 또한 위의 규칙을 따릅니다.
+    중첩 선택자는 마지막에 위치합니다. 그리고 그 다음으로는 아무것도 적지 않습니다. 규칙 선언부와 중첩 선택자 사이에는 여백을 추가하며, 중첩 선택자 사이에도 마찬가치입니다. 중첩 선택자 내부 속성들 또한 위의 규칙을 따릅니다.
 
     ```scss
     .btn {
@@ -259,7 +259,7 @@ border가 없을 경우에는 `0` 대신 `none`을 사용하세요.
 
 ### 믹스인-Mixins
 
-Mixin은 코드를 DRY하게 하고 명료하게 하며, 복잡성을 줄이기 위해 사용해야 합니다. 인자를 받지 않는 Mixin은 이럴 때 유용합니다. 하지만 만약 당신이 페이로드(payload)를 압축하지 않는다면(예- gzip), 불필요한 코드 중복이 발생하게 됩니다.
+Mixin은 코드를 DRY하게 하고 명료하게 하며, 복잡성을 줄이기 위해 사용해야 합니다. 인자를 받지 않는 Mixin은 이럴 때 유용합니다. 하지만 만약 당신이 payload를 압축하지 않는다면(예- gzip), 불필요한 코드 중복이 발생하게 됩니다.
 
 ### Extend 지시자