Hello World!

CHOI Hyunseo·2022년 9월 25일

velog 작성에 도움되는 것들

Markdown - Github 기준

1. Headers 헤더

#으로 시작하는 텍스트.
#은 하나부터 여섯개까지 가능.
#이 늘어날때마다 제목의 스케일 낮아집니다.
H1은 ===로도 만들 수 있습니다.
H2는 ---로도 만들 수 있습니다.

This is an H1
===
This is an H2
---
# This is an H1
## This is an H2
### This is an H3
#### This is an H4
##### This is an H5
###### This is an H6

Demonstration 실행결과

This is an H1

This is an H2

This is an H1; 부(parts)에 사용

This is an H2; 장(chapters)에 사용

This is an H3; 페이지 섹션에 사용

This is an H4; 하위 섹션에 사용

This is an H5; 하위 섹션 아래의 하위 섹션에 사용

This is an H6; 문단에 사용

2. Emphasis 강조

기울여 쓰기(italic) : * 또는 _로 감싼 텍스트.
두껍게 쓰기(bold) : ** 또는 __로 감싼 텍스트.
취소선 : ~~로 감싼 텍스트.
이탤릭체와 두껍게를 같이 사용할 수 있습니다.

*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
~~This is canceled~~
*You **can** combine them*

Demonstration 실행결과

This text will be italic
This will also be italic
This text will be bold
This will also be bold
~~This is canceled~~
You can combine them

3. Blockquotes 인용

>으로 시작하는 텍스트.
>는 3개까지 가능합니다.
1개는 인용문.
2개는 인용문 안에 인용문.
3개는 인용문 안에 인용문 안에 인용문.

As Grace Hopper said:
> I’ve always been more interested in the future than in the past.    
> This is a first blockquote.
> > This is a second blockquote.
> > > This is a third blockquote

Demonstration 실행결과

As Grace Hopper said:

I’ve always been more interested in the future than in the past.
This is a first blockquote.

This is a second blockquote.

This is a third blockquote

4. Lists 목록

4.1. Unordered lists 순서가 없는 목록
- *, +, - 를 이용해서 순서가 없는 목록을 만들 수 있습니다.
- 들여쓰기를 하면 모양이 바뀝니다.
4.2. Ordered lists 순서가 있는 목록
- 숫자를 기입하면 순서가 있는 목록이 됩니다.
- 들여쓰기를 하면 모양이 바뀝니다.

* Item 1
* Item 2
  * Item 1
  * Item 2
    * Item 1
    * Item 2
 1. Item 1
 2. Item 2
 3. Item 3
   1. Item 1
   2. Item 2
   3. Item 3
     1. Item 1
     2. Item 2
     3. Item 3

Demonstration 실행결과

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

5. Backslash Escapes 백슬래쉬 이스케이프

