21λ
12μ 01μΌ(2)
π Vending Machine with SCSS - μ½λ 리뷰
CSS/SCSS μ μΈ μμ κ³ λ €
- μ§κΈμ
mixin
λ§ μ¬μ©νμ§λ§ 쑰건문μ΄λ λ°λ³΅λ¬Έ, ν¨μ λλ Javascriptκ° κ°μ΄ ν¬ν¨λλ€λ©΄ μ΄μ§νΌ μμλ λ°λκ² λμ΄μμΌλ―λ‘ ν¬κ² κ³ λ €νμ§ μμλ λλ€.
κΈ΄ λ³μλͺ
- λ κ°λ¨νκ² μ¬μ©νκΈ° μν λ³μμ λ³μλͺ
μ΄ κΈΈκ² μμ±λμ΄ μμΌλ―λ‘ μΌκ΄μ±μ΄ μκ³ κ°κ²°ν λ³μλͺ
μ μ¬μ©ν΄μΌ νλ€.
@mixin flex($direction: row, $align: center, $justify: center) {
display: flex;
flex-direction: $direction;
align-items: $align;
justify-content: $justify;
}
μ§μ ν΄λμ mixin
μ λͺ¨λ μμ±μ μ¬μ©νμ§ μκ³ μμ£Ό μΌλΆλ§ μ¬μ©νκ² λλ κ²½μ°
- λ°λ³΅λλ μμ±μ
mixin
μΌλ‘ μμ±νκ³ @content
λ₯Ό μ΄μ©ν΄ μ€νμΌμ μΆκ°νμ¬ μ λ¬
mixin
μ μ΄κΈ°κ°μ null
μ§μ
- μ΄ κ²½μ°λ μμ κ°μ΄
@content
λ₯Ό μ΄μ©νκΈ°
@mixin fontStyle($c, $s, $w: $font-w-500, $l: null) {
color: $c;
font-size: $s;
font-weight: $w;
line-height: $l;
}
μ€λ³΅λλ μ€νμΌμ΄λΌλ©΄ ν΄λμ€λ‘ μ μΈ
- μ€λ³΅λλ μ€νμΌμ΄λΌλ©΄
mixin
μ μ¬μ©νλ κ²λ³΄λ€ ν΄λμ€λ₯Ό λ§λ€μ΄μ μ¬μ©νλ κ²μ΄ ν¨μ¨μ μ΄λ€.
=> λ΄κ° SCSSλ‘ μμ±νλ€κ³ λͺ¨λ κ²μ SCSSλ‘λ§ ν΄κ²°νλ €κ³ νμ
μ½λ© μ 체ν¬
- μ½λ©μ μμνκΈ° μ μ λμμΈμ νμΈνκ³ κ°μ μ€νμΌμ μ μ©ν΄λ λλ λΆλΆλ€μ λμμ΄λμ νμν΄μ μμ
- μμ
μ νμ ν μ½λ© μμνκΈ°
λ―Έλμ΄μΏΌλ¦¬
- νλ‘μ νΈμ κ·λͺ¨μ λ°λΌ, νμ¬μ λ°λΌ λλ κ°μΈμ λ°λΌ λ€λ₯Ό μ μλ€.
- λ―Έλμ΄ μΏΌλ¦¬λ₯Ό λΆλ¦¬λ νμΌ λ΄μ μμ±
- λ―Έλμ΄ μΏΌλ¦¬λ₯Ό λ°λ‘ λͺ¨μμ μμ±
- ν΄λΉ μμ μ€νμΌ λ°λ‘ λ€μ μ€μ λ―Έλμ΄ μΏΌλ¦¬ μμ± λ± λ€μνλ€
float
ν΄μ λ°©λ²
float
μμ±μ΄ λμμΈμ μν΄ μ겨λ μμκ° μλκΈ° λλ¬Έμ λ€λ₯Έ λ°©λ²μ μ¬μ©νλ κ²μ΄ μ’λ€.
- λ€λ₯Έ λΈλΌμ°μ μ νΈνμ±μ μν΄
float
μ μ¬μ©ν΄μΌ νλ€λ©΄ overflow: hidden
λ³΄λ€ clear-fix
μ¬μ©μ κΆμ₯
λλ¬Έμλ‘ μμνλ νμΌλͺ
- νμΌλͺ
μ λλ¬Έμλ₯Ό μ¬μ©νλ©΄ μλλ κ²μ μλμ§λ§ λλ¬Έμλ‘ μμνλ νμΌλͺ
μ μ£ΌμνκΈ°
&:not(:first-child)
li + li {
margin-top: 20px;
}
li:not(:first-child) {
margin-top: 20px;
}
:not()
: μ§μ λ μ νμμ νΉμ ν μμλ₯Ό μ μΈν κ²½μ° μ¬μ©
:not(selector) {
css declarations;
}
λ§λ¬΄λ¦¬
- λͺ¨λ μλ°μ€ν¬λ¦½νΈ Deep Dive 1νλ
ν΄λ³΄μμμμ
- κ³μ λ°μκ² μμν΄μ νμ μΉκΈ°!
- μ½λ 리뷰λ μ¦κ²λ€μ! μ΄κ±Έ μ΄λ κ² μμ±ν΄λ λλ? μλ¬Έμ΄ λ€μλλ° μμμνκ² ν΄κ²°-
- νμΈλ°κ³ μΆμ λΆλΆ λͺ
ννκ² μ λ¬νκΈ°
- μ΄λ€ λΆλΆμ κ³ λ €νλμ§
- μ μ½λλ₯Ό μ΄λ κ² μ§°λμ§
λ± νμ€ν μ λ¬νκ³ μ½λ 리뷰 λΆννκΈ°
=> λ΄κ° κΆκΈν λΆλΆμ μ λ¬νμ§λ§ λ΄μ©μ΄ λΆμ‘±νλ€. λλλ‘ μμΈν μ€λͺ
μ νκ³ , μ§λ¬Έλ 미리 μ μ€λΉν΄λκΈ°
- λνν
μ£Όμ΄μ§ μκ° μ νμ©ν΄μΌκ² λ€. μ΄μ λ©μ¬ κ΅μ‘μ΄ νλ¬μ΄ μ§λ¬μΌλ μ μμκΈ°λ μλ£νκ³ ν¨μ¨μ μΌλ‘ 곡λΆν΄μΌκ² λ€.