[language]velog 작성법 정리(markdown)

zzsla·2023년 11월 28일
language
0
post-thumbnail
post-custom-banner

주제 크기

#로 크기 조절가능

# 대주제
## 중주제
### 소주제
#### 소소주제
##### 소소소주제
###### 소소소소주제

대주제

중주제

소주제

소소주제

소소소주제
소소소소주제

=, - 이용하여 대주제, 중주제로 구분 가능

대주제
=
중주제
-

대주제

중주제

글자 스타일

굵기

**로 글자 굵기 적용

**굵기**

굵기

기울이기

*로 글자 기울이기 적용

*기울이기*

기울이기

굵기 + 기울이기

***로 글자 굵게 하고 기울이기

***굵기 + 기울이기***

굵기 + 기울이기

밑줄

<u>, </u>를 사용하여 밑줄 적용

<u>밑줄</u>

밑줄

취소선

~~를 사용하여 취소선 적용

~~취소선~~

취소선

폰트

font-family를 사용하여 폰트 적용

<span style="font-family:'Comic Sans',Apple Chancery">zzsla</span>

<span style="font-family:'Nanum Pen Script', cursive">한글폰트</span>

zzsla

한글폰트

폰트 검색

검색하는 법

필요한 폰트를 찾아서 들어간 뒤

필요한 글자를 select하고

오른쪽 끝 바구니모양을 누른다.

그러면 오른쪽에 사이드바가 나오는데 아래 부분에서 코드를 확인하면 된다.

코드가 없는 경우가 있기도 하고, velog에서 적용이 안 되는 경우도 있으니 폰트적용이 되지 않으면 다른 폰트를 찾아보자.

글자 크기

font-size를 사용하여 글자크기 변경

<span style="font-size:120%">크기</span>

<span style="font-size:12px">크기</span>

크기

크기

글자색

color를 사용하여 글자색 변경

<span style="color:forestgreen">글자색</span>

글자색

배경색

background-color를 사용하여 배경색 변경

<span style="background-color:forestgreen">글자색</span>

글자색

색상표 참고

여러가지 적용할 때
;를 사용하여 적용

<span style="color:black;background-color:yellow;font-family:'Nanum Pen Script', cursive;font-size:20px">~~**글자색 검정색, 배경색 노랑색, 폰트 적용, 취소선 추가, 굵기 추가, 크기는 20px**~~<span>

글자색 검정색, 배경색 노랑색, 폰트 적용, 취소선 추가, 굵기 추가, 크기는 20px

기호

수식

$, \를 사용하여 수식을 나타낼 수 있다.
기본적형태

$수식$
$\pi \approx 3.14$
  
$\sum_{k=1}^N k^2$
  
$\lim_{n \to \infty}x_n$

π≈3.14\pi \approx 3.14

∑k=1Nk2\sum_{k=1}^N k^2

lim⁡n→∞xn\lim_{n \to \infty}x_n

수식 문법 종류

이모지

단축키를 이용하여 이모지 추가

mac
command + control + space
window
window + .

🇰🇷

구분선

---, ***를 사용하여 구분선을 나타냄

---
***

리스트

숫자있는 리스트

1., 2. 등을 사용하여 숫자있는 리스트를 나타냄

1. zzsla1
2. zzsla2
3. zzsla3
  1. zzlsa1
  2. zzsla2
  3. zzsla3

숫자없는 리스트

*,+,-을 사용하여 숫자없는 리스트를 나타냄

* zzsla1
  * zzsla2
    * zzsla3
+ zzsla4
- zzsla5
  • zzsla1
    • zzsla2
      • zzsla3
  • zzsla4
  • zzsla5

체크 박스

[ ]를 사용하여 체크박스를 나타냄

- [ ] 체크 안됨
- [x] 채크 됨
  + [ ] 체크
    * [ ] 체크
  • 체크 안됨
  • [x] 채크 됨
    • 체크
      • 체크

인용문

>를 사용하여 인용문을 나타냄

>인용문1
>>인용문2
>>>인용문3
>>
>인용문2
>
인용문1

인용문1

인용문2

인용문3

인용문2

인용문1

여백공간을 만들 때

>인용문
>
>인용문

인용문

인용문

코드 블록

인라인 코드 블록

`를 사용하여 인라인 코드 블록을 나타냄

`인라인 코드 블록`

인라인 코드 블록

인라인 코드 블록에 백틱(`) 넣을 때

``` ` ```

`

코드 블록

```을 사용하여 코드 블록을 나타냄

```
코드 블록
```
코드 블록

코드 블록에 백틱 3개(```) 넣을 때

````
```
```
````

코드블록에 언어표시시 하이라이팅
언어표시 안 했을 때

```
#include<stdio.h>

int main(void)
{
	printf("hello world\n");
    return 0;
}
```
#include<stdio.h>

int main(void)
{
	printf("hello world\n");
    return 0;
}

언어표시 했을 때

```c
#include<stdio.h>

int main(void)
{
	printf("hello world\n");
    return 0;
}
```
#include<stdio.h>

