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

chrisΒ·2019λ…„ 4μ›” 5일
3
post-thumbnail

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


CSS 질문 #2

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

κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•΄λ³Έμ  μžˆλ‚˜μš”? λ§Œμ•½ κ·Έλ ‡λ‹€λ©΄, 당신은 μ–΄λ–€ 것을 μ„ ν˜Έν•˜λ‚˜μš”?

μ €λŠ”λŠ” float 기반 κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ„ μ’‹μ•„ν•©λ‹ˆλ‹€. μ™œλƒν•˜λ©΄, μ—¬μ „νžˆ κΈ°μ‘΄ λŒ€μ²΄ν• λ§Œν•œ μ‹œμŠ€ν…œ(flex, grid) μ€‘μ—μ„œλ„ κ°€μž₯ λ§Žμ€ λΈŒλΌμš°μ €λ₯Ό μ§€μ›ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. 이것은 Bootstrapμ—μ„œ 수 λ…„λ™μ•ˆ μ‚¬μš©λ˜μ—ˆμœΌλ©°, νš¨κ³Όκ°€ μžˆλ‹€λŠ” 것이 μž…μ¦λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

[↑] Back to top

λ―Έλ””μ–΄ μΏΌλ¦¬λ‚˜ λͺ¨λ°”μΌλ§Œμ„ μœ„ν•œ layouts/CSSλ₯Ό μ‚¬μš©ν•˜κ±°λ‚˜ κ΅¬ν˜„ν•΄λ³Έμ  μžˆλ‚˜μš”?

λ„€. ν•œκ°€μ§€ 예λ₯Ό λ“€λ©΄, μ—¬λŸ¬ 쀄 ν˜•μ‹μ˜ λ„€λΉ„κ²Œμ΄μ…˜μ„ νŠΉμ • breakpointλ₯Ό μ§€λ‚˜λ©΄ fixed-bottom tab ν˜•νƒœλ‘œ λ³€ν™˜ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

[↑] Back to top

SVG μŠ€νƒ€μΌλ§μ— μ΅μˆ™ν•˜μ‹ κ°€μš”?

λ„€, 객체의 속성을 μ§€μ •ν•˜λŠ” 방법을 포함해 inline CSS, CSS section μ‚½μž…, μ™ΈλΆ€ CSS file처럼 shape의 색상을 μ •ν•˜λŠ” μ—¬λŸ¬ 방법이 μžˆμŠ΅λ‹ˆλ‹€. μ›Ήμ—μ„œ λ³Ό 수 μžˆλŠ” λŒ€λΆ€λΆ„μ˜ SVGλŠ” inline CSSλ₯Ό μ‚¬μš©ν•˜μ§€λ§Œ, 각각 μž₯단점이 μžˆμŠ΅λ‹ˆλ‹€.

기본적인 채색은 λ…Έλ“œμ— fillκ³Ό stroke 두 속성을 μ„€μ •ν•˜μ—¬ μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. fill은 객체 μ•ˆμͺ½ 색을 μ„€μ •ν•˜κ³ , strokeλŠ” 객체 μ£Όμœ„μ— κ·Έλ €μ§€λŠ” μ„ μ˜ 색을 μ„€μ •ν•©λ‹ˆλ‹€. 색상 이름 (red λ“±), RGBκ°’ (rgb(255,0,0)), 16μ§„μˆ˜ κ°’, RGBA κ°’ λ“± HTMLμ—μ„œ μ‚¬μš©ν•˜λŠ” 것과 λ™μΌν•œ CSS 색상 이름 μŠ€ν‚΄μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. HTMLμ—μ„œ μ‚¬μš©ν•˜λŠ” 것과 λ™μΌν•œ CSS 색상 지정 μŠ€ν‚΄μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

<rect x="10" y="10" width="100" height="100" stroke="blue" 
  fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
참고자료

[↑] Back to top

screen이 μ•„λ‹Œ @media μ†μ„±μ˜ 예λ₯Ό 듀어쀄 수 μžˆλ‚˜μš”?

