velog의 시작

개발 블로그를 시작하기 위해서 Velog를 시작하였으나, 일반적인 블로그와는 다른 글쓰기 방법이 필요했다.
다른 블로그는 간단하게 몇 번 클릭하거나, 일반적인 문서 작성법을 이용하면 블로그를 뚝딱 만들어낼 수 있다.
하지만 velog는 개발자들에게 특화되어 일반적인 글쓰기에도 남다른 성격(?)을 가지고 있다.
일반적인 글쓰기에서는 불가능한 것들을 마크다운 언어를 이용하여 손 쉽게 글을 쓸 수도 있고, 예쁘게 꾸밀 수도 있다. 그러한 방법들을 대부분의 개발자들이 잘 알고 쓰겠지만, 나만의 정리를 위해서 또는 혹시 사용법을 모르는 사람들을 위해서 정리하여 글을 남겨놓기로 했다.

MARKDOWN?

MARKDOWN 이란, 텍스트 기반의 마크업 언어 로 쉽게 쓰고 읽을 수 있으며 HTML로의 변환이 가능하다.

MARKDOWN은 읽기도 쓰기도 쉬운 문서 양식을 지향하며, 우리가 흔히 볼 수 있는 문서의 .md "README.md" 파일을 생각하면 된다.

장점
1. 문법이 쉽고 간결하며 관리가 쉬움
2. 지원 가능한 플랫폼과 프로그램이 다양함

단점
1. 표준이 없음
2. 모든 HTML 마크업을 대신할 수 없음

MARKDOWN 글쓰기 방법에 대해 알아보자

1. 제목(Header)

# 개수에 따라서, 제목의 크기(중요도)가 변경된다.
h1 ~ h6까지 존재하며, 1번의 중요도가 가장 높고, 다음 순서로 갈수록 중요도가 낮아진다.

# h1제목
## h2제목
### h3제목
#### h4제목
##### h5제목
###### h6제목

예시

# 이것은 중요도가 젤 높은 h1입니다
## 이것은 h1 다음으로 중요도가 높은 h2입니다

결과

이것은 중요도가 젤 높은 h1입니다

이것은 h1 다음으로 중요도가 높은 h2입니다

이것을 이용하여 제목으로 작성할 경우에는 # 을 입력 후 한 칸 띄어써서 사용하면 된다.

2. 문단(Paragraph)

문단을 나눌 때는 문단 사이에 한 줄을 비워두는 것으로 구분한다.
또는 <p> 내용 </p> 을 사용하여 문단을 구분할 수도 있다.

3. 줄 바꿈(Line breaks)

줄 바꿈을 위해서는 엔터로 바꿀 수도 있지만, 여러번의 줄바꿈을 하고 싶다면 여러 번의 엔터로는 불가능하다.
문장과 문장 사이에 빈 줄이 생긴다면 하나의 문단으로 여겨져, 더 이상의 줄바꿈이 이루어지지 않기 때문이다.
그래서 줄 바꿈을 위해서는 <br> 태그를 이용하여야한다.

사용법은 간단하다.

원하는 내용을 작성한 후에 <br>
줄 바꿈을 원하는 곳 바로 옆에 <br> 태그를 옆에 입력해주면 줄바꿈을 할 수 있다.
여러개의 <br> 태그는 여러 번의 줄 바꿈을 할 수도 있다.

4. 강조(Emphasis)

원하는 문장 앞 뒤에 _ , * , ~ 등을 이용하여 강조할 수 있다.

1. 이탤릭 체 ( _ )
   _이탤릭_ 로 작성하면 이탤릭 으로 나타난다.

2. 두껍게 ( * )
   **두껍게** 로 작성하면 두껍게 가 적용된다.

3. 만약에 1, 2번을 같이 사용하고 싶다면?
   **_ 이탤릭 + 두껍게 _** 로 작성하면 이탤릭+두껍게 가 적용된다.

4. 취소선 ( ~~ )
   ~~취소선~~ 로 작성하면 취소선 이 적용된다.

5. 밑줄 ( <u> )
   <u> 밑줄 </u> 을 작성하면 밑줄 이 적용된다.

5. 링크, 이미지

링크
링크는 소, 중괄호 및 꺽쇠를 이용하면 된다.

링크
[ijhhhh94](https://velog.io/@ijhhhh94)

툴팁으로 제목을 넣고 싶다면 소괄호 안에 주소 입력 후 띄어쓰기 후 " " (큰 따옴표) 안에 작성
[ijhhhh94](https://velog.io/@ijhhhh94 "제 블로그 입니다")

URL
<https://velog.io/@ijhhhh94>

결과

링크
ijhhhh94

툴팁에 제목 (마우스 오버 시 보인다)
ijhhhh94

URL
https://velog.io/@ijhhhh94

이미지
이미지는 ! 를 이용하면 삽입 할 수 있다.

[ ] ( )
![ 대체 텍스트 ] ( 링크 주소 ) → 이미지 출력됨

추가로, 이미지에 링크를 삽입하고 싶다면?
[![대체텍스트](이미지링크주소)](링크주소)

결과

6. 인용문, 코드 강조

인용문(BlockQuote)
> 를 이용하면 되며, 만약 중첩을 하고 싶다면 꺽쇠를 여러 개 쓰면 된다.

> 인용문 작성
>> 인용문 안에 인용문
>>> 인용문 안에 인용문 안에 인용문

인용문 작성

인용문 안에 인용문

인용문 안에 인용문 안에 인용문

인라인 코드 강조
` (백팃) 으로 열고 닫아주면 강조된다.
ex) `강조` -> 강조

블록(Block) 코드 강조

```html ( 이 위치에는 html 대신 css, js 등 원하는 걸 넣어줘도 된다 )
원하는 코드
```;

을 이용하면 HTML 로 입력하는 코드를 강조할 수 있게된다.

7. 수평선(Horizon)

수평선을 나누는데는 세 가지 방법이 있다.
하이픈 (-) 을 세 번 입력하거나,
애스터리스크 (*) 를 세 번 입력하거나,
언더바 (_) 를 세 번 입력하면 수평선이 생긴다.

---
***
___

결과

---

8. 원시 HTML(Raw HTML)

Raw HTML : 마크다운 안에 실제 HTML 코드를 이용할 수 있다.

<span style="font-size:20px; color: skyblue; text-decoration: line-through;"> 원시 HTML 이용방법 </span>

원시 HTML 이용방법

9. 표(Table)

표를 나누기 위해서는 | ( 버티컬 바) 를 이용하면 된다.

position 속성

|값|의미|기본값|
|--|--|--|
|static|기준없음|O|
|relative|요소 자신|X|

결과

값	의미	기본값
static	기준없음	O
relative	요소 자신	X

정렬을 하기 위해서는

콜론( : )기호를 구분선에 붙여주면 되는데, 콜론을 어디다가 붙이느냐에 따라서 정렬된다.
앞에다 붙이면, 좌측 정렬 . 양 옆에 붙이면, 가운데 정렬 . 오른쪽에 붙이면 우측 정렬이 된다.
|:--|:--:|--:|

|값|의미|기본값|
|:--|:--:|--:|
|static|기준없음|O|
|relative|요소 자신|X|

값	의미	기본값
static	기준없음	O
relative	요소 자신	X

10. 특수문자

마크다운 언어를 이용하다보면 특수문자로 인하여, 글 작성이 어수선해지는 경우가 있다.
예를 들어 태그 사용에 대한 설명을 하고 싶은데, <br>을 그냥 작성해버리는 경우에는 줄바꿈 처리가 된다.
또는 마크다운 언어와 단축키가 같다면, 내가 > 를 사용하고 싶어도, 그냥 입력하게 되면

인용문이 등장해버린다.

이럴 때는 특수문자에 대한 코드를 이용해야한다.
< : <
> : >

이것은 Character Entity Reference Chart 를 검색해서 이용하자!

---

이것 외에도 몇 가지 방법이 더 있지만, 글쓰는데에는 이걸로도 충분한 것 같다.
처음에는 글 쓰는데에 어떻게 쓰는거야? 라는 생각이 먼저 떠올랐지만, 나 혼자 정리하면서 다음에는 더 쉽게 잘 쓸 수 있겠지? 하며 습득이 되었다.
velog를 처음 접하는 누군가에게도 도움이 될 수 있었으면 좋겠다.