Velog Markup Language

sosoeueun·2022년 10월 18일
0

sosoeueun

목록 보기
3/3
post-thumbnail

벨로그를 작성하다 보면 필수 불가결한게 마크다운에 대해 찾아보는 것이다.
마크 다운 작성 법과 마크 다운이란 무엇인가에 대해서 찾아보았다.

Markup Language
문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종

데이터를 화면에 표시하기 위해서 사용하는 언어이기 때문에 프로그래밍 언어와 차이가 있다.

Markdown
텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다.

장점

1. 간결하다.
2. 별도의 도구없이 작성가능하다.
3. 다양한 형태로 변환이 가능하다.
4. 텍스트(Text)로 저장되기 때문에 용량이 적어 보관이 용이하다.
5. 텍스트파일이기 때문에 버전관리시스템을 이용하여 변경이력을 관리할 수 있다.
6. 지원하는 프로그램과 플랫폼이 다양하다.

단점

1. 표준이 없다.
2. 표준이 없기 때문에 도구에 따라서 변환방식이나 생성물이 다르다.
3. 모든 HTML 마크업을 대신하지 못한다.

참고 Velog Markdown 글

📒Velog Markdown

1. 제목(header)

h1부터 h6까지 표현할 수 있으며, # 의 개수로 표현 가능

🖊 마크다운 작성 시

# h1
## h2
### h3
#### h4
##### h5
###### h6

💻 결과

h1

h2

h3

h4

h5
h6

👩‍🏫 h1, h2의 다른 작성 방법

=, - 를 두개 이상 사용하여 작성

🖊 마크다운 작성 시

h1
==
h2
--

하이픈을 여러 개 사용한 제목
======

하이픈을 여러 개 사용한 제목
----------

💻 결과

h1

h2

하이픈을 여러 개 사용한 제목

하이픈을 여러 개 사용한 제목



2. 문단 간격

문단의 간격은 줄바꿈으로 나타내고, 많은 간격을 두고 싶은 경우 <br/>

🖊 마크다운 작성 시

첫 번째 문단



두 번째 문단

<hr/>

첫 번째 문단<br/><br/>
두 번째 문단

💻 결과

첫 번째 문단

두 번째 문단


첫 번째 문단



두 번째 문단



3. 목록

순서를 표기하는 목록, 순서가 없는 목록 작성 가능

3-1. 순서를 표기하는 목록

숫자. 사용하여 작성

🖊 마크다운 작성 시

1. 첫 번째
2. 두 번째
3. 세 번째

💻 결과
1. 첫 번째
2. 두 번째
3. 세 번째

3-2. 순서가 없는 목록

-, +, * 를 이용하여 작성 (다 똑같이 표시 됨)
Tab, Spacebar를 통해 들여쓰기 가능

🖊 마크다운 작성 시

- 순서 없는 목록 1
    - 목록 1.1
        - 목록 1.2
- 순서 없는 목록 2
		
        Tab 두번 하면 코드 블럭을 만들 수 있어요.
* 순서 없는 목록 3
 이어서 문단을 쓰려면 스페이스바 한번만 입력하면 됩니다.
그냥써도 되긴한다. 

+ 순서 없는 목록 4
	
    - `인라인 코드 가능`
    - 들여쓰기 하면 `+`, `블록코드`는 다른 모양으로 표현됨
	+ 3번째 들여쓰기 `+`코드부터  + 모양으로 보임
   
        ```
        3번째 들여쓰기 블록코드부터 ``` 글자가 보임
        ```

💻 결과

  • 순서 없는 목록 1
    • 목록 1.1
      • 목록 1.2
  • 순서 없는 목록 2
      Tab 두번 하면 코드 블럭을 만들 수 있어요.
  • 순서 없는 목록 3
    이어서 문단을 쓰려면 스페이스바 한번만 입력하면 됩니다.
    그냥써도 되긴한다.
  • 순서 없는 목록 4
    • 인라인 코드 가능

    • 들여쓰기 하면 +, 블록코드는 다른 모양으로 표현됨
      + 3번째 들여쓰기 +코드부터 + 모양으로 보임

      3번째 들여쓰기 블록코드부터 ``` 글자가 보임

솔직히 줄바꿈에 따라 다른것 같기도 하고 그냥 한번 써보는게 나을 듯



4. 폰트 스타일

_, *, ~ 사용

🖊 마크다운 작성 시

__굵게__
**굵게**
_기울여 쓰기_
*기울여 쓰기*
~취소선~
~~취소선~~

💻 결과
굵게
굵게
기울여 쓰기
기울여 쓰기
~취소선~
취소선

🔣 기호 표시 ( Backslash Escapes )

마크다운 문법에 있는 기호를 그대로 출력하고 싶다면, 역방향 슬래시를(\\) 앞에 붙여주면 된다.

🖊 마크다운 작성 시

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

💻 결과
*
_
()
{}
[]
#
+
-
.
!
\



5. 인용문

> 사용

🖊 마크다운 작성 시

> 인용문 작성하기
-작성자

> 인용문 작성하기
>> (>)의 갯수에 따라
>>> 중첩문 가능