int main(void)
{
	printf("hello world\n");
    return 0;
}

테이블

velog는 정렬 안 됨
~~왼쪽 정렬   |:--|~~
~~가운데 정렬 |:--:|~~
~~오른쪽 정렬 |--:|~~

|번호|이름|가격|
|:--|:--:|--:|
|1|김밥|₩1000|
|2|라면|₩2000|
|3|고급 세프가 만든 매운 떡라면|₩42000|
|100|불량식품|₩500|
번호이름가격
1김밥₩1000
2라면₩2000
3고급 세프가 만든 매운 떡라면₩42000
100불량식품₩500

토글(접기/펼치기)

<details>
<summary>펼치기/접기</summary>

닫힌 상태가 기본
</details>

<details open>
<summary>접기/펼치기</summary>

열린 상태가 기본
</details>
펼치기/접기

닫힌 상태가 기본

접기/펼치기

열린 상태가 기본

링크

주소 링크

주소를 작성

https://velog.io/@zzsla/about

https://velog.io/@zzsla/about

인라인 링크

[zzsla velog](https://velog.io/@zzsla/about)

zzsla velog

참조 링크

[zzsla velog][ve]
[ve]: https://velog.io/@zzsla/about

적용 안 됨
~~[zzsla velog][vel]~~
~~[vel]: https://velog.io/@zzsla/about "Click here"~~

zzsla velog

zzsla velog

이미지

일반 이미지

![대체 텍스트](이미지 링크)

![몰?루](https://velog.velcdn.com/images/zzsla/profile/0b360d01-d859-4b0a-aa3e-9954d73d34c1/social_profile.png)

몰?루

<img src="이미지 주소" width="가로 길이" height="세로 길이" alt="설명">

<img src="https://velog.velcdn.com/images/zzsla/profile/0b360d01-d859-4b0a-aa3e-9954d73d34c1/social_profile.png" width="" height="" alt="몰?루" />
몰?루

마우스 올렸을 때 글씨 보이게 하기

![몰?루](https://velog.velcdn.com/images/zzsla/profile/0b360d01-d859-4b0a-aa3e-9954d73d34c1/social_profile.png 'Click here')

몰?루

링크 걸기

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

[![몰?루](https://velog.velcdn.com/images/zzsla/profile/0b360d01-d859-4b0a-aa3e-9954d73d34c1/social_profile.png)](https://velog.io/@zzsla/about)

몰?루

텍스트와 이미지

태그를 이용해서 텍스트와 이미지 넣을 수 있음

<img src="https://velog.velcdn.com/images/zzsla/profile/0b360d01-d859-4b0a-aa3e-9954d73d34c1/social_profile.png" width="100" height="100" align="right" />

이 몰?루콘은 zzsla이 그렸으며 원래는 친구 선물로 그렸으나 지금 현재는 본인이 사용하고 있다. zzsla이 그린 몰?루콘의 종류는 총 3종류가 있다. 아 친구가 3명이라는 얘기는 아니다. 아무튼 몰?루콘 3종류를 모으면 좋은 일이 일어날 수도 있고, 안 일어날 수도 있다. 이젠 유행이 지난 밈이지만 zzsla은 아직 마음에 들었는지 잘 사용하는 듯 하다. 사실 새로운 프로필 사진은 구하는게 귀찮아서 안 바꾸는 것도 있다. 나중에 괜찮은 프로필 사진을 구하면 다른 사진으로 갈아탈 수도 있다.

이 몰?루콘은 zzsla이 그렸으며 원래는 친구 선물로 그렸으나 지금 현재는 본인이 사용하고 있다. zzsla이 그린 몰?루콘의 종류는 총 3종류가 있다. 앗!! 친구가 3명이라는 얘기는 아니다. 아무튼 몰?루콘 3종류를 모으면 좋은 일이 일어날 수도 있고, 안 일어날 수도 있다. 이젠 유행이 지난 밈이지만 zzsla은 아직 마음에 들었는지 잘 사용하는 듯 하다. 사실 새로운 프로필 사진은 구하는게 귀찮아서 안 바꾸는 것도 있다. 나중에 괜찮은 프로필 사진을 구하면 다른 사진으로 갈아탈 수도 있다.

유튜브 영상

!youtube[lTRiuFIWV54]

유튜브 영상 넣는 법 해당 영상을 우클릭 한 후 소스코드 복사 후 붙여넣기를 한다.

더 필요한 부분이 있으면 댓글로 남겨주시면 감사하겠습니다.
취소선 그어져 있는 건 velog에서 동작되지 않는 문법들입니다.
동작되지 않는 문법

  • 밑줄
  • 폰트
  • 글자크기
  • 체크 박스 체크 표시 기본으로 맞출 때
  • 테이블 오른쪽, 가운데 정렬
  • 토글
  • 마우스 이벤트
  • 텍스트와 이미지

참고
기본적인 내용 확인
markdown 내용 확인

profile
zzsla
[README]newbi security hacker :p
이전 포스트

[webhacking.kr]old-21 write up

다음 포스트

[README]CTF 2023

post-custom-banner

0개의 댓글