📍 개요

markdown을 사이트에서 보여주는 형식인 github blog에서는 더 자유로운 스타일링이 가능하다. 나중에 쓸 때 참고해야하니.. 적어둔다

🖍️ 형광펜 효과

노란색 형광펜

초록색 형광펜

파란색 형광펜

분홍색 형광펜

주황색 형광펜

보라색 형광펜

사용법:

<span class="highlight-yellow">노란색 형광펜</span>
<span class="highlight-green">초록색 형광펜</span>
<span class="highlight-blue">파란색 형광펜</span>
<span class="highlight-pink">분홍색 형광펜</span>
<span class="highlight-orange">주황색 형광펜</span>
<span class="highlight-purple">보라색 형광펜</span>

💬 인라인 댓글 (hover)

본문 중간에 댓글이 달린 텍스트이렇게 마우스를 올리면 댓글이 보입니다. Notion에서 옮겨온 주석 기능이에요.를 두면, 마우스를 올렸을 때 주석이 나타난다. 문장 끝에 달아도 자연스럽게 동작문장 끝에 단 테스트 댓글입니다.한다.

리스트 안에서도 동작한다:

  • 첫 번째 항목 — 여기에 주석리스트 항목에 단 댓글 테스트.
  • 두 번째 항목은 일반 텍스트

사용법: (말풍선 안에 형광펜·색상 등 서식 그대로 사용 가능)

<span class="notion-comment">대상 텍스트<span class="comment-bubble"><span class="comment-item">댓글 내용. <span class="highlight-green">서식</span>도 됨</span></span></span>

한 줄로 작성할 것(중간에 빈 줄을 넣으면 깨짐). 여러 줄 댓글은 comment-item을 추가하면 구분선으로 나뉜다.

🎨 글자 색상 변경

빨간색 / 파란색 / 초록색 / 주황색 / 보라색 / 분홍색 / 회색

사용법:

<span class="text-red">빨간색 텍스트</span>
<span class="text-blue">파란색 텍스트</span>
<span class="text-green">초록색 텍스트</span>

텍스트 스타일 조합

굵은 글씨, 기울임 글씨, 밑줄 글씨, 빨간색 굵은 글씨, 노란 형광펜 + 파란 굵은 글씨

사용법:

<span class="text-bold">굵은 글씨</span>
<span class="text-italic">기울임 글씨</span>
<span class="text-underline">밑줄 글씨</span>
<span class="text-red text-bold">빨간색 굵은 글씨</span>

📦 박스

💡 참고
양자 정보 학교 합격 기원
✅ 성공
학연생 합격 기원
⚠️ 경고
이것저것 전부 다 잘되길 기원
🚨 위험
성공적인 기말 기원

사용법:

<div class="box-note">
💡 <strong>참고</strong><br>
정보 내용
</div>

<div class="box-success">
✅ <strong>성공</strong><br>
성공 메시지
</div>

<div class="box-warning">
⚠️ <strong>경고</strong><br>
경고 메시지
</div>

<div class="box-danger">
🚨 <strong>위험</strong><br>
위험 메시지
</div>

📂 접은글 (토글)

긴 내용을 숨기고 필요할 때만 펼쳐볼 수 있음

더보기 (기본 예제)

숨겨진 내용입니다. 클릭하면 펼쳐집니다.

여러 줄의 내용을 작성할 수 있습니다.

코드 예제 보기

Python 코드 예제:

def greet(name):
    """인사말을 출력하는 함수"""
    print(f"안녕하세요, {name}님!")

greet("개발자")

JavaScript 코드 예제:

function greet(name) {
    console.log(`안녕하세요, ${name}님!`);
}

greet("개발자");
리스트와 함께 사용하기

접은글 안에 리스트도 넣을 수 있습니다:

  • 첫 번째 항목
  • 두 번째 항목
    • 중첩된 항목 1
    • 중첩된 항목 2
  • 세 번째 항목

번호 리스트도 가능합니다:

  1. 준비하기
  2. 실행하기
  3. 완료하기
박스 스타일과 조합하기
💡 접은글 안에 박스 스타일도 넣을 수 있습니다!

형광펜 효과나 색상 변경도 모두 가능합니다.

사용법:

<details>
<summary>제목</summary>
<div class="toggle-content" markdown="1">

숨겨진 내용

</div>
</details>

기본적으로 펼쳐진 상태로 시작하려면:

<details open>
<summary>제목</summary>
<div class="toggle-content" markdown="1">

처음부터 펼쳐진 내용

</div>
</details>
⚠️ 중요!
markdown="1" 속성과 빈 줄이 필수. 없으면 마크다운 문법(코드블록, 리스트 등)이 작동하지 않게 됨

🎯 활용 예시

조합하면 이런 느낌..

프로젝트 설치 가이드
💡 시작하기 전에
Node.js 14 이상이 설치되어 있어야 합니다.

설치 단계

  1. 저장소 클론
git clone https://github.com/username/project.git
cd project
  1. 의존성 설치
npm install
  1. 개발 서버 실행
npm run dev
✅ 완료!
이제 http://localhost:3000에서 확인할 수 있습니다.
문제 해결 (Troubleshooting)

자주 발생하는 문제들

설치가 실패하는 경우
🚨 npm install 실패 시:
  • 캐시 삭제: npm cache clean --force
  • node_modules 삭제 후 재설치
  • npm 버전 확인: npm --version
포트 충돌이 발생하는 경우

다른 포트를 사용하려면:

PORT=3001 npm run dev

또는 .env 파일에 추가:

PORT=3001