velog 시작하기

k_shape·2021년 1월 19일
2

velog 시작 : markdown

목록 보기
1/1
post-thumbnail

Velog 시작하면서

새해에는 '공부한 것을 기록할 겸, 나만의 Note로 사용할 Blog를 개설', 'digital portfolio 작성' 목표를 달성하기 위해 블로그를 시작하였습니다.

먼저 블로그를 시작하기에 앞서 여러 blog platform(naver, tistory, git page 등)을 잠깐씩이나마 접해보면서 저에게 적합한 platform을 선정하였습니다.
저는 그 중에서도 velog를 선택하였습니다. 그 이유는 아래와 같습니다.
~~세세하게 비교 하지 않았고 저의 개인적인 생각입니다 :)~~

  1. 공부 내용을 편하게 작성 가능 _ preview 제공
  1. naver나 tistory보다 기술 blog에 중점을 두어 소스 코드 가독성 제공
  2. git page의 theme 선택 장애와 customizing 능력 부족
  3. 최근 떠오르는 blog platform

이와 같은 이유로 velog에서 정보보안/AI/programming 기술 블로그를 시작해보려합니다. 처음으로 velog 포스팅 할때 사용되는 언어 Markdown에 대해 다뤄보겠습니다.


1. Markdown

  • 마크 다운(Markdown)은 마크업 언어의 일종
  • 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 개발
  • 초기 이메일의 글쓰기 형식에서 영감을 받아 Python을 이용한 HTML 변환기에서 발전
  • markdown으로 작성한 문서를 HTML로 변환하는 perl script도 개발하였으며 확장자는 .md를 사용

markdown은 text를 HTML로 변환하는 언어이자 도구
Markdown은 github README, jekyll blog, Velog 등 다양한 영역에서 활용 중이며 최근에는 WYSIWYG(What You See Is What You Get,문서 및 문서 작성 방법을 GUI로 구현한 것)에서도 Markdown을 지원하려는 추세입니다.

Tistory, Naver 등 대중적인 blog 작성 방식(WYSIWYG)과 달리 직관적이지 않아 coding처럼 어렵게 다가올 수 있지만 Preview도 제공하며 문법이 간단하기 때문에 진입장벽이 낮습니다. 익숙해지시면 기존의 작성 방식보다 편하게 작업하는 자신을 발견하실겁니다. 😁

1.2 Markdown 장점

  1. 문법이 간단하여 진입장벽이 낮음
  1. Text로 저장 후 HTML로 변환 가능
  2. Git을 통한 version 관리가 가능하고 용량이 적어 보관이 용이
  3. Python Jupyter Notebook, R Markdown 등 다른 기술을 익히는데 있어 훌륭한 도구로 활용 가능

1.3 Markdown 단점

  1. 표준이 없어 핵심 문법을 제외하고는 editor에 따라 다른 형식의 결과물

2. Syntax

Markdown의 기존 문법과 Velog에서 제공하는 문법은 약간의 차이가 존재한다고 합니다. 아직까지 저는 Velog에서만 사용하여 Velog 기준으로 문법을 설명드리겠습니다.

2.1 Plaintext와 Heading

일반적으로 아무 기호도 작성하지 않고 작성하면 현재 글과 같이 일반적인 text가 작성됩니다. 또한 제목을 작성하고 싶다면 아래와 같이 # 제목명 을 입력하면 제목행이 작성됩니다. # 1개부터 6개까지의 모양을 제공하며 예시는 아래 그림과 같습니다. 제목은 블로그 우측에 목차 나열되어 필요한 내용을 찾아갈 수 있게 편의성을 제공합니다.

입력 방식

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

2.2 수평선과 줄 바꿈

-를 3개 입력하면 아래와 같이 실선이 추가되며 <br> 줄 바꿈 기능을 제공합니다. 아래 수평선 아래 <br>을 2줄을 입력한 모습입니다.




입력 방식

--- 
<br>
<br>

2.3 글자 모양

글자 혹은 문장을 강조하기 위한 방법으로 Italic, Blod, Blod Italic ,~~Strikethrough~~을 제공합니다. 각 각 순서대로 * 1, 2, 3개를 씌워주면 해당 영역에 포함된 글자에 효과가 적용됩니다. Strikethrough는 ~~를 이용하여 표현 가능합니다.

입력 방식

*Italic*
**blod**
***blod Italic***
~~Strikethrought~~

2.4 Block quote와 list

Block quote의 본 기능은 본문에서 단락 또는 텍스트 블록으로 인용된 문서를 기입하는데 사용됩니다. 저는 시각적으로 구별하는 역할로 사용하고 있습니다.
> + 내용으로 작성하며 >의 갯수별로 level 적용되며 아래와 같이 작성됩니다.

Quote1
내용

Quote2
내용

Quote3
내용

입력 방식

