user-img
ํ‹ฐ์Šคํ† ๋ฆฌ ๊พธ๋ฏธ๊ธฐ 3
thumbnail
[ํ‹ฐ์Šคํ† ๋ฆฌ ๊พธ๋ฏธ๊ธฐ] ๋…ธ์…˜์ฒ˜๋Ÿผ ์ธ๋ผ์ธ ์ˆ˜์‹๊ณผ ์ˆ˜์‹ ๋ธ”๋ก ์ถ”๊ฐ€ํ•˜๊ธฐ
1
0. ๋ชฉํ‘œ๋…ธ์…˜์ฒ˜๋Ÿผ ์ธ๋ผ์ธ ์ˆ˜์‹๊ณผ ์ˆ˜์‹ ๋ธ”๋ก ์ž‘์„ฑ์ด ํ‹ฐ์Šคํ† ๋ฆฌ์—์„œ๋„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•œ๋‹ค.ํ•„์ž์˜ ๊ฒฝ์šฐ์—๋Š” markdown ๋ฌธ๋ฒ•์œผ๋กœ ๋ณธ๋ฌธ ๊ธ€์„ ๊ณ ์ •ํ•ด๋†“์•˜์Œ์œผ๋กœ, ์ถ”๊ฐ€์ ์œผ๋กœ ์ด๋Ÿฌํ•œ ํ™˜๊ฒฝ์—์„œ๋„ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•˜๊ฒ ๋‹ค. ํ˜น์‹œ ๋งˆํฌ๋‹ค์šด์œผ๋กœ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ฌธ๋ฒ•์„ ๋ฐ”๊พธ๋Š” ์ฒด์งˆ๊ฐœ์„ ์„ ํ•˜๊ณ  ์‹ถ์€ ๋ถ„๋“ค์€ ๋‹ค์Œ ๊ธ€์„ ๋ณด๊ณ  ์˜ค๋ฉด ๋œ๋‹ค.   [ํ‹ฐ์Šคํ† ๋ฆฌ ๊พธ๋ฏธ๊ธฐ] Markdown ๋ฌธ๋ฒ•์œผ๋กœ ์ž๋™ ํฌ์ŠคํŒ…! (์ˆ˜๋™์œผ๋กœ div ํƒœ๊ทธ ์•ˆ ๋„ฃ์–ด์ค˜๋„ ๋จ!)0. Markdown CSS๋ฅผ ์จ์•ผํ•˜๋Š” ์ด์œ  ๐Ÿค”ํ‹ฐ์Šคํ† ๋ฆฌ์—์„œ๋„ markdown์„ ์ง€์›ํ•˜๊ธฐ๋Š” ํ•˜์ง€๋งŒ, ํ‹ฐ์Šคํ† ๋ฆฌ ๋‚ด๋ถ€ ์„œ์‹์— ๋งž๊ฒŒ ๋ณ€ํ˜•๋˜์–ด ์žˆ์–ด ์™ธ๋ถ€์˜ ๊ทœ์น™์œผ๋กœ ์ž‘์„ฑํ•œ MarkDown์ด ์˜ˆ์ƒ๋Œ€๋กœ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋น„์ผdalcheonroadhead.tistory.com 1. ํ‹ฐ์Šคํ† ๋ฆฌ HTML์— javas..
2024.12.12
์ผ์ƒ/๊ทธ๋ƒฅ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค
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
์ผ์ƒ/๊ทธ๋ƒฅ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค
thumbnail
[ํ‹ฐ์Šคํ† ๋ฆฌ ๊พธ๋ฏธ๊ธฐ] Markdown ๋ฌธ๋ฒ•์œผ๋กœ ์ž๋™ ํฌ์ŠคํŒ…! (์ˆ˜๋™์œผ๋กœ div ํƒœ๊ทธ ์•ˆ ๋„ฃ์–ด์ค˜๋„ ๋จ!)
0. Markdown CSS๋ฅผ ์จ์•ผํ•˜๋Š” ์ด์œ  ๐Ÿค”ํ‹ฐ์Šคํ† ๋ฆฌ์—์„œ๋„ markdown์„ ์ง€์›ํ•˜๊ธฐ๋Š” ํ•˜์ง€๋งŒ, ํ‹ฐ์Šคํ† ๋ฆฌ ๋‚ด๋ถ€ ์„œ์‹์— ๋งž๊ฒŒ ๋ณ€ํ˜•๋˜์–ด ์žˆ์–ด ์™ธ๋ถ€์˜ ๊ทœ์น™์œผ๋กœ ์ž‘์„ฑํ•œ MarkDown์ด ์˜ˆ์ƒ๋Œ€๋กœ ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋น„์ผ๋น„์žฌํ•˜๋‹ค.์ผ๋ก€๋กœ, ํ‹ฐ์Šคํ† ๋ฆฌ๋Š” MarkDown์˜ H1 ํƒœ๊ทธ๋ฅผ ๋ณ€ํ˜•ํ•˜์ง€ ๋ชปํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๋ณธ๋ฌธ H1 ํƒœ๊ทธ์— ๋Œ€ํ•œ ๋Œ€์‘์ฒ˜๋ฆฌ๋ฅผ ํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ํƒœ๊ทธ ์‚ฌ์ด ๊ฐ„๊ฒฉ, ์ธ๋ผ์ธ ์ฝ”๋“œ๋ธ”๋Ÿญ๋„ ์ง€์›๋˜์ง€ ์•Š๋Š”๋‹ค.Markdown Tool๋กœ ์ž‘์„ฑํ•œ ๋‚ด์šฉ์ด ์˜ˆ์ƒ๋Œ€๋กœ ํ‘œ์‹œ๋˜๋Š” ๊ฒƒ์„ ์›ํ•œ๋‹ค๋ฉด, ๋ฐ‘์˜ ๊ณผ์ •์„ ๋”ฐ๋ผํ•ด ๋ณด์‹œ๋ผ.1. Markdown cdn์„ Tistory Html์— ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ โœ‚๏ธ์—ฌ๊ธฐ Html์— ๋“ค์–ด๊ฐ€์„œ, Html์˜ ํƒœ๊ทธ ์•ˆ์— ๋‹ค์Œ์„ ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐ ํ•œ๋‹ค.ํ˜น์‹œ ์ตœ์‹  ๋ฒ„์ „์ด ์—…๋ฐ์ดํŠธ ๋˜์—ˆ..
2024.12.02
์ผ์ƒ/๊ทธ๋ƒฅ ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ๋“ค