๐Ÿ‘ถ ํผ๋ธ”๋ฆฌ์‹ฑํ•˜๋ฉฐ ๋Š๋‚€์ ๋“ค ์ด์ •๋ฆฌ - ๋ฐ˜์‘ํ˜•/ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง•/ํ˜‘์—… ๊ด€๋ จ (์ž‘์„ฑ์ค‘)

banginaยท2020๋…„ 7์›” 31์ผ
0

์˜ฌํ•ด ์ดˆ ๋‹จ๊ธฐ ํ”„๋กœ์ ํŠธ๋กœ ์„ธ๋‹ฌ๊ฐ„ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ํผ๋ธ”๋ฆฌ์‹ฑ ์„ ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค.
์ฆ๋งฌ ๋นก์„ธ๊ธฐ๋„ ํ–ˆ์ง€๋งŒ ํผ๋ธ”๋ฆฌ์‹ฑ์— ๋Œ€ํ•ด ์ •๋ง ์••์ถ•์ ์œผ๋กœ ๋งŽ์ด ๋ฐฐ์šด ์ข‹์€ ๊ฒฝํ—˜์ด์—ˆ์ง€์š”. ๊ทธ๋Ÿฐ๋ฐ ์ดํ›„ ๋ช‡๋‹ฌ๊ฐ„ ํ”„๋ก ํŠธ์—”๋“œ ๊ณต๋ถ€๋งŒ ํ•˜๋‹ˆ ์žŠํ˜€์ง€๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ์˜ˆ์ „์— ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•ด๋†“์•˜๋˜ ๊ธ€์„ ๋‹ค์‹œ ๊บผ๋‚ด์„œ ์ •๋ฆฌํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜

์ดํ•˜ ์ดˆ๋ณด ํผ๋ธ”๋ฆฌ์…”/FE๊ฐœ๋ฐœ์ž๋กœ์„œ ์ง์ ‘ ๋ถ€๋”ชํžˆ๊ณ  ๊นจ์ ธ๊ฐ€๋ฉฐ ์„ธ๋‹ฌ ๊ฐ„ ๋ฐฐ์šด ๊ฒƒ๋“ค!
๋ถ€์ œ๋Š” ๋ญฃ๋„ ๋ชจ๋ฅด๋Š” ์ดˆ๋ณด๊ฐ€ ์ฒซ ์ฝ”๋”ฉ์ผ์„ ํ”„๋ฆฌ๋žœ์„œ๋กœ ํ•˜๊ฒŒ ๋˜์—ˆ์„ ๋•Œ ์ƒ๊ธฐ๋Š” ์ผ๋“ค.. ์ •๋„?๊ฐ€ ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.

1. ๋ฐ˜์‘ํ˜• ๊ด€๋ จ ๋ฐฐ์šด์ 

Javascript ์ฝ”๋“œ๋„ ๋””๋ฐ”์ด์Šค ํฌ๊ธฐ๋ณ„(px) ๋ถ„๋ฆฌ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋งค์šฐ ๋ฒˆ๊ฑฐ๋กญ์ง€๋งŒ!

๋ฐ˜์‘ํ˜• Break point ์„ค์ •์€ ๊ธฐํš์ž&๋””์ž์ด๋„ˆ์™€ ์ถฉ๋ถ„ํ•œ ํ˜‘์˜๋ฅผ ํ•˜์ž.

๋ชจ๋ฐ”์ผ ๋ธŒ๋ผ์šฐ์ €

  1. ํ™”๋ฉด์„ค๊ณ„์‹œ ์ƒ๋‹จ ์ฃผ์†Œ์ฐฝ, ํ•˜๋‹จ ํˆด๋ฐ”์˜์—ญ ๋†’์ด๋ฅผ ๊ณ ๋ คํ•ด์„œ ๋””์ž์ธํ•˜๊ธฐ
  2. Safari๋Š” ํˆด๋ฐ”๋’ค์˜ ์˜์—ญ๊นŒ์ง€ viewport ์˜์—ญ์œผ๋กœ ๊ณ„์‚ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— 100vh๋„ ํ•˜๋‹จ์ด ์งค๋ฆฌ๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒ
  3. ๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ์›น์‚ฌ์ดํŠธ๋Š” "์•ฑ"์ด ์•„๋‹ˆ๋‹ค. ํ•œ๊ณ„์ ์„ ์ธ์ง€ํ•˜๊ณ  ๊ธฐํš/๋””์ž์ธ/์ž‘์—…์— ์ž„ํ•˜์ž.

