|
4 | 4 |
|
5 | 5 | ## ๋ชฉ์ฐจ |
6 | 6 |
|
7 | | - 1. [์ฉ์ด ์ค๋ช
](#terminology) |
8 | | - - [๊ท์น ์ ์ธ๋ถ(Rule declaration)](#๊ท์น ์ ์ธ๋ถ(Rule declaration)) |
9 | | - - [์ ํ์(Selectors)](#์ ํ์(Selectors)) |
10 | | - - [์์ฑ(properties)](#์์ฑ(properties)) |
| 7 | + 1. [์ฉ์ด ์ค๋ช
](#์ฉ์ด-์ค๋ช
) |
| 8 | + - [๊ท์น ์ ์ธ๋ถ](#๊ท์น-์ ์ธ๋ถ) |
| 9 | + - [์ ํ์](#์ ํ์) |
| 10 | + - [์์ฑ](#์์ฑ) |
11 | 11 | 1. [CSS](#css) |
12 | | - - [Formatting](#formatting) |
13 | | - - [Comments](#comments) |
14 | | - - [OOCSS and BEM](#oocss-and-bem) |
| 12 | + - [ํ์](#ํ์) |
| 13 | + - [์ฃผ์](#์ฃผ์) |
| 14 | + - [OOCSS์ BEM](#oocss์-bem) |
15 | 15 | - [ID ์ ํ์](#id-์ ํ์) |
16 | | - - [JavaScript hooks](#javascript-hooks) |
| 16 | + - [์๋ฐ์คํฌ๋ฆฝํธ ํํฌ](#์๋ฐ์คํฌ๋ฆฝํธ-ํํฌ) |
17 | 17 | - [Border](#border) |
18 | 18 | 1. [Sass](#sass) |
19 | 19 | - [๋ฌธ๋ฒ](#๋ฌธ๋ฒ) |
|
26 | 26 |
|
27 | 27 | ## ์ฉ์ด ์ค๋ช
|
28 | 28 |
|
29 | | -### ๊ท์น ์ ์ธ๋ถ(Rule declaration) |
| 29 | +### ๊ท์น ์ ์ธ๋ถ |
30 | 30 |
|
31 | | -"๊ท์น ์ ์ธ๋ถ"๋ ํน์ ์์ฑ ๊ทธ๋ฃน์ ๋ฐ๋ฅด๋ ์ ํ์(๋๋ ์ ํ์๋ก ๋ฌถ์ธ ๊ทธ๋ฃน)์๊ฒ ๋ถ์ฌ๋๋ ์ด๋ฆ์
๋๋ค. ๋ค์ ์์๋ฅผ ์ฐธ์กฐํด์ฃผ์ธ์: |
| 31 | +"๊ท์น ์ ์ธ๋ถ(Rule declaration)"๋ ํน์ ์์ฑ ๊ทธ๋ฃน์ ๋ฐ๋ฅด๋ ์ ํ์(๋๋ ์ ํ์๋ก ๋ฌถ์ธ ๊ทธ๋ฃน)์๊ฒ ๋ถ์ฌ๋๋ ์ด๋ฆ์
๋๋ค. ๋ค์ ์์๋ฅผ ์ฐธ์กฐํด์ฃผ์ธ์: |
32 | 32 |
|
33 | 33 | ```css |
34 | 34 | .listing { |
|
37 | 37 | } |
38 | 38 | ``` |
39 | 39 |
|
40 | | -### ์ ํ์(Selectors) |
| 40 | +### ์ ํ์ |
41 | 41 |
|
42 | | -๊ท์น ์ ์ธ๋ถ์์, "์ ํ์"๋ DOM ํธ๋ฆฌ์ ์ด๋ค ์์๋ค์ด ์ ์๋ ์์ฑ(Properties)์ผ๋ก ๊พธ๋ฉฐ์ง์ง ๊ฒฐ์ ํ๋ ๋ถ๋ถ๋ค์
๋๋ค. ์ ํ์๋ HTML ์์๋ค, ๋ฟ๋ง ์๋๋ผ ํ ์์์ ํด๋์ค, ID, ๋๋ ํด๋น ์์์ ์ด๋ ์์ฑ(attributes)๋ค๊ณผ๋ ์ฐ๊ฒฐ๋ ์ ์์ต๋๋ค. ๋ค์์ ์ ํ์์ ๋ํ ์์๋ค์
๋๋ค: |
| 42 | +๊ท์น ์ ์ธ๋ถ์์, "์ ํ์(Selectors)"๋ DOM ํธ๋ฆฌ์ ์ด๋ค ์์๋ค์ด ์ ์๋ ์์ฑ(Properties)์ผ๋ก ๊พธ๋ฉฐ์ง์ง ๊ฒฐ์ ํ๋ ๋ถ๋ถ๋ค์
๋๋ค. ์ ํ์๋ HTML ์์๋ค, ๋ฟ๋ง ์๋๋ผ ํ ์์์ ํด๋์ค, ID, ๋๋ ํด๋น ์์์ ์ด๋ ์์ฑ(attributes)๋ค๊ณผ๋ ์ฐ๊ฒฐ๋ ์ ์์ต๋๋ค. ๋ค์์ ์ ํ์์ ๋ํ ์์๋ค์
๋๋ค: |
43 | 43 |
|
44 | 44 | ```css |
45 | 45 | .my-element-class { |
|
51 | 51 | } |
52 | 52 | ``` |
53 | 53 |
|
54 | | -### ์์ฑ(Properties) |
| 54 | +### ์์ฑ |
55 | 55 |
|
56 | | -๋ง์ง๋ง์ผ๋ก, ์์ฑ(Properties)์ ๊ท์น ์ ์ธ๋ถ์ ์ ํ๋ ์์๋ค์ด ๊ทธ๋ค์ ์คํ์ผ์ ๊ฐ์ง๊ฒ ํ๋ ๊ฒ์
๋๋ค. ์์ฑ์ ํค-๊ฐ์ ์์ผ๋ก ๊ตฌ์ฑ๋๋ฉฐ, ๊ท์น ์ ์ธ๋ถ๋ ํ๋ ์ด์์ ์์ฑ ์ ์ธ๋ถ๋ฅผ ๊ฐ์ง ์ ์์ต๋๋ค. ์์ฑ ์ ์ธ๋ถ๋ ์๋์ ๊ฐ์ ํํ์
๋๋ค: |
| 56 | +๋ง์ง๋ง์ผ๋ก, "์์ฑ(Properties)"์ ๊ท์น ์ ์ธ๋ถ์ ์ ํ๋ ์์๋ค์ด ๊ทธ๋ค์ ์คํ์ผ์ ๊ฐ์ง๊ฒ ํ๋ ๊ฒ์
๋๋ค. ์์ฑ์ ํค-๊ฐ์ ์์ผ๋ก ๊ตฌ์ฑ๋๋ฉฐ, ๊ท์น ์ ์ธ๋ถ๋ ํ๋ ์ด์์ ์์ฑ ์ ์ธ๋ถ๋ฅผ ๊ฐ์ง ์ ์์ต๋๋ค. ์์ฑ ์ ์ธ๋ถ๋ ์๋์ ๊ฐ์ ํํ์
๋๋ค: |
57 | 57 |
|
58 | 58 | ```css |
59 | 59 | /* ํน์ ์ ํ์ */ { |
|
68 | 68 |
|
69 | 69 | * ๋ถ๋๋ฌ์ด ํญ(๋์ด์ฐ๊ธฐ 2์นธ) ๋ค์ฌ์ฐ๊ธฐ๋ฅผ ์ฌ์ฉํ์ธ์. |
70 | 70 | * ํด๋์ค ์ด๋ฆ์๋ camelCase ๋ฐฉ์๋ณด๋ค ๋์(-)๋ฅผ ์ฌ์ฉํ์ธ์. |
71 | | - - ๋ง์ฝ ๋น์ ์ด BEM(์๋ [OOCSS and BEM](#oocss-and-bem) ์ฐธ์กฐ)์ ์ฌ์ฉํ๊ณ ๊ณ์ ๋ค๋ฉด ๋ฐ์ค(_)๊ณผ PalcalCase ๋ฐฉ์์ ์ฌ์ฉํ์
๋ ๊ด์ฐฎ์ต๋๋ค. |
| 71 | + - ๋ง์ฝ ๋น์ ์ด BEM(์๋ [OOCSS and BEM](#oocss์-bem) ์ฐธ์กฐ)์ ์ฌ์ฉํ๊ณ ๊ณ์ ๋ค๋ฉด ๋ฐ์ค(_)๊ณผ PalcalCase ๋ฐฉ์์ ์ฌ์ฉํ์
๋ ๊ด์ฐฎ์ต๋๋ค. |
72 | 72 | * ID ์ ํ์๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์. |
73 | 73 | * ๋น์ ์ด ๊ท์น ์ ์ธ๋ถ์์ ๋ค์ค ์ ํ์๋ฅผ ์ฌ์ฉํ์ค ๋, ์ ํ์๋ฅผ ํ ์ค์ ํ๊ฐ์ฉ ์ ์ด์ฃผ์ธ์. |
74 | 74 | * ๊ท์น ์ ์ธ๋ถ์ ์ฌ๋ ๊ดํธ `{` ์ด์ ์ ๋์ด์ฐ๊ธฐ๋ฅผ ๋ฃ์ด์ฃผ์ธ์. |
|
0 commit comments