πŸ’» ν”„λ‘ νŠΈμ—”λ“œ λ©΄μ ‘ 질문 - CSS #3

Chris YangΒ·2019λ…„ 4μ›” 15일
19
post-thumbnail

이 글은 ν”„λ‘ νŠΈμ—”λ“œ 직무 λ©΄μ ‘ 질문과 κ΄€λ ¨λœ Github μ €μž₯μ†Œ front-end-interview-handbook λ²ˆμ—­λ³ΈμœΌλ‘œ, μ €μž₯μ†Œμ— Translations ν΄λ”μ˜ λ‚΄μš©κ³Ό λ™μΌν•©λ‹ˆλ‹€.


CSS 질문 #3

ν”„λ‘ νŠΈμ—”λ“œ λ©΄μ ‘ 질문 - CSS μ§ˆλ¬Έμ— λŒ€ν•œ ν•΄μ„€μž…λ‹ˆλ‹€.
Pull Requestλ₯Ό ν†΅ν•œ μ œμ•ˆ, μˆ˜μ • μš”μ²­ ν™˜μ˜ν•©λ‹ˆλ‹€.

λ°•μŠ€ λͺ¨λΈμ— λŒ€ν•œ λ‹Ήμ‹ μ˜ 이해와 CSSμ—μ„œ λΈŒλΌμš°μ €μ— λ‹€λ₯Έ λ°•μŠ€ λͺ¨λΈλ‘œ λ ˆμ΄μ•„μ›ƒμ„ λ Œλ”λ§ν•˜λŠ” 방법을 μ„€λͺ…ν•˜μ„Έμš”.

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의 일뢀가 μ•„λ‹™λ‹ˆλ‹€.
참고자료

[↑] Back to top