💻 결과

인용문 작성하기
-작성자

인용문 작성하기

(>)의 갯수에 따라

중첩문 가능



6. 인라인 코드

백틱(`)사용
🖊 마크다운 작성 시

`인라인 코드는 이렇게 작성해요.`

💻 결과
인라인 코드는 이렇게 작성해요.



7. 여러 줄로 된 코드 블럭

백틱(`)사용

🖊 마크다운 작성 시

``` 
위 아래 3개로 감싸면 블럭으로 만들 수 있어요.
``` 

💻 결과

위 아래 3개로 감싸면 블럭으로 만들 수 있어요.

👩‍🏫코드 하이라이트 ( Syntax Highlighting )

백틱(`)3개 뒤에 언어 이름을 넣어 작성

🖊 마크다운 작성 시

```javascript
let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
``` 

```python
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)
``` 

💻 결과

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200);
num_list = ['one', 'two', 'three']
for num in num_list:
  print(num)
언어 이름작성 방식
Bashbash
Cc
C#cs
C++cpp
CSScss
Diffdiff
HTML, XMLhtml
HTTPhttp
Iniini
JSONjson
Javajava
JavaScriptjavascript
PHPphp
Perlperl
Pythonpython
Rubyruby
SQLsql

🎨코드 블럭 색 변경

작성하기 클릭 ➜ 추가설정 ➜ 코드블록 테마 선택
하면 된다고 나와있던데 현재는 안되는 것 같다.



🖊 마크다운 작성 시

인라인 링크는 아래처럼
[인라인 링크](https://velog.io/)

url 링크는 아래처럼
<https://velog.io/>

참조 링크는 아래 처럼
[velog]:https://velog.io/

[velog]

💻 결과
인라인 링크는 아래처럼
인라인 링크

url 링크는 아래처럼
https://velog.io/

참조링크는 아래 처럼

velog

원문에는 참조링크도 있으나, 지금은 참조링크가 안되는 것 같다.



9. 수평선

*, -, _ 를 3개 이상 입력시 작성 가능

  • 띄어쓰기가 중간에 껴 있어도 가능
  • -는 헤더로 인식할 수 있으니 주의

🖊 마크다운 작성 시

* * *
***
*****
- - -
---
-----
_ _ _
___
_____

💻 결과












10. 이미지 링크

  • ![이미지 설명](이미지 링크) 문법 사용 또는 드래그 앤 드롭으로 이미지 첨부 가능

  • [![이미지에 링크 걸고 싶을 때 ](이미지 링크)](연결하고자하는 url "마우스 오버 시 나타낼 링크 title")

🖊 마크다운 작성 시

![깃허브 마스코트](https://velog.velcdn.com/images/sosoeueun/post/1252ea17-9d4c-45f2-9208-663be6c4f503/image.png)

[![이미지에 링크 걸고 싶을 때 ](https://velog.velcdn.com/images/sosoeueun/post/9427b26f-9d06-47ae-b444-b17af15344a5/image.png)](https://w.namu.la/s/482582ba4085e2319529794ea8584022c0124c61ed1b619bd3e01223b0771dbe3719d1860f7995862ec31a32b3c662a18ad406dd0a5dd4147fa2b22cc12ad82ba0776be2ce887bf46aa62df9b354cae57076cd0526b6eb4dbb0aae79c4772fc4 "함정카드")

💻 결과



11. 테이블(Table)

  • 수직선 기호(|)로 열을 구분할 수 있다
  • 하이픈 기호(-)를 여러 개 붙여서 th와 tr을 구분할 수 있다.
  • 콜론 기호(:)로 정렬을 표현할 수 있다.

🖊 마크다운 작성 시

|       |  left | center| right |
|:-----:|:----- |:-----:| -----:|
| row1  |l1     |  c1   |     r1|
| row2  |l2     |  c2   |     r2|
| row3  |l3     |  c3   |     r3|

💻 결과

leftcenterright
row1l1c1r1
row2l2c2r2
row3l3c3r3



12. 체크박스(Check Box)

-, *, + 뒤에 띄어쓰기 후 [ ] 대괄호

  • 대괄호 [ ] 안에 띄어쓰기 할 경우 빈 체크박스
  • 대괄호 [x] 안에 x 넣을 경우 체크된 체크 박스

🖊 마크다운 작성 시

- [ ] 운동 하기
- [x] 강의 듣기

💻 결과

  • 운동 하기
  • 강의 듣기



13. 이모지💟

단축키

window10 : 윈도우 키 + 마침표(.)
mac : Comand + Control + 스페이스 바

이모지 모음 링크

⚡️🚨⚡️
(っ´ω`)っ 특이한 특수문자도 찾아 볼 수 있어서 좋다



14. 글자 색상

html 태그 를 이용하여 작성 가능

🖊 마크다운 작성 시

<span style="color:red">red</span>
<span style="color:#d3d3d3">#d3d3d3</span>
<span style="color:rgb(245, 235, 13)">rgb(245, 235, 13)</span>

💻 결과
red
#d3d3d3
rgb(245, 235, 13)

profile
sosoeueun

0개의 댓글