2. ํ˜‘์—… ๊ด€๋ จ ๊นจ๋‹ฌ์Œ

ํฐ ๋ช…๋ถ„์—†์ด ๊ฐœ๋ฐœ ๊ณต์ˆ˜๊ฐ€ ์ง€๋‚˜์น˜๊ฒŒ ๋งŽ์ด ๋“ค์–ด๊ฐ€๋Š” ๋””์ž์ธ? - ์† ๋“์ง€ ๋ง๊ณ  ๊ธฐํš์ž์—๊ฒŒ ๋ฌผ์–ด๋ณด๊ณ  ํ˜‘์˜ํ•˜์ž. ๐Ÿค“

์ด ๋ถ€๋ถ„์€ ์ง๋ฌด๋ณ„ ์ž…์žฅ์ฐจ๊ฐ€ ์žˆ๊ฒ ์ง€๋งŒ, ์ „์ฒด ๋น„์ฆˆ๋‹ˆ์Šค์˜ ๊ด€์ ์—์„œ ๋ดค์„ ๋•Œ ํ”„๋กœ์ ํŠธ์— ์†Œ์š”๋˜๋Š” ์ „์ฒด ๊ณต์ˆ˜๋Š” ์–ธ์ œ๋‚˜ ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์ธ ์ž…์žฅ์€ ๊ธฐํš๊ณผ ๋””์ž์ธ ์˜์—ญ์„ ์กด์ค‘ํ•˜๊ณ  ์˜์‚ฌ๊ฒฐ์ •์ด ํ•œ๋ฒˆ ๋˜์—ˆ์œผ๋ฉด ๋”ฐ๋ฅด๋Š”๊ฒŒ ๋งž๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€๋งŒ! ๋””์ž์ธ์„ ๋ฐ›์•˜์„ ๋•Œ "์–ด? ์ด๊ฑธ ๊ตณ์ด ์ด๋ ‡๊ฒŒ(๊นŒ์ง€) ํ•ด์•ผ ํ• ๊นŒ? ์‹œ๊ฐ„๋„ ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ณ  ์™œ ์ด๋ ‡๊ฒŒ ํ•˜๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ์–ด!"๋ผ๋Š” ์˜๊ตฌ์‹ฌ์ด ๋“ ๋‹ค๋ฉด ๊ธฐํš์ž/๋””์ž์ด๋„ˆ์—๊ฒŒ ์งˆ๋ฌธํ•˜๊ณ  ํ˜‘์˜ํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ด๋ผ๊ณ  ๋ฏฟ์Šต๋‹ˆ๋‹ค. ์•„ ๋ฌผ๋ก  ๊ธฐํš ๋‹จ๊ณ„๋ถ€ํ„ฐ ํ•จ๊ป˜ ์–ด๋Š ์ •๋„ ์ฐธ์—ฌํ•ด์„œ ์ •๋ณด ๊ณต์œ ๊ฐ€ ์›ํ™œํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด BEST์ด๊ฒ ์ง€๋งŒ์š”! (์ €๋Š” ์›๊ฒฉ๊ทผ๋ฌด์— ์‹œ์ฐจ + ๋””์ž์ด๋„ˆ๋‹˜ ์ค‘๊ฐ„ ๊ต์ฒด ๋“ฑ๋“ฑ.. ์˜ ์ด์œ ๋กœ ์ด๋Ÿฐ ์ง„ํ–‰์ด ์–ด๋ ค์šด ์ƒํ™ฉ์ด์—ˆ์Šต๋‹ˆ๋‹ค.. ๐Ÿ˜ญ)