* { 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λ₯Ό λ°•μŠ€ λͺ¨λΈμ˜ μΌλΆ€λΆ„μœΌλ‘œ μƒκ°ν•˜λ©΄, λ””μžμ΄λ„ˆκ°€ μ‹€μ œλ‘œ μƒκ°ν•˜λŠ” 것과 잘 λ“€μ–΄ λ§žμŠ΅λ‹ˆλ‹€.
참고자료

[↑] Back to top

inline κ³Ό inline-block 의 차이점은 λ¬΄μ—‡μΈκ°€μš”?

쒋은 비ꡐλ₯Ό μœ„ν•΄ block 과도 비ꡐ해 λ³Ό κ²ƒμž…λ‹ˆλ‹€.

image.png

[↑] Back to top

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 μœ„μΉ˜λ‘œ μ²˜λ¦¬λ©λ‹ˆλ‹€.
참고자료

[↑] Back to top

λ‘œμ»¬μ΄λ‚˜ ν”„λ‘œλ•μ…˜ ν™˜κ²½μ—μ„œ μ‚¬μš©ν–ˆλ˜ CSS ν”„λ ˆμž„μ›Œν¬λŠ” λ¬΄μ—‡μΈκ°€μš”? μ–΄λ–»κ²Œ 그듀을 λ°”κΎΈκ±°λ‚˜ κ°œμ„ ν•  수 μžˆμ„κΉŒμš”?

  • Bootstrap - 느린 배포 μ£ΌκΈ°. λΆ€νŠΈμŠ€νŠΈλž© 4λŠ” 거의 2λ…„ λ™μ•ˆ μ•ŒνŒŒλ²„μ „ μƒνƒœμ˜€μŠ΅λ‹ˆλ‹€. 널리 μ‚¬μš©λ˜λŠ” Spinner λ²„νŠΌ μ»΄ν¬λ„ŒνŠΈλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
  • Semantic UI - μ†ŒμŠ€ μ½”λ“œ κ΅¬μ‘°λŠ” ν…Œλ§ˆ μ»€μŠ€ν„°λ§ˆμ΄μ§•μ„ μ΄ν•΄ν•˜κΈ° μ–΄λ ΅κ²Œ λ§Œλ“­λ‹ˆλ‹€. 틀에 얽맀이지 μ•ŠλŠ” ν…Œλ§ˆ μ‹œμŠ€ν…œμœΌλ‘œ μ‚¬μš©μž μ •μ˜ν•˜κΈ°κ°€ μ–΄λ ΅μŠ΅λ‹ˆλ‹€. 벀더 라이브러리 λ‚΄μ˜ ν•˜λ“œ μ½”λ”©λœ μ„€μ • 경둜. λΆ€νŠΈμŠ€νŠΈλž©κ³Ό 달리 λ³€μˆ˜ μ˜€λ²„λΌμ΄λ“œμ— λŒ€ν•΄ 잘 μ„€κ³„λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.
  • Bulma - λ§Žμ€ μ˜λ―Έμ—†κ³  λΆˆν•„μš”ν•œ ν΄λž˜μŠ€μ™€ λ§ˆν¬μ—…μ„ ν•„μš”λ‘œ ν•©λ‹ˆλ‹€. 이전 버전과 ν˜Έν™˜λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 버전을 μ—…κ·Έλ ˆμ΄λ“œν•˜λ©΄ λ―Έλ¬˜ν•œ λ°©μ‹μœΌλ‘œ 앱이 μ†μƒλ©λ‹ˆλ‹€.

[↑] Back to top

μƒˆλ‘œμš΄ CSS Flexboxλ‚˜ Grid μŠ€νŽ™μ„ μ‚¬μš©ν•΄λ³Έ 적이 μžˆλ‚˜μš”?

λ„€. FlexboxλŠ” 주둜 1차원 λ ˆμ΄μ•„μ›ƒμ„ λŒ€μƒμœΌλ‘œ ν•˜λ©° GridλŠ” 2차원 λ ˆμ΄μ•„μ›ƒμ„ λŒ€μƒμœΌλ‘œ ν•©λ‹ˆλ‹€.

FlexboxλŠ” CSSμ—μ„œ μ»¨ν…Œμ΄λ„ˆ μ•ˆμ— μžˆλŠ” μš”μ†Œμ˜ 수직 κ°€μš΄λ°μ •λ ¬, sticky footer λ“±κ³Ό 같은 λ§Žμ€ 일반적인 λ¬Έμ œλ“€μ„ ν•΄κ²°ν•©λ‹ˆλ‹€. Bootstrapκ³Ό BulmaλŠ” Flexboxλ₯Ό 기반으둜 ν•˜κ³ , μ΄λŠ” μ•„λ§ˆλ„ μš”μ¦˜ λ ˆμ΄μ•„μ›ƒμ„ λ§Œλ“œλŠ” 데 ꢌμž₯λ˜λŠ” 방법일 κ²ƒμž…λ‹ˆλ‹€. 이전에 Flexboxλ₯Ό μ‚¬μš©ν•΄ λ³΄μ•˜μ§€λ§Œ, flex-growλ₯Ό μ‚¬μš©ν•  λ•Œ 일뢀 λΈŒλΌμš°μ €μ—μ„œ λΉ„ν˜Έν™˜μ„± 문제(Safari)κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. κ·Έλž˜μ„œ λ°±λΆ„μœ¨λ‘œ λ‚˜νƒ€λ‚Έ 폭을 κ³„μ‚°ν•˜κΈ° μœ„ν•΄ inline-blocksκ³Ό μˆ˜ν•™μ„ μ‚¬μš©ν•œ μ½”λ“œλ‘œ λ‹€μ‹œ μ¨μ•Όν–ˆλŠ”λ°, μ΄λŠ” 쒋은 κ²½ν—˜μ€ μ•„λ‹ˆμ—ˆμŠ΅λ‹ˆλ‹€.

GridλŠ” κ·Έλ¦¬λ“œ 기반의 λ ˆμ΄μ•„μ›ƒμ„ μƒμ„±ν•˜κΈ° μœ„ν•œ κ°€μž₯ 직관적인 μ ‘κ·Όλ²•μ΄μ§€λ§Œ(더 쒋을 κ²ƒμž…λ‹ˆλ‹€!), ν˜„μž¬ λΈŒλΌμš°μ € 지원은 넓지 μ•ŠμŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

λ°˜μ‘ν˜• μ›Ήμ‚¬μ΄νŠΈλ₯Ό μ½”λ”©ν•˜λŠ” 것과 λͺ¨λ°”일 μš°μ„  μ „λž΅μ„ μ‚¬μš©ν•˜λŠ” 것 μ‚¬μ΄μ˜ 차이점을 μ„€λͺ…ν•˜μ„Έμš”.

이 두가지 접근법은 배타적이지 μ•ŠμŠ΅λ‹ˆλ‹€.

λ°˜μ‘ν˜• μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“œλŠ” 것은 일뢀 μš”μ†Œκ°€ λ―Έλ””μ–΄ 쿼리λ₯Ό 톡해 μž₯치의 ν™”λ©΄ 크기(일반적으둜 뷰포트 λ„ˆλΉ„)에 따라 ν¬κΈ°λ‚˜ λ‹€λ₯Έ κΈ°λŠ₯을 μ‘°μ •ν•˜λ„λ‘ λ°˜μ‘ν•¨μ„ μ˜λ―Έν•©λ‹ˆλ‹€. (예: μž‘μ€ λ””λ°”μ΄μŠ€μ—μ„œ κΈ€κΌ΄ 크기λ₯Ό μ€„μž„)

@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가지 μ£Όμš” μž₯점을 가지고 μžˆμŠ΅λ‹ˆλ‹€.

  • λͺ¨λ°”일 μž₯μΉ˜μ—μ„œ μ μš©λ˜λŠ” λͺ¨λ“  κ·œμΉ™μ΄ λ―Έλ””μ–΄ 쿼리에 λŒ€ν•΄ μœ νš¨μ„± 검사λ₯Ό 받을 ν•„μš”κ°€ μ—†μœΌλ―€λ‘œ λͺ¨λ°”일 μž₯μΉ˜μ—μ„œ 더 λ›°μ–΄λ‚œ μ„±λŠ₯을 λ°œνœ˜ν•©λ‹ˆλ‹€.
  • λ°˜μ‘ν˜• CSS κ·œμΉ™κ³Ό κ΄€λ ¨ν•˜μ—¬ 보닀 λͺ…ν™•ν•œ μ½”λ“œλ₯Ό μž‘μ„±ν•΄μ•Όν•©λ‹ˆλ‹€.

[↑] Back to top

λ°˜μ‘ν˜• λ””μžμΈμ€ μ μ‘ν˜• λ””μžμΈκ³Ό μ–΄λ–»κ²Œ λ‹€λ₯Έκ°€μš”?

λ°˜μ‘ν˜•κ³Ό μ μ‘ν˜• λ””μžμΈμ€ λͺ¨λ‘ μ„œλ‘œ λ‹€λ₯Έ 뷰포트 μ‚¬μ΄μ¦ˆ, 해상도, μ‚¬μš© μ»¨ν…μŠ€νŠΈ, μ œμ–΄ λ©”μ»€λ‹ˆμ¦˜ 등을 μ‘°μ •ν•˜μ—¬ λ‹€μ–‘ν•œ μž₯μΉ˜μ—μ„œ μ‚¬μš©μž κ²½ν—˜μ„ μ΅œμ ν™”ν•˜λ €κ³  μ‹œλ„ν•©λ‹ˆλ‹€.

λ°˜μ‘ν˜• λ””μžμΈμ€ μœ μ—°μ„± 원칙에 따라 μž‘λ™ν•©λ‹ˆλ‹€. 즉, μ–΄λ–€ μž₯μΉ˜μ—μ„œλ‚˜ 보기 쒋은 단일 λ³€ν•˜κΈ° μ‰¬μš΄ μ›Ή μ‚¬μ΄νŠΈμž…λ‹ˆλ‹€. λ°˜μ‘ν˜• μ›Ή μ‚¬μ΄νŠΈλŠ” λ―Έλ””μ–΄ 쿼리, μœ μ—°ν•œ κ·Έλ¦¬λ“œ 및 λ°˜μ‘ ν˜• 이미지λ₯Ό μ‚¬μš©ν•˜μ—¬ λ‹€μ–‘ν•œ μš”μΈμ— 따라 μœ μ—°ν•˜κ³  λ³€ν™”ν•˜λŠ” μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•©λ‹ˆλ‹€. 마치 ν•˜λ‚˜μ˜ 곡이 μ—¬λŸ¬κ°œμ˜ μ„œλ‘œ λ‹€λ₯Έ 링을 ν†΅κ³Όν•˜κΈ° μœ„ν•΄ μ»€μ§€κ±°λ‚˜ μ€„μ–΄λ“œλŠ” 것과 μœ μ‚¬ν•©λ‹ˆλ‹€.

μ μ‘ν˜• λ””μžμΈλŠ” 점진적 ν–₯μƒμ˜ ν˜„λŒ€μ  μ •μ˜μ— 더 κ°€κΉμŠ΅λ‹ˆλ‹€. ν•˜λ‚˜μ˜ μœ μ—°ν•œ λ””μžμΈ λŒ€μ‹ μ—, μ μ‘ν˜• μ„€κ³„λŠ” μž₯치 및 기타 κΈ°λŠ₯을 감지 ν•œ λ‹€μŒ 사전 μ •μ˜ 된 뷰포트 크기 및 기타 νŠΉμ„± μ„ΈνŠΈλ₯Ό 기반으둜 μ μ ˆν•œ κΈ°λŠ₯ 및 λ ˆμ΄μ•„μ›ƒμ„ μ œκ³΅ν•©λ‹ˆλ‹€. ν•˜λ‚˜μ˜ 곡이 μ—¬λŸ¬κ°œμ˜ μ„œλ‘œ λ‹€λ₯Έ 링을 ν†΅κ³Όν•˜λŠ” λŒ€μ‹ , 링의 크기에 따라 μ—¬λŸ¬κ°œμ˜ 곡을 μ‚¬μš©ν•˜λŠ” 것과 μœ μ‚¬ν•©λ‹ˆλ‹€.

참고자료

[↑] Back to top

λ ˆν‹°λ‚˜ κ·Έλž˜ν”½μœΌλ‘œ μž‘μ—… ν•΄λ³Έ 적이 μžˆλ‚˜μš”? κ·Έλ ‡λ‹€λ©΄, μ–Έμ œ, μ–΄λ–€ κΈ°μˆ μ„ μ‚¬μš©ν•˜μ˜€λ‚˜μš”?

λ ˆν‹°λ‚˜ λŠ” ν”½μ…€ λΉ„μœ¨μ΄ 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λ‚˜ μ•„μ΄μ½˜ν°νŠΈλ₯Ό μ‚¬μš©ν•˜λ©΄ 해상도에 관계없이 맀우 μ„ λͺ…ν•˜κ²Œ λ Œλ”λ§λ˜λ―€λ‘œ κ°€λŠ₯ν•˜λ©΄ 이λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

참고자료

[↑] Back to top

absolute 포지셔닝 λŒ€μ‹  translate()λ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μœ κ°€ λ¬΄μ—‡μΈκ°€μš”? λ˜λŠ” κ·Έ λ°˜λŒ€μ˜ κ²½μš°μ— λŒ€ν•΄μ„œλŠ” μ–΄λ–»κ²Œ μƒκ°ν•˜μ‹œλ‚˜μš”?, κ·Έ μ΄μœ λŠ” λ¬΄μ—‡μΈκ°€μš”?

translate()은 CSS transform의 κ°’μž…λ‹ˆλ‹€. transformμ΄λ‚˜ opacityλ₯Ό 변경해도 λΈŒλΌμš°μ €μ˜ reflowλ‚˜ repaintκ°€ λ‹€μ‹œ λ°œμƒν•˜μ§€ μ•Šκ³  μ»΄ν¬μ§€μ…˜λ§Œ μ‹€ν–‰λ˜λŠ” 반면, μ ˆλŒ€ μœ„μΉ˜λ₯Ό λ³€κ²½ν•˜λ©΄ reflowκ°€ λ°œμƒν•©λ‹ˆλ‹€. transform을 μ‚¬μš©ν•˜λ©΄ λΈŒλΌμš°μ €μ—μ„œ 이 μš”μ†Œλ₯Ό μœ„ν•œ GPU λ ˆμ΄μ–΄κ°€ μƒμ„±λ˜μ§€λ§Œ, μ ˆλŒ€ μœ„μΉ˜ 속성을 λ³€κ²½ν•˜λŠ” 것은 CPUλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ―€λ‘œ translate()κ°€ 더 효율적이며, λ§€λ„λŸ¬μš΄ μ• λ‹ˆλ©”μ΄μ…˜μ„ μœ„ν•œ 페인트 μ‹œκ°„μ΄ μ§§μ•„μ§‘λ‹ˆλ‹€.

translate()을 μ‚¬μš©ν•  λ•ŒλŠ” μ ˆλŒ€ μœ„μΉ˜λ₯Ό λ³€κ²½ν•  λ•Œμ™€ 달리 μ›λž˜ μœ„μΉ˜(μΌμ’…μ˜ position: relative)λ₯Ό κ·ΈλŒ€λ‘œ μ‚¬μš©ν•©λ‹ˆλ‹€.

참고자료

[↑] Back to top

λ‹€λ₯Έ λ‹΅λ³€λ“€


0개의 λŒ“κΈ€