λ„€, @media 속성은 screen 을 ν¬ν•¨ν•˜μ—¬ 4가지 νƒ€μž…μ΄ μžˆμŠ΅λ‹ˆλ‹€.

  • all - λͺ¨λ“  λ―Έλ””μ–΄ κΈ°κΈ° μž₯치
  • print - ν”„λ¦°ν„°
  • speech - 화면을 크게 μ½λŠ” μŠ€ν¬λ¦°λ¦¬λ”
  • screen - 컴퓨터 슀크린, νƒœλΈ”λ¦Ώ, 슀마트폰 λ“±

print λ―Έλ””μ–΄ νƒ€μž…μ˜ μ‚¬μš© 예제:

@media print {
  body {
    color: black;
  }
}
참고자료

[↑] Back to top

효율적인 CSSλ₯Ό μž‘μ„±ν•˜λŠ”λ° μžˆμ–΄μ„œ 어렀움은 λ¬΄μ—‡μΈκ°€μš”?

λ¨Όμ €, λΈŒλΌμš°μ €λŠ” μ„ νƒμžκ°€ 맨 였λ₯Έμͺ½(key μ„ νƒμž)λΆ€ν„° μ™Όμͺ½μœΌλ‘œ μΌμΉ˜ν•˜λŠ”μ§€ ν™•μΈν•©λ‹ˆλ‹€. λΈŒλΌμš°μ €λŠ” μ„ νƒμžμ— 따라 DOM의 μš”μ†Œλ₯Ό ν•„ν„°λ§ν•˜κ³  ν•΄λ‹Ή λΆ€λͺ¨μš”μ†Œκ°€ μΌμΉ˜ν•˜λŠ”μ§€ μ‹λ³„ν•©λ‹ˆλ‹€. μ„ νƒμž 체인의 길이가 μ§§μ„μˆ˜λ‘ λΈŒλΌμš°μ €λŠ” ν•΄λ‹Ή μš”μ†Œκ°€ μ„ νƒμžμ™€ μΌμΉ˜ν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό λΉ λ₯΄κ²Œ νŒλ³„ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ νƒœκ·Έ μ„ νƒμžμ™€ 보편적인 μ„ νƒμž μ‚¬μš©μ„ ν”Όν•΄μ•Ό ν•©λ‹ˆλ‹€. 이듀은 λ§Žμ€ μš”μ†Œκ°€ 맀치되기 λ•Œλ¬Έμ— λΆ€λͺ¨κ°€ μΌμΉ˜ν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό νŒλ‹¨ν•˜κΈ° μœ„ν•΄ λΈŒλΌμš°μ €κ°€ λ§Žμ€ μž‘μ—…μ„ ν•΄μ•Όν•©λ‹ˆλ‹€.

BEM (Block Element Modifier) λ°©λ²•λ‘ μ—μ„œλŠ” λͺ¨λ‘ 단일 클래슀λ₯Ό κ°–κ³ , 계측ꡬ쑰가 ν•„μš”ν•œ κ³³μ—μ„œλŠ” 클래슀의 이름을 ν™•μž₯ν•˜κΈ°λ₯Ό ꢌμž₯ν•©λ‹ˆλ‹€. λ”°λΌμ„œ μ„ νƒμžλ₯Ό 쉽고 효율적으둜 μž¬μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μ–΄λ–€ CSS 속성이 reflow, repaint, compositing을 트리거 ν•˜λŠ”μ§€ μ•Œμ•„λ‘μ„Έμš”. κ°€λŠ₯ν•˜λ©΄ λ ˆμ΄μ•„μ›ƒ(reflow 트리거)λ₯Ό λ³€κ²½ν•˜λŠ” μŠ€νƒ€μΌμ€ ν”Όν•˜μ„Έμš”.

참고자료

[↑] Back to top

CSS μ „μ²˜λ¦¬κΈ°λ₯Ό μ‚¬μš©ν•˜λ©΄ μ–΄λ–€ μž₯단점이 μžˆλ‚˜μš”?

