μ΄ κΈμ νλ‘ νΈμλ μ§λ¬΄ λ©΄μ μ§λ¬Έκ³Ό κ΄λ ¨λ Github μ μ₯μ front-end-interview-handbook λ²μλ³ΈμΌλ‘, μ μ₯μμ Translations ν΄λμ λ΄μ©κ³Ό λμΌν©λλ€.
νλ‘ νΈμλ λ©΄μ μ§λ¬Έ - CSS μ§λ¬Έμ λν ν΄μ€μ
λλ€.
Pull Requestλ₯Ό ν΅ν μ μ, μμ μμ² νμν©λλ€.
* { box-sizing: border-box; }
λ 무μμ νλμ? μ₯μ μ 무μμΈκ°μ?inline
κ³Ό inline-block
μ μ°¨μ΄μ μ 무μμΈκ°μ?relative
, fixed
, absolute
, static
μμμ μ°¨μ΄μ μ 무μμΈκ°μ?absolute
ν¬μ§μ
λ λμ translate()
λ₯Ό μ¬μ©νλ μ΄μ κ° λ¬΄μμΈκ°μ? λλ κ·Έ λ°λμ κ²½μ°μ λν΄μλ μ΄λ»κ² μκ°νμλμ?, κ·Έ μ΄μ λ 무μμΈκ°μ?CSS λ°μ€ λͺ¨λΈμ λ¬Έμ νΈλ¦¬μ μμμ λν΄ μμ±λκ³ μκ°μ ν¬λ§€ν
λͺ¨λΈμ λ°λΌ λ°°μΉλ μ¬κ°ν μμλ₯Ό λνλ
λλ€. κ° λ°μ€μλ content μμ(μ: ν
μ€νΈ, μ΄λ―Έμ§ λ±)κ³Ό padding
, border
, margin
μμμ μ νμ μΌλ‘ μ¬μ©ν μ μμ΅λλ€.
CSS λ°μ€ λͺ¨λΈμ λ€μμ κ³μ°ν©λλ€.
λ°μ€ λͺ¨λΈμλ λ€μκ³Ό κ°μ κ·μΉμ΄ μμ΅λλ€.
width
, height
, padding
, border
, margin
μ μν΄ κ³μ°λ©λλ€.height
κ° μ§μ λμ΄μμ§ μμΌλ©΄, λΈλ μμλ ν¬ν¨νκ³ μλ λ΄μ©λ§νΌμ λμ΄λ₯Ό κ°μ§ κ²μ΄κ³ , padding
μ λν©λλ€.(floatκ° μλκ²½μ°).width
κ° μ§μ λμ§μμ§ μμΌλ©΄, floatκ° μλ λΈλ‘ μμλ [λΆλͺ¨μ λλΉ-padding
]μ λ§κ² νμ₯λ©λλ€.height
λ λ΄μ©μ height
μ μν΄ κ³μ°λ©λλ€.width
λ λ΄μ©μ width
μ μν΄ κ³μ°λ©λλ€.padding
κ³Ό border
λ μμμ width
μ height
μ μΌλΆκ° μλλλ€.* { box-sizing: border-box; }
λ 무μμ νλμ? μ₯μ μ 무μμΈκ°μ?box-sizing: content-box
κ° μ μ©λλ©΄, λ΄μ©μ ν¬κΈ°λ§ κ³ λ €λ©λλ€.box-sizing: border-box
λ μμμ width
μ height
κ° μ΄λ»κ² κ³μ°λλμ§λ₯Ό λ³κ²½νμ¬, border
μ padding
λ κ³μ°μ ν¬ν¨λ©λλ€.height
λ λ΄μ©μ [height
+ μμ§ padding
+ μμ§ border
ν]μΌλ‘ κ³μ°λ©λλ€.width
λ λ΄μ©μ [width
+ μν padding
+ μν border
ν]μΌλ‘ κ³μ°λ©λλ€.padding
κ³Ό border
λ₯Ό λ°μ€ λͺ¨λΈμ μΌλΆλΆμΌλ‘ μκ°νλ©΄, λμμ΄λκ° μ€μ λ‘ μκ°νλ κ²κ³Ό μ λ€μ΄ λ§μ΅λλ€.inline
κ³Ό inline-block
μ μ°¨μ΄μ μ 무μμΈκ°μ?μ’μ λΉκ΅λ₯Ό μν΄ block
κ³Όλ λΉκ΅ν΄ λ³Ό κ²μ
λλ€.
relative
, fixed
, absolute
, static
μμμ μ°¨μ΄μ μ 무μμΈκ°μ?μμΉκ° μ ν΄μ§ μμλ κ³μ°λ position
μμ±μ΄ relative
, absolute
, fixed
, sticky
μ€ νλμΈ μμμ
λλ€.
static
- κΈ°λ³Έ μμΉ. μμκ° νμμ κ°μ΄ νμ΄μ§μ μμΉν©λλ€. top
, right
, bottom
, left
, z-index
μμ±μ μ μ©λμ§ μμ΅λλ€.relative
- μμμ μμΉκ° λ μ΄μμμ λ³κ²½νμ§ μκ³ , μ체μ μλμ μΌλ‘ μ‘°μ λ©λλ€. (λ°λΌμ λ°°μΉλμ§ μμ μμμ κ°κ²©μ λ¨κ²¨ λ‘λλ€.)absolute
- μμκ° νμ΄μ§μ νμ μμΉμμ μ κ±°λκ³ , κ°μ₯ κ°κΉμ΄ relative
λΆλͺ¨ λΈλ‘μ΄ μλ κ²½μ° μ§μ λ μμΉμ λ°°μΉλ©λλ€. κ·Έλ μ§ μμΌλ©΄ μ΅μμ λΈλ‘μ μμ‘΄λ©λλ€. absoluteλ‘ λ°°μΉλ λ°μ€λ marginμ κ°μ§ μ μμΌλ©° λ€λ₯Έ marginκ³Ό μΆ©λνμ§ μμ΅λλ€. μ΄ μμλ λ€λ₯Έ μμμ μμΉμ μν₯μ μ£Όμ§ μμ΅λλ€.fixed
- μμλ νμ΄μ§μ νμ μμΉμμ μ κ±°λκ³ λ·°ν¬νΈλ₯Ό κΈ°μ€μΌλ‘ μ§μ λ μμΉμ λ°°μΉλλ©° μ€ν¬λ‘€ ν λ μ΄λνμ§ μμ΅λλ€.sticky
- stickyλ relative
μ fixed
μ νμ΄λΈλ¦¬λμ
λλ€. μμλ μ§μ λ μκ³κ°μ λμ λκΉμ§ relative
μμΉλ‘ μ²λ¦¬λλ©°, νΉμ μ§μ μμ fixed
μμΉλ‘ μ²λ¦¬λ©λλ€.λ€. Flexboxλ μ£Όλ‘ 1μ°¨μ λ μ΄μμμ λμμΌλ‘ νλ©° Gridλ 2μ°¨μ λ μ΄μμμ λμμΌλ‘ ν©λλ€.
Flexboxλ CSSμμ 컨ν
μ΄λ μμ μλ μμμ μμ§ κ°μ΄λ°μ λ ¬, sticky footer λ±κ³Ό κ°μ λ§μ μΌλ°μ μΈ λ¬Έμ λ€μ ν΄κ²°ν©λλ€. Bootstrapκ³Ό Bulmaλ Flexboxλ₯Ό κΈ°λ°μΌλ‘ νκ³ , μ΄λ μλ§λ μμ¦ λ μ΄μμμ λ§λλ λ° κΆμ₯λλ λ°©λ²μΌ κ²μ
λλ€. μ΄μ μ Flexboxλ₯Ό μ¬μ©ν΄ 보μμ§λ§, flex-grow
λ₯Ό μ¬μ©ν λ μΌλΆ λΈλΌμ°μ μμ λΉνΈνμ± λ¬Έμ (Safari)κ° λ°μνμ΅λλ€. κ·Έλμ λ°±λΆμ¨λ‘ λνλΈ νμ κ³μ°νκΈ° μν΄ inline-blocks
κ³Ό μνμ μ¬μ©ν μ½λλ‘ λ€μ μ¨μΌνλλ°, μ΄λ μ’μ κ²½νμ μλμμ΅λλ€.
Gridλ 그리λ κΈ°λ°μ λ μ΄μμμ μμ±νκΈ° μν κ°μ₯ μ§κ΄μ μΈ μ κ·Όλ²μ΄μ§λ§(λ μ’μ κ²μ λλ€!), νμ¬ λΈλΌμ°μ μ§μμ λμ§ μμ΅λλ€.
μ΄ λκ°μ§ μ κ·Όλ²μ λ°°νμ μ΄μ§ μμ΅λλ€.
λ°μν μΉμ¬μ΄νΈλ₯Ό λ§λλ κ²μ μΌλΆ μμκ° λ―Έλμ΄ μΏΌλ¦¬λ₯Ό ν΅ν΄ μ₯μΉμ νλ©΄ ν¬κΈ°(μΌλ°μ μΌλ‘ λ·°ν¬νΈ λλΉ)μ λ°λΌ ν¬κΈ°λ λ€λ₯Έ κΈ°λ₯μ μ‘°μ νλλ‘ λ°μν¨μ μλ―Έν©λλ€. (μ: μμ λλ°μ΄μ€μμ κΈκΌ΄ ν¬κΈ°λ₯Ό μ€μ)
@media (min-width: 601px) {
.my-class {
font-size: 24px;
}
}
@media (max-width: 600px) {
.my-class {
font-size: 12px;
}
}
λͺ¨λ°μΌ μ°μ μ λ΅ λν λ°μμ μ΄μ§λ§, λͺ¨λ°μΌ μ₯μΉμ λν λͺ¨λ μ€νμΌμ μ μν΄μΌνλ©° λμ€μ λ€λ₯Έ μ₯μΉμ λν νΉμ κ·μΉμ μΆκ°ν΄μΌν©λλ€. μ΄μ μλ₯Ό λ°λ₯΄λ©΄ λ€μκ³Ό κ°μ΅λλ€.
.my-class {
font-size: 12px;
}
@media (min-width: 600px) {
.my-class {
font-size: 24px;
}
}
λͺ¨λ°μΌ μ°μ μ λ΅μ 2κ°μ§ μ£Όμ μ₯μ μ κ°μ§κ³ μμ΅λλ€.
λ°μνκ³Ό μ μν λμμΈμ λͺ¨λ μλ‘ λ€λ₯Έ λ·°ν¬νΈ μ¬μ΄μ¦, ν΄μλ, μ¬μ© 컨ν μ€νΈ, μ μ΄ λ©μ»€λμ¦ λ±μ μ‘°μ νμ¬ λ€μν μ₯μΉμμ μ¬μ©μ κ²½νμ μ΅μ ννλ €κ³ μλν©λλ€.
λ°μν λμμΈμ μ μ°μ± μμΉμ λ°λΌ μλν©λλ€. μ¦, μ΄λ€ μ₯μΉμμλ 보기 μ’μ λ¨μΌ λ³νκΈ° μ¬μ΄ μΉ μ¬μ΄νΈμ λλ€. λ°μν μΉ μ¬μ΄νΈλ λ―Έλμ΄ μΏΌλ¦¬, μ μ°ν 그리λ λ° λ°μ ν μ΄λ―Έμ§λ₯Ό μ¬μ©νμ¬ λ€μν μμΈμ λ°λΌ μ μ°νκ³ λ³ννλ μ¬μ©μ κ²½νμ μ 곡ν©λλ€. λ§μΉ νλμ κ³΅μ΄ μ¬λ¬κ°μ μλ‘ λ€λ₯Έ λ§μ ν΅κ³ΌνκΈ° μν΄ μ»€μ§κ±°λ μ€μ΄λλ κ²κ³Ό μ μ¬ν©λλ€.
μ μν λμμΈλ μ μ§μ ν₯μμ νλμ μ μμ λ κ°κΉμ΅λλ€. νλμ μ μ°ν λμμΈ λμ μ, μ μν μ€κ³λ μ₯μΉ λ° κΈ°ν κΈ°λ₯μ κ°μ§ ν λ€μ μ¬μ μ μ λ λ·°ν¬νΈ ν¬κΈ° λ° κΈ°ν νΉμ± μΈνΈλ₯Ό κΈ°λ°μΌλ‘ μ μ ν κΈ°λ₯ λ° λ μ΄μμμ μ 곡ν©λλ€. νλμ κ³΅μ΄ μ¬λ¬κ°μ μλ‘ λ€λ₯Έ λ§μ ν΅κ³Όνλ λμ , λ§μ ν¬κΈ°μ λ°λΌ μ¬λ¬κ°μ 곡μ μ¬μ©νλ κ²κ³Ό μ μ¬ν©λλ€.
λ ν°λ λ ν½μ
λΉμ¨μ΄ 1λ³΄λ€ ν° κ³ ν΄μλ νλ©΄μ λνλ΄λ λ§μΌν
μ©μ΄ μΌλΏμ
λλ€. μ€μνκ² μμμΌν κ²μ ν½μ
λΉμ¨μ μ¬μ©νλ©΄ μ΄λ¬ν λμ€νλ μ΄κ° λμΌν ν¬κΈ°μ μμλ₯Ό νμνκΈ° μν΄ λ μ ν΄μλμ νλ©΄μΌλ‘ νννλ€λ κ²μ
λλ€.
μμ¦μλ λͺ¨λ λͺ¨λ°μΌ λλ°μ΄μ€λ₯Ό λ ν°λ λμ€νλ μ΄λ‘ κ°μ£Όν©λλ€.
λΈλΌμ°μ λ κΈ°λ³Έμ μΌλ‘ μ΄λ―Έμ§λ€μ μ μΈνκ³ λλ°μ΄μ€μ ν΄μλμ λ°λΌ DOM μμλ₯Ό λ λλ§ν©λλ€.
λ ν°λ λμ€νλ μ΄λ₯Ό μ΅μμΌλ‘ λ§λλ μ λͺ νκ³ λ³΄κΈ° μ’μ κ·Έλν½μ μ»μΌλ €λ©΄ κ°λ₯νν κ³ ν΄μλ μ΄λ―Έμ§λ₯Ό μ¬μ©ν΄μΌν©λλ€. νμ§λ§ νμ κ°μ₯ λμ ν΄μλμ μ΄λ―Έμ§λ₯Ό μ¬μ©νλ©΄ λ λ§μ λ°μ΄νΈκ° μ μ‘λμ΄μΌ νκΈ° λλ¬Έμ μ±λ₯μ μν₯μ λ―ΈμΉ©λλ€.
μ΄ λ¬Έμ λ₯Ό 극볡νκΈ° μν΄, HTML5μ μ€νμΈ λ°μν μ΄λ―Έμ§λ₯Ό μ¬μ©ν μ μμ΅λλ€. μ΄λ λμΌν μ΄λ―Έμ§μ λ€λ₯Έ ν΄μλ νμΌμ λΈλΌμ°μ μ μ 곡νκ³ html μμ± srcset
κ³Ό sizes
λ₯Ό μ¬μ©νμ¬ μ΄λ€ μ΄λ―Έμ§κ° κ°μ₯ μ ν©νμ§ κ²°μ νλλ‘ν©λλ€.
<div responsive-background-image>
<img src="/images/test-1600.jpg"
sizes="
(min-width: 768px) 50vw,
(min-width: 1024px) 66vw,
100vw"
srcset="
/images/test-400.jpg 400w,
/images/test-800.jpg 800w,
/images/test-1200.jpg 1200w">
</div>
HTML5μ srcset
λ₯Ό μ§μνμ§ μλ λΈλΌμ°μ (μ: IE11)λ μ΄λ₯Ό 무μνκ³ λμ src
λ‘ μ¬μ©νλ€λ κ²μ μκ³ μμ΄μΌ ν©λλ€. IE11λ₯Ό μ λ§ μ§μν΄μΌνκ³ μ±λ₯μμ μ΄μ λ‘ μ΄ κΈ°λ₯μ μ 곡ν΄μΌνλ κ²½μ° μλ°μ€ν¬λ¦½νΈ ν΄λ¦¬νμ μ¬μ©ν μ μμ΅λλ€. μ: Picturefill(μ°Έκ³ μλ£ λ§ν¬)
μμ΄μ½μ κ²½μ°, SVGλ μμ΄μ½ν°νΈλ₯Ό μ¬μ©νλ©΄ ν΄μλμ κ΄κ³μμ΄ λ§€μ° μ λͺ νκ² λ λλ§λλ―λ‘ κ°λ₯νλ©΄ μ΄λ₯Ό μ¬μ©ν©λλ€.
absolute
ν¬μ§μ
λ λμ translate()
λ₯Ό μ¬μ©νλ μ΄μ κ° λ¬΄μμΈκ°μ? λλ κ·Έ λ°λμ κ²½μ°μ λν΄μλ μ΄λ»κ² μκ°νμλμ?, κ·Έ μ΄μ λ 무μμΈκ°μ?translate()
μ CSS transform
μ κ°μ
λλ€. transform
μ΄λ opacity
λ₯Ό λ³κ²½ν΄λ λΈλΌμ°μ μ reflowλ repaintκ° λ€μ λ°μνμ§ μκ³ μ»΄ν¬μ§μ
λ§ μ€νλλ λ°λ©΄, μ λ μμΉλ₯Ό λ³κ²½νλ©΄ reflow
κ° λ°μν©λλ€. transform
μ μ¬μ©νλ©΄ λΈλΌμ°μ μμ μ΄ μμλ₯Ό μν GPU λ μ΄μ΄κ° μμ±λμ§λ§, μ λ μμΉ μμ±μ λ³κ²½νλ κ²μ CPUλ₯Ό μ¬μ©ν©λλ€. κ·Έλ¬λ―λ‘ translate()
κ° λ ν¨μ¨μ μ΄λ©°, 맀λλ¬μ΄ μ λλ©μ΄μ
μ μν νμΈνΈ μκ°μ΄ 짧μμ§λλ€.
translate()
μ μ¬μ©ν λλ μ λ μμΉλ₯Ό λ³κ²½ν λμ λ¬λ¦¬ μλ μμΉ(μΌμ’
μ position: relative
)λ₯Ό κ·Έλλ‘ μ¬μ©ν©λλ€.