>> Quote1
>>> Quote2
>>>> Quote3

list는 * , - , 'number'. 를 활용하여 작성할 수 있습니다. 또한, tab키를 활용하여 level을 나눌 수 있습니다.

  • list1
  • list2
  • list3
  • list1
  • list2
  • list3
  1. list1
    2. list2
    3. list3

입력 방식

 * list1
 * list2
 * list3 
- list1
- list2
- list3
1. list1
	2. list2
		3. list3

Image 삽입은 ![image descripion](주소)을 작성해야하지만 쉬운 방법으로 작성하고 있는 창에 image file을 drag하면 자동으로 주소가 입력됩니다. Link는 [description](주소)를 통해 description을 클릭하면 해당 주소로 연결되게 할 수 있습니다.

Link K_shape blog

입력 방식

click [K_shape blog](https://velog.io/@k_shape) 
![image description](주소)

2.6 Table

Table 작성 |, --, :을 통해 손쉽게 작성 가능합니다. 아래의 입력 방식과 같이 |을 통해 영역을 나누고 두번째 행에 --을 추가하면 자동으로 Table의 모양으로 전환됩니다. --행에서 :을 추가하여 해당 column을 우측, 좌측, 가운데 정렬을 할 수 있습니다.
하지만 아쉽게도 간단한 표를 작성하는 기능을 제공하나 한 가지 표 형식(맨 위 행 : 제목, 그 외 셀)만을 제공하여 표현 방식에 한계가 있어 표를 만들어서 사진으로 삽입해야할 경우가 발생할거 같습니다.

|Header|description|other|
|--:|:--|:--:|
|cell|cell|cell|
|cell|cell|cell|
|cell|cell|cell|
|cell|cell|cell|

입력 방식

  |Header|description|other|
  |--:|:--|:--:|
  |cell|cell|cell|
  |cell|cell|cell|
  |cell|cell|cell|
  |cell|cell|cell|

2.7 Code

문장 안에서 숫자 1키 좌측에 있는 backtick을 활용하여 code를 효과적으로 표현 가능합니다. 1개만 기입하였을 시 해당 문장 전체에 적용되며 특정 단어, 문장에만 적용하고 싶을 시 해당 영역을 backtick으로 감싸면 아래의 console 부분과 같이 폰트와 배경이 바뀌며 시각적 효과를 줄 수 있습니다. 해당 문단에 효과를 주기 위해서는 backtick 3개로 해당 문단을 감싸고 code를 표현할때는 문단 시작 backtick뒤에 언어 종류를 기입하면 해당 언어의 문법에 맞춰 highlight가 적용됩니다.

해당 기능을 시각적 효과를 주기 위해서도 사용 가능하며 특히, code를 입력하였을시 자동으로 highlight 효과가 적용되어 code 가독성을 높혀줍니다. 이렇게 간단한 방법으로 효과적이게 code를 삽입할 수 있어 naver, tistory를 선택하지 않고 velog를 선택하였습니다. :)

~~backtick은 다른 특수 문자들과 달리 문장안에 기입이 안되서 설명이 매끄럽지 못한거 같습니다... 차라리 아래의 입력 방식을 참고해서 실습해보시면 이해하는데 편하실겁니다 ㅠ.ㅠ~~

console.log('your message')
console.log('your message')

public class HelloWorld {
    public void main(String[] args) {
    	//hello world
        System.out.println("Hello World");
    }
}
print('hello world')

입력 방식

2.8 Emoji

Emoji를 입력하는 방법은 http://www.iemoji.com/에서 원하는 이모지 클릭 copy 원하는 위치에 붙여넣기 하시면 이렇게 🐾 원하는 이모지를 삽입할 수 있습니다. 필수 문법은 아니지만 글 작성에 더 생기를 더할 수 있습니다 :)


3. 마치며

먼저, markdown에 대해 설명하는 글을 작성하였으나 저의 설명이 미흡하여 쉬운 markdown이 어렵게 느껴지지 않았으면하는 바램입니다. 직접 실습해보시면 금방 익숙해지고 다른 방식으로 각 기능을 활용하여 더 효과적으로 표현하실 수도 있습니다.

velog에서 첫 게시글을 작성하며 복잡하고 어려운 내용이 아니었음에도 포스팅하는데 많은 시간을 투자하였습니다. 대학원에 진학하고 본인의 생각을 효과적으로 표현하는 기술 또한 핵심 역량 중 하나라는 것을 느꼈으며 blog 운영, 세미나 발표 등을 통해 이러한 soft skill 역량을 키워나가려고 합니다. 그리고 velog로 그 첫 걸음을 떼려 합니다. Security/AI/coding을 주제로 1주일에 1포스팅이 목표입니다.

틀렸거나 부족한 부분은 댓글이나 이메일로 보내주시면 감사하겠습니다.

profile
Security/AI/Engineer

0개의 댓글