|
4 | 4 |
|
5 | 5 | ## 목차 |
6 | 6 |
|
7 | | - 1. [용어 설명](#용어 설명) |
| 7 | + 1. [용어 설명](#terminology) |
8 | 8 | - [규칙 선언부(Rule declaration)](#규칙 선언부(Rule declaration)) |
9 | 9 | - [선택자(Selectors)](#선택자(Selectors)) |
10 | 10 | - [속성(properties)](#속성(properties)) |
|
56 | 56 | 마지막으로, 속성(Properties)은 규칙 선언부의 선택된 요소들이 그들의 스타일을 가지게 하는 것입니다. 속성은 키-값의 쌍으로 구성되며, 규칙 선언부는 하나 이상의 속성 선언부를 가질 수 있습니다. 속성 선언부는 아래와 같은 형태입니다: |
57 | 57 |
|
58 | 58 | ```css |
59 | | -/* some selector */ { |
| 59 | +/* 특정 선택자 */ { |
60 | 60 | background: #f1f1f1; |
61 | 61 | color: #333; |
62 | 62 | } |
63 | 63 | ``` |
64 | 64 |
|
65 | 65 | ## CSS |
66 | 66 |
|
67 | | -### Formatting |
| 67 | +### 형식 |
68 | 68 |
|
69 | | -* Use soft tabs (2 spaces) for indentation |
70 | | -* Prefer dashes over camelCasing in class names. |
71 | | - - Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below). |
72 | | -* Do not use ID 선택자 |
73 | | -* When using multiple 선택자 in a 규칙 선언부, give each selector its own line. |
74 | | -* Put a space before the opening brace `{` in 규칙 선언부s |
75 | | -* In 속성(properties), put a space after, but not before, the `:` character. |
76 | | -* Put closing braces `}` of 규칙 선언부s on a new line |
77 | | -* Put blank lines between 규칙 선언부s |
| 69 | +* 부드러운 탭(띄어쓰기 2칸) 들여쓰기를 사용하세요. |
| 70 | +* 클래스 이름에는 camelCase 방식보다 대시(-)를 사용하세요. |
| 71 | + - 만약 당신이 BEM(아래 [OOCSS and BEM](#oocss-and-bem) 참조)을 사용하고 계신다면 밑줄(_)과 PalcalCase 방식을 사용하셔도 괜찮습니다. |
| 72 | +* ID 선택자를 사용하지 마세요. |
| 73 | +* 당신이 규칙 선언부에서 다중 선택자를 사용하실 때, 선택자를 한 줄에 한개씩 적어주세요. |
| 74 | +* 규칙 선언부의 여는 괄호 `{` 이전에 띄어쓰기를 넣어주세요. |
| 75 | +* 속성 부분에서, `:` 문자 뒤에 띄어쓰기를 넣어주세요. 단, `:` 문자 앞에는 띄어쓰기를 넣지 말아주세요. |
| 76 | +* 규칙 선언부의 닫는 괄호 `}`를 새로운 줄에 넣어주세요. |
| 77 | +* 규칙 선언부들 사이에 빈 줄을 넣어주세요. |
78 | 78 |
|
79 | | -**Bad** |
| 79 | +**잘못된 예시** |
80 | 80 |
|
81 | 81 | ```css |
82 | 82 | .avatar{ |
|
90 | 90 | } |
91 | 91 | ``` |
92 | 92 |
|
93 | | -**Good** |
| 93 | +**올바른 예시** |
94 | 94 |
|
95 | 95 | ```css |
96 | 96 | .avatar { |
|
105 | 105 | } |
106 | 106 | ``` |
107 | 107 |
|
108 | | -### Comments |
| 108 | +### 주석 |
109 | 109 |
|
110 | 110 | * Prefer line comments (`//` in Sass-land) to block comments. |
111 | 111 | * Prefer comments on their own line. Avoid end-of-line comments. |
|
0 commit comments