GitHub 블로그 만들기 (11) - 마크다운 문법 총정리

in Blog / Git-github / GitHub 블로그 만들기 on Github pages, Github blog, Markdown

📝 마크다운 문법에 대해 알아봅니다.

안녕하세요, 해을입니다🦖

이번 글에서는 마크다운 문법에 대해 알아보겠습니다!

💡마크다운(Markdown)이란?

마크다운은 일반 텍스트 기반의 경량 마크업 언어로 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징인데요.

HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용됩니다.

GitHub을 이용하시는 분들이라면 README 파일이 익숙하실 텐데요!

GitHub 블로그는 README.md 파일과 같이 마크다운 형식으로 글을 작성해야 합니다.

마크다운 문법은 굉장히 쉬운 편이지만 이번 포스팅을 통해 확실하게 정리해두려 합니다.

💡마크다운 에디터

저 같은 경우 예전에는 Typora를 가장 많이 썼는데 정식 버전이 유료가 되면서 VSCode만 사용하고 있습니다.

그 외 다른 에디터에 대한 설명은 링크로 걸어둔 블로그 참고 부탁드립니다.

💡문법

🥨 제목

  • <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 태그로 변환되는 ‘제목(Header)’을 표현

  • #이 늘어날수록 크기가 작아짐

    # 제목 1
## 제목 2
### 제목 3
#### 제목 4
##### 제목 5
###### 제목 6

  • <h1>,<h2>는 아래와 같은 문법으로도 사용 가능

    제목 1
======

제목 2
------

🔎 출력 결과

Image

🥨 줄바꿈

  • <br>태그 입력

  • 띄어쓰기 2번 이상 입력

    첫 번째 줄입니다.
두 번째 줄입니다.
세 번째 줄입니다.<br>
네 번째 줄입니다. // 띄어쓰기 2번 이상
다섯 번째 줄입니다.

🔎 출력 결과

첫 번째 줄입니다. 두 번째 줄입니다. 세 번째 줄입니다.
네 번째 줄입니다.
다섯 번째 줄입니다.

🥨 수평선

  • -, *, _ 중 하나를 이용하여 3번 이상 입력

    ***
* * *
---
- - -

🔎 출력 결과

🥨 문단 구분

  • 문단과 문단 사이는 빈 줄(엔터)로 구분

    문단 구분 예시입니다.
// (빈줄)
다음 문단입니다.

🔎 출력 결과

문단 구분 예시입니다.

다음 문단입니다.

🥨 강조

  • 두껍게, 기울임 등 다양한 강조 효과 적용 가능

  • 여러 강조 효과 동시 사용 가능

    // 이탤릭체(기울임) : * 또는 _ 감싸기
*안드로이드*

// 볼드체(두껍게) : ** 또는 __ 감싸기
**안드로이드**

// 취소선 : ~~ 감싸기
~~안드로이드~~

// 동시 효과 적용
***안드**~~로이드~~*

🔎 출력 결과

안드로이드

안드로이드

안드로이드

안드로이드

🥨 글자 색상 변경 및 하이라이트 설정

  • html 문법을 사용하여 글자색 또는 배경색 변경 가능

  • 색상은 color name 또는 16진수로 입력

// 글자 색 변경
<span style="color:red"> 빨간 글씨 </span> 

// 하이라이트 처리
<span style="background-color:#fff5b1">노랑색 형광펜</span>

🔎 출력 결과

 빨간 글씨 
노랑색 형광펜

