사용방법이나 순서를 작성할 때에 쓰는 html

사용법이나 순서 작성할 때,

내가 쓰려고 만든 html

 

사용법 1

(( 여기에 캡처 이미지를 삽입하세요 ))

STEP 01

이 단계에서 수행해야 할 구체적인 내용을 입력해 주세요. (예: 우측 상단의 가입 버튼을 누릅니다.)

 

<p style="text-align: center;" data-ke-size="size16"><br /><span style="color: #bbbbbb; text-align: center;">(( 여기에 캡처 이미지를 삽입하세요 ))</span></p>
<div style="margin-bottom: 40px; font-family: 'Noto Sans KR', sans-serif;">
<div style="display: inline-block; background: #2c3e50; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; margin-bottom: 15px;">STEP 01</div>
<p style="font-size: 1.05rem; line-height: 1.8; color: #333; padding: 0 5px; word-break: keep-all; margin: 0;" data-ke-size="size16">이 단계에서 수행해야 할 구체적인 내용을 입력해 주세요. (예: 우측 상단의 가입 버튼을 누릅니다.)</p>
<p style="font-size: 1.05rem; line-height: 1.8; color: #333; padding: 0 5px; word-break: keep-all; margin: 0;" data-ke-size="size16">&nbsp;</p>
<p style="font-size: 1.05rem; line-height: 1.8; color: #333; padding: 0 5px; word-break: keep-all; margin: 0;" data-ke-size="size16">&nbsp;</p>
</div>

---

사용법 2

 

STEP 01 여기에 제목을 입력하세요

여기에 상세 내용을 입력하세요. 중요한 핵심 내용은 볼드 처리를 하면 눈에 훨씬 잘 들어옵니다.

div style="max-width: 100%; margin: 20px auto; font-family: 'Noto Sans KR', sans-serif;">
<div style="background: #fff; border: 1px solid #eee; border-radius: 15px; padding: 25px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
<div style="display: flex; align-items: center; margin-bottom: 15px;"><span style="background: #6c5ce7; color: #fff; font-size: 0.8rem; font-weight: bold; padding: 3px 10px; border-radius: 5px; margin-right: 10px;">STEP 01</span> <b>여기에 제목을 입력하세요</b></div>
<p style="font-size: 1rem; color: #555; margin: 0; line-height: 1.7;" data-ke-size="size16">여기에 상세 내용을 입력하세요. <b>중요한 핵심 내용</b>은 볼드 처리를 하면 눈에 훨씬 잘 들어옵니다.</p>
</div>
</div>