MDX 스타일링 예시

MDX components에서의 스타일링을 확인하는 글

Jan 30th, 2025
MDX 스타일링 예시

MDX 컴포넌트 (h1)

블로그에서 사용되는 다양한 MDX 컴포넌트들의 스타일링을 살펴보겠습니다.

제목 스타일링 (h2)

h2 태그로 이루어졌습니다.

다양한 크기의 제목 (h3)

각 제목 태그는 계층적 구조를 나타내는데 사용됩니다.

텍스트와 단락

기본 텍스트는 이렇게 표시됩니다. 단락은 적절한 간격을 유지하며, 가독성을 높여줍니다.

또한 새로운 단락은 자동으로 간격이 조절됩니다.

링크

다음과 같은 링크들을 사용할 수 있습니다

인라인 코드

그리고 인라인 코드는 이런 식으로 보여요.

인라인 코드 표시

코드를 인라인으로 표시할 때는 const greeting = "Hello, World!"처럼 작성합니다. 설정 파일의 경우 next.config.js와 같이 표시할 수 있습니다.

목록 스타일링

순서가 없는 목록

  • Next.js로 정적 블로그 만들기
  • Tailwind CSS로 스타일링하기
  • MDX로 마크다운 확장하기
  • 반응형 디자인 적용하기

순서가 있는 목록

  1. 프로젝트 설정하기
  2. 필요한 패키지 설치하기
  3. 컴포넌트 구현하기
  4. 스타일 적용하기

인용문

Where code meets creativity, experiences come alive.

  • by Boongranii

이미지 삽입

image1

Note

이미지는 public 폴더나 로컬 경로에 저장하여 사용합니다. 최적화를 위해 WebP 포맷을 권장합니다.

코드 블록 예시

@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

콜아웃 예시

기본 노트

일반적인 정보나 참고사항을 작성할 때 사용합니다. 독자들이 알아두면 좋을 부가적인 설명이나 팁을 제공할 때 적합합니다.

주의사항

사용자가 주의해야 할 내용이나 잠재적인 문제가 될 수 있는 부분을 설명할 때 사용합니다. 예상치 못한 결과를 방지하기 위한 경고를 표시할 때 적합합니다.

위험 경고

심각한 문제가 발생할 수 있는 상황이나 치명적인 오류를 일으킬 수 있는 내용을 설명할 때 사용합니다. 데이터 손실이나 보안 위험이 있는 경우에 특히 유용합니다.

상세 정보

특정 기능이나 개념에 대한 자세한 설명이 필요할 때 사용합니다. 추가적인 문맥이나 배경 정보를 제공할 때 적합합니다.

효율적인 사용 방법이나 모범 사례를 공유할 때 사용합니다. 사용자 경험을 향상시킬 수 있는 실용적인 조언을 제공할 때 적합합니다.

콜아웃 (내용 없는 경우)

기본 노트

주의사항

위험 경고

상세 정보

각 콜아웃 타입은 상황과 목적에 맞게 선택하여 사용하면 됩니다. 문서의 가독성을 높이고 중요한 정보를 효과적으로 전달하는 데 도움이 됩니다.