🥨 텍스트 박스

  • 텍스트 앞뒤로 ` 입력

    복사 단축키 : `ctrl` + `c`

🔎 출력 결과

복사 단축키 : ctrl + c

🥨 목록

🍬 순서가 없는 목록 - Unordered Lists
  • *,+,-를 이용하여 목록 작성

  • 들여쓰기를 하면 모양이 바뀜

      * 1번
  * 2번
    * 3번
      * 4번

🔎 출력 결과

  • 1번
  • 2번
    • 3번
      • 4번
🍬 순서가 있는 목록 - Ordered Lists
  • 숫자를 입력하여 목록 작성

  • 들여쓰기를 하면 모양이 바뀜

      1. 1번
    1. 2번
  2. 3번
    1. 4번

🔎 출력 결과

  1. 1번
    1. 2번
  2. 3번
    1. 4번
🍬 혼합 리스트

  • 순서가 없는/있는 목록 동시 사용 가능

    1. 음식
  - 치킨
  - 피자
2. 동물
  - 강아지
  - 고양이

🔎 출력 결과

  1. 음식
    • 치킨
    • 피자
  2. 동물
    • 강아지
    • 고양이

🥨 특수문자 입력

  • 특수문자 앞에 \(역슬래시) 입력

    // 특수문자 출력 X
* 안드로이드
- 개발자

// 특수문자 출력 O
\* 안드로이드
\- 개발자

🔎 출력 결과

  • 안드로이드
  • 개발자

* 안드로이드
- 개발자

🥨 외부 링크

  • [표시 내용](주소 url) 형태로 입력

    // 외부 링크 설정
[해을의 개발자국](https://haeeul.github.io/)

🔎 출력 결과

해을의 개발자국

🥨 내부 링크

  • 블로그 내 문서 이동 : [표시 내용](문서 경로)
  • 게시 글 내 제목 이동 : [표시 내용](#이동할 헤드 제목)
    • 헤드 제목 작성 시 주의할 점
      • 띄어쓰기는 -로 연결
      • 영어는 모두 소문자로 작성
      • 소괄호, 이모지는 제거하고 작성
      • 💡Tip. 이동하고자 하는 헤드 우측 # 클릭 시 url에서 헤드 제목 확인 가능 Image
    // 내부 링크 설정

// 문서 링크
[GitHub 블로그 만들기 (10) - Hits(방문자 수) badge 달기](/blog/git-github/github-blog/2025-01-13-github_blog(10))

// 제목 링크
[마크다운이란?](#마크다운markdown이란)  
[수평선](#-수평선)

🔎 출력 결과

GitHub 블로그 만들기 (10) - Hits(방문자 수) badge 달기
마크다운이란?
수평선 - Horizontal Rules

🥨 이미지

  • 인라인 이미지 : ![Image](이미지파일_경로.jpg)
  • 링크 이미지 : ![Image](이미지파일_URL)

  • 사이즈 지정 : 이미지 경로 또는 URL 뒤쪽에 {: width="너비" height="높이"} 입력

    // 링크 이미지 추가
![Image](https://github.com/user-attachments/assets/bfdd9938-09e7-477d-ac24-10d73eb28f9f)

// 사이즈 지정
![Image](https://github.com/user-attachments/assets/bfdd9938-09e7-477d-ac24-10d73eb28f9f){: width="너비" height="높이"}

🔎 출력 결과

Image

Image

🥨 인용

  • 각 문단의 첫 줄 앞에 > 입력

  • >는 3개까지 사용 가능

    > 안녕하세요!
반갑습니다
>> 저는 개발자입니다.
>>> 안드로이드 개발을 하고 있습니다.

🔎 출력 결과

안녕하세요! 반갑습니다

저는 개발자입니다.

안드로이드 개발을 하고 있습니다.

🥨 코드 블럭

  • 코드 앞뒤로 ``` 입력

  • ``` 옆에 언어 지정 시 syntax color 적용

    fun print(){
  Log.d("print")
}

🥨 주석

  • <!-- --> 사용

    <!-- 주석입니다. -->

.

자! 이렇게 해서 마크다운 문법에 대해 알아봤습니다.

게시글로 정리하고 나니 더욱 기억에 남는 것 같네요!

.

오류 및 오타 지등 피드백적, 질문, 인사 등 무엇이든 언제나 환영입니다!

읽어주셔서 감사합니다.

끝!🦕

.

👍 참고

© 2022. Haeeul All rights reserved.

🐾해을의 개발자국🐾

Powered by Hydejack v9.1.5