김찬 연습장 (메모)

분류:

김찬 연습장
(연습장)
(메모)	(낙서)	(노트)		(연구)	(팁)		(공부)	(모듈)
(틀)			(CSS)			(Lua)

자주 찾는 문단
색상 변수

유용한 사이트

Color Picker online - 첨부한 이미지에서 색을 추출하여 헥스 코드를 알 수 있음.
ChatGPT - 장난 같겠지만 얘한테 HTML CSS에 관해 물어 보면 어느 정도 참고할 수 있는 정보는 제공해 줌.
위키백과/미디어위키/리브레위키 - 같은 엔진과 문법을 쓰는 만큼 도움말에서 참고할 정보가 무지 많음.
나무위키 - 엔진과 문법은 다르지만 디자인 면에서 참고할 수 있음.
UIVERSE - 전세계 뛰어난 웹 디자인 기술자들의 집대성.

색

색	헥스 코드	설명
기본 색
	#373a3c	제이위키 기본 글자 색 → 예시
	#f5f8fa	제이위키 테이블 헤더 기본 배경 색
	#e1e8ed	제이위키 테이블 기본 테두리 색, 기본 수평줄 색
	#337ab7	제이위키 하이퍼링크 기본 색 → 예시
	#ba0000	제이위키 하이퍼링크(없는 문서) 기본 색 → 예시
	#33b733	제이위키 하이퍼링크(외부 링크) 기본 색 → 예시
	#ec9f19	제이위키 다크 모드 하이퍼링크 기본 색 → 예시
	#dc4343	제이위키 다크 모드 하이퍼링크(없는 문서) 기본 색 → 예시
	#333333	위키독 기본 글자 색
	#dcdcdc	위키독 테이블 기본 테두리 색
	#bfbfbf	위키독 기본 수평줄 색
	#373a3c	나무위키 기본 글자 색
	#ec9f19	나무위키 다크모드 하이퍼링크 색 → 예시
상징색
	#ffc800	아이펠루스, 세이넬 아르젠베르크 상징색
	#0055fe	제국 기사단 상징색
	#cdeef0	성기사단 상징색
	#ffda2f	로셰리아교, 교황 등 상징색
	#00beff	칠성고등학교 상징색
	#2a2a2a	퇴귀야담 상징색
	#a600c4	추기경 상징색 (자주 쓰는 보라색)
	#7f00ff	인챈토레스트, 정령 상징색
	#cccc00	헤리스카룬 상징색
	#005000	알테어룸 상징색
	#a72c3e	드래곤 상징색
기타
	#a600c4	자주 쓰는 보라색 (추기경 상징색)
	#ff6600	자주 쓰는 주황색

HTML 색 이름

[ HTML 색 이름 ]

색	헥스 코드	색 이름
출처 (2023년 이후 접속 불가)
표에서 바로가기 RED PINK ORANGE YELLOW PURPLE GREEN BLUE BROWN WHITE GRAY
color, background 등 색깔을 입력할 때 헥스코드 대신 아래의 색 이름을 입력하면 해당하는 색깔로 인식됩니다.
RED
	#cd5c5c	indianred
	#f08080	lightcoral
	#fa8072	salmon
	#e9967a	darksalmon
	#ffa07a	lightsalmon
	#dc143c	crimson
	#ff0000	red
	#b22222	firebrick
	#bb0000	darkred
PINK
	#ffc0cb	pink
	#ffb6c1	lightpink
	#ff69b4	hotpink
	#ff1493	deeppink
	#c71585	mediumvioletred
	#db7093	palevioletred
ORANGE
	#ffa07a	lightsalmon
	#ff7f50	coral
	#ff6347	tomato
	#ff4500	orangered
	#ff8c00	darkorange
	#ffa500	orange
YELLOW
	#ffd700	gold
	#ffff00	yellow
	#ffffe0	lightyellow
	#fffacd	lemonchiffon
	#fafad2	lightgoldenrodyellow
	#ffefd5	papayawhip
	#ffe4b5	moccasin
	#ffdab9	peachpuff
	#eee8aa	palegoldenrod
	#f0e68c	khaki
	#bdb76b	darkkhaki