μž₯점:

  • CSS의 μœ μ§€λ³΄μˆ˜μ„±μ΄ ν–₯μƒλ©λ‹ˆλ‹€.
  • 쀑첩 μ„ νƒμžλ₯Ό μž‘μ„±ν•˜κΈ° μ‰½μŠ΅λ‹ˆλ‹€.
  • μΌκ΄€λœ ν…Œλ§ˆλ₯Ό μœ„ν•œ λ³€μˆ˜μ‚¬μš©. μ—¬λŸ¬ ν”„λ‘œμ νŠΈμ— 걸쳐 ν…Œλ§ˆ νŒŒμΌμ„ κ³΅μœ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • λ°˜λ³΅λ˜λŠ” CSSλ₯Ό μœ„ν•œ Mixins 생성.
  • μ½”λ“œλ₯Ό μ—¬λŸ¬ 파일둜 λ‚˜λˆ•λ‹ˆλ‹€. CSS νŒŒμΌλ„ λ‚˜λˆŒ 수 μžˆμ§€λ§Œ, κ·Έλ ‡κ²Œ ν•˜κΈ° μœ„ν•΄μ„œλŠ” 각 CSS νŒŒμΌμ„ λ‹€μš΄λ‘œλ“œν•˜κΈ° μœ„ν•œ HTTP μš”μ²­μ΄ ν•„μš”ν•©λ‹ˆλ‹€.

단점:

  • μ „μ²˜λ¦¬κΈ°λ₯Ό μœ„ν•œ 도ꡬ가 ν•„μš”ν•©λ‹ˆλ‹€. λ‹€μ‹œ μ»΄νŒŒμΌν•˜λŠ” μ‹œκ°„μ΄ 느릴 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

[↑] Back to top

μ‚¬μš©ν–ˆλ˜ CSS μ „μ²˜λ¦¬κΈ°μ— λŒ€ν•΄ μ’‹μ•˜λ˜ 점과 μ‹«μ—ˆλ˜ 점을 μ„€λͺ…ν•΄μ£Όμ„Έμš”.

쒋은 점:

  • λŒ€λΆ€λΆ„μ˜ μž₯점은 μœ„μ—μ„œ μ–ΈκΈ‰ν–ˆμŠ΅λ‹ˆλ‹€.
  • LessλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ μž‘μ„±λ˜μ—ˆμœΌλ©°, Node와 잘 μž‘λ™ν•©λ‹ˆλ‹€.

싫은 점:

  • μ €λŠ” C++둜 μž‘μ„±λœ LibSass 바인딩인 node-sassλ₯Ό 톡해 Sassλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. λ…Έλ“œ 버전을 λ°”κΏ€ λ•Œ 자주 λ‹€μ‹œ μ»΄νŒŒμΌν•΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€.
  • Lessμ—μ„œλŠ” λ³€μˆ˜ μ΄λ¦„μ˜ 접두어가 @이며, @media, @import, @font-face κ·œμΉ™κ³Ό 같은 고유 CSS ν‚€μ›Œλ“œμ™€ ν˜Όλ™λ  수 μžˆμŠ΅λ‹ˆλ‹€.

[↑] Back to top

λΉ„ν‘œμ€€ 글꼴을 μ‚¬μš©ν•˜λŠ” μ›Ή λ””μžμΈ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ–΄λ–»κ²Œ κ΅¬ν˜„ν•˜λ‚˜μš”?

font-faceλ₯Ό μ‚¬μš©ν•˜κ³  font-weightκ°€ λ‹€λ₯Έ 경우 font-familyλ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.

[↑] Back to top

λΈŒλΌμš°μ €κ°€ CSS μ„ νƒμžμ— μΌμΉ˜ν•˜λŠ” μš”μ†Œλ₯Ό μ–΄λ–»κ²Œ κ²°μ •ν•˜λŠ”μ§€ μ„€λͺ…ν•˜μ„Έμš”.

