์ด ๊ธ€์€ ํ”„๋ก ํŠธ์—”๋“œ ์ง๋ฌด ๋ฉด์ ‘ ์งˆ๋ฌธ๊ณผ ๊ด€๋ จ๋œ 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