마크다운(Markdown)은 일반 텍스트 기반의 경량 마크업 언어입니다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징입니다.
이 글은 제가 마크다운을 이 블로그에서 어떻게 활용하는지 기록하는 글입니다.
h2 미니멀리즘
제가 프론트엔드 개발자이여서 그런지, 레이아웃으로 무언가를 전달해주고 싶습니다.
글이 편안하게 다가갔으면 합니다.
그래서 여백의 미를 중요시 여겼습니다.
페이지에 무언가 꽉 채워져 있으면 글을 읽기 참 싫어집니다. 제목만 조금 훑다가 페이지를 이탈하게 되죠.
숨겨진 레이아웃의 디테일 입니다.
- 제목과 본문의 크기가 같습니다.
- 글자 간의 이질감이 느껴지지 않아 페이지를 접할 때 차분해집니다.
- 글이 단백하게 느껴지고 책을 읽는 느낌이 듭니다.
- 문단간의 간격이 넓습니다.
- 숨쉴 틈이 생깁니다.
- 더욱 현재 문단에 집중할 수 있습니다.
- 페이지의 최상단 영역이 비여 있습니다.
- 시선이 페이지 중앙인 글로 향하게 됩니다.
- 본문 글의 색상이 유독 연합니다.
- 제목 및 굵은 글씨가 쉽게 인식됩니다.
- 중요한 내용을 쉽게 파악할 수 있습니다.
h3 제목
이 블로그의 제목은 h2
와 h3
만을 사용합니다.
시멘틱(Semantics) HTML의 아름다움을 지키위해서 입니다. (직업병)
h1
은이 페이지에서 최상위 제목
역할을 수행하는데 이미 하나 있습니다.h4
는 존재 자체가범죄
입니다. 글이 복잡하다는 증거이죠.
기본 요소
인용문구는 명조체를 사용합니다.
인용한 문구인 만큼 글씨체부터 뭔가 있어보이죠!
글 가운데서 명조체를 쓸 수도 있습니다.
하지만 글의 밸런스가 깨져 사용하는 것을 추천하진 않습니다.
<mark></mark>
을 활용하여 글에 하이라이팅을 할 수 있습니다.
링크는 은은한 밑줄이 있고 최소한의 hover
효과를 갖습니다.
굵은 링크는 더 눈에 띕니다.
외부 링크는 “새 탭이 열릴 것”을 나타내는 아이콘이 생깁니다.
https://github.com/bepyan 기본적으로 링크는 자동으로 파싱됩니다.
구분선은 은은하게 눈에 띄지 않습니다.
전반적으로 여백이 충분하기 때문에 이를 자주 활용하진 않습니다.
목록
- 모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다.
- 이 헌법에 의한 최초의 대통령의 임기는 이 헌법시행일로부터 개시한다.
- 모든 국민은 능력에 따라 균등하게 교육을 받을 권리를 가진다.
순서 목록
- 헌법개정은 국회재적의원 과반수 또는 대통령의 발의로 제안된다.
- 국군은 국가의 안전보장과 국토방위의 신성한 의무를 수행함을 사명으로 하며, 그 정치적 중립성은 준수된다.
코드 블록
inline code
[1, 2, 3]
Block code
import clsx, { type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import '~/styles/globals.css';
import type { Metadata } from 'next';
import { fontMono, fontSans, fontSerif } from '~/libs/fonts';
import { cn } from '~/libs/utils';
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>
);
}
테이블
상태 | 설명 |
---|---|
기쁨 | Pleasure, Joy, Happiness, Delight. 욕구가 충족되었을 때의 흐뭇하고 흡족한 마음이나 느낌. |
슬픔 | 원통한 일을 겪거나 불쌍한 일을 보고 마음이 아프고 괴로운 느낌. |
즐거움 | 마음에 거슬림이 없이 흐뭇하고 기쁜 느낌. |
쾌락 | 유쾌하고 즐거움. 또는 그런 느낌. |
안락 | 몸과 마음이 편안하고 즐거움. |
희락 | 기쁨과 즐거움. 또는 기뻐함과 즐거워함. |
좌 | 중앙 | 우 |
---|---|---|
가 | 나 | 다 |