μ΄λŠ” μœ„μ˜ 효율적인 CSS μž‘μ„±κ³Ό κ΄€λ ¨μžˆμŠ΅λ‹ˆλ‹€. λΈŒλΌμš°μ €λŠ” μ„ νƒμžλ₯Ό 였λ₯Έμͺ½(μ„ νƒμž)μ—μ„œλΆ€ν„° μ™Όμͺ½μœΌλ‘œ μΌμΉ˜μ‹œν‚΅λ‹ˆλ‹€. λΈŒλΌμš°μ €λŠ” μ„ νƒμžμ— 따라 DOM의 μš”μ†Œλ₯Ό ν•„ν„°λ§ν•˜κ³  λΆ€λͺ¨μš”μ†Œλ₯Ό κ²€μ‚¬ν•˜μ—¬ 일치λ₯Ό νŒμ •ν•©λ‹ˆλ‹€. μ„ νƒμž 체인의 길이가 μ§§μ„μˆ˜λ‘, λΈŒλΌμš°μ €κ°€ ν•΄λ‹Ή μš”μ†Œκ°€ μΌμΉ˜ν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό 더 λΉ λ₯΄κ²Œ νŒλ‹¨ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄, 이 μ„ νƒμž p spanλŠ” λ¨Όμ € λͺ¨λ“  <span>μš”μ†Œλ₯Ό μ°Ύμ•„ κ·Έ λΆ€λͺ¨μ˜ λ£¨νŠΈκΉŒμ§€ λͺ¨λ‘ ν†΅κ³Όν•˜μ—¬ <p>μš”μ†Œλ₯Ό μ°ΎμŠ΅λ‹ˆλ‹€. νŠΉμ •ν•œ <span>의 경우 <p>λ₯Ό μ°ΎλŠ” μ¦‰μ‹œ <span>이 μΌμΉ˜ν•˜λŠ” 것을 μ•Œκ³ μžˆμœΌλ©°, 이에 따라 맀칭을 μ€‘μ§€ν•©λ‹ˆλ‹€.

참고자료

[↑] Back to top

Pseudo-elements에 λŒ€ν•΄ μ„€λͺ…ν•˜κ³  이 μš”μ†Œκ°€ 무엇을 μœ„ν•΄ μ‚¬μš©λ˜λŠ”μ§€ μ„€λͺ…ν•˜μ„Έμš”.

CSS Pseudo-elementλŠ” μ„ νƒμžμ— μΆ”κ°€λ˜λŠ” ν‚€μ›Œλ“œλ‘œ, μ„ νƒν•œ μš”μ†Œμ˜ νŠΉμ • 뢀뢄을 μŠ€νƒ€μΌλ§ ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ§ˆν¬μ—…μ„ μˆ˜μ •ν•˜μ§€ μ•Šκ³ (:before, :after) ν…μŠ€νŠΈ λ°μ½”λ ˆμ΄μ…˜μ„ μœ„ν•΄ μ‚¬μš©ν•˜κ±°λ‚˜(:first-line, :first-letter) λ§ˆν¬μ—…μ— μš”μ†Œλ₯Ό μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.(content: ...와 κ²°ν•©)

  • :first-lineκ³Ό :first-letterλŠ” ν…μŠ€νŠΈλ₯Ό λ°μ½”λ ˆμ΄μ…˜ν•˜λŠ”λ° μ‚¬μš©λ  수 μžˆμŠ΅λ‹ˆλ‹€.
  • μœ„μ˜ .clearfix에 μ‚¬μš©λ˜μ–΄ clear: both둜 μ˜μ—­μ„ μ°¨μ§€ν•˜μ§€ μ•ŠλŠ” μš”μ†Œλ₯Ό μΆ”κ°€ν•©λ‹ˆλ‹€.
  • 툴팁의 삼각 ν™”μ‚΄ν‘œλŠ” :before와 :afterλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. μ‚Όκ°ν˜•μ΄ μ‹€μ œλ‘œ DOM이 μ•„λ‹Œ μŠ€νƒ€μΌμ˜ μΌλΆ€λ‘œ κ°„μ£Όλ˜κΈ° λ•Œλ¬Έμ— λΆ„λ¦¬ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. 좔가적인 HTML μš”μ†Œλ₯Ό μ‚¬μš©ν•˜μ§€ μ•Šκ³  CSS μŠ€νƒ€μΌλ§ŒμœΌλ‘œ μ‚Όκ°ν˜•μ„ 그릴 μˆ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€.

[↑] Back to top

profile
πŸ’» μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ 🎨 UX/UI λ””μžμΈμ„ μ’‹μ•„ν•©λ‹ˆλ‹€. https://ysm.sh

1개의 λŒ“κΈ€

comment-user-thumbnail
2019λ…„ 4μ›” 5일

λ„ˆλ¬΄ 쒋은 자료 κ°μ‚¬ν•©λ‹ˆλ‹€ : )

λ‹΅κΈ€ 달기