[Tistory] ํ‹ฐ์Šคํ† ๋ฆฌ ๋งˆํฌ๋‹ค์šด ์ ์šฉํ•˜๊ธฐ

2020. 1. 31. 20:16ยท๐ŸŒˆetc

ํƒ€์ดํฌ๋ผ์— ๊ธ€์„ ์จ์„œ ํ‹ฐ์Šคํ† ๋ฆฌ์— ์—…๋กœ๋“œํ•˜๋ ค๊ณ  ํ–ˆ์œผ๋‚˜, ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š๋Š” ์˜ค๋ฅ˜๊ฐ€ ์žˆ์—ˆ๋‹ค๐Ÿ˜จ

ํ…Œ๋งˆ๋„ ๊น”๋”ํ•˜์ง€๋„ ์•Š์„ ๋ฟ๋”๋Ÿฌ, ํ•œ๊น€์— ๋‹ค ๋ณ€๊ฒฝํ•ด๋ฒ„๋ ธ๋‹ค..

 

์ฃผ์˜!

๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” CSS ์ฝ”๋“œ๋ฅผ ๋ณ€๊ฒฝํ•ด์•ผ ํ•˜๋ฏ€๋กœ ํ…์ŠคํŠธ์—๋””ํ„ฐ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

 

[์ˆœ์„œ]

1. github-markdown.css ์— ๋“ค์–ด๊ฐ€์„œ ์ €์žฅ์„ ํ•ด์ค€๋‹ค.

 

 

2. ์ €์žฅ์„ ํ•œ ํ›„์— ํ…์ŠคํŠธ์—๋””ํ„ฐ์— ๋“ค์–ด๊ฐ€ "github-markdown.css" ์„ ์—ด์–ด

.markdown-body li { list-style: unset; }  ์„ ์ถ”๊ฐ€๋กœ ๋„ฃ์–ด์ค€๋‹ค. ( unset ๋ง๊ณ  ๋ณธ์ธ์ด ์›ํ•˜๋Š” list-style์„ ๋„ฃ์œผ๋ฉด ๋œ๋‹ค.)

 

 

3. ํ‹ฐ์Šคํ† ๋ฆฌ ํ™˜๊ฒฝ์„ค์ • > ๊พธ๋ฏธ๊ธฐ > ์Šคํ‚จํŽธ์ง‘ > htmlํŽธ์ง‘ ํด๋ฆญ!

 

 

 

4. CSS ์— ๋“ค์–ด๊ฐ€ .entry ์ด๋ž€ ํด๋ž˜์Šค๋ฅผ ๋ชจ๋‘ ์ฃผ์„์ฒ˜๋ฆฌํ•ด์ค€๋‹ค.

 

 

 

5. CSS ์ œ์ผ ๋์— ์•„๋ž˜ ์Šคํƒ€์ผ์„ ์ถ”๊ฐ€ํ•œ๋‹ค.

.markdown-body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding: 45px; }
@media (max-width: 767px) { .markdown-body { padding: 15px; } }

 

 

6. ํŒŒ์ผ์—…๋กœ๋“œ์— ๋“ค์–ด๊ฐ€ 2๋ฒˆ์— ์ €์žฅํ•ด๋‘” "github-markdown.css"๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.

 

 

7. HTML ์— ๋“ค์–ด๊ฐ€ <head> ์•ˆ์— <link rel="stylesheet" href="./images/github-markdown.css"> ๋ฅผ ๋„ฃ์–ด์ค€๋‹ค.

 

 

8. ์ €์žฅํ•œ ํ›„, ํƒ€์ดํฌ๋ผ์— ํŽธ์ง‘ > HTML ์ฝ”๋“œ๋กœ ๋ณต์‚ฌ ํ•ด์„œ 

 

 

9. ํ‹ฐ์Šคํ† ๋ฆฌ์— HTML ๋ชจ๋“œ๋กœ ๊ธ€์„ ์“ด๋‹ค. ์ด๋•Œ! markdown-body ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณต์‚ฌํ•œ ๊ธ€์„ ๋„ฃ์–ด์ค€๋‹ค.

 

<div class="markdown-body">
<!-- ๋ณต์‚ฌํ•œ ๊ธ€์„ ๋ถ™์—ฌ๋„ฃ๋Š”๋‹ค -->
</div>

 

๊ทธ๋Ÿผ ์™„๋ฃŒ~~! ๐Ÿ™Œ๐Ÿผ๐Ÿ™Œ๐Ÿผ๐Ÿ™Œ๐Ÿผ

 

 

 

์ €์ž‘์žํ‘œ์‹œ ๋™์ผ์กฐ๊ฑด
'๐ŸŒˆetc' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • vw To pixel (px) Converter // vw๋ฅผ px๋กœ ๋ฐ”๊พธ๊ธฐ
  • [plugIn] ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€ ๋งํฌ ๊ฑธ๊ธฐ(jQuery-rwdImageMaps)
  • [JSP] vscode๋กœ JSP ์ž‘์—…ํ™˜๊ฒฝ์„ธํŒ… & header / footer ์—ฐ๊ฒฐ
  • [PlugIn] slick slider
jmjm
jmjm
  • jmjm
    /* jmjmjm */
    jmjm
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (127)
      • ๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ปSTUDY (83)
        • HTML (9)
        • CSS (24)
        • SASS (4)
        • JavaScript (15)
        • jQuery (9)
        • Publishing (8)
        • Git (11)
        • React (1)
        • Vue (0)
        • ์›น์ ‘๊ทผ์„ฑ (1)
        • Gulp (1)
      • ๐ŸฃcodeLab (17)
      • ๐ŸŒˆetc (9)
      • ๐Ÿ”ฅ TIL (16)
      • ๐Ÿฅฐ ์ผ์ƒ (2)
      • ๐ŸŒŸ์ฝ์–ด๋ณด๊ธฐ (0)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
  • ๋งํฌ

  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    javascript ์•„์ฝ”๋””์–ธ
    javascript htmlcollection nodelist
    CSS ์„ ํƒ์ž
    js ์•„์ฝ”๋””์–ธ
    sass
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ slideup
    ์ ‘๊ทผ์„ฑ ์ฃผ์˜์‚ฌํ•ญ
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ slidedown
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ปฌ๋ ‰์…˜
    gulp ์‹œ์ž‘ํ•˜๊ธฐ
    javascript slidedown
    gulp ๋ฒ„์ „
    html collection
    javascript slideup
    sass compiler
    the legacy js api is deprecated and will be removed in dart sass 2.0.0
    sticky ํ™œ์šฉ
    ์•„์ฝ”๋””์–ธ๋ฉ”๋‰ด
    css ๊ฐ€์ƒ์„ ํƒ์ž
    HTML Form
    javascript ์ปฌ๋ ‰์…˜
    ์›น์ ‘๊ทผ์„ฑ
    javascript nodelist
    vscode ๋‹จ์ถ•ํ‚ค
    javascript accordion
    ์ ‘๊ทผ์„ฑ ์ฃผ์˜
    sticky codepen
    css flex
    sticky jsfiddle
    javascript htmlcollection
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
jmjm
[Tistory] ํ‹ฐ์Šคํ† ๋ฆฌ ๋งˆํฌ๋‹ค์šด ์ ์šฉํ•˜๊ธฐ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”