특수문자를 표현할 때, 표시될 문자 앞에 \를 넣고 특수문자를 쓰면 됩니다.
주의할 점은 앞과 뒤에가 형식이 똑같이 백슬래쉬 뒤에 특수문자입니다. 감싸는 형태가 아닙니다.
백슬래쉬는 아래의 특수문자를 표현할 수 있습니다.
\ backslash, ` backtick, * asterisk, _ underscore, {} curly braces, [] square brackets, () parentheses, # hash mark, + plus sign, - minus sign (hyphen), . dot, ! exclamation mark

\*literal asterisks\*
\#hash mark\#
\[squre brackets\]

Demonstration 실행결과

*literal asterisks*
#hash mark#
[squre brackets]

6. Images 이미지

로 변환됩니다.
링크와 비슷하지만 앞에 !가 붙습니다.
인라인 이미지 ![alt text](/test.png)
링크 이미지 ![alt text](image_URL)
이미지의 사이즈를 변경하기 위해서는 <img width="OOOpx" height="OOOpx"></img>와 같이 표현합니다.

![alt 토마토](/img/tomato.jpg)
![alt man](/img/man_laptop.jpg)
![alt Concrete Buildings](https://github.com/jinkyukim-me/markdown_ko/blob/master/img/concrete_building.jpg)

Demonstration 실행결과

7. Links (Anchor) 링크

7.1. External Links 외부 링크

인라인 링크: [링크](http://example.com "링크 제목")
url 링크: <example.com>, <example@example.com>; 꺽쇠 괄호 없어도 자동으로 링크를 사용

[Google](http://www.google.com "구글")
[Naver](http://www.naver.com "네이버")
[Github](http://www.github.com "깃허브")
구글 www.google.com; 꺽쇠없음
네이버 <www.naver.com>; 꺽쇠있음
My mail <jinkyukim.dev@gmail.com>

Demonstration 실행결과

Google
Naver
Github
구글 www.google.com; 꺽쇠없음
네이버 <www.naver.com>; 꺽쇠있음
My mail jinkyukim.dev@gmail.com

2. Emphasis 강조7.2. Internal Links 내부 링크

[보여지는 내용](#이동할 헤드(제목))
괄호 안의 링크를 쓸 때는 띄어쓰기는 -로 연결, 영어는 모두 소문자로 작성

[1. Headers 헤더](#1-headers-헤더)
[2. Emphasis 강조](#2-emphasis-강조)
[3. Blockquotes 인용](#3-blockquotes-인용)

Demonstration 실행결과

1. Headers 헤더
2. Emphasis 강조
3. Blockquotes 인용

8. Fenced Code Blocks 코드 블럭

간단한 인라인 코드는 텍스트를 앞뒤로 `기호로 감싸면 됩니다.
``` 혹은 ~~~ 코드.
첫 줄과 마지막 줄에 Back quote ( ` ) 또는 물결( ~ ) 3개 삽입.
코드가 여러 줄인 경우, 줄 앞에 공백 네 칸을 추가하면 됩니다.
``` 옆에 언어를 지정해주면 syntax color가 적용됩니다.

(자꾸 문법이 겹쳐서 \`로 씀, 실제로는 \없이 백틱만 써야함)
\`\`\`
This is code blocks.
\`\`\`
~~~
This is code blocks.
~~~
	4 spaces
\`\`\`javascript
function test() {
 console.log("look ma’, no spaces");
}
\`\`\`

Demonstration 실행결과

This is code blocks.

This is code blocks.

4 spaces

function test() {
 console.log("look ma’, no spaces");
}

9. Task Lisk 체크 리스트

줄 앞에 - [x]를 써서 완료된 리스트 표시.
줄 앞에 - [ ]를 써서 미완료된 리스트 표시.
체크 안에서 강조 외에 여러 기능을 사용할 수 있습니다.

- [x] this is a complete item
- [ ] this is an incomplete item
- [x] @mentions, #refs, [links](),
**formatting**, and <del>tags</del>
supported
- [x] list syntax required (any
unordered or ordered list
supported)

Demonstration 실행결과

this is a complete item

this is an incomplete item

@mentions, #refs, links,
formatting, and ~~tags~~
supported

list syntax required (any
unordered or ordered list
supported)

10. Horizontal Rules 수평선

- 또는 * 또는 _ 을 3개 이상 작성.
단, -을 사용할 경우 header로 인식할 수 있으니 이 전 라인은 비워두어야 합니다.

* * *
***
*****
- - -
-------------------

Demonstration 실행결과

11. Emoji 이모티콘

마크다운을 이용해 이모티콘을 표현가능.
깃허브도 적용가능.
더 많은 리스트는 아래의 사이트로 방문.
www.emoji-cheat-sheet.com

GitHub supports emoji!
:+1: :sparkles: :camel: :tada:
:rocket: :metal: :octocat:

Demonstration 실행결과

GitHub supports emoji!
:+1: :sparkles: :camel: :tada:
:rocket: :metal: :octocat:

12. Table 테이블

헤더와 셀을 구분할 때 3개 이상의 -(hyphen/dash) 기호가 필요합니다.
헤더 셀을 구분하면서 :(Colons) 기호로 셀(열/칸) 안에 내용을 정렬할 수 있습니다.
가장 좌측과 가장 우측에 있는 |(vertical bar) 기호는 생략 가능합니다.

테이블 생성

헤더1|헤더2|헤더3|헤더4
---|---|---|---
셀1|셀2|셀3|셀4
셀5|셀6|셀7|셀8
셀9|셀10|셀11|셀12

테이블 정렬

헤더1|헤더2|헤더3
:---|:---:|---:
Left|Center|Right
1|2|3
4|5|6
7|8|9

Demonstration 실행결과

테이블 생성

헤더1	헤더2	헤더3	헤더4
셀1	셀2	셀3	셀4
셀5	셀6	셀7	셀8
셀9	셀10	셀11	셀12

테이블 정렬

헤더1	헤더2	헤더3
Left	Center	Right
1	2	3
4	5	6
7	8	9

13. Line Breaks 줄바꿈

 를 활용해서 줄바꿈을 할 수 있습니다.

Oh my my my oh my my my
You got me high so fast <br>
네 전부를 함께하고 싶어
Oh my my my oh my my my <br>
You got me fly so fast
이제 조금은 나 알겠어 <br>

Demonstration 실행결과

Oh my my my oh my my my
You got me high so fast
네 전부를 함께하고 싶어
Oh my my my oh my my my
You got me fly so fast
이제 조금은 나 알겠어

Reference: https://github.com/jinkyukim-me/markdown_ko

* velog에서 차이나는 점

이거 쓰다가 발견

인용문 안에서는 코드블럭, 표 안됨
옆의 목차에는 해더 ###까지 나옴
코드블럭 안에서 `쓰면 문법이랑 겹치는 듯
깃허브 지원 이모지는 안됨
 이 깃허브에서는 엔터인데 벨로그에서는 한 줄 더 띄기