PURPLE
	#e6e6fa	lavender
	#d8bfd8	thistle
	#dda0dd	plum
	#ee82ee	violet
	#da70d6	orchid
	#ff00ff	fuchsia
	#ff00ff	magenta
	#ba55d3	mediumorchid
	#9370db	mediumpurple
	#663399	rebeccapurple
	#8a2be2	blueviolet
	#9400d3	darkviolet
	#9932cc	darkorchid
	#8b008b	darkmagenta
	#800080	purple
	#4b0082	indigo
	#6a5acd	slateblue
	#483d8b	darkslateblue
	#7b68ee	mediumslateblue
GREEN
	#adff2f	greenyellow
	#7fff00	chartreuse
	#7cfc00	lawngreen
	#00ff00	lime
	#32cd32	limegreen
	#98fb98	palegreen
	#90ee90	lightgreen
	#00fa9a	mediumspringgreen
	#00ff7f	springgreen
	#3cb371	mediumseagreen
	#2e8b57	seagreen
	#228b22	forestgreen
	#008000	green
	#006400	darkgreen
	#9acd32	yellowgreen
	#6b8e23	olivedrab
	#808000	olive
	#556b2f	darkolivegreen
	#66cdaa	mediumaquamarine
	#8fbc8f	darkseagreen
	#20b2aa	lightseagreen
	#008b8b	darkcyan
	#008080	teal
BLUE
	#00ffff	aqua
	#00ffff	cyan
	#e0ffff	lightcyan
	#afeeee	paleturquoise
	#7fffd4	aquamarine
	#40e0d0	turquoise
	#48d1cc	mediumturquoise
	#00ced1	darkturquoise
	#5f9ea0	cadetblue
	#4682b4	steelblue
	#b0c4de	lightsteelblue
	#b0e0e6	powderblue
	#add8e6	lightblue
	#87ceeb	skyblue
	#87cefa	lightskyblue
	#00bfff	deepskyblue
	#1e90ff	dodgerblue
	#6495ed	cornflowerblue
	#7b68ee	mediumslateblue
	#4169e1	royalblue
	#0000ff	blue
	#0000cd	mediumblue
	#00008b	darkblue
	#000080	navy
	#191970	midnightblue
BROWN
	#fff8dc	cornsilk
	#ffebcd	blanchedalmond
	#ffe4c4	bisque
	#ffdead	navajowhite
	#f5deb3	wheat
	#deb887	burlywood
	#d2b48c	tan
	#bc8f8f	rosybrown
	#f4a460	sandybrown
	#daa520	goldenrod
	#b8860b	darkgoldenrod
	#cd853f	peru
	#d2691e	chocolate
	#8b4513	saddlebrown
	#a0522d	sienna
	#a52a2a	brown
	#800000	maroon
WHITE
	#ffffff	white
	#fffafa	snow
	#f0fff0	honeydew
	#f5fffa	mintcream
	#f0ffff	azure
	#f0f8ff	aliceblue
	#f8f8ff	ghostwhite
	#f5f5f5	whitesmoke
	#fff5ee	seashell
	#f5f5dc	beige
	#fdf5e6	oldlace
	#fffaf0	floralwhite
	#fffff0	ivory
	#faebd7	antiquewhite
	#faf0e6	linen
	#fff0f5	lavenderblush
	#ffe4e1	mistyrose
GRAY
	#dcdcdc	gainsboro
	#d3d3d3	lightgray
	#c0c0c0	silver
	#a9a9a9	darkgray
	#808080	gray
	#696969	dimgray
	#778899	lightslategray
	#708090	slategray
	#2f4f4f	darkslategray
	#000000	black

단위

${\text{1rem = 15px = 11.25pt}}$

${\text{1px = 0.02645833cm}}$

${\text{1em = 14.4px = 10.8pt}}$

기본값

상	하	좌	우	요소
margin
0.8rem		0		wikitable 표
12px		0		wikitable 표
0.5rem		1.6rem	0	<ul>
0.3em	0	3.2em	0	<ol>
padding
0.3rem		0.6rem		wikitable 표 칸 내부
4.5px		9px		wikitable 표 칸 내부
font-size
0.96rem				글씨 크기
14.4px
10.8pt

