ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ํ‹ฐ์Šคํ† ๋ฆฌ ๋งˆํฌ๋‹ค์šด ์ ์šฉํ•˜๊ธฐ
    ๐Ÿ“ฐ about IT/Tistory 2022. 4. 3. 15:54

    ํ‹ฐ์Šคํ† ๋ฆฌ ๋งˆํฌ๋‹ค์šด ์ ์šฉ๋ฒ•

    1. ๋ธ”๋กœ๊ทธ ์„ค์ • ํ™”๋ฉด (๋ธ”๋กœ๊ทธ ๊ด€๋ฆฌ ํ™ˆ) -> [๊พธ๋ฏธ๊ธฐ] ์Šคํ‚จ ํŽธ์ง‘ → html ํŽธ์ง‘ → html ํ™”๋ฉด

     

    2. ํƒœ๊ทธ ๋‚ด๋ถ€์— ํ•ด๋‹น ์ฝ”๋“œ ์ž‘์„ฑ

    <link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css" rel="stylesheet">

     

     

    3. 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;  
        }  
    }

     

     

    4. ๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑ ์‹œ ๋งˆํฌ๋‹ค์šด์œผ๋กœ ๊ธ€ ์ž‘์„ฑ (๊ฒฝ๊ณ ์ฐฝ์€ ๋ฌด์‹œํ•˜์„ธ์š”)

     

     

    5. ๊ธ€ ์ž‘์„ฑ ํ›„ ํ•ด๋‹น ์ฝ”๋“œ ์ž‘์„ฑํ•ด์„œ HTMl ์ˆ˜์ •

    <div class="markdown-body"> </div>

    <div class="markdown-body"> ๋Š” ๊ฐ€์žฅ ์œ„์—, </div>๋Š” ๊ฐ€์žฅ ์•„๋ž˜์— ์ž‘์„ฑํ•ด์ค๋‹ˆ๋‹ค.

    ๋‚ด์šฉ ์ „์ฒด๋ฅผ ์ฝ”๋“œ ๋ธ”๋Ÿญ์œผ๋กœ ๊ฐ์‹ธ ์ค€๋‹ค๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

    HTML ๊ฐ€์žฅ ์œ„
    HTML ๊ฐ€์žฅ ์•„๋ž˜

     

     

    6. ์™„์„ฑํ™”๋ฉด

    ์ ์šฉ ์ „ raw text
    ์ ์šฉ ํ›„ ํ™”๋ฉด

    ์ž˜ ์ ์šฉ๋œ ๋ชจ์Šต์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

     

    ์ฃผ์˜ํ•  ์ 

    1. ์ผ๋ถ€ ์ง€์›๋˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    2. ๊ธ€ ์ˆ˜์ •์‹œ HTML์˜ ํƒœ๊ทธ๊ฐ€ ๋ˆ„๋ฝ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

     

    ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ ...

    1. ๋งˆํฌ๋‹ค์šด์œผ๋กœ ์‰ฝ๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    2. ๋งˆํฌ๋‹ค์šด์˜ ์ข‹์€ ๊ธฐ๋Šฅ์„ ์ด์šฉํ•˜๊ณ  ๊ธฐ๋ณธ๋ชจ๋“œ๋กœ ์ œ๊ฐ€ ์›ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ๋”ฐ๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ ์žฌ์ ์†Œ์— ๋งˆํฌ๋‹ค์šด์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

     

    reference

    https://redthing.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95%EC%9C%BC%EB%A1%9C-%ED%8F%AC%EC%8A%A4%ED%8C%85%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

    '๐Ÿ“ฐ about IT > Tistory' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    "๋‚˜์œ ๊ธ€ ๊ณ ์น˜๋Š” ๋ฒ•" - ์œ ์‹œ๋ฏผ ์ž‘๊ฐ€  (0) 2022.04.02

    ๋Œ“๊ธ€