링크 끝에 ;달면 안됨
본문 이미지에서 예시가 깨졌는데 실제로는 잘됨, 저 이미지가 레퍼런스의 깃허브에 저장되어있어서 깨지는 듯

HTML

1. 링크 새 창에 띄우기

<a href="링크" target="_blank" rel="noreferrer noopener">본문에 나타날 말</a>

<a href="https://www.w3schools.com/tags/ref_colornames.asp" target="_blank" rel="noreferrer noopener">HTML Color Names</a>

결과

HTML Color Names

2. 글씨에 색 입히기

<span style="color:색깔">본문에 나타날 말</span>

색깔에는 영어로 일반적인 색을 써도 나오고, RGB값이나 HEX를 써도 된다.

<span style="color:hotpink">핫핑크</span>
<span style="color:#00bf5f">바라미 공지사항 그린</span>

결과

핫핑크
바라미 공지사항 그린

* velog에서

다크모드에서 라이트 모드일 때보다 색이 어둡게 나오는 것처럼 보이는데 실제로는 똑같음
다크모드에서 폰트에 투명도를 줬는지 눈으로 보면 색이 일반적인 것과 다른 듯

다크모드, 라이트모드 모두 WCAG AA Pass

lightcoral 25% 어둡게 25% 포화도 저하 - 제목
ㅁㅁㅁ
카키 - 부제목
ㅁㅁ
주황 - 강조할 때
ㅁㅁㅁ
lightcoral 25% 어둡게 - 강조할 때
ㅁㅁㅁ

개인적으로 마음에 들지만 라이트 모드에선 WCAG AA Fail

lightcoral
ㅁㅁㅁ
mediumseagreen - 그냥 보면 카키보다 예뻐보이는데 제목 컬러가 포화도가 낮아 그거와 비슷한 카키가 더 나은듯
ㅁㅁㅁ

삼국지

계자서

계자서(誡子書)
君子之行靜以修身儉以養德 [군자지행, 정이수신, 검이양덕]
군자는 평정심으로 심신을 수양하고, 검소함으로 덕을 기르는 것이다.

非澹泊無以明志非寧靜無以致遠 [비담박무이명지, 비녕정무이치원]
마음이 담박하지 않으면 뜻을 밝힐 수 없고, 안정되지 않으면 원대한 이상을 이룰 수 없다.

夫學須靜也才須學也 [부학수정야, 재수학야]
배울 때는 평정심을 갖고 임해야 하고, 재능은 배움을 통해 얻어진다.

非學無以廣才非靜無以成學 [비학이광재 비정무이성학]
배움이 없이는 재능을 넓힐수 없고, 뜻이 없이는 배움을 이룰 수 없다.

慆慢則不能硏精險躁則不能理性 [도만칙불능연정 험조칙불능이성]
게으르거나 오만해지면 진정한 이치를 깨달을 수 없고, 조급하고 경망하면 심성을 다스릴 수 없다.

