카테고리 없음

티스토리 서식

얼리두잉 2025. 12. 15. 18:05

1. 인용 요약 박스 (서론에 가장 많이 씀)

✅ 한 줄 요약

여기에 핵심 문장을 2~3줄로 요약해 주세요.

위의 서식을 이용하고 싶으시면 복사하면 됩니다

 

<div style="border-left:6px solid #111; background:#f7f7f7; padding:14px 16px; border-radius:12px; margin:14px 0;">
  <p style="margin:0; font-weight:700;">✅ 한 줄 요약</p>
  <p style="margin:8px 0 0; line-height:1.7;">
    여기에 핵심 문장을 2~3줄로 요약해 주세요.
  </p>
</div>

 

 

 

2. TIP 박스 / 주의 박스 (신청글 필수)

 

💡 TIP

  • 팁 1
  • 팁 2

⚠️ 주의

  • 주의사항 1
  • 주의사항 2

위의 서식을 이용하고 싶으시면 복사하면 됩니다

 

<!-- TIP -->
<div style="background:#eef6ff; border:1px solid #cfe6ff; padding:14px 16px; border-radius:12px; margin:14px 0;">
  <p style="margin:0; font-weight:700;">💡 TIP</p>
  <ul style="margin:10px 0 0; padding-left:18px; line-height:1.8;">
    <li>팁 1</li>
    <li>팁 2</li>
  </ul>
</div>

<!-- 주의 -->
<div style="background:#fff2f2; border:1px solid #ffd2d2; padding:14px 16px; border-radius:12px; margin:14px 0;">
  <p style="margin:0; font-weight:700;">⚠️ 주의</p>
  <ul style="margin:10px 0 0; padding-left:18px; line-height:1.8;">
    <li>주의사항 1</li>
    <li>주의사항 2</li>
  </ul>
</div>

 

 

 

3. 체크리스트 박스 (가독성 최고)

 

🧾 체크리스트

☑️ 항목 1

☑️ 항목 2

☑️ 항목 3

위의 서식을 이용하고 싶으시면 복사하면 됩니다

 

<div style="background:#fbfbfb; border:1px solid #e9e9e9; padding:14px 16px; border-radius:12px; margin:14px 0;">
  <p style="margin:0; font-weight:700;">🧾 체크리스트</p>
  <div style="margin-top:10px; line-height:1.9;">
    <p style="margin:0;">☑️ 항목 1</p>
    <p style="margin:0;">☑️ 항목 2</p>
    <p style="margin:0;">☑️ 항목 3</p>
  </div>
</div>

 

 

4. 단계별 절차(스텝 박스) (신청 방법에 딱)

STEP 1

첫 번째 단계 설명

STEP 2

두 번째 단계 설명

STEP 3

세 번째 단계 설명

위의 서식을 이용하고 싶으시면 복사하면 됩니다

 

<div style="margin:14px 0;">
  <div style="border:1px solid #e6e6e6; border-radius:14px; padding:14px 16px; margin-bottom:10px;">
    <p style="margin:0; font-weight:800;">STEP 1</p>
    <p style="margin:8px 0 0; line-height:1.7;">첫 번째 단계 설명</p>
  </div>
  <div style="border:1px solid #e6e6e6; border-radius:14px; padding:14px 16px; margin-bottom:10px;">
    <p style="margin:0; font-weight:800;">STEP 2</p>
    <p style="margin:8px 0 0; line-height:1.7;">두 번째 단계 설명</p>
  </div>
  <div style="border:1px solid #e6e6e6; border-radius:14px; padding:14px 16px;">
    <p style="margin:0; font-weight:800;">STEP 3</p>
    <p style="margin:8px 0 0; line-height:1.7;">세 번째 단계 설명</p>
  </div>
</div>

 

 

5. 2열 비교 박스 (A vs B / 장단점 비교)



A안



    • 특징 1

    • 특징 2


B안

  • 특징 1
  • 특징 2

 

위의 서식을 이용하고 싶으시면 복사하면 됩니다

<div style="display:flex; gap:12px; flex-wrap:wrap; margin:14px 0;">
  <div style="flex:1; min-width:240px; border:1px solid #e6e6e6; border-radius:14px; padding:14px 16px;">
    <p style="margin:0; font-weight:800;">A안</p>
    <ul style="margin:10px 0 0; padding-left:18px; line-height:1.8;">
      <li>특징 1</li>
      <li>특징 2</li>
    </ul>
  </div>

  <div style="flex:1; min-width:240px; border:1px solid #e6e6e6; border-radius:14px; padding:14px 16px;">
    <p style="margin:0; font-weight:800;">B안</p>
    <ul style="margin:10px 0 0; padding-left:18px; line-height:1.8;">
      <li>특징 1</li>
      <li>특징 2</li>
    </ul>
  </div>
</div>