ํ‹ฐ์Šคํ† ๋ฆฌ

๐ŸŒฑ ์„ฑํ˜ธ ๋ธ”๋กœ๊ทธ
๊ฒ€์ƒ‰ํ•˜๊ธฐ

๋ธ”๋กœ๊ทธ ํ™ˆ

๐ŸŒฑ ์„ฑํ˜ธ ๋ธ”๋กœ๊ทธ

leeseong010.tistory.com/m

_์„ฑํ˜ธ_ ๋‹˜์˜ ๋ธ”๋กœ๊ทธ์ž…๋‹ˆ๋‹ค.

๊ตฌ๋…์ž
2
๋ฐฉ๋ช…๋ก ๋ฐฉ๋ฌธํ•˜๊ธฐ
๊ณต์ง€ [๋‚˜์˜ ์„ธ ๋ฒˆ์งธ ๋ชฉํ‘œ] ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌโ‹ฏ ๋ชจ๋‘๋ณด๊ธฐ

์ฃผ์š” ๊ธ€ ๋ชฉ๋ก

  • [CSS] ๋ฐ˜์‘ํ˜• ํ—ค๋” ๋งŒ๋“ค๊ธฐ (feat. mediaQuery) CSS์˜ mediaQuery๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ทฐํฌํŠธ(viewport) ๋„ˆ๋น„์— ๋”ฐ๋ผ CSS ์†์„ฑ ๊ฐ’์„ ๋ณ€๊ฒฝํ•ด๋ณด์žโ— ๐Ÿ“Œ mediaQuery๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”? ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ(mediaQuery)๋Š” ๋‹จ๋ง๊ธฐ์˜ ์œ ํ˜• (์ถœ๋ ฅ๋ฌผ vs. ํ™”๋ฉด)๊ณผ, ์–ด๋–ค ํŠน์„ฑ์ด๋‚˜ ์ˆ˜์น˜ (ํ™”๋ฉด ํ•ด์ƒ๋„, ๋ทฐํฌํŠธ ๋„ˆ๋น„ ๋“ฑ)์— ๋”ฐ๋ผ ์›น ์‚ฌ์ดํŠธ๋‚˜ ์•ฑ์˜ ์Šคํƒ€์ผ์„ ์ˆ˜์ •ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. if ์กฐ๊ฑด๋ฌธ๊ณผ ๋น„์Šทํ•œ ๊ฐœ๋…์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. ex) ๋ทฐํฌํŠธ ๋„ˆ๋น„๊ฐ€ 62rem ์ดํ•˜์ด๋ฉด flex-direction์„ row์—์„œ column์œผ๋กœ ๋ฐ”๊ฟ”์ค˜~ @media ํ‚ค์›Œ๋“œ๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์˜ ๋ฌธ๋ฒ• ๊ตฌ์กฐ @media (์กฐ๊ฑด) { ์Šคํƒ€์ผ } ์Šคํƒ€์ผ ๋ถ€๋ถ„์—๋Š” ์ผ๋ฐ˜์ ์ธ CSS ์ฝ”๋“œ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š”๋ฐ, ์กฐ๊ฑด ๋ถ€๋ถ„์ด ๋งŒ์กฑ๋  ๋•Œ๋Š” ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜๊ณ , ๋งŒ์กฑ๋˜์ง€ ์•Š์„ ๋•Œ๋Š” ์Šคํƒ€์ผ.. ๊ณต๊ฐ์ˆ˜ 0 ๋Œ“๊ธ€์ˆ˜ 0 2022. 9. 26.
  • [CSS] CSS Units(px, em, rem, vw, vh, %)์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์žโ—๏ธ CSS Units 1๏ธโƒฃ Absolute length units 2๏ธโƒฃ Relative length units Absolute length units ์–ด๋–ค ์ƒํ™ฉ์—์„œ๋“  ํ•ญ์ƒ ๊ณ ์ •๋œ ๊ธธ์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„ ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์กด์žฌํ•˜์ง€๋งŒ ์ฃผ๋กœ px(๋ชจ๋‹ˆํ„ฐ ์œ„์—์„œ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋Š” ๊ฐ€์žฅ ์ž‘์€ ๋‹จ์œ„)์ด ์‚ฌ์šฉ๋œ๋‹ค. Absolute length units์˜ ๋ฌธ์ œ์ ์ด ๋ฌด์—‡์ผ๊นŒ? ์ปจํ…Œ์ด๋„ˆ์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋ณ€๊ฒฝ๋˜์–ด๋„ ์ปจํ…์ธ ๊ฐ€ ๊ทธ๋Œ€๋กœ ๋™์ผํ•œ ํฌ๊ธฐ๋กœ ๊ฐ„์ฃผ! ๋ฐ˜์‘ํ˜• โŒ Relative length units ๊ณ ์ •๋˜์ง€ ์•Š๊ณ  ์–ด๋–ค ๊ธฐ์ค€์— ๋”ฐ๋ผ์„œ ์œ ๋™์ ์œผ๋กœ ๋ฐ”๋€” ์ˆ˜ ์žˆ๋Š” ๊ธธ์ด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋‹จ์œ„ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” 5๊ฐ€์ง€์—๋Š” em, rem, vw, vh, %๊ฐ€ ์กด์žฌํ•œ๋‹ค. em - (๋™์ผ ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ)โŒ → ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ธ€๊ผด ํฌ๊ธฐ ์„ ํƒ๋œ ํฐํŠธ ํŒจ๋ฐ€.. ๊ณต๊ฐ์ˆ˜ 0 ๋Œ“๊ธ€์ˆ˜ 0 2022. 8. 9.
  • [CSS] Bootstrap ํƒญ ์‚ฌ์šฉ๋ฒ• ์›น ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ํƒญ์€ ๋งค์šฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„ ์‚ฌ์ง„์€ ์ œ๊ฐ€ ์ง์ ‘ Bootstrap์„ ์‚ฌ์šฉํ•˜์—ฌ ๋งŒ๋“  ํƒญ ์ž…๋‹ˆ๋‹ค. ์ฐจ๋ก€๋Œ€๋กœ ํƒญ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ๋ ค๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. โ— ์™ธ๋ถ€ ์Šคํƒ€์ผ์‹œํŠธ ์ ์šฉ ๊ธฐ๋ณธ์ ์œผ๋กœ ํƒœ๊ทธ ์•ˆ์— ๋„ฃ์–ด ์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. โ— ํƒญ ๋ฉ”๋‰ด ๊ตฌ์„ฑ ํŒ๋งคํ˜„ํ™ฉ ๊ตฌ๋งคํ˜„ํ™ฉ , ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ˆœ์„œ ์—†๋Š” ๋ชฉ๋ก์„ ๋งŒ๋“ค๊ณ  ๋ฒ„ํŠผ์œผ๋กœ ํƒญ ๋ฉ”๋‰ด๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. โ— ๋ฉ”๋‰ด๋ณ„ ๋‚ด์šฉ ๊ตฌ์„ฑ ์ƒํ’ˆ๋ช… ์ตœ๊ณ ์ž…์ฐฐ๊ฐ€ ๊ฒฝ๋งค์ƒํƒœ ๋‚จ์€ ๋งˆ๊ฐ์‹œ๊ฐ„ HTML CSS JAVASCRIPT ... ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ฉ”๋‰ด๋ณ„ ๋‚ด์šฉ์„ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜์—ฌ ๊ฐ ์—ด๋งˆ๋‹ค ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค. โ— ํƒญ ์ „ํ™˜ JS ์ ์šฉ โ— Bootstrap JavaScript plugin ์ ์šฉ ๋ฅผ ํƒœ๊ทธ๊ฐ€ ๋‹ซํžˆ๊ธฐ ์ „์— ํŽ˜์ด์ง€ ๋ ๋ถ€๋ถ„์— ๋„ฃ์–ด ํ™œ์„ฑํ™” ์‹œํ‚ต๋‹ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ .. ๊ณต๊ฐ์ˆ˜ 1 ๋Œ“๊ธ€์ˆ˜ 0 2022. 4. 4.
    ๋ฌธ์˜์•ˆ๋‚ด
    • ํ‹ฐ์Šคํ† ๋ฆฌ
    • ๋กœ๊ทธ์ธ
    • ๊ณ ๊ฐ์„ผํ„ฐ

    ํ‹ฐ์Šคํ† ๋ฆฌ๋Š” ์นด์นด์˜ค์—์„œ ์‚ฌ๋ž‘์„ ๋‹ด์•„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    ยฉ Kakao Corp.