@@ -24,11 +24,11 @@ CSS์คํฌ์ ํ๋ก์ฒ๋ผ ๋ง๋ค์ด์ฃผ๋ ํ ๋ชจ์
24
24
1 . [ CSS Reset์ ์ฌ์ฉ] ( #use-a-css-reset )
25
25
1 . [ ` box-sizing ` ์ ์ปดํฌ๋ํธ๋ง๋ค ๋ณ๊ฒฝ] ( #inherit-box-sizing )
26
26
1 . [ ๋ชจ๋ ํ๋กํผํฐ๋ฅผ ๋ฆฌ์
ํ๋ ๋์ ์ ` unset ` ๋ฅผ ์ด๋ค] ( #use-unset-instead-of-resetting-all-properties )
27
- 1 . [ ` :not() ` ๋ฅผ ์ฌ์ฉํ์ฌ Border๋ฅผ ์ญ์ ] ( #use-not-to-applyunapply-borders-on-navigation )
27
+ 1 . [ ` :not() ` ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณด๋๋ฅผ ์ญ์ ] ( #use-not-to-applyunapply-borders-on-navigation )
28
28
1 . [ ๊ธ๊ผด์ด ๋ก์ปฌ๋ก ์ค์น๋์ด ์๋์ง ํ์ธ] ( #check-if-font-is-installed-locally )
29
29
1 . [ ` body ` ์ ` line-height ` ๋ฃ๊ธฐ] ( #add-line-height-to-body )
30
- 1 . [ ํผ ์์์` : focus ` ๋ฅผ ์ค์ ํ์ญ์์ค. ] ( #set-focus-for-form-elements )
31
- 1 . [ ์ ๋ถ Vertically-Center๋ก ๋ง๋ค๊ธฐ] ( #vertically-center-anything )
30
+ 1 . [ ํผ ์์์` : focus ` ๋ฅผ ์ค์ ํ๊ธฐ ] ( #set-focus-for-form-elements )
31
+ 1 . [ ์ ๋ถ ์์ง ์ ๋ ฌ ๋ง๋ค๊ธฐ] ( #vertically-center-anything )
32
32
1 . [ ๋ฆฌ์คํธ๋ฅผ ์ฝค๋ง๋ก ๋๋๊ธฐ] ( #comma-separated-lists )
33
33
1 . [ Negative ` nth-child ` ๋ฅผ ์ฌ์ฉํ์ฌ ์์ดํ
๋๋๊ธฐ] ( #select-items-using-negative-nth-child )
34
34
1 . [ SVG๋ฅผ ์์ด์ฝ์ผ๋ก ์ฌ์ฉํ๊ธฐ] ( #use-svg-for-icons )
@@ -52,7 +52,7 @@ CSS์คํฌ์ ํ๋ก์ฒ๋ผ ๋ง๋ค์ด์ฃผ๋ ํ ๋ชจ์
52
52
53
53
### CSS Reset์ ์ฌ์ฉ
54
54
55
- CSS reset์ ์คํ์ผ ์์๋ค์ ํตํด ๋ฐฑ์ง ์ํ์์ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๊ฐ์ ์คํ์ผ์ ์ผ๊ด์ฑ์ ๊ฐํํ๋๋ฐ ๋์์ ์ค๋๋ค.ย You can use a CSS reset library like๋ํ ย [ Normalize] ( http://necolas.github.io/normalize.css/ ) , _ et al._ , ์ ๊ฐ์ CSS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด ๋ ๊ฐ๋ตํ ๋ Reset ์ดํ๋ก์น๋ฅผ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค .
55
+ CSS reset์ ์คํ์ผ ์์๋ค์ ํตํด ๋ฐฑ์ง ์ํ์์ ๋ค๋ฅธ ๋ธ๋ผ์ฐ์ ๊ฐ์ ์คํ์ผ์ ์ผ๊ด์ฑ์ ๊ฐํํ๋๋ฐ ๋์์ ์ค๋๋ค.ย ๋ํ ย [ Normalize] ( http://necolas.github.io/normalize.css/ ) , _ et al._ , ์ ๊ฐ์ CSS ๋ฆฌ์
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด ๋ ์ฝ๊ฒ reset ํํ๋ฅผ ์ทจํ ์ ์์ต๋๋ค .
56
56
57
57
``` css
58
58
* ,
@@ -132,12 +132,12 @@ button {
132
132
133
133
<div id =" use-not-to-applyunapply-borders-on-navigation " ></div >
134
134
135
- ### ` :not() ` ๋ฅผ ์ฌ์ฉํ์ฌ Border๋ฅผ ์ญ์
135
+ ### ` :not() ` ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณด๋๋ฅผ ์ญ์
136
136
137
137
Border๋ฅผ ๋ฃ๊ฑฐ๋...
138
138
139
139
``` css
140
- /* add border */
140
+ /* ๋ณด๋ ์ถ๊ฐ */
141
141
.nav li {
142
142
border-right : 1px solid #666 ;
143
143
}
@@ -146,7 +146,7 @@ Border๋ฅผ ๋ฃ๊ฑฐ๋...
146
146
...๋ง์ง๋ง ์์๋ฅผ ์์ ๊ธฐ ๋ณด๋ค๋...
147
147
148
148
``` css
149
- /* remove border */
149
+ /* ๋ณด๋ ์ญ์ */
150
150
.nav li :last-child {
151
151
border-right : none ;
152
152
}
@@ -160,7 +160,7 @@ Border๋ฅผ ๋ฃ๊ฑฐ๋...
160
160
}
161
161
```
162
162
163
- CSS ์ ํ๊ธฐ๋ ์ฌ๋์ด ์ค๋ช
ํ๋ ๋ฐฉ์์ผ๋ก ๊ฒฝ๊ณ๋ฅผ ์ ์ํฉ๋๋ค.
163
+ CSS ์ ํ์๋ ์ฌ๋์ด ์ค๋ช
ํ๋ ๋ฐฉ์ ๊ทธ๋๋ก ๊ฒฝ๊ณ๋ฅผ ์ ์ํฉ๋๋ค.
164
164
165
165
#### [ ๋ฐ๋ชจ] ( http://codepen.io/AllThingsSmitty/pen/LkymvO )
166
166
@@ -177,11 +177,11 @@ CSS ์ ํ๊ธฐ๋ ์ฌ๋์ด ์ค๋ช
ํ๋ ๋ฐฉ์์ผ๋ก ๊ฒฝ๊ณ๋ฅผ ์ ์ํฉ๋๋ค.
177
177
@font-face {
178
178
font-family : " Dank Mono" ;
179
179
src :
180
- /* Full name */
180
+ /* ํ๋ค์ */
181
181
local (" Dank Mono" ),
182
- /* Postscript name */
182
+ /* ํฌ์คํธ ์คํฌ๋ฆฝํธ๋ช
*/
183
183
local (" Dank Mono" ),
184
- /* Otherwise, download it ! */
184
+ /* ์๋๋ฉด ๋ค์ด๋ก๋๋ ๊ฐ๋ฅ ! */
185
185
url (" //...a.server/fonts/DankMono.woff" );
186
186
}
187
187
@@ -207,7 +207,7 @@ body {
207
207
}
208
208
```
209
209
210
- ์ด ๋ฐฉ๋ฒ์ ๋ฌธ์ ์์๋ ` body ` ์์ ๊ฐ๋จํ ๊ณ์น๋ฉ๋๋ค .
210
+ ์ด ๋ฐฉ๋ฒ์ผ๋ก ํ
์คํธ ์์๊ฐ ` body ` ์ ์์ฑ์ ์ฝ๊ฒ ๊ณ์นํ ์ ์์ต๋๋ค .
211
211
212
212
#### [ ๋ฐ๋ชจ] ( http://codepen.io/AllThingsSmitty/pen/VjbdYd )
213
213
@@ -216,9 +216,9 @@ body {
216
216
217
217
<div id =" set-focus-for-form-elements " ></div >
218
218
219
- ### ํผ ์์์` : focus ` ๋ฅผ ์ค์ ํ์ญ์์ค.
219
+ ### ํผ ์์์` : focus ` ๋ฅผ ์ค์ ํ๊ธฐ
220
220
221
- ํค๋ณด๋ ์ฌ์ฉ์๋ ํฌ์ปค์ค๋ฅผ ์ฌ์ฉํ์ฌ ํค๋ณด๋ ์ด๋ฒคํธ์ ์์น๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. ์์ ์์์ ๋ํ ์ง์ค๋๋ฅผ ๋์ด๊ณ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ๊ตฌํ์ ์ผ๊ด์ฑ์๊ฒ ๋ง๋ญ๋๋ค.
221
+ ํค๋ณด๋ ์ฌ์ฉ์๋ ํฌ์ปค์ค๋ฅผ ์ฌ์ฉํ์ฌ ํค๋ณด๋ ์ด๋ฒคํธ์ ์์น๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. ํผ ์์์ ์ง์คํ ์ ์๊ฒ ํด์ฃผ๋ฉฐ, ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ณธ ๊ตฌํ์ ์ผ๊ด์ฑ์๊ฒ ๋ง๋ญ๋๋ค.
222
222
223
223
``` css
224
224
a :focus ,
@@ -284,22 +284,22 @@ ul > li:not(:last-child)::after {
284
284
285
285
` :not() ` ์ ์ฌ์ฉํ ๋ ๋ฆฌ์คํธ์ ๋ง์ง๋ง ์์ดํ
์๋ ์ฝค๋ง๋ฅผ ์ฌ์ฉํ์ง ์๋๋ก ํฉ๋๋ค.
286
286
287
- ** Note:** ์ด ํ์ ๊ฒฝ์ฐ ์ ๊ทผ์ฑ์ด ๋จ์ด์ง ์ ์์ต๋๋ค. ํนํ, ์คํฌ๋ฆฐ ์ฌ์ฉ์์๊ฒ๋์. ๋ํ ๋ธ๋ผ์ฐ์ ์์์ ๋ณต์ฌ/๋ถ์ฌ๋ฃ๊ธฐ๋ CSS ์ ๋๋ ์ดํฐ๋ฅผ ํตํ ์ฝํ
์ธ ์์๋ ๋ถ๊ฐ๋ฅํ๋ฏ๋ก ์ฃผ์ํด ์ฃผ์ญ์์ค .
287
+ ** Note:** ์ด ํ์ ๊ฒฝ์ฐ ์ ๊ทผ์ฑ์ด ๋จ์ด์ง ์ ์์ต๋๋ค. ํนํ, ์คํฌ๋ฆฐ ์ฌ์ฉ์์๊ฒ๋์. ๋ํ ๋ธ๋ผ์ฐ์ ์์์ ๋ณต์ฌ/๋ถ์ฌ๋ฃ๊ธฐ๋ CSS๋ฅผ ํตํด ์์ฑํ ์ฝํ
์ธ ์์๋ ์ฌ์ฉ ๋ถ๊ฐ๋ฅํ๋ฏ๋ก ์ฃผ์ํด ์ฃผ์ธ์ .
288
288
289
289
<sup >[ ๋ชฉ์ฐจ๋ก ๋์๊ฐ๊ธฐ] ( #table-of-contents ) </sup >
290
290
291
291
292
292
<div id =" select-items-using-negative-nth-child " ></div >
293
293
### Negative ` nth-child ` ๋ฅผ ์ฌ์ฉํ์ฌ ์์ดํ
๋๋๊ธฐ
294
294
295
- Negative ` nth-child ` ๋ฅผ ์ฌ์ฉํ์ฌ n๋ถ์ 1๋ก ์์ดํ
์ ๋๋ ์ ์๋ค .
295
+ Negative ` nth-child ` ๋ฅผ ์ฌ์ฉํ์ฌ n๋ถ์ 1๋ก ์์ดํ
์ ๋๋ ์ ์์ต๋๋ค .
296
296
297
297
``` css
298
298
li {
299
299
display : none ;
300
300
}
301
301
302
- /* select items 1 through 3 and display them */
302
+ /* 1์์ 3๊น์ง์ ์ ํํ๊ณ ๋ณด์ฌ์ฃผ๊ธฐ */
303
303
li :nth-child (-n+3 ) {
304
304
display : block ;
305
305
}
@@ -308,7 +308,7 @@ li:nth-child(-n+3) {
308
308
[ ` :not() ` ] ( #use-not-to-applyunapply-borders-on-navigation ) , ๋ฅผ ์ฌ์ฉํด ๋ด
์๋ค.
309
309
310
310
``` css
311
- /* select all items except the first 3 and display them */
311
+ /* ์ฒ์ 3๊ฐ๋ฅผ ์ ์ธํ ๋ชจ๋ ์์ดํ
๋ณด์ฌ์ฃผ๊ธฐ */
312
312
li :not (:nth-child (-n+3 )) {
313
313
display : none ;
314
314
}
@@ -347,7 +347,7 @@ SVG๋ [IE9](http://caniuse.com/#search=svg) ์ดํ๋ถํฐ ์ง์๋๊ณ ์์ต๋
347
347
348
348
### "Lobotomized Owl" Selector ์ฌ์ฉํ๊ธฐ
349
349
350
- ์ด์ํ ์ด๋ฆ์ผ์ง๋ (` * ` )์ (` + ` )์ ํจ๊ป ์ฌ์ฉํ๋ฉด ๊ฐ๋ ฅํ CSS์ ๊ฐ๋ฅ์ฑ์ ์ ๊ณตํฉ๋๋ค.
350
+ ์ด์ํ ์ด๋ฆ์ด์ง๋ง (` * ` )์ (` + ` )์ ํจ๊ป ์ฌ์ฉํ๋ฉด ๊ฐ๋ ฅํ CSS์ ๊ฐ๋ฅ์ฑ์ ์ ๊ณตํฉ๋๋ค.
351
351
352
352
``` css
353
353
* + * {
@@ -412,7 +412,7 @@ hover์ `max-height`๋ฅผ ์์๋ฅผ ํ์ฅ ์ค๋ฒํ๋ก์ฐ์ ๊ฒฐ๊ณผ๋ก ์ฌ๋ผ์ด
412
412
413
413
### Flexbox์ Margin Hack ์ ๊ฑฐ
414
414
415
- column gutter์ ์ฌ์ฉํ ๋ ๋น์ ์ flexbox์ ` space-between ` ์์๋ฅผ ย ์ฌ์ฉํ์ฌ ` nth- ` , ` first- ` , ` last-child ` ์ ์ง์ธ ์ ์์ต๋๋ค .
415
+ column gutter์ ์ฌ์ฉํ ๋ flexbox์ ` space-between ` ์์๋ฅผ ์ฌ์ฉํ์ฌ ` nth- ` , ` first- ` , ` last-child ` ๋ฅผ ์ฌ์ฉํ์ง ์๊ฒ ํด์ค๋๋ค .
416
416
417
417
``` css
418
418
.list {
@@ -462,7 +462,7 @@ a[href]:not([class]) {
462
462
}
463
463
```
464
464
465
- CMS๋ก ์ฝ์
๋๋ ๋ณดํต class์์ฑ์ด ์๋ ๋งํฌ์` :not ` ๋ฅผ ์ฐ๊ณ ์คํ์ผ์ ์ ์ํฉ๋๋ค .
465
+ ์ด๊ฒ์ ๋ณดํต class์์ฑ์ด ์๋ ๋งํฌ์` :not ` ์ ์ฌ์ฉํ์ฌ CMS๋ก ์ฝ์
๋ฉ๋๋ค. ์์(cascade)๋ฌธ์ ์์ด ์ฐจ๋ณํ ํ ์ ์์ต๋๋ค .
466
466
467
467
<sup >[ ๋ชฉ์ฐจ๋ก ๋์๊ฐ๊ธฐ] ( #table-of-contents ) </sup >
468
468
@@ -520,7 +520,7 @@ img {
520
520
521
521
``` css
522
522
img ::before {
523
- content : " We're sorry, the image below is broken :(" ;
523
+ content : " ์ฃ์กํ์ง๋ง ์ด ์ด๋ฏธ์ง์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค :(" ;
524
524
display : block ;
525
525
margin-bottom : 10px ;
526
526
}
@@ -655,7 +655,7 @@ textarea {
655
655
656
656
### ๊ฐ๊ฒฉ์ผ๋ก ์ฌ์ฉ๋๋ ์ค ๋ฐ๊ฟ์์ ` display: none ` ์ ์ค์ ํ์ญ์์ค.
657
657
658
- [ Harry Roberts๊ฐ ์ง์ ํ๋ฏ์ด ] ( https://twitter.com/csswizardry/status/1170835532584235008 ) CMS ์ฌ์ฉ์๊ฐ ์ถ๊ฐ ์ค ๋ฐ๊ฟ์ ์ฌ์ฉํ์ฌ ๊ฐ๊ฒฉ์ ๋์ง ๋ชปํ๊ฒ ํ ์ ์์ต๋๋ค.
658
+ [ Harry Roberts๊ฐ ์ง์ ํ๋๋ก ] ( https://twitter.com/csswizardry/status/1170835532584235008 ) CMS ์ฌ์ฉ์๊ฐ ์ถ๊ฐ ์ค ๋ฐ๊ฟ์ ์ฌ์ฉํ์ฌ ๊ฐ๊ฒฉ์ ๋์ง ๋ชปํ๊ฒ ํ ์ ์์ต๋๋ค.
659
659
660
660
``` css
661
661
br + br {
0 commit comments