์‚ฌ์‹ค ์ €๋Š” ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์—์„œ ์ด๋ ‡๊ฒŒ ์ ๊ทน์ ์œผ๋กœ ์งˆ๋ฌธํ•˜๊ณ  ํ˜‘์˜ํ•˜์ง€ ๋ชป ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ผ๋‹จ ๋””์ž์ธ๊ณผ ์š”์ฒญ์‚ฌํ•ญ์„ ๋ฐ›์œผ๋ฉด 100% ๊ตฌํ˜„์„ ๋ชฉํ‘œ๋กœ ํ•˜๊ณ  ์ž‘์—…์„ ํ–ˆ์œผ๋‹ˆ๊นŒ์š”..(๊ทธ๋ƒฅ ๊ทธ๋ž˜์•ผ๋งŒ ํ•˜๋Š” ์ค„ ์•Œ์•˜๋Š”๋ฐใ… ใ… ) ๊ทธ๋ž˜์„œ ์ข€ ์–ด๋ ต๊ณ  ๋ณต์žกํ•œ ์š”์ฒญ์‚ฌํ•ญ ๋ฐ›์œผ๋ฉด ํ˜ผ์ž ์—„์ฒญ ์ŠคํŠธ๋ ˆ์Šค ๋ฐ›์œผ๋ฉด์„œ ํ–ˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ง€๊ธˆ ์ƒ๊ฐํ•˜๋ฉด ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์ข€ ๋” ํ•ด์„œ ์ž‘์—… ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐœ์„ ํ–ˆ์œผ๋ฉด ํ”„๋กœ์ ํŠธ ์†Œ์š” ๊ธฐ๊ฐ„๋„ ๋‹จ์ถ•๋˜๊ณ  ์ด๋ชจ์ €๋ชจ ์กฐ๊ธˆ ๋” ํšจ์œจ์ ์ด์ง€ ์•Š์•˜์„๊นŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์Šค์ผˆ๋ ˆํ†ค UI/๋””ํดํŠธ ์ƒํƒœ UI๋ฅผ ๋ฏธ๋ฆฌ ์š”์ฒญํ•˜์ž

ํ‰๋ฉด์ ์ธ ๋””์ž์ธ์„ ์ •์  ์›น์‚ฌ์ดํŠธ๋กœ๋งŒ ์˜ฎ๊ธธ ๋•Œ๋Š” ๋ฏธ์ฒ˜ ์ƒ๊ฐํ•˜์ง€ ๋ชป ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋™์ ์ธ ์ •๋ณด๊ฐ€ ํ‘œํ˜„๋˜๋Š” UI๋ผ๋ฉด ์ •๋ณด๊ฐ€ ์—†๋Š” ์ƒํƒœ์˜ UI๋„ ์„ธํŠธ๋กœ ์ค€๋น„๋˜์–ด์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„..

๋””ํดํŠธ ์ƒํƒœ UI์˜ ์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒ€์ƒ‰๊ฐ’์ด ์—†์„ ๋•Œ์˜ ๊ฒ€์ƒ‰๊ฒฐ๊ณผ ํŽ˜์ด์ง€๋ผ๋“ ์ง€, ์ฑ„ํŒ… ๋ชฉ๋ก์ด ๋น„์—ˆ์„ ๋•Œ์˜ ์ฑ„ํŒ…์ฐฝ UI๊ฐ€ ๋  ์ˆ˜ ์žˆ๊ฒ ๋„ค์š”.

ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ €(ํผ๋ธ”๋ฆฌ์…”)๋„ ์•ˆ ์ฑ™๊ธฐ๊ณ  ๋ชจ๋‘๊ฐ€ ์•ˆ ์ฑ™๊ธฐ๋‹ค๊ฐ€ ๋ง‰ํŒ์— ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์š”์ฒญํ•ด์„œ ์ œ๊ฐ€ ํ›„๋‹ค๋‹ฅ ํ•ด์„œ ๋„˜๊ฒผ๋˜ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์‹ค ์ด ๋ถ€๋ถ„์€ ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ์ž„์˜๋กœ ๊ธฐ๋ณธ ๋ฉ˜ํŠธ๋งŒ ๋„ฃ๊ณ  ์ฒ˜๋ฆฌํ•  ์ˆ˜๋„ ์žˆ๊ฒ ์œผ๋‚˜! ๋””์ž์ธ ์ปจ์…‰์ด ํ™•์‹คํ•œ ์‚ฌ์ดํŠธ๋ผ๋ฉด ๋”๋”์šฑ์ด ๋””์ž์ด๋„ˆ์™€ ๊ธฐํš์ž์˜ ์˜๋„๋ฅผ ๋‹ด์€ ์ผ๊ด€์„ฑ์žˆ๋Š” UI๊ฐ€ ํ•„์š”ํ•˜๊ฒ ์ฃ .
(์ €๋Š” ๋‹ค๋ฅธ ๋””์ž์ด๋„ˆ/๊ธฐํš์ž๋ถ„๋“ค๊ณผ ๊ต๋ฅ˜ํ•ด๋ณธ ๊ฒฝํ—˜์ด ์—†์–ด์„œ ์—…๊ณ„์˜ ๊ด€ํ–‰์ด๋ผ๊ฑฐ๋‚˜ ํ‘œ์ค€์ ์ธ ํ”„๋กœ์„ธ์Šค๋Š” ์ž˜ ๋ชจ๋ฅด์ง€๋งŒ ๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ์œผ๋กœ ์ด ๋ถ€๋ถ„์€ ์™„์„ฑ๋œ ๋””์ž์ธ์œผ๋กœ ํผ๋ธ”๋ฆฌ์…”์—๊ฒŒ ์ „๋‹ฌ๋˜๋Š” ๊ฒƒ์ด ๋” ์ผ๊ด€์„ฑ ์žˆ๋Š” ์›น์‚ฌ์ดํŠธ์— ๋„์›€์ด ๋˜์ง€ ์•Š์„๊นŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.)