특수문자

[ 유니코드 특수문자 ]

발음 기호


À	Á	Â	Ã	Ä
À	Á	Â	Ã	Ä
Å	Æ	Ç	È	É
Å	Æ	Ç	È	É
Ê	Ë	Ì	Í	Î
Ê	Ë	Ì	Í	Î
Ï	Ñ	Ò	Ó	Ô
Ï	Ñ	Ò	Ó	Ô
Õ	Ö	Ø	Ù	Ú
Õ	Ö	Ø	Ù	Ú
Û	Ü	ß	à	á
Û	Ü	ß	à	á
â	ã	ä	å	æ
â	ã	ä	å	æ
ç	è	é	ê	ë
ç	è	é	ê	ë
ì	í	î	ï	ñ
ì	í	î	ï	ñ
ò	ó	ô	œ	õ
ò	ó	ô	&oelig;	õ
ö	ø	ù	ú	û
ö	ø	ù	ú	û
ü	ÿ
ü	ÿ

구두점

¿	¡	§	¶	†
¿	¡	§	¶	&dagger;
‡	•	–	—	‹
&Dagger;	•	–	—	&lsaquo;
›	«	»	‘	’
&rsaquo;	«	»	‘	’
“	”
“	”

통상 기호

™	©	®	¢	€
™	©	®	¢	€
¥	£	¤
¥	£	¤

그리스 문자

α	β	γ	δ	ε
α	β	γ	δ	ε
ζ	η	θ	ι	κ
ζ	η	θ	ι	κ
λ	μ	ν	ξ	ο
λ	μ	ν	ξ	ο
π	ρ	σ	ς	τ
π	ρ	σ	&sigmaf;	τ
υ	φ	χ	ψ	ω
υ	φ	χ	ψ	ω
Γ	Δ	Θ	Λ	Ξ
Γ	Δ	Θ	Λ	Ξ
Π	Σ	Φ	Ψ	Ω
Π	Σ	Φ	Ψ	Ω

수학 기호

∫	∑	∏	√	−
∫	∑	∏	√	−
±	∞	≈	∝	≡
±	∞	≈	&prop;	&equiv;
≠	≤	≥	×	·
≠	≤	≥	×	·
÷	∂	′	″	∇
÷	∂	′	″	∇
‰	°	∴	ℵ	ø
&permil;	°	&there4;	&alefsym;	ø
∈	∉	∩	∪	⊂
∈	∉	∩	∪	⊂
⊃	⊆	⊇	¬	∧
⊃	&sube;	&supe;	¬	&and;
∨	∃	∀	⇒	⇐
&or;	∃	∀	⇒	⇐
⇓	⇑	⇔	→	↓
&dArr;	&uArr;	⇔	→	↓
↑	←	↔
↑	←	↔

색상 변수

틀:namucat 전용으로 틀의 다크모드 호환을 위해 운영자가 만들어 준 변수들. 쉽게 알아보고 쓰기 위해 메모로 남겨둔다.

그리고 알게 된 게 있는데, 일단 틀:namucat 전용으로 만들어지긴 했지만 이게 서버 단위로 저장되는 전역 변수라서 그런지 틀:namucat이 사용되지 않은 문서나 전혀 관련없는 문서라도 일단 제이위키에 있는 문서라면 아래 변수를 모두 사용할 수 있다. 틀:namucat 전용이라 다른 곳에 활용할 만한 곳이 있을지는 모르겠지만 쓸 사람은 참고해도 아주 좋겠다.

