Velog 연습
Velog 연습을 위해 명령어 정리
마크다운이란
마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.
-위키백과
개발자들과 의사소통의 중요성과 앞으로 변화에 빠르게 적응하기 위해 사이트를 알아보다가 벨로그라는 사이트를 알게되어 자주 사용할 것 같다.
그렇다면 연습을 시작해보자
⛳️ Block Elements
🥊 제목(headers) 넣어보기
마크다운 형식
h1 부터 h6 까지 사용하기
제목을 정할 수 있다.
HTML형식
<h>를 시작으로 </> 마지막으로 닫아준다.
✏️입력
# 첫 번째 수준 제목 (h1)
## 두 번째 수준 제목 (h2)
### 세 번째 수준 제목 (h3)
#### 네 번째 수준 제목 (h4)
##### 다섯 번째 수준 제목 (h5)
###### 여섯 번째 수준 제목 (h6)💻출력
첫 번째 수준 제목(h1)
두 번째 수준 제목(h2)
세 번째 수준 제목(h3)
네 번째 수준 제목(h4)
다섯 번째 수준 제목(h5)
여섯 번째 수준 제목(h6)
📝인용(Blockquotes)
본문 안에 인용된 내용을 표시하고자 한다면 >기호를 사용한다.
✏️입력
> # 1단
인용문 첫번째 줄
인용문 두번째 줄
>> ## 2단
중복해서 사용하면
>>> ### 3단
중첩 인용문 가능
>>>> #### 4단
계속 중첩할 수 있다.tip: 인용문 안에서도 제목 수준 사용 가능
💻출력
1단
인용문 첫번째 줄
인용문 두번째 줄2단
중복해서 사용하면
3단
중첩 인용문 가능
4단
계속 중첩할 수 있다.
HTML 형식
✏️입력
<Blockquote>
인용
</Blockquote>💻출력
인용
📖리스트(List)
일반적인 불릿 리스트는 + * - 중 아무거나 선택해서 사용한다.
마크다운 형식
✏️입력
*별도
+플러스
-마이너스 셋 다 같음💻출력
*별도
+플러스
-마이너스 셋 다 같음
리스트 안에서 이어지는 문단은 스페이스바만 입력해줘 가능
✏️입력
-첫 번째 리스트
이어지는 두 번째 문단
-두 번째 리스트
이어지는 두 번째 문단💻출력
-
첫 번째 리스트
이어지는 두번째 문단 -
두 번째 리스트
이어지는 두번째 문단HTML
✏️입력<ol> <li>순서가 필요한 리스트</li> <li>순서가 필요한 리스트</li> </ol> <ul> <li>순서가 필요없는 서브 리스트</li> <li>순서가 필요없는 서브 리스트</li> <ol> <li>순서가 필요한 리스트</li> <li>순서가 필요한 리스트</li> </ol> </ul>💻출력
- 순서가 필요한 리스트
- 순서가 필요한 리스트
- 순서가 필요없는 서브 리스트
- 순서가 필요없는 서브 리스트
- 순서가 필요한 리스트
- 순서가 필요한 리스트
여러 줄의 코드 블럭은
3개의 백틱으로
감싸서 만들 수 있다.✏️입력
//```java
public class helloWorld{
public void main(String[] args) {
System.out.println("Hello World");
}
}
//```💻출력
public class helloWorld{
public void main(String[] args) {
System.out.println("Hello World");
}
}💡가로선 넣기
가로선을 넣는 방식은 다양하지만 출력은 동일한다
✏️입력
* * *
***
*****
- - -
---
-----💻출력
마크다운 형식
<hr/>
ㅡㅡㅡ
🔧공백 넣기
사 과사 과
ㅡㅡㅡ
📌Span Elements
링크서식
아래의 세가지 방식이 있다.
- 인라인 링크
- url참조
- 참조 링크
마크다운 형식
✏️입력
인라인 링크
[인라인 링크](https://velog.io/)
url 링크
<https://velog.io/>
참조 링크
[velog]:https://velog.io/
[velog]💻출력
인라인 링크
인라인 링크
url 링크
https://velog.io/
참조 링크
HTML 형식
✏️입력
<a href="http://www.google.co.kr">HTML 링크 설명</a>
새 탭으로 띄우기
<a href="http://www.google.co.kr" target="_blank">링크이름</a>💻출력
HTML 링크 설명
새 탭으로 띄우기
링크이름
강조하기(Emphasis)
볼드, 이탤릭, 취소선을 사용할 수 있다.
마크다운 형식
✏️입력
*이탤릭*
_이탤릭_
**볼드**
__볼드__
~~취소선~~💻출력
이탤릭
이탤릭
볼드
볼드
취소선
HTML 형식
✏️입력
<strong>Bold</strong>
<i>이탤릭체</i>, <em>이탤릭체</em>
<del>취소선</del>, <strike>취소선</strike>
<u>밑줄</u>, <ins>밑줄</ins>
<sup>윗첨자</sup>
<sub>아래첨자</sub>
<small>작은 글자</small>
<big>큰 글자</big>Bold
이탤릭체, 이탤릭체
취소선, 취소선
밑줄, 밑줄
윗첨자
아래첨자
작은 글자
큰 글자
🖼이미지 삽입
링크 삽입 방식과 비슷하지만,맨 앞에 !을 붙여준다
마크다운 형식
1. 일반 이미지 삽입하기: 
2. 이미지에 설명 삽입하기: 
3.이미지에 링크 걸기: [](연결할 url "url 설명 문구")❌MISCELLANEUOUS
기호표시(Backslash Escapes)
마크다운 문법에 있는 기호를 그대로 사용하고 싶다면, 역방향 슬래쉬를 앞에 붙여주면 된다.
✏️입력
\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\💻출력
*
_
()
{}
[]
#
+
-
.
!
\
🛎테이블(Table)
- 수직선 기호(|)로 열을 구분할 수 있다. 열
- 하이푼 기호(-)를 여러개 붙이면 th와 tr을 구분할 수 있다. 행
- 콜론기호(:)로 정렬을 표시할 수 있다.
마크다운 형식
✏️입력
| |left |center|right
|----|:----|:----:|----:
|1행|l1 | c1 | r1
|2행|l2 | c2 | r2
|3행|l3 | c3 | r3💻**출력
| left | center | right | |
|---|---|---|---|
| 1행 | l1 | c1 | r1 |
| 2행 | l2 | c2 | r2 |
| 3행 | l3 | c3 | r3 |
HTML 형식
✏️입력
<table>
<tr>
<th>제목</th>
<th>제목</th>
<th>제목</th>
</tr>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</table>💻**출력
| 제목 | 제목 | 제목 |
|---|---|---|
| 내용 | 내용 | 내용 |
| 내용 | 내용 | 내용 |
HTML 셀 병합
colspan=" " 열(column) 병합
✏️입력
<table>
<tr>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<td colspan="2">내용</td>
</tr>
</table>
💻출력
| 내용 | 내용 |
| 내용 |
rowspan=" " 행(row) 병합
✏️입력*
| 내용 | 내용 |
| 내용 | |
| 내용 |
💻출력
| 내용 | 내용 |
| 내용 | |
| 내용 |
😁이모지(Emoji)
1.링크에서 복사 + 붙여넣기: https://kr.piliapp.com/twitter-symbols/
2.단축키 이용: mac -> Command + Cotrol + Space Bar
🖍체크박스(Check Box)
*,+,- 기호에 띄어쓰기 이후 대괄호[] 넣기
띄어쓰기를 하면 체크되지 않은 상태
x를 넗어주면 체크된 상태이다.
✏️입력
-[] 체크되지 않은 박스
-[x] 체크된 박스💻출력
- 체크되지 않은 박스
- 체크된 박스
ㅡㅡㅡ
Velog사용을 위해 마크다운 문법을 작성하면서 공부하였다.
The end
reference
