FrontEnd
Javascript
Diary
ML
CS
Django
Algorithm
AWS
Co-Work
HTML
CSS
Python
React
ReactNative

CSS

(2)

Float๋ฅผ ์ด์šฉํ•œ positioning Tip

ํผ๋ธ”๋ฆฌ์‹ฑ์„ ํ• ๋•Œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ์žฌ์ ์†Œ์— ๋ฐฐ์น˜์‹œํ‚ค๊ณ  ์‹ถ์„๋•Œ๊ฐ€ ์•„์ฃผ์•„์ฃผ ๋งŽ๋‹ค. ๊ทธ๋Ÿด๋•Œ๋Š” ์ฃผ๋กœ ๊ฐ™์€ ์†์„ฑ์„ ์ด์šฉํ•ด ๋ฐฐ์น˜ํ•˜๊ณ  ์žˆ๋‹ค. ๊ทธ ์ค‘ ๋ฅผ ์ด์šฉํ•˜๊ฒŒ๋˜๋ฉด ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์น˜ DOM์œผ๋กœ ๋ถ€ํ„ฐ ๊ณต์ค‘์— ๋ถ•๋œจ๋Š” ๋ชจ์–‘์ด ๋˜์–ด ์ดํ›„์— ์žก์•„๋†“์€ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ํํŠธ๋Ÿฌ์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค ใ… ใ…  ๊ทธ๋ž˜์„œ ๋ผ๋Š” ์†์„ฑ์„ ์•Œ๊ณ  ์žˆ์—ˆ์Œ์—๋„ ๋ฅผ ์ด์šฉํ•œ positioning ์„ ์ง€์–‘โ€ฆ

CSS์—์„œ operator์‚ฌ์šฉํ•˜๊ธฐ

์›นย ํผ๋ธ”๋ฆฌ์‹ฑ์„ย ํ•˜๋‹ค๋ณด๋ฉด size๋ฅผย ์ง€์ •ํ• ๋•Œย ย ๋“ฑ๊ณผย ๊ฐ™์€ย ๋‹จ์œ„๋กœ๋งŒย ํ‘œํ˜„์ดย ์• ๋งคํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค. ex) ๊ธ€๋กœ๋ฒŒย ๋„ค๋ธŒ๋ฐ”์˜ย height๊ฐ€ย 60px์ธ๋ฐย  body์˜ย height๋ฅผย 100%๊ฐ€ย ์•„๋‹Œย ๊ธ€๋กœ๋ฒŒย ๋„ค๋ธŒ๋ฐ”๋งŒํผย ๋นผ๊ณ ย ์ง€์ •ํ•˜๊ณ ์‹ถ์„๋–„ ์ง€๊ธˆ๊นŒ์ง€๋Š” SCSS์—์„œ๋งŒ ํ•ด๊ฒฐ๋˜๋Š” ์ค„ ์•Œ๊ณ  ๋Œ€๋žต์ ์œผ๋กœ๋งŒ ๋งž์ถฐ์„œ ํผ๋ธ”๋ฆฌ์‹ฑ์„ ํ–ˆ์—ˆ๋Š”๋ฐ(๋ฐ”๋ณด๋‹ค) ๊ฒ€์ƒ‰์„ ํ•ด๋ณด๋‹ˆ CSS์—์„œ๋„ ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•œ โ€ฆ