user-img
๋ชฉ์ฐจ ๋งŒ๋“ค๊ธฐ 1
thumbnail
[ํ‹ฐ์Šคํ† ๋ฆฌ ๊พธ๋ฏธ๊ธฐ] Toc-bot์„ ํ™œ์šฉํ•œ ๋™์  ๋ชฉ์ฐจ ๋งŒ๋“ค๊ธฐ
0. SKIN ํ™˜๊ฒฝ ์ดํ•ด ๐Ÿง ๋‚ด๊ฐ€ ์‚ฌ์šฉ ์ค‘์ธ apricot skin#3์€ ์ตœ์‹  ์Šคํ‚จ ๋‹ต๊ฒŒ ํ™”๋ฉด์ด grid๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ๋‹ค.์ „์ฒด ํ™”๋ฉด์„ ๋‚˜ํƒ€๋‚ด๋Š” wrap์ด๋ž€ ํด๋ž˜์Šค๋Š” ์œ„์™€ ๊ฐ™์ด 4๋“ฑ๋ถ„ ๋˜์–ด์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ˜•ํƒœ๋ฅผ grid๋ผ๊ณ  ํ•œ๋‹ค. grid-template-areas ์†์„ฑ์„ ๋ณด๋ฉด, "header header" "aside main" ๊ณผ ๊ฐ™์ด ์ ํ˜€ ์žˆ๋Š”๋ฐ, ๊ฐ™์€ ์Œ๋”ฐ์˜ดํ‘œ์— ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ๋ฉ์–ด๋ฆฌ๋ผ๋ฆฌ ๊ฐ™์€ ํ–‰์— ๋ฐฐ์น˜๋œ๋‹ค. "",""๋ผ๋ฆฌ๋Š” ์ฐจ๋ก€๋Œ€๋กœ ๋‹ค์Œ ํ–‰์— ๋ฐฐ์น˜๋จ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์œ„๋ฅผ ๋ณด๋ฉด header๊ฐ€ 2๋ฒˆ ์ ํžŒ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด๋Š” ํ–‰ ์ž์ฒด๋ฅผ ์…€๋ณ‘ํ•ฉ์ฒ˜๋Ÿผ ๋‹ค ์ฐจ์ง€ํ•˜๊ฒ ๋‹ค๋Š” ๋œป์ด๋‹ค.๋ช‡ ๋ฒˆ์„ ์‹œ๋„ ํ–ˆ์œผ๋‚˜, ์œ„์™€ ๊ฐ™์ด grid๊ฐ€ ์งœ์—ฌ์ง„ ์ƒํ™ฉ์—์„œ aside ๋ฐ‘์— ๋‹ค๋ฅธ ๋ชฉ์ฐจ ์šฉ div๋ฅผ ๋งŒ๋“ค์–ด์„œ ์šด์šฉํ•˜๊ธฐ๋ž€ ์‰ฝ์ง€ ์•Š์•˜๋‹ค...
2024.12.02
์ผ์ƒ/๊ทธ๋ƒฅ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค