cleanUrl: "/guide/html-rules"
imageBorderRadius: 16
pageMaxWidth : 1000

HTML이 무엇인가요?

HTML은 컴퓨터 문법 중 하나로, 웹에서 표시되는 내용을 더욱 다채롭게 할 때 사용할 수 있어요.

모아리에서는 캐릭터 / 세계관 / 플롯 설명에서 html을 제공하고 있어, 여러 가지 html 문법을 활용해 설명란을 더욱 디테일하게 꾸밀 수 있어요.

1. 텍스트 구조 & 문단

• p (문단)

  • 설명: 일반 문장을 하나의 단락으로 묶을 때 사용해요.

  • 예시

    <aside> ⌨️

    입력:

    <p>이건 하나의 문단입니다.</p>
    

    </aside>

    <aside> 🖥️

    출력:

    https://forgexx.vercel.app/sample-01-p.html

    </aside>

• br (줄바꿈)

  • 설명: 꼭 필요한 곳에서만 줄을 바꿀 때 사용해요.

  • 예시

    <aside> ⌨️

    입력:

      첫 줄입니다.<br> 여기서 줄이 바뀝니다.
    

    </aside>

    <aside> 🖥️

    출력:

    https://forgexx.vercel.app/sample-02-br.html

    </aside>

• hr (가로줄/구분선)

  • 설명: 내용 사이를 선으로 깔끔하게 나눌 때 써요.
  • 예시

  <aside> ⌨️

  입력:

  <p>위 내용</p>
  <hr>
  <p>아래 내용</p>
  

  </aside>

  <aside> 🖥️

  출력:

  https://forgexx.vercel.app/sample-03-hr.html

  </aside>

2. 글자 스타일

• strong (굵게, 강조)

  • 설명: 중요한 단어를 굵게 보여줄 때 사용해요.
  • 예시

  <aside> ⌨️

  입력:

    오늘의 <strong>핵심 포인트</strong>입니다.
  

  </aside>

  <aside> 🖥️

  출력:

  https://forgexx.vercel.app/sample-04-strong.html

  </aside>

• em (기울임, 강조)

  • 설명: 말할 때 톤을 살짝 올리는 느낌의 강조예요.
  • 예시

  <aside> ⌨️

  입력:

    이 부분은 <em>꼭 확인</em>해주세요.
  

  </aside>

  <aside> 🖥️

  출력:

  https://forgexx.vercel.app/sample-05-em.html

  </aside>

• u (밑줄)

  • 설명: 밑줄을 긋고 싶을 때 써요.
  • 예시

  <aside> ⌨️

  입력:

  <u>중요한 문장</u>입니다.
  

  </aside>

  <aside> ⌨️

  출력:

  https://forgexx.vercel.app/sample-06-u.html

  </aside>

• s (취소선)

  • 설명: 지운 것처럼 보이게 만들 때 써요.
  • 예시

  <aside> ⌨️

  입력:

  <s>예전 가격 10,000원</s> → 현재 가격 8,000원
  

  </aside>

  <aside> 🖥️

  출력:

  https://forgexx.vercel.app/sample-07-s.html

  </aside>

• mark (형광펜 효과)

  • 설명: 배경을 형광펜처럼 칠해서 눈에 띄게 해요.
  • 예시

  <aside> ⌨️

  입력:

  여기서 <mark>강조하고 싶은 부분</mark>만 눈에 띄게.
  

  </aside>

  <aside> 🖥️

  출력:

  https://forgexx.vercel.app/sample-08-mark.html

  </aside>

• small (작은 글씨)

  • 설명: 보조 설명, 각주 등을 작게 표시해요.
  • 예시

  <aside> ⌨️

  입력:

  <p>이용 약관에 동의합니다. <small>(필수)</small></p>
  

  </aside>

  <aside> 🖥️

  </aside>

• sub (아래첨자)

• sup (윗첨자)

3. 제목 & 계층 구조