글 예시

마크다운(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[]): stringclsx, { type type ClassValue = string | number | bigint | boolean | clsx.ClassArray | clsx.ClassDictionary | null | undefinedClassValue } from 'clsx';
import { const twMerge: (...classLists: ClassNameValue[]) => stringtwMerge } from 'tailwind-merge';

export function function cn(...inputs: ClassValue[]): stringcn(...inputs: clsx.ClassValue[]inputs: type ClassValue = string | number | bigint | boolean | clsx.ClassArray | clsx.ClassDictionary | null | undefinedClassValue[]) {
  return function twMerge(...classLists: ClassNameValue[]): stringtwMerge(function clsx(...inputs: clsx.ClassValue[]): stringclsx(inputs: clsx.ClassValue[]inputs));
}
ts

export default {
  data() {
    return {
      msg: 'Focused!',
    };
  },
};
js

layout.tsx

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>
  );
}
1234567891011121314151617181920212223242526272829303132
tsx

코드 상하단에 설명 문구를 작성할 수 있습니다.

interface Todo {
  Todo.title: stringtitle: 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: stringtitle: 'Delete inactive users'.String.toUpperCase(): stringConverts all the alphabetic characters in a string to uppercase.toUpperCase(),
};

const todo: Readonly<Todo>todo.title = 'Hello';Cannot assign to 'title' because it is a read-only property.

var Number: NumberConstructorAn object that represents a number of any kind. All JavaScript numbers are 64-bit floating-point numbers.Number.pparseFloat
parseInt
prototypeNumberConstructor.parseInt(string: string, radix?: number): numberConverts A string to an integer.
@paramstring A string to convert into a number.@paramradix A value between 2 and 36 that specifies the base of the number in `string`.
If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal.
All other strings are considered decimal.arseInt('123', 10);

const const a: 1a = 1;Custom log message
const const b: 1b = 1;Custom error message
const const c: 1c = 1;Custom warning message
Custom annotation messagets

테이블

상태	설명
기쁨	Pleasure, Joy, Happiness, Delight. 욕구가 충족되었을 때의 흐뭇하고 흡족한 마음이나 느낌.
슬픔	원통한 일을 겪거나 불쌍한 일을 보고 마음이 아프고 괴로운 느낌.
즐거움	마음에 거슬림이 없이 흐뭇하고 기쁜 느낌.


쾌락	유쾌하고 즐거움. 또는 그런 느낌.
안락	몸과 마음이 편안하고 즐거움.
희락	기쁨과 즐거움. 또는 기뻐함과 즐거워함.

좌	중앙	우
가	나	다

글 예시

미니멀리즘

제목

기본 요소

코드 블록

테이블

이미지