01_마크다운(MARK DOWN)
FrontEnd/웹 지식

01_마크다운(MARK DOWN)

728x90

README.md 란 파일을 한번정도는 다들 보았을 것이다. 이 .md파일은 마크다운 파일이라는 표시이다.

 

https://heropy.blog/2017/09/30/markdown/

 

MarkDown 사용법 총정리

마크다운(MarkDown)에 대해서 알고 계신가요?파일 확장자가 .md로 된 파일을 보셨나요?웹 개발을 하면서 아마 README.md라는 이름의 파일을 한 번은 보셨을텐데, ...

heropy.blog

 

위 글을 보면서 공부한 내용이다.

 

 

마크다운을 이용하면 보다 쉬운 문법으로 쉽고 빠르게 문서를 정리할 수 있다.

 

문법이 쉽고 관리가 용이하고 지원하는 플래폼이 많다는 장점이 있지만 표준이 딱히 정해지지 않고 모든 HTML 마크업을 대신하지 못한다는 단점이 있다.

 

 

HTML으로 구현되기 때문에 화면에 표시되는 CSS는 설정에 따라 달라지니 문법의 의미로 글을 짜면 된다. 즉, 글을 꾸미는것보다 내용에 집중하면서 사용하면 된다.

 

 

 

 

제목(Header)

 

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

<h1>부터 <h6>까지 제목을 표현할 수 있다.

 

md파일을 하나 만들고

 

돋보기를 눌러서 미리보기를 할 수 있다.

 

이때 css는 상관하지 않아도 된다. 네이버에서 쓰면 그에맞는 css가 적용되는 방식처럼 css는 달라질 수 있기 때문 문법에만 집중하도록 봐 보자.

 

지원하는 플랫폼에 따라 아래와 같은 방식도 지원하기도 한다.

 

 

강조

 

각각 <em>, <strong>, <del> 태그로 변환된다.

이텔릭체는 *별표(asterisks)* 혹은 _언더바(underscore)_를 사용하세요.
두껍게는 **별표(asterisks)** 혹은 __언더바(underscore)__를 사용하세요.
**_이텔릭체_와 두껍게**를 같이 사용할 수 있습니다.
취소선은 ~~물결표시(tilde)~~를 사용하세요.
<u>밑줄</u>은 `<u></u>`를 사용하세요.

 

표준이 정해져 있지 않기 때문에 별표 혹은 언더바로 동작하게 된다.

 

이텔릭체는 <em>, 두껍게는 <string>, 취소선은 <del>로 변환되서 동작하게 된다. 밑줄은 마크다운에서 따로 지원하지 않기 때문에 <u>태그로 감싸서 사용하면 될 것 같다.

 

 

목록

 

1. 순서가 필요한 목록   //ol태그이며 1.2.3. 직접 늘려가며 쓸 필요가 없다.
1. 순서가 필요한 목록
  - 순서가 필요하지 않은 목록(서브)  //ul태그이다
  - 순서가 필요하지 않은 목록(서브) 
1. 순서가 필요한 목록
  1. 순서가 필요한 목록(서브)
  1. 순서가 필요한 목록(서브)
1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록에 사용 가능한 기호
  - 대쉬(hyphen)
  * 별표(asterisks)
  + 더하기(plus sign)

 

 

링크

 

HTML의 <a>태그에 해당된다.

 

[GOOGLE](https://google.com "구글")  
//[]안에는 text, ()안에는 링크 ""안에는 타이틀

 

링크를 누르면 본 블로그로 이동하게 된다.

 

이미지

 

링크와 비슷하지만 앞에 !만 붙여주면 된다.

 

링크를 넣는것과 같은 방식으로 작동된다.

 

 

코드강조

 

 

`를 3개이상쓰면 아래처럼 블럭 코드로 연결된다!

 

 

``` 옆에 코드의 문법을 표시해놔야 그에따른 문법에 맞게 코드 하이라이팅이 잘 적용되서 나오게 된다.

 

 

<table> 태그로 변환되게 된다.

 

- , : , | 로 만들어지게 된다.

 

 

 

--- 은 정렬없음, ---:는 오른쪽 정렬, :---:는 양쪽정렬을 의미한다.

 

맨 왼쪽과 맨 오른쪽의 | 는 생략이 가능하다

 

인용문

 

<blockquote> 태그로 변환된다.

 

 

 

원시 HTML

 

마크다운 문법이 아닌 원시 HTML문법을 사용할 수 있다. 마크다운에서 지원하지 않는 기능을 사용할시 유용하다!

 

이전에 봤던 <u>태그나 <img>태그등 원래 HTML태그를 적용해도 잘 적용되는것을 의미한다.

 

수평선과 줄바꿈

 

줄바꿈 선을 넣어도 되고, 맨 마지막에 띄어쓰기 두번을 적용해도 줄바꿈이 적용된다.

<br>태그를 사용해도 상관없다!

728x90

'FrontEnd > 웹 지식' 카테고리의 다른 글

GitHub Pull Request  (0) 2022.08.27
05_Webpack 여러 loader들  (0) 2022.01.15
04_Webpack 설정  (0) 2022.01.15
03_Webpack 기본구조  (0) 2022.01.14
02_Module,Bundle  (0) 2022.01.14