마크다운(markdown) 문법

진건희·2024년 4월 14일
post-thumbnail

참고

gsm 8기 놈들 전공동아리 kody 과제용임

마크다운 문법이란?

일반 텍스트를 기반으로한 마크업 언어.
일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징
HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환,
그로 인해 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용됨.

파일 표시(확장자) 경우
파일이름.md 또는 파일이름.markdown이 있다

장점

  • 문법이 쉬움
  • 관리가 간편
  • 지원 가능 플랫폼 및 프로그램이 다양

단점

  • 표준이 없어 사용자마다 작성 문법이 조금씩 다름
  • 모든 HTML 마크업을 대체하지 못함

사실 이정도는 별거 아닌 단점이기에 그냥 써라

문법

각 마크다운 문법은 HTML 태그로 변환되어 브라우저에 출력된다.
모든 html 태그를 대체하지는 못하며, 중요 태그만 대체한다.

제목

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그로 변환되는 '제목(Header)'을 표현합니다.

# 제목1

## 제목2

### 제목3

#### 제목4

##### 제목5
###### 제목6

이런식으로 표시 된다.

#의 개수 만큼 크기가 정해진다.
#의 개수가 적을 수록 제목의 크기가 커진다.

가장 큰 h1과 그 다음으로 큰 h2는 다른 표현법도 가지고 있다.

제목 1

제목 1
======

제목 2

제목2
------

이런식으로 또 다른 표현법이 있다.

강조

각각 (기울임), (두꺼움), (취소선) 태그로 변환되는 강조를 사용할 수 있다.
마크다운에서 지원하지 않는 밑줄을 추가하려면, <u></u>(밑줄) 태그를 직접 사용해야 한다.

두꺼움

<strong>두꺼움</strong>
**두꺼움**
__두꺼움__

결과

두꺼움
두꺼움
두꺼움

기울임(이텔릭체)

<em>기울임</em>
*기울임*
_기울임_

결과

기울임
기울임
기울임

취소선

<del>취소선</del>
~~취소선~~

결과

취소선
취소선

밑줄

<u>밑줄</u>

결과

밑줄

목록

<ol>, <ul>, <li> 태그로 변환되는 '목록(List)'을 표현됨

1. 로 시작하는 항목을 작성하면 <ol>로 변환되며,
- 로 시작하는 항목을 작성하면 <ul>로 변환된다.

어떤식이냐?

`-`로 시작하는 순서가 없는 목록으로 구분함.

```markdown
1. 순서가 있는 항목
2. 순서가 있는 항목
    - 순서가 없는 항목
    - 순서가 없는 항목
3. 순서가 있는 항목
4. 순서가 있는 항목

- 순서가 없는 항목
- 순서가 없는 항목
    - 순서가 없는 항목
    - 순서가 없는 항목

결과

  1. 순서가 있는 항목
  2. 순서가 있는 항목
    • 순서가 없는 항목
    • 순서가 없는 항목
  3. 순서가 있는 항목
  4. 순서가 있는 항목
  • 순서가 없는 항목
  • 순서가 없는 항목
    • 순서가 없는 항목
    • 순서가 없는 항목

-는 안쪽에 들어있는 정도로 나뉜다

  • 상위
    • 중위
      • 하위
상위 = - 상위
중위 = - 중위 + 띄어쓰기 4번
하위 = - 하위 + 띄어쓰기 4번 + tab
(velog) 기준

링크

<a>로 변환되는 '링크(Links)'를 표현한다.

[이름](링크)
[이름](링크 "설명")
[이름][참조]

[참조]: 링크
[참조]: 링크 "설명"
[GOOGLE](https://google.com)

[NAVER](https://naver.com "링크 설명(title)을 작성하세요.")

문서 안에서 [참조 링크]를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(`< >`, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.

<a>url</a>

구글 홈페이지: https://google.com
네이버 홈페이지: <https://naver.com>

[Dribbble Link]: https://dribbble.com
[참조 링크]: https://naver.com "네이버로 이동합니다!"

결과

GOOGLE

NAVER

문서 안에서 참조 링크를 그대로 사용할 수도 있습니다.
다음과 같이 문서 내 일반 URL이나 꺾쇠 괄호(< >, Angle Brackets)안의 URL은 자동으로 링크를 사용합니다.

url

구글 홈페이지: https://google.com
네이버 홈페이지: https://naver.com

※ '링크'는 현재 탭에서 열리는 것이 기본이지만, 새 탭에서 열릴 수도 있다.

어떻게?

[새 탭에서 열기](https://www.google.com/){:target="_blank"}
↳ 그러나, 대부분의 편집 툴에서 {:target="\_blank"} 구문이 적용되지 않는 현상이 발견되었다.

↓ 대체
<a href="https://www.google.com/" target="_blank">새 탭에서 열기</a>

구글

이미지

<img>로 변환되는 '이미지(Images)'를 표현함.
링크과 비슷하지만, 앞에 !를 추가해야 한다.

![대체텍스트](이미지주소)
![대체텍스트](이미지주소 "설명")
![대체텍스트][참조]

[참조]: 이미지주소
[참조]: 이미지주소 "설명"
![대체 텍스트(Alternative Text)](https://velog.velcdn.com/images/jgh/post/02fb94cf-4564-4812-b52c-3a0b23301b46/image.png "링크 설명(Title)")
![이미지입니다!][Image]

[Image]: https://velog.velcdn.com/images/jgh/post/02fb94cf-4564-4812-b52c-3a0b23301b46/image.png "이미지입니다!"

결과

kody

※ 대체 텍스트는 이미지가 불러와지지 않았을 때 나오는 텍스트이다.

마크다운 이미지 문법 코드를 링크 문법 코드로 감싸주면 이미지에 링크 기능을 넣을 수 있다.
[![welcome kody](사진 링크)](https://ourhome-07-alpha.vercel.app/)

↓ 결과(클릭 해 보세요)
welcome kody

코드

<pre>, <code> 태그로 변환되는 '코드(Code)'를 표현합니다.
` (백틱) 기호를 사용한다.