年與時馳志與歲去遂成枯落 [인여시치 지여세거 수성고락]
나이는 시간과 함께 달려가고, 의지는 세월과 함께 사라져 마침내 가을날 초목처럼 시들어 버린다.

悲嘆窮廬將復何及也 [비탄궁려 장부하급야]
그때 나의 비루함을 슬퍼하고 탄식해 본들 어찌 돌이킬 수 있겠는가?

진위여부 논란

제갈량 사망 당시 제갈첨은 7살이었고, 문맹일 가능성이 높은데 편지를 썼는가
진, 수, 당, 오대 고서에는 관련 문헌이 등장하지 않음
도교의 사상이 담겨있는데 후한에 도교가 있는가(?)
북송 이방의 '태평위란'에 처음 등장, '유지기수'의 짧은 원문도 있음
제갈량의 후손이 원본을 보존하고 있다고 함

Referance:
https://brunch.co.kr/@hifism/82
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=sukbongcho&logNo=10129509851
https://open-hl.toutiao.com/open/mobile_detail/vivo_custom?utm_source=vivoliulanqi&utm_medium=webview&utm_campaign=open&label=related_news&item_id=6962681859201384964&gy=824ce51b8f3270b32ec5ad4c690dab858cd7e3fabb8aba4d858248a7d55215fa47eef5b0c575945ae34bca2c6431bdc3057b626edd4d4cda0390d2193f9a45c759594d5407637c140c1676f3b0fe51e934ae7e0fcc5ddef9f2fdf3e9789ce7c425968547914096363ac95bc9b696b6459db5e9e6f6f32e18c1a6658ee510b21b0ea862f3160189c07637d67cbb0bf97a&crypt=8282&isRelated=1&isNews=1&req_id=202107190140190101511961033A287137&fr=normal&vivoRcdMark=1&from_gid=6968429365596373541&channel_id=88805669586&groupId=6962681859201384964

국궁진췌, 사이후이(麴窮盡膵, 死而後已)

제갈량의 출사표에 등장하는 말. 온 마음의 정성 몸이 부숴질 때까지 노력하고, 죽음에 이르도록 정성을 다하겠다는 뜻.

CHOI Hyunseo

https://arduriz.github.io의 글을 SEO가 잘 되어 있는 velog에도 올리게 되었습니다. 포스트를 더욱 효과적으로 보고 싶다면 홈페이지 아이콘을 클릭해주세요!

다음 포스트

Hello World!

velog 작성에 도움되는 것들

Markdown - Github 기준

1. Headers 헤더

Demonstration 실행결과

This is an H1

This is an H2

This is an H1; 부(parts)에 사용

This is an H2; 장(chapters)에 사용

This is an H3; 페이지 섹션에 사용

This is an H4; 하위 섹션에 사용

This is an H5; 하위 섹션 아래의 하위 섹션에 사용

This is an H6; 문단에 사용

2. Emphasis 강조

Demonstration 실행결과

3. Blockquotes 인용

Demonstration 실행결과

4. Lists 목록

Demonstration 실행결과

5. Backslash Escapes 백슬래쉬 이스케이프

Demonstration 실행결과

6. Images 이미지

Demonstration 실행결과

7. Links (Anchor) 링크

7.1. External Links 외부 링크

Demonstration 실행결과

2. Emphasis 강조7.2. Internal Links 내부 링크

Demonstration 실행결과

8. Fenced Code Blocks 코드 블럭

Demonstration 실행결과

9. Task Lisk 체크 리스트

Demonstration 실행결과

10. Horizontal Rules 수평선

Demonstration 실행결과

11. Emoji 이모티콘

Demonstration 실행결과

12. Table 테이블

Demonstration 실행결과

13. Line Breaks 줄바꿈

Demonstration 실행결과

* velog에서 차이나는 점

HTML

1. 링크 새 창에 띄우기

결과

2. 글씨에 색 입히기

결과

* velog에서

다크모드, 라이트모드 모두 WCAG AA Pass

개인적으로 마음에 들지만 라이트 모드에선 WCAG AA Fail

삼국지

계자서

진위여부 논란

국궁진췌, 사이후이(麴窮盡膵, 死而後已)

Beacon을 이용한 위치추적과 자율주행 자동차

0개의 댓글