๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
CSS๐Ÿ”ง/๋ฐ˜์‘ํ˜•

๋ฐ˜์‘ํ˜• ๋ชจ๋ฐ”์ผ์ด๋ž€?

by hyojinny 2022. 11. 7.

๋ชจ๋ฐ”์ผ ๋ฒ„์ „์— ์ต์Šค๋Š” ์—†์Œ

- display : flex, grid

- float ์—†์Œ

 

float ๊ฐœ๋…์ด ์—†๊ธฐ๋•Œ๋ฌธ์—

flex ํ•„์ˆ˜! ์‚ฌ์šฉ๋ฒ• ์ตํžˆ๊ธฐ 

 


์‚ฌ์ดํŠธ๊ฐœ๋ฐœ๋ฐฉ์‹  
- ์ ์‘ํ˜• - ๋ฐ˜์‘ํ˜•
 ๋ฐ์Šคํฌํƒ‘๊ณผ ๋ชจ๋ฐ”์ผ์‚ฌ์ดํŠธ๋ฅผ ๋”ฐ๋กœ ๊ฐœ๋ฐœ ๋ฐํƒ‘, ํƒ€๋ธ”๋ ›, ๋ชจ๋ฐ”์ผ๋“ฑ ๋ชจ๋“  ๋””๋ฐ”์ด์Šค์— ๋งž์ถฐ์„œ 
ํ•˜๋‚˜์˜ ์†Œ์Šค๋กœ ๊ฐœ๋ฐœ
ex. ๊ธฐ๋Šฅ์ด ๋งŽ์€ ์‚ฌ์ดํŠธ(๋„ค์ด๋ฒ„, ์‡ผํ•‘๋ชฐ,์€ํ–‰์‚ฌ์ดํŠธ ๋“ฑ)
ex. ๋ฐํƒ‘๊ณผ ๋ชจ๋ฐ”์ผ์˜ ๊ตฌ์„ฑ์„ ๋”ฐ๋กœ ์ตœ์ ํ™”ํ•ด์•ผํ•  ๊ฒฝ์šฐ(์•„์‚ฐ๋ณ‘์›)
ex. ์‡ผํ•‘๋ชฐ ๋“ฑ ๊ธฐ๋Šฅ์ด ๋งค์šฐ๋งŽ์€ ๊ฒฝ์šฐ๋ฅผ ์ œ์™ธํ•˜๊ณ  ๋ชจ๋‘ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ฐœ๋ฐœ๋˜๋Š” ์ถ”์„ธ (์ผ๋ฐ˜์ ์ธ ํšŒ์‚ฌ ์‚ฌ์ดํŠธ)

 

 

DB์ปท์˜ 10๊ฐœ ์ค‘ 8๊ฐœ๋Š” ์ด๋ฏธ ๋ฐ˜์‘ํ˜•

์ต์Šค ๋ฐ˜์˜ ์•ˆํ•˜๋Š” ์ถ”์„ธ ๊ณง 100% ๋ฐ˜์‘ํ˜•์ œ์ž‘๋˜๋Š” ์ถ”์„ธ

์œ ์ง€๋ณด์ˆ˜ ์ธก๋ฉด์—์„œ ๋ฐ˜์‘ํ˜•์ด ํ™œ์šฉ๋„๊ฐ€ ๋†’๋‹ค

์ด์œ ๋Š” ๋ฐํƒ‘์šฉ/๋ชจ๋ฐ”์ผ 2๊ฐœ ๋งŒ๋“œ๋Š”๊ฒƒ๋ณด๋‹ค ๋ฐ˜์‘ํ˜• ํ•œ๋ฒˆ์œผ๋กœ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๊ธฐ๋•Œ๋ฌธ

 

๋Œ“๊ธ€