๋ฐ˜์‘ํ˜• ๋””์ž์ธ์„ ์—ฌ๋Ÿฌ ๋ช…์˜ ๋””์ž์ด๋„ˆ๊ฐ€ ๋”ฐ๋กœ ๋”ฐ๋กœ ๋””์ž์ธ ํ•ด์ค„ ๋•Œ..

3. ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ๊ด€๋ จ - IE ๋„ˆ๋ž€ ๋ธŒ๋ผ์šฐ์ ธ...

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ๋‹จ๊ณจ ํ‚ค์›Œ๋“œ :
IE doesn't support ~
~ not working IE

๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์—์„œ IE๋ฅผ ๋ฒ„๋ฆฌ๊ณ  edge๋ฅผ ์ถœ์‹œํ•˜๋ฉด์„œ IE์˜ ์˜ํ–ฅ๋ ฅ์ด ๊ธ‰์†๋„๋กœ ์ค„๊ณ  ์žˆ์ง€๋งŒ ์•„์ง ๊ตญ๋‚ด์—์„œ๋Š” IE๋„ ์ฑ™๊ธฐ๋Š” ์›น์‚ฌ์ดํŠธ๋“ค๋„ ๊ฝค ์žˆ์œผ๋‹ˆ ์•„์ฃผ ๋ฌด์‹œํ•ด๋ฒ„๋ฆด ์ˆ˜๋„ ์—†๋Š” ์‹ค์ •์ด์ฃ . ํŠนํžˆ ๊ด€๊ณต์„œ ์›น์‚ฌ์ดํŠธ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ์ ‘๊ทผ์„ฑ์ด ์ค‘์š”ํ•˜๋‹ˆ ๋”๋”์šฑ ๊ทธ๋Ÿดํ…Œ๊ณ ์š”. ์Œ... ๋„ค ๊ทธ๋ž˜์„œ ์ข€ ์ •๋ฆฌํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์‹œ ์œ ์˜ํ•ด์•ผ ํ•  ์ ๋“ค์„ IE์œ„์ฃผ๋กœ ์ •๋ฆฌํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ๐Ÿ˜‡ ๐Ÿ˜ˆ

1. IE - SVG ์‚ฌ์šฉ์‹œ view-box ์†์„ฑ๋„ ์„ค์ •ํ•ด์ฃผ์–ด์•ผ ์˜๋„ํ•œ ํฌ๊ธฐ๋Œ€๋กœ ์•Œ๋งž๊ฒŒ ๋‚˜์˜จ๋‹ค.

๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋“ค์€ ๋˜‘๋˜‘ํ•ด์„œ(?) svg ํƒœ๊ทธ์— view-box ์†์„ฑ(svg์ด๋ฏธ์ง€๊ฐ€ ๊ทธ๋ ค์งˆ ์บ”๋ฒ„์Šค ํฌ๊ธฐ๋ฅผ ์ •ํ•จ)์„ ๋”ฐ๋กœ ์ •์˜ํ•˜์ง€ ์•Š๊ณ  css๋กœ svg์˜ width, height๋กœ ๋ฐ”๋กœ ์กฐ์ž‘์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ IE์—์„œ ๊ทธ๋ ‡๊ฒŒ ํ•˜์…จ๋‹ค๊ฐ„ ๋Œ€๋นต ํฐ svg์ด๋ฏธ์ง€๋ฅผ ๋ณด๊ณ  ๋‹นํ™ฉํ•˜๊ฒŒ ๋˜์‹ค ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ๋‚˜ svg๋Š” ๋กœ๊ณ  ๋“ฑ์— ๋งŽ์ด ์“ฐ์ด๋‹ˆ IE๋ฅผ ์ฑ™๊ฒจ์•ผ ํ•œ๋‹ค๋ฉด view-box์†์„ฑ๋„ ์„ธํŠธ๋กœ ๋„ฃ์–ด์ฃผ์„ธ์š”!

