블로그 이전 중입니다.

Command Palette

Search for a command to run...

Calelix Github

글 예시

Published on

이 글은 예시입니다.

마크다운(Markdown)은 경량 마크업 언어로, 텍스트 기반 문서를 간단한 문법으로 작성하여 HTML로 변환할 수 있도록 합니다. 마크다운의 주요 목적은 문서의 가독성을 높이고, 문서를 작성하는 데 필요한 복잡한 태그를 줄여 누구나 쉽게 사용할 수 있도록 하는 것입니다.

MDX(Markdown for JSX)는 Markdown과 JSX(Javascript XML)의 혼합형 파일 포맷으로, 마크다운의 단순한 문법과 JSX의 동적 기능을 결합하여 사용합니다. 이를 통해 개발자는 문서 파일 내에서 React 컴포넌트를 비롯한 다양한 UI 요소를 직접 삽입하고 사용할 수 있습니다.

인용구

다른 사람이 한 말이나 글을 그대로 따와서 사용하는 구절을 말합니다. 이는 특정 아이디어나 정보를 전달하고, 주장의 신뢰성을 높이며, 다양한 관점을 제시하는 데 사용됩니다.

행동은 모든 성공의 열쇠이다. ‑ 파블로 피카소

강조

HTML에서 강조(Emphasis)를 나타내는 태그에는 주로 다음과 같은 태그들이 있습니다.

  • <em> 태그:
    • 이 태그는 텍스트의 의미적인 강조를 나타냅니다. 일반적으로 기울임체로 표시됩니다.
  • <strong> 태그:
    • 이 태그는 텍스트의 중요성이나 강조를 나타냅니다. 일반적으로 굵은 글씨로 표시됩니다.
  • <i> 태그:
    • 이 태그는 텍스트를 기울임체로 표시합니다. 의미적으로는 <em> 태그를 사용하는 것이 더 바람직합니다.
  • <b> 태그:
    • 이 태그는 텍스트를 굵게 표시합니다. 의미적으로는 <strong> 태그를 사용하는 것이 더 적합합니다.

목록

목록은 여러 항목을 나열하거나 단계, 그룹을 표현할 때 사용합니다. 순서 없는 목록과 순서 있는 목록을 작성할 수 있습니다. 항목 앞에 공백을 들여쓰기하여 중첩 목록을 만들 수 있습니다.

순서 없는 목록

하이픈(-), 별표(*), 더하기(+) 중 하나를 사용합니다.

  • 음식
    • 과일
      • 사과
      • 배
      • 포도
    • 채소
      • 배추
      • 상추
      • 시금치

순서 있는 목록

항목 앞에 숫자를 붙이고 마침표(.)를 사용합니다.

  1. 음식점 선택
  2. 메뉴 선택
    1. 메인 메뉴 선택
    2. 옵션 선택
      1. 맵기 단계 선택
      2. 추가 토핑 선택
  3. 결제 정보 입력
  4. 주문 완료

링크

마크다운에서 링크를 삽입하는 방법입니다. 인라인 링크와 참조 링크가 있습니다.

인라인 링크

인라인 링크는 링크 텍스트와 URL을 한 줄에 함께 작성합니다.

[링크 텍스트](URL "링크 설명")

결과는 다음과 같습니다.

HTML a 태그는 "Anchor"의 약자로 HTML에서 링크를 만들 때 사용하는 요소입니다. 다른 웹 페이지, 동일한 페이지의 다른 부분, 파일, 이메일 주소 등으로 연결할 수 있습니다. 주로 텍스트나 이미지를 클릭했을 때 해당 링크로 이동하게 만드는 데 사용됩니다.

참조 링크

참조 링크는 링크 텍스트와 URL을 별도로 작성합니다.

주로 긴 URL이나 여러 곳에서 동일한 URL을 사용할 때 유용합니다.

[링크 텍스트][참조 이름]
[참조 이름]: URL "링크 설명"

결과는 다음과 같습니다.

웹 접근성이란 모든 사용자가 웹 사이트 및 웹 애플리케이션에서 동등하게 접근할 수 있도록 설계된 웹 콘텐츠의 접근 가능성을 의미합니다.

이미지

<img> 태그로 변환되는 '이미지(Image)'를 표현합니다.

기본 이미지

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

결과는 다음과 같습니다.

The cat under the blanket

링크 이미지

[![대체 텍스트](이미지 URL "타이틀 텍스트")](링크)

결과는 다음과 같습니다.

A cat looking up

코드 블록

<pre>, <code> 태그로 변환되는 '코드(Code)'를 표현합니다.

인라인

인라인 코드는 ` 기호로 감싸 Inline Code 와 같이 표현합니다.

블록

블록 코드는 ` 기호를 3번 이상 입력하고 코드 언어를 명시해서 표현합니다.

interface ProductCardProps {
  id: number;
  name: string;
  price: number;
  description?: string; 
}
 
const ProductCard = (props: ProductCardProps) => {
  return (
    <div>
      <div>
        {props.id} 
        {props.name} 
      </div>
    </div>
  )
}

중첩된 코드 블록

코드 블록 자체를 텍스트로 표시하려면 백틱을 4개 이상 사용합니다.

예를 들어, 마크다운 코드 블록 작성법을 설명할 때 유용합니다.

````markdown
```javascript
console.log("Hello World");
```
````

외부 백틱(4개)은 내부 백틱(3개)을 감싸서 코드 블록 자체를 텍스트로 표시할 수 있게 합니다.

백틱 기호

마크다운에서 백틱(`) 기호는 코드 블록을 표현하는 기능을 갖습니다. 백틱 기호 자체를 출력하려면 기호에 이스케이프 처리가 필요합니다.

다음과 같이 \ 기호와 함께 작성하여 출력합니다.

\`
<code>\`</code>

수평선

<hr> 태그로 변환되는 '수평선(Horizontal Rule)'을 표현합니다.

이는 단순한 시각적인 구분선이 아니라, 주제의 변화나 단락 간의 의미적 구분을 나타내는 의미를 가집니다.

세 개 이상의 대시(-)또는 별표(*)또는 밑줄(_)을 한 줄에 작성합니다.

---
***
___

결과는 다음과 같습니다. (아래의 수평선)

확장 커스텀 기능

표준 마크다운이나 MDX 문법 외에, 이 블로그에서 자체적으로 구현한 추가 기능을 소개합니다.

라이브 코드

코드 블록에 live=true 속성을 추가하면 코드가 실제로 실행되고 렌더링됩니다.

일반적인 코드 블록은 코드를 텍스트로만 표시하지만,

live=true 속성을 추가하면 해당 코드가 실제로 실행되어 독자가 직접 상호작용할 수 있는 컴포넌트로 렌더링됩니다.

이를 통해 기술 문서나 튜토리얼에서 코드의 실행 결과를 바로 확인할 수 있어, 더 효과적인 학습 경험을 제공합니다.

```tsx live=true
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Hello World !</p>
  </TooltipContent>
</Tooltip>
```

결과는 다음과 같습니다.

추가로, 블로그를 운영하면서 필요한 마크다운 문법이 있다면 예시로 작성될 예정입니다.