마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어입니다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징입니다.
이 글은 제가 마크다운을 이 블로그에서 어떻게 활용하는지 기록하는 글입니다.
미니멀리즘
제가 프론트엔드 개발자이여서 그런지, 레이아웃으로 무언가를 전달해주고 싶습니다.
글이 편안하게 다가갔으면 합니다.
그래서 여백의 미를 중요시 여겼습니다.
페이지에 무언가 꽉 채워져 있으면 글을 읽기 참 싫어집니다. 제목만 조금 훑다가 페이지를 이탈하게 되죠.
숨겨진 레이아웃의 디테일 입니다.
- 제목과 본문의 크기가 같습니다.
- 글자 간의 이질감이 느껴지지 않아 페이지를 접할 때 차분해집니다.
- 글이 단백하게 느껴지고 책을 읽는 느낌이 듭니다.
- 문단간의 간격이 넓습니다.
- 숨쉴 틈이 생깁니다.
- 더욱 현재 문단에 집중할 수 있습니다.
- 페이지의 최상단 영역이 비여 있습니다.
- 시선이 페이지 중앙인 글로 향하게 됩니다.
- 본문 글의 색상이 유독 연합니다.
- 제목 및 굵은 글씨가 쉽게 인식됩니다.
- 중요한 내용을 쉽게 파악할 수 있습니다.
제목
이 블로그의 제목은 h2
와 h3
만을 사용합니다.
시멘틱(Semantics) HTML의 아름다움을 지키위해서 입니다. (직업병)
h1
은이 페이지에서 최상위 제목
역할을 수행하는데 이미 하나 있습니다.h4
는 존재 자체가범죄
입니다. 글이 복잡하다는 증거이죠.
기본 요소
인용문구는 명조체를 사용합니다.
인용한 문구인 만큼 글씨체부터 뭔가 있어보이죠!인용문구 안에 또 인용문구를 작성할 수 있습니다.
글 가운데서 명조체를 쓸 수도 있습니다.
하지만 글의 밸런스가 깨져 사용하는 것을 추천하진 않습니다.
<mark></mark>
을 활용하여 글에 하이라이팅을 할 수 있습니다.
링크는 은은한 밑줄이 있고 최소한의 hover
효과를 갖습니다.
굵은 링크는 더 눈에 띕니다.
외부 링크는 “새 탭이 열릴 것”을 나타내는 아이콘이 생깁니다.
https://github.com/bepyan 기본적으로 링크는 자동으로 파싱됩니다.
구분선은 글의 컨텍스트를 전환하기 위해서 사용됩니다.
독자가 크게 환기될 수 있도록 위아래로 h2
의 여백 만큼 적용합니다.
목록
- 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다.
- 이 헌법에 의한 최초의 대통령의 임기는 이 헌법시행일로부터 개시한다.
- 모든 국민은 능력에 따라 균등하게 교육을 받을 권리를 가진다.
순서 목록
- 헌법개정은 국회재적의원 과반수 또는 대통령의 발의로 제안된다.
- 국군은 국가의 안전보장과 국토방위의 신성한 의무를 수행함을 사명으로 하며, 그 정치적 중립성은 준수된다.
코드 블록
inline code
Plain Text
import function clsx(...inputs: clsx.ClassValue[]): string
clsx, { type type ClassValue = string | number | bigint | boolean | clsx.ClassArray | clsx.ClassDictionary | null | undefined
ClassValue } from 'clsx';
import { const twMerge: (...classLists: ClassNameValue[]) => string
twMerge } from 'tailwind-merge';
export function function cn(...inputs: ClassValue[]): string
cn(...inputs: clsx.ClassValue[]
inputs: type ClassValue = string | number | bigint | boolean | clsx.ClassArray | clsx.ClassDictionary | null | undefined
ClassValue[]) {
return function twMerge(...classLists: ClassNameValue[]): string
twMerge(function clsx(...inputs: clsx.ClassValue[]): string
clsx(inputs: clsx.ClassValue[]
inputs));
}
ts
export default {
data() {
return {
msg: 'Focused!',
};
},
};
js
import '~/styles/globals.css'; import type { Metadata } from 'next'; import { fontMono, fontSans, fontSerif } from '~/libs/fonts'; import { cn } from '~/libs/utils'; console.log('highlight'); console.log('goodbye'); console.log('hello'); export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="ko" suppressHydrationWarning> <body className={cn( 'bg-background min-h-screen font-sans antialiased', fontSans.variable, fontSerif.variable, fontMono.variable, )} > <div className="blur" aria-hidden="true"></div> <div className="max-w-page container mx-auto pt-32"> <div className="main-grid">{children}</div> </div> </body> </html> ); }
1234567891011121314151617181920212223242526272829303132tsx
interface Todo {
Todo.title: string
title: string;
}
const const todo: Readonly<Todo>
todo: type Readonly<T> = { readonly [P in keyof T]: T[P]; }
Make all properties in T readonlyReadonly<Todo> = {
title: string
title: 'Delete inactive users'.String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.toUpperCase(),
};
const todo: Readonly<Todo>
todo.title = 'Hello';
var Number: NumberConstructor
An object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.p- parseFloat
- parseInt
- prototype
NumberConstructor.parseInt(string: string, radix?: number): number
Converts A string to an integer.arseInt('123', 10);
const const a: 1
a = 1;Custom log messageconst const b: 1
b = 1;Custom error messageconst const c: 1
c = 1;Custom warning messageCustom annotation message
ts
테이블
상태 | 설명 |
---|---|
기쁨 | Pleasure, Joy, Happiness, Delight. 욕구가 충족되었을 때의 흐뭇하고 흡족한 마음이나 느낌. |
슬픔 | 원통한 일을 겪거나 불쌍한 일을 보고 마음이 아프고 괴로운 느낌. |
즐거움 | 마음에 거슬림이 없이 흐뭇하고 기쁜 느낌. |
쾌락 | 유쾌하고 즐거움. 또는 그런 느낌. |
안락 | 몸과 마음이 편안하고 즐거움. |
희락 | 기쁨과 즐거움. 또는 기뻐함과 즐거워함. |
좌 | 중앙 | 우 |
---|---|---|
가 | 나 | 다 |
이미지