2. ๋ฐ˜์‘ํ˜• ๋งŒ๋Šฅ๊ฐ’ "unset"์˜ ๋ฐฐ์‹  - css์†์„ฑ์˜ default value๋ฅผ ๊ฒ€์ƒ‰ํ•ด์„œ ์‚ฌ์šฉํ•˜์ž.

๋ฐ˜์‘ํ˜• ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋ฉด ๋ชจ๋ฐ”์ผ โ†’ ํƒœ๋ธ”๋ฆฟ โ†’ ๋ฐ์Šคํฌํƒ‘ ๋˜๋Š” ์—ญ์ˆœ์œผ๋กœ CSS๋ฅผ ์˜ค๋ฒ„๋ผ์ด๋”ฉํ•˜๋ฉด์„œ(๋ฎ์–ด์“ฐ๋ฉด์„œ) ์ž‘์„ฑํ•˜๊ฒŒ ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿด ๋•Œ ๋ชจ๋ฐ”์ผ์—์„œ ์คฌ๋˜ ๊ฐ’์„ ๋ฐ์Šคํฌํ†ฑ์—์„œ๋Š” ์ดˆ๊ธฐํ™”ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ๋“ฑ์ด ์ž์ฃผ ๋ฐœ์ƒํ•˜๋Š”๋ฐ์š”. ์ €๋Š” ๋ฌด์กฐ๊ฑด "auto" ๋˜๋Š” "unset"์„ ์‚ฌ์šฉํ•˜๊ณ  ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž˜ ์ž‘๋™๋˜๋Š” ๊ฑธ ํ™•์ธํ•˜๊ณ  ๋‹น์—ฐํžˆ ๋ฌธ์ œ๊ฐ€ ์—†๋Š” ์ค„ ์•Œ๊ณ  ๊ฝค ์˜ค๋ž˜ ์‚ฌ์šฉ์„ ํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋Ÿฐ๋ฐ... ์ค‘๊ฐ„์— IE๋กœ ์‚ฌ์ดํŠธ๋ฅผ ํ™•์ธํ•˜๋‹ˆ ๋ง‰ ์—ฌ๊ธฐ์ €๊ธฐ ํ‹€์–ด์ง€๊ณ  ๋‚œ๋ฆฌ๊ฐ€ ๋‚ฌ๋”๋ผ๊ณ ์š” ๐Ÿ˜… ์•Œ๊ณ ๋ณด๋‹ˆ IE์—์„  unset ๊ฐ’์ด ์•ˆ ๋จนํžˆ๊ณ  ๊ฐ CSS ์†์„ฑ๋ณ„ ์ดˆ๊ธฐ๊ฐ’(initial value / default value)๋ฅผ ๋„ฃ์–ด์ค˜์•ผ ์ดˆ๊ธฐํ™”๊ฐ€ ๋˜๋Š” ๊ฒƒ์ด์—ˆ์Šต๋‹ˆ๋‹ค!
์ดˆ๊ธฐํ™”๋ฅผ ๊ฐ€์žฅ ๋นˆ๋ฒˆํ•˜๊ฒŒ ํ–ˆ๋˜ ์†์„ฑ๋“ค์€ max-width/max-height, min-width/min-height top/bottom/left/right, position ๋“ฑ ์ฃผ๋กœ ๋ ˆ์ด์•„์›ƒ ๊ด€๋ จ ์†์„ฑ๋“ค์ด์—ˆ์Šต๋‹ˆ๋‹ค.

<์•Œ์•„๋‘๋ฉด ์œ ์šฉํ•œ CSS ์†์„ฑ ์ดˆ๊ธฐ๊ฐ’>

  • max-width : none
  • max-height : none
  • min-width : 0
  • min-height : 0
  • top, bottom, left, right : auto