변수^[1]		요소			색상
변수^[1]		요소			라이트모드		다크모드
var(--namu--text)	namu--text	텍스트				#212529		#e0e0e0
var(--namu--table--td--background)	namu--table--td--background	테이블	<td>	배경		#fff		#000
var(--namu--table--th--background)	namu--table--th--background		<th>	배경		#f5f8fa		#212121
var(--namu--table--border)	namu--table--border		테두리			#ddd		#383b40
var(--namu--hyperlink)	namu--hyperlink	하이퍼링크	존재하는 문서	일반		#0275d8		#ec9f19
var(--namu--hyperlink--hover)	namu--hyperlink--hover		존재하는 문서	호버		#0263b8		#bd7f14
var(--namu--hyperlink--no)	namu--hyperlink--no		존재하지 않는 문서			#f00		#dc4343
var(--namu--externallink--icon)	namu--externallink--icon	외부 링크	아이콘			#008000
var(--namu--externallink--text)	namu--externallink--text	외부 링크	텍스트			#090
var(--namu--title--namespace)	namu--title--namespace	문서 제목 네임스페이스				#d4f0e3		#545c5b
var(--namu--title--background)	namu--title--background	문서 제목 공간		배경		#fff		#000
var(--namu--pre--background)	namu--pre--background	<pre>		배경		#eee		#2d2f34
var(--namu--pre--border)	namu--pre--border	<pre>		테두리		#ddd		#383b40
var(--namu--recentchange)	namu--recentchange	최근 수정 날짜		글씨		rgba(33,37,41,.749)		hsla(0,0%,88%,.749)
var(--namu--horizentalline)	namu--horizentalline	가로줄(<hr> 및 문단 가로줄 등				#ccc		#383b40
var(--namu--navibar)	namu--navibar	내비게이션 바		배경		linear-gradient(90deg,#00a69c,#00a69c,#28b472)		#000
var(--namu--navibar--shadow)	namu--navibar--shadow	내비게이션 바		하단 테두리		transparent		#555
var(--namu--cite--background)	namu--cite--background	각주 말풍선		배경		#fff		#383b40
var(--namu--cite--border)	namu--cite--border			테두리		rgba(0, 0, 0, .5)		hsl(0deg 0% 100% / 50%)
var(--namu--cite--arrow)	namu--cite--arrow			화살표		#ddd
var(--namu--code--background)	namu--code--background	<code>		배경		#f7f7f9		#383b40
var(--namu--code--color)	namu--code--color	<code>		텍스트		#bd4147		#dea0a3
var(--namu--cite--upperborder)	namu--cite--upperborder	일반 제이위키 색 인용문				#777		#383840
var(--black--white--switcher)	black--white--switcher	-^[2]				#000		#fff
var(--namu--cat--background)	namu--cat--background	{{namucat}} 메인 분류 상자		배경		#fff		#1c1d1f
var(--box--border)	box--border	border-color: #000 대체				#000		#383b40
var(--box--background)	box--background	background-color: #000 대체				#000		#212121
var(--namu--selection)	namu--selection	드래그(`::selection`) 배경 색				#00a495		#ff5b6a
틀:인용문1
var(--namu--quote--leftborder)	namu--quote--leftborder	테두리		왼쪽 실선		#71bc6d		#666c75
var(--namu--quote--otherborder)	namu--quote--otherborder	테두리		나머지 점선		#ccc		#383b40
var(--namu--quote--background)	namu--quote--background	배경				#eee		#2d2f34
틀:알림창
var(--namu--notice--border)	namu--notice--border	테두리				#bcdff1		#383b40
var(--namu--notice--background)	namu--notice--background	배경				#d9edf7		#2d2f34
var(--namu--notice--color)	namu--notice--color	글씨				#31708f		#ddd
틀:각주
var(--namu--cite--upperborder)	namu--cite--upperborder	상단 테두리				#777		#383840

복잡한 rowspan

왼쪽1	오른쪽1
	오른쪽2
왼쪽2
	오른쪽3

이거 왜 이리 만들기 어렵죠?

CSS 자료형

출처

<number>

유효한 숫자 예시
12	정수
1.25	양의 실수
-9.8	음의 실수
.75	-1~1 사이의 소수점 이하 값의 경우 맨 앞의 0을 생략할 수 있음.
10e3 -3.4e-2	과학적 기수법

<length>

절대 길이
디스플레이
px	픽셀
국제단위계
cm	센티미터
mm	밀리미터
영미 단위계
in	인치
pc	피카^[3]
pt	포인트

상대 길이
글꼴 상대 길이
em	font-size 값
rem	루트 요소의 font-size 값
lh	line-height 값
rlh	루트 요소의 line-height 값
ex	폰트의 엑스하이트
ch	폰트에서 '0' 문자의 너비
뷰포트^[4] 상대 길이
vw	화면 너비의 1%
vh	화면 높이의 1%
vmin	vw, vh 중 작은 길이
vmax	vw, vh 중 큰 길이
svw	작은 뷰포트^[5] 너비의 1%
svh	작은 뷰포트 높이의 1%
lvw	큰 뷰포트^[6] 너비의 1%
lvh	큰 뷰포트 높이의 1%
dvw	동적인 뷰포트^[7] 높이의 1%
dvh	동적인 뷰포트 높이의 1%

<angle>

각도 단위
deg	도
rad	라디안
grad	그레이드
turn	회전 수^[8]

<color>

헥스 코드
함수형 표기법
- rgb(R, G, B) / rgb(R G B)
  RGB를 각각 0~255의 숫자로 입력하는 방식. 각 숫자를 16진수로 바꿔 # 앞에 이어서 적은 게 헥스 코드다.
- rgba(R, G, B, A) / rgba(R G B / A)
  RGB에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
- hsl(H, S, L) / hsl(H S L)
  HSL(Hue Saturation Lightness)를 함수형으로 입력하는 방식. RGB와 달리 색의 채도와 밝기가 명시적으로 입력되어 있기 때문에 글자만 보고도 어떤 색일지 유추하기가 쉽다.
  - H
    원형 색공간에서 각도(<angle>) 값을 받아 색상을 나타낸다. RGB에 비유하자면 0°, 360°가 R이고, 120°가 G, 240°가 B다.
  - S
    채도를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%일 경우, 무채색이 되어 H의 값이 아무 효력이 없어진다.
  - L
    밝기를 의미하며 퍼센트(<percentage>) 값을 받는다. 0%가 검은색, 100%가 흰색을 나타낸다.
- hsla(H, S, L, A) / hsla(H S L / A)
  HSL에 투명도를 추가한 버전. 투명도 A는 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
- lab(L a b) / lab(L a b / A)
  Lab 색 공간을 함수형으로 입력하는 방식.
  - L
    색의 밝기를 나타낸다. 0~100의 숫자(<number>) 혹은 0%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
  - a
    초록에서 빨강까지의 축을 나타낸다. 낮을 수록 초록에, 높을 수록 빨강에 가까워 진다. -125~125의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
  - b
    파랑에서 노랑까지의 축을 나타낸다. 낮을 수록 파랑에, 높을 수록 노랑에 가까워 진다. -125~125의 숫자(<number>) 혹은 -100%~100%의 퍼센트(<percentage>) 값, none 등을 사용할 수 있다.
  - A (옵션)
    투명도를 의미하며 0~1의 소수점 숫자(<number>) 혹은 퍼센트(<percentage>) 값이다.
- color-mix(in ~, COLOR1, COLOR2)
  색을 섞는 함수이다. 섞을 보간 방법(<color-interpolation-method>)과 두 색을 넣어서 사용할 수 있다.
상대적 색상
- 문법 rgb(from blue r g b)
  결과 rgb(0 0 255)
  문법 rgb(from blue r 255 b)
  결과 rgb(0 255 255)
  문법 rgb(from blue r g 0)
  결과 rgb(0 0 0)
키워드
- 색상 키워드
  특정 색상을 나타내는 키워드. white, red와 같이 단순한 색이름으로 입력한다. 모든 색상 키워드는 여기를 참고.
- transparent
  완전한 투명. rgba(R, G, B, 0), hsla(H, S, L, 0)와 똑같이 표시된다.
- currentColor
  말 그대로 현재 색. 해당 요소의 글자색인 color 속성 값을 따라간다. 대소문자를 구분하지 않아 currentcolor로 사용해도 된다.
- 시스템 색상
  웹 페이지의 특정 부분에 사용되는 기본 색상. 대소문자를 구분하지 않는다.
  - ActiveText
  - ButtonBorder
  - ButtonFace
  - ButtonText
  - Canvas
  - CanvasText
  - Field
  - FieldText
  - GrayText
  - Highlight
  - HighlightText
  - LinkText
  - Mark
  - MarkText
  - VisitedText

<gradient>

[ 선형 그래디언트 ]

	`linear-gradient(white, black)`
색(<color>)을 쉼표로 나열하여 그래디언트를 만든다. 기본적으로 색을 나열한 순서대로 위에서 아래로 내려오는 그래디언트가 생성된다.

	`linear-gradient(white 50%, black)`
	`linear-gradient(black, white 20% 80%, black)`
	`linear-gradient(white 50%, black 50%) linear-gradient(white 50%, black 0)`
색이 위치할 지점을 설정할 수 있다. 지점을 2개 설정하면 해당색이 차지할 공간을 설정할 수 있다.이전 지점과 같은 지점이거나 더 전의 지점을 설정할 경우, 불연속적인 무늬를 만들 수 있다.

	`linear-gradient(to right, white, black)`
	`linear-gradient(to bottom right, white, black)`
	`linear-gradient(45deg, white, black)`
	`linear-gradient(30deg, white 50%, black 50%)`
	`linear-gradient(30deg, white 50%, black calc(50% + 1px))`
그래디언트의 방향은 색을 나열하기 전에 맨 앞에서 설정할 수 있다. 사용할 수 있는 방향은 top, bottom, left, right가 있으며 수직과 수평은 섞을 수 있다.특정 각도를 설정할 수도 있다. 0deg는 12시 방향을 의미하며 각도는 시계방향으로 움직인다. 비스듬한 각도에서 그래디언트를 불연속적으로 만들 경우 계단 현상이 일어나기 때문에 calc로 1px의 위치 차이를 줘서 그래디언트를 통해 안티에일리어싱처럼 만들 수 있다.

	`linear-gradient(red, blue)`
	`linear-gradient(in hsl, red, blue)`
	`linear-gradient(in hsl 45deg, red, blue)`
	`linear-gradient(in hsl longer hue, red, blue)`
색을 보간하는 방법을 설정할 수 있다. 색 보간 방법과 각도는 쉼표로 구분하지 않는다.in hsl을 통해 HSL 로 보간하도록 설정할 경우 색상 red인 0deg에서 blue인 240deg으로 서서히 변화한다. 두 각도에서 기본적으로 가까운 180도 이하 각으로 변화하기에 2번째 예시의 경우 120deg 의 거리를 움직이지만 longer hue를 사용할 경우 240deg 쪽으로 변화한다.

[ 원형 그래디언트 ]

	`radial-gradient(white, black)`
기본적으로 색을 나열하면 가운데 타원으로 생성된다.

	`radial-gradient(ellipse at top, white, black)`
	`radial-gradient(circle at top, white, black)`
	`radial-gradient(circle at top right, white, black)`
	`radial-gradient(circle at 0 50px, white, black)`
그래디언트의 모양과 시작될 중심점의 위치를 설정할 수 있다. ellipse는 타원, circle은 원을 의미한다.중심점은 `at X Y`로 설정할 수 있으며, 하나만 할 경우 X와 Y가 같게 설정된다. 위치는 left, center, right, top, bottom의 키워드가 있으며, 길이 값을 설정해줄 수도 있다.

	`radial-gradient(closest-side at 25% 25%, white, black)`
	`radial-gradient(closest-corner at 25% 25%, white, black)`
	`radial-gradient(farthest-side at 25% 25%, white, black)`
	`radial-gradient(farthest-corner at 25% 25%, white, black)`
색이 어디까지 퍼질지 설정할 수 있다. 가까운 꼭짓점, 가까운 변, 먼 꼭짓점, 먼 변의 4가지가 있다.

[ 원뿔 그래디언트 ]

	`conic-gradient(white, black)`
	`conic-gradient(white, black 90deg 270deg, white)`
색을 나열한 순서대로 시계방향으로 그래디언트가 생성된다. 처음색과 끝색을 똑같이 만들어야 불연속적인 부분이 사라진다. 따로 설정이 없을 경우 기본적으로 0deg인 12시 방향에서 시작된다. 색 지점은 각도(<angle>)나 퍼센트(<percentage>) 값을 받는다.

	`conic-gradient(from 45deg, white, black)`
`from <angle>`을 통해 그래디언트의 시작 각도를 설정할 수 있다.

[ 반복 그래디언트 ]

	`repeating-linear-gradient(white, black 10px, white 20px)`
	`repeating-radial-gradient(white, black 10px, white 20px)`
	`repeating-conic-gradient(white, black 10deg, white 20deg)`
나열한 색의 설정된 지점이 끊긴 부분부터 처음 부분이 반복된다.

ChatGPT 마크다운 문법

텍스트 강조

굵게: **텍스트** → 텍스트
기울임: *텍스트* → 텍스트
굵고 기울임: ***텍스트*** → 텍스트
취소선: ~~텍스트~~ → 취소선

리스트

순서 없는 리스트

- 텍스트 또는 * 텍스트
- 하위 항목은 들여쓰기(Tab)로 추가

- 항목 1
- 항목 2
  - 하위 항목

순서 있는 리스트

1. 텍스트
2. 텍스트

1. 첫 번째
2. 두 번째
   1. 하위 항목 1
   2. 하위 항목 2

코드 블록

인라인 코드

백틱(`` ``)으로 감싸기: ``코드`` → 코드

블록 코드

삼중 백틱(``` ```)으로 감싸기:
```
```언어
코드 내용```
```

예시:

def add(a, b):
    return a + b

링크와 이미지

링크

[텍스트](URL) → 예제 링크

이미지

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

![고양이](https://example.com/cat.jpg)

표

| 제목 1 | 제목 2 |
|--------|--------|
| 내용 1 | 내용 2 |
| 내용 3 | 내용 4 |

제목1	제목2
내용1	내용2
내용3	내용4

수평선

---, *** 또는 ___를 사용하면 수평선을 추가할 수 있습니다.

인용문

>를 사용하여 인용문 작성:

> 인용문 텍스트
>> 중첩된 인용문

인용문 텍스트

중첩된 인용문

체크박스

[ ] → 미완료
[x] → 완료

- [ ] 할 일 1
- [x] 완료한 일

[ ] 할 일 1
[x] 완료한 일

수식

수식

기호 안에는 LaTeX 문법 사용

↑ 이 열의 셀들은 복사하기 편하도록 한 번만 클릭/터치해도 모든 요소가 선택되게끔 하였다.
↑ 라이트모드에서는 검은색(#000), 다크모드에서는 하얀색(#fff)을 출력하는 변수. 딱히 목적이 있어서는 아니고 있으면 언젠가 어디선가는 유용하게 쓰일 것 같아서 따로 부탁했다.
↑ 1/6인치
↑ 보여지고 있는 전체 화면 영역
↑ 모바일 등에서 브라우저 UI에 가린 부분은 포함하지 않은 화면
↑ 모바일 등에서 브라우저 UI에 가린 부분까지 포함한 화면
↑ 모바일 등에서 브라우저 UI가 사라졌다 생겼다 함에 따라 달라지는 화면
↑ 1turn은 360deg

이 문서의 내용 중 전체 또는 일부는 연습장:Kimchan 문서의 307254판에서 가져왔습니다. 문서 역사 보러가기

[1] 이 열의 셀들은 복사하기 편하도록 한 번만 클릭/터치해도 모든 요소가 선택되게끔 하였다.

[2] 라이트모드에서는 검은색(#000), 다크모드에서는 하얀색(#fff)을 출력하는 변수. 딱히 목적이 있어서는 아니고 있으면 언젠가 어디선가는 유용하게 쓰일 것 같아서 따로 부탁했다.

[3] 1/6인치

[4] 보여지고 있는 전체 화면 영역

[5] 모바일 등에서 브라우저 UI에 가린 부분은 포함하지 않은 화면

[6] 모바일 등에서 브라우저 UI에 가린 부분까지 포함한 화면

[7] 모바일 등에서 브라우저 UI가 사라졌다 생겼다 함에 따라 달라지는 화면

[8] 1turn은 360deg

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

	문법	rgb(from blue r g b)
	결과	rgb(0 0 255)
	문법	rgb(from blue r 255 b)
	결과	rgb(0 255 255)
	문법	rgb(from blue r g 0)
	결과	rgb(0 0 0)