이런식으로 보여짐 = 백틱 1개짜리

코드 블럭은 백틱 3개 이상

무수한 코드들이
있다는 상상을 해주세요
어쩌라고요

예를 들어 코드 블럭 시작으로 할때 백틱이 3개면
끝날 때도 3개여야 한다.

이런식으로

그리고 백틱은 코드 강조문으로 쓰여서 백틱 자체를 표시하고 싶으면
\ 역슬래쉬를 사용해야 한다.
안다 보는 사람 입장으로는 원화 표시 일것이다.
하지만 원화표시는 역슬래쉬다.
둘은 같은 존재다.
쉽게 말하자면
여자가 화장 전과 화장 후가 다르게 생겨도 똑같은 여자잖아
이런느낌

아무튼 그렇게 해서
\ 이것이 역슬래쉬인데
백틱으로 감싸면 또 원화에서 역슬래쉬로 제대로 보인다

아무튼
\ + `
이런식으로 둘이 합쳐져야 백틱을 표현할 수 있다.

표

<table> 태그로 변환되는 '표(Table)'를 표현합니다.
테이블 헤더를 구분하기 위해, 3개 이상의 -(hyphen/dash) 기호를 사용합니다.
테이블 헤더를 구분하며 :(Colons) 기호를 추가해 셀(열/칸) 안에 내용을 정렬할 수 있습니다.

---, :---: 좌측 정렬
:---: 가운데 정렬
---: 우측 정렬

| 헤더 | 헤더 | 헤더 |
|---|---|---|
| 셀 | 셀 | 셀 |
| 셀 | 셀 | 셀 |

헤더 | 헤더 | 헤더
---|---|---
셀 | 셀 | 셀
셀 | 셀 | 셀

응용한다면? ↓

| 값 | 의미 | 기본값 |
|---|:---:|---:|
| `static` | 유형(기준) 없음 / 배치 불가능 | `static` |
| `relative` | 요소 자신을 기준으로 배치 |  |
| `absolute` | 위치 상 부모(조상)요소를 기준으로 배치 |  |
| `fixed` | 브라우저 창을 기준으로 배치 |  |
| `sticky` | 스크롤 영역 기준으로 배치 |  |

결과

값의미기본값
static유형(기준) 없음 / 배치 불가능static
relative요소 자신을 기준으로 배치
absolute위치 상 부모(조상)요소를 기준으로 배치
fixed브라우저 창을 기준으로 배치
sticky스크롤 영역 기준으로 배치

버티컬바 기호 사용

마크다운에서 버티컬바(|) 기호는 테이블을 표현할 때 사용하는 문법 기능을 가진다.
만약 테이블 안에서 버티컬바 기호 자체를 출력하려면, \ 기호와 함께 작성하는 이스케이프(Escape) 처리가 필요함.
(백틱처럼)

인용문

<blockquote> 태그로 변환되는 '인용문(BlockQuote)'을 표현한다.
여기서는 >로 작성한다
> 적을 내용 이런식

인용문 - 남의 말이나 글에서 직접 또는 간접으로 따온 문장.
(네이버 국어 사전)

> 인용문
>> 중첩 인용문
>>> 이것도 가능
>>> 이것도 가능
>>> 이것도 가능

결과

인용문을 작성하세요!

중첩된 인용문

이것도 가능
이것도 가능
이것도 가능

수평선

---, ___, *** 각 기호를 3개 이상 입력해, <hr> 태그로 변환되는 '수평선(Horizontal Rule)'을 표현한다.

---

***

___

결과

줄바꿈

줄바꿈(Line Breaks)을 위해서는 문장 마지막에서 <br> 태그를 직접 입력하거나, 문장 마지막에서 띄어쓰기를 2번 이상 입력한다.

동해물과 백두산이 마르고 닳도록  (띄어쓰기 2번함)
하느님이 보우하사 우리나라 만세  (띄어쓰기 2번함)
무궁화 삼천리 화려 강산  (띄어쓰기 2번함)
대한 사람 대한으로 길이 보전하세<br>
끝!

동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세

끝!

주석

<!-- -->, [//]: # 기호를 사용해, 주석(Comment)을 표현합니다.
주석이란 일단 안 사용하지만 혹시 모르니 나중을 위해 남겨두는 comment이다.

적혀있지만 컴퓨터에서 실행은 안 시키는 느낌

-- 시작 --

<!-- 안녕하세요. -->
[//]: # (안녕하세요.)
[//]: # "안녕하세요."
[//]: # '안녕하세요.'

-- 종료 --

결과

-- 시작 --

-- 종료 --

주석이라 안녕하세요가 안 보이는 거임
실제로 나는 썼음

마무리

끝났다 과제 준비하기 힘드네;;
참고자료

profile
진건희
이번에는 천천히 걸어보려고 합니다.
이전 포스트

Vs code 사용하기!

다음 포스트

React 난 이렇게 배웠다[useReducer]

0개의 댓글