튜토리얼을 아무리 찾아봐도 내가 원하는 내용은 바로바로 나오지 않더라..
하여 사용해보면서 정리하는 나를 위한 튜토리얼^ㅜ
📌 나를 위한 글쓰기 TIP 요약
회색박스는백틱(``)을 사용해 내용을 입력하면 된다.- 마크다운에서 쓰이는 기호를 그대로 사용하고 싶다면
백슬래시(\)를 사용한다. - 링크는
[링크이름](주소) - 이미지는
[이미지설명](이미지링크) - 색상변경은
HTML코드 사용가능
📌 MARKDOWN
🔍 제목 작성
HTML의 h1부터 h6까지 표현 가능하며 사용방법은 #하나당 hn
참고 : 제목으로 작성한 부분은 글 게시 후 오른쪽에서 목록으로 뜬다
🧩 입력
# h1 제목입니다
## h2 제목입니다
### h3 제목입니다
#### h4 제목입니다
##### h5 제목입니다
###### h6 제목입니다
💡 출력
h1 제목입니다
h2 제목입니다
h3 제목입니다
h4 제목입니다
h5 제목입니다
h6 제목입니다
+ h1, h2 는 하이픈으로도 표현이 가능하다 ( 다른거 하다가 놀래서 알게되었다... )🧩 입력
h1
==
h2
--💡 출력
h1
h2
🔍 문단 간격
글 작성시에 엔터를 아무리 쳐도 2줄 이상 떨어지지 않더라
고로 <br>코드를 사용하면 엔터 가능!
🧩 입력
엔터를 치고 싶은데 안된다면 <br><br>
이러면 두줄 엔터 !💡 출력
엔터를 치고 싶은데 안된다면
이러면 두줄 엔터!
🔍 인용문
인용문을 만들고자 할 때는 >를 사용
🧩 입력
>1단
>>2단
>>>3단
### 제목도 만들 수 있어요
내용내용💡 출력
1단
2단
3단
제목도 만들 수 있어요
내용내용
🔍리스트
HTML의 UL OL 역할하는 리스트 만들기 (순서가 있는 목록 / 순서가 없는 목록)
- 순서가 있는 목록
숫자+마침표를 사용한다.
🧩 입력
1. 첫번째
2. 두번째
3. 세번째
4. 네번째💡 출력
- 첫번째
- 두번째
- 세번째
- 네번째
- 순서가 없는 목록
+, *, -를 사용한다. 결과값은 동일. 입력후 공백줘야함
🧩 입력
- 순서가 없어
* 순서가 없어요
+ 무슨 기호를 써도 동일해요
- 네번째 부터는 없네요
+ 순서가 없어요
엔터치고 TAB주면 코드 블럭 생성 됩니다
* ## 리스트 안에서 제목 생성됩니다
```
이렇게 코드블럭 생성 됩니다
```
💡 출력
- 순서가 없어
* 순서가 없어요
+ 무슨 기호를 써도 동일해요
- 네번째 부터는 없네요
-
순서가 없어요
엔터치고 TAB주면 코드 블럭 생성 됩니다.
리스트 안에서 제목 생성됩니다
이렇게 코드블럭 생성 됩니다
🔍 코드블럭 생성하기
3가지방법으로 요약할 수 있다
- TAB키 이용하기
TAB키를 이용하면 한줄짜리 코드를 입력할 수 있다.
단, 이전문장과 엔터로 떨어져 있어야 적용된다. - 백틱( ` )이용하기
🧩 입력
`백틱을 이용하면
인라인코드를 작성할 수 있다. `💡 출력
백틱을 이용하면 인라인코드를 작성할 수 있다.
- 백틱( ``` )이용하기
🧩 입력
```java
public void run() {
for(int i=0; i<2; i++) {
System.out.println(getName());
}
}
system.out.println("위아래로 백틱 3개씩 감싸면 블럭형태로 만들어진다")
```💡 출력
public void run() {
for(int i=0; i<2; i++) {
System.out.println(getName());
}
}
system.out.println("위아래로 백틱 3개씩 감싸면 블럭형태로 만들어진다")+ 코드블럭 시작점 (```)에 사용하는 언어를 선언하면 하이라이팅이 가능하다.
작성방식은 하단 주석 참고🔍 폰트 스타일
굵게, 기울이기, 취소선을 만들 수 있다.
🧩 입력
**굵게**
*기울이기*
__굵게__
_기울이기_
~~취소선~~
<b>이거는 적용 안됨</b>
💡 출력
굵게
기울이기
굵게
기울이기
취소선
이거는 적용 안됨
html태그를 이용해 글자색변경 가능
🧩 입력
<span style="color:red">RED</span><br>
<span style="color:#d3d3d3">#0eedff</span><br>
<span style="color:rgb(200, 255, 0)">rgb(200, 255, 0)</span>💡 출력
RED
#0eedff
rgb(200, 255, 0)
+24.02.29 미리보기에서는 <p>태그에도 적용이 됐는데 실제 적용은 <span>만 되네🔍 구분선
-, *, _ 을 3개 이상 입력하면 구분선이 생성된다.
❗ -의 경우 윗줄과 떨어지지 않으면 제목으로 인식 될 수 있으니 주의
🧩 입력
---
***
____💡 출력
🔍 링크
링크는 인라인링크와 URL링크 그리고 참조링크 총 3가지로 나눌 수 있다.
🧩 입력
인라인 링크
[인라인 링크](https://naver.com/)
url 링크
<https://naver.com/>
--
참조 링크
[velog]:https://naver.com/
--
[velog]💡 출력
인라인 링크
--
https://naver.com/
--
🔍 이미지 삽입
🧩 입력
💡 출력
🔍 체크박스
-, *, + 뒤에 띄어쓰기 + 대괄호 []
대괄호안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크된 체크박스 생성(아이폰 체크박스 복붙하면 나오는식인듯)
🧩 입력
- [ ] 벨로그 작성하기
* [x] 오늘도 JAVA💡 출력
- 벨로그 작성하기
-
오늘도 JAVA
+24.02.29 얘도 적용 안된다! 무슨일이고!
🔍 이모지
트위터 이모지 많이 쓰는 거 같더라
https://kr.piliapp.com/twitter-symbols/
window10: 윈도우 키 + 마침표(.)
mac: Command + Control + 스페이스 바
🔍 테이블
|로 열을 구분 -(하이픈)을 여러개 붙여서 th와 td를 구분 지음
하이픈 좌우에 :(콜론)을 넣으면 위치에 따라 정렬 가능. 아무것도 안하면 왼쪽 정렬
🧩 입력
| |col1 |col2 |col3 |
|------|:--------|:---------:|----------:|
| row1 | 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
| row2 | __테이블 안에서도__ | ~~마크다운은 적용이~~ | _가능하다는 거 아시겟조_ |
| row3 | 굳이 칸너비를 |맞춰서 그릴 필요는 없지만 | 처음엔 헷갈릴거 같음 |
💡 출력
| col1 | col2 | col3 | |
|---|---|---|---|
| row1 | 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
| row2 | 테이블 안에서도 | 가능하다는 거 아시겟조 | |
| row3 | 굳이 칸너비를 | 맞춰서 그릴 필요는 없지만 | 처음엔 헷갈릴거 같음 |
+2024.03.07 분명 프리뷰에서는 td도 정렬이 가능했는데? 게시하면 전부 왼쪽정렬이다 참고링크
https://velog.io/@designer_rami/Velog-마크다운Markdown-작성법
https://velog.io/@kim-mg/velog-글쓰기-markdown-작성법