์ž‘์—…ํ•˜์‹œ๋‹ค๊ฐ€ ์ดˆ๊ธฐ๊ฐ’์ด ๊ถ๊ธˆํ•˜์‹œ๋ฉด ๊ตฌ๊ธ€์— CSS TOP DEFAULT VALUE ์ด๋Ÿฐ ์‹์œผ๋กœ ๊ฒ€์ƒ‰ํ•˜์…”์„œ W3School ๊ฒŒ์‹œ๊ธ€ ํ™•์ธํ•˜์‹œ๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ํ™•์ธ ๊ฐ€๋Šฅํ•˜๋‹ˆ ์ฐธ์กฐํ•˜์‹œ๊ณ ์š” ๐Ÿ‘Œ

3. Multiline ํ…์ŠคํŠธ๋ฅผ ๋ง์ค„์ž„ํ‘œ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ ์ฝ”๋“œ๋Š” ๋ช‡ ์ค„?

    display: block;
    display: -webkit-box;
    max-width: 200px; 
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

๋„ค ์ƒ๋‹นํ•˜์ฃ . ๊ทธ๋ฆฌ๊ณ  ์ˆœ์ˆ˜ CSS๋กœ ์ฝ”๋“œ ์ž‘์„ฑํ•˜์‹ ๋‹ค๋ฉด ๋งค๋ฒˆ ๋ณด์—ฌ์งˆ ๋ผ์ธ ์ˆ˜ * line-height = max-height ๋ฅผ ๊ณ„์‚ฐํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” SCSS๋ฅผ ์‚ฌ์šฉํ•ด์„œ mixin์œผ๋กœ ๋งŒ๋“ค์–ด๋†“๊ณ  ๋ถˆ๋Ÿฌ๋‹ค ์‚ฌ์šฉํ•˜๊ธด ํ–ˆ์ง€๋งŒ ์–ด์จŒ๋“  ์ฝ”๋“œ๋Ÿ‰์ด ์ƒ๋‹นํžˆ ๋งŽ์•„์ง€์ฃ .

4. ์Šคํฌ๋กค๋ฐ”๋ฅผ ์˜ˆ์˜๊ฒŒ ๊พธ๋ฏธ๊ณ  ์‹ถ๋‹ค๊ณ ? IE ๐Ÿ—ฃ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ข€ ํ•„์š”ํ• ๊ฑธ?

IE์—์„œ ์Šคํฌ๋กค๋ฐ”๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๋ ค๋ฉด ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ๊ฑฐ์˜ ํ•„์ˆ˜๋ผ๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ƒ‰์ƒ, ๊ทธ๋ฆผ์ž ์ •๋„๋Š” ์กฐ์ ˆ์ด ๊ฐ€๋Šฅํ•˜์ง€๋งŒ width ์กฐ์ ˆ๋„ ์•ˆ ๋˜๊ณ  ์ด๋ž˜์ €๋ž˜ ์ œํ•œ์ด ๋งŽ๊ฑฐ๋“ ์š” ๐Ÿ˜‚. ๊ทธ๋Ÿด ๋• ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ํ•ด๊ฒฐํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๊ณ ๋ฅด๋Š” ๋ฐ ์กฐ๊ธˆ ๊ท€์ฐฎ์„ ์ˆœ ์žˆ์ง€๋งŒ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์žฅํ•ด์ฃผ๋‹ˆ๊นŒ์š”!

์•„๋ž˜๋Š” ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ์กฐ์ž‘ ๊ฐ€๋Šฅํ•œ ์Šคํฌ๋กค๋ฐ” ์†์„ฑ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค!

scrollbar-base-color: #000;
scrollbar-face-color: #000;
scrollbar-3dlight-color: #000;
scrollbar-highlight-color: #000;
scrollbar-track-color: #000;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #000;
scrollbar-dark-shadow-color: #000;

5. onclick์„ hํƒœ๊ทธ์— ์“ฐ๊ณ ์‹ถ๋‹ค๊ณ ? IE ๐Ÿ—ฃ ...

a ํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ hํƒœ๊ทธ์— ์ธ๋ผ์ธ์œผ๋กœ onClick ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ–ˆ์–ด์•ผ ํ–ˆ๋Š”๋ฐ์š”, ๋ถ„๋ช… ํ•จ์ˆ˜์—๋Š” ๋ฌธ์ œ๊ฐ€ ์—†๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ IE์—์„œ๋Š” ๋˜ ๋ง์ฝ์ด๋ผ "IE onClick not working"์„ ๊ตฌ๊ธ€๋งํ•˜๋‹ˆ IE๋Š” hํƒœ๊ทธ์— onClick ํ•จ์ˆ˜๋ฅผ ๋ฐ›์ง€ ์•Š๋„๋ก ๋˜์–ด์žˆ๋‹ค๊ณ  ํ•˜๋„ค์š”. ์‚ฌ์‹ค hํƒœ๊ทธ๊ฐ€ ํด๋ฆญ์„ ๋ชฉ์ ์œผ๋กœ ํ•˜๋Š” ํƒœ๊ทธ๊ฐ€ ์•„๋‹ˆ๋‹ˆ ์‹œ๋ฉ˜ํ‹ฑ ์›น์˜ ๋งฅ๋ฝ์—์„œ๋Š” ์ดํ•ด๊ฐ€ ๋˜๋‚˜... ๊ทธ๋ž˜๋„ ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋“ค์€ ๋‹ค ๋˜๋Š”๋ฐ ์–˜๋งŒ ๋˜ ์•ˆ ๋˜๋‹ˆ๊นŒ ใ… ใ… 
๋„ค ๊ทธ๋ž˜์„œ a ํƒœ๊ทธ๊ฐ€ ์•„๋‹Œ ๋ฐ์— onClick ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค๋ฉด ๊ผญ ๊ตฌ๊ธ€๋งํ•ด์„œ ๊ฐ€๋Šฅ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๊ณ  ์‚ฌ์šฉํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค!

6. ๋งฅ์œ ์ €๊ฐ€ IE ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•ํ•˜๊ธฐ -ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ์‚ฌ์ดํŠธ Free Trial๋กœ ์—ฐ๋ช…ํ•˜๊ธฐ

๋„ค. ์ด๊ฑด ์ œ๊ฐ€ ์•„์ง ์ „๋ฌธ ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ์•„๋‹ˆ๋‹ค๋ณด๋‹ˆ ๋ชจ๋ฅด๋Š” ๋ถ€๋ถ„์ผ ์ˆ˜๋„ ์žˆ๋Š”๋ฐ.. ์•„๋‹ˆ ๋งฅ ์œ ์ €๋“ค์€ IE ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ์–ด๋–ป๊ฒŒ ํ•˜์‹œ๋‚˜์š”?? ์ €๋Š” ๊ฐ์ข… ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ํ”Œ๋žซํผ์˜ ๋ฌด๋ฃŒ ์ œ๊ณต์‹œ๊ฐ„์œผ๋กœ ๋Œ๋ ค๋ง‰๊ธฐ ํ•˜๋ฉด์„œ ์ฒดํฌํ–ˆ์Šต๋‹ˆ๋‹ค. ใ…œใ… ใ… ใ… ใ… ใ…  ๋‹จ๊ธฐ ํ”„๋กœ์ ํŠธ์ธ์ง€๋ผ ๋ฌด๋ฃŒ ์ œ๊ณต์‹œ๊ฐ„์œผ๋กœ ์–ด์ฐŒ์–ด์ฐŒ ์ž˜ ๋๋ƒˆ์Šต๋‹ˆ๋‹ค๋งŒ.. ์ด๊ฒŒ ์ตœ์„ ์˜ ๋ฐฉ๋ฒ•์ธ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค๋งŒ ์ผ๋‹จ ์–ด๋–ค ๋ฐฉ๋ฒ•์ด๋“  ํ•„์š”ํ•˜์‹  ๋ถ„๋“ค์„ ์œ„ํ•ด ์ œ๊ฐ€ ์‚ฌ์šฉํ•œ ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ๋“ค์„ ์•Œ๋ ค๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

<ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง• ํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ - ๋ฌด๋ฃŒ ์ด์šฉ์‹œ๊ฐ„ ์žˆ๋Š” ์‚ฌ์ดํŠธ๋“ค๋งŒ>

profile
UX, Graphic์— ๊ด€์‹ฌ์ด ๋งŽ์€ ์ฃผ๋‹ˆ์–ด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž. ์ทจ๋ฏธ๋Š” ์š”๊ฐ€์™€ ์˜์ƒํŽธ์ง‘์ž…๋‹ˆ๋‹ค. ์ด๋ชจ์ง€ Lover ๐Ÿ’˜

0๊ฐœ์˜ ๋Œ“๊ธ€