HTML이 무엇인가요?
HTML은 컴퓨터 문법 중 하나로, 웹에서 표시되는 내용을 더욱 다채롭게 할 때 사용할 수 있어요.
모아리에서는 캐릭터 / 세계관 / 플롯 설명에서 html을 제공하고 있어, 여러 가지 html 문법을 활용해 설명란을 더욱 디테일하게 꾸밀 수 있어요.
1. 텍스트 구조 & 문단
•
p (문단)
◦
설명: 일반 문장을 하나의 단락으로 묶을 때 사용해요.
◦
예시
입력:
<p>이건 하나의 문단입니다.</p>
HTML
복사
출력:
•
br (줄바꿈)
◦
설명: 꼭 필요한 곳에서만 줄을 바꿀 때 사용해요.
◦
예시
입력:
첫 줄입니다.<br> 여기서 줄이 바뀝니다.
HTML
복사
출력:
•
hr (가로줄/구분선)
◦
설명: 내용 사이를 선으로 깔끔하게 나눌 때 써요.
◦
예시
입력:
<p>위 내용</p>
<hr>
<p>아래 내용</p>
HTML
복사
출력:
2. 글자 스타일
•
strong (굵게, 강조)
◦
설명: 중요한 단어를 굵게 보여줄 때 사용해요.
◦
예시
입력:
오늘의 <strong>핵심 포인트</strong>입니다.
HTML
복사
출력:
•
em (기울임, 강조)
◦
설명: 말할 때 톤을 살짝 올리는 느낌의 강조예요.
◦
예시
입력:
이 부분은 <em>꼭 확인</em>해주세요.
HTML
복사
출력:
•
u (밑줄)
◦
설명: 밑줄을 긋고 싶을 때 써요.
◦
예시
입력:
<u>중요한 문장</u>입니다.
HTML
복사
출력:
•
s (취소선)
◦
설명: 지운 것처럼 보이게 만들 때 써요.
◦
예시
입력:
<s>예전 가격 10,000원</s> → 현재 가격 8,000원
HTML
복사
출력:
•
mark (형광펜 효과)
◦
설명: 배경을 형광펜처럼 칠해서 눈에 띄게 해요.
◦
예시
입력:
여기서 <mark>강조하고 싶은 부분</mark>만 눈에 띄게.
HTML
복사
출력:
•
small (작은 글씨)
◦
설명: 보조 설명, 각주 등을 작게 표시해요.
◦
예시
입력:
<p>이용 약관에 동의합니다. <small>(필수)</small></p>
HTML
복사
출력:
•
sub (아래첨자)
◦
설명: 글자를 아래쪽에 작게 표시해요. (예: 화학식)
◦
예시
입력:
H<sub>2</sub>O
HTML
복사
출력:
•
sup (윗첨자)
◦
설명: 글자를 위쪽에 작게 표시해요. (예: 제곱)
◦
예시
입력:
x<sup>2</sup>
HTML
복사
출력:
3. 제목 & 계층 구조
•
h1 ~ h6 (제목)
◦
설명: 큰 제목부터 작은 제목까지, 제목 계층을 만들 때 써요.
◦
예시:
입력:
<h1>1등</h1>
<h2>2등</h2>
<h3>3등</h3>
<h4>4등</h4>
<h5>5등</h5>
<h6>꼴등</h6>
HTML
복사
출력:
•
사용 팁:
◦
한 페이지에서 가장 중요한 제목에만 h1을 쓰고, 그 아래는 h2, 그 아래는 h3 순서로 내려가면 깔끔해요.
◦
또는, 꼭 제목이 아니더라도 사용해서 임의로 글자 크기를 조정할 수 있어요.
4. 리스트(목록)
•
ul + li (순서 없는 목록)
◦
설명: 점(•)으로 표시되는 리스트예요.
◦
예시
입력:
<ul>
<li>장점 1</li>
<li>장점 2</li>
<li>장점 3</li>
</ul>
HTML
복사
출력:
•
ol + li (번호 있는 목록)
◦
설명: 1, 2, 3처럼 순서가 중요한 리스트예요.
◦
예시
입력:
<ol>
<li>장점 1</li>
<li>장점 2</li>
<li>장점 3</li>
</ol>
HTML
복사
출력:
•
dl, dt, dd (용어 정리 목록)
◦
설명: 용어와 설명을 세트로 보여줄 때 좋아요.
◦
예시:
입력:
<dl>
<dt>HTML</dt>
<dd>웹페이지의 구조를 만드는 언어</dd>
<dt>CSS</dt>
<dd>디자인과 스타일을 담당하는 언어</dd>
</dl>
HTML
복사
출력:
5. 레이아웃을 위한 묶음 태그
•
div (블록 단위 묶음)
◦
설명: 한 덩어리로 묶어서 구역을 나눌 때 사용해요.
◦
예시:
입력:
<div>
<h2>캐릭터 소개</h2>
<p>여기에 캐릭터 설명을 적어요.</p>
</div>
<div>
<h2>다음 캐릭터 소개</h2>
<p>여기에 다음 캐릭터 설명을 적어요.</p>
</div>
HTML
복사
출력:
•
span (문장 안에서 묶음)
◦
설명: 문장 일부만 따로 스타일을 주고 싶을 때 사용해요.
◦
예시
입력:
<p>이 문장 중에서 <span style="color: red;">이 부분만 색을 바꾸고</span> 싶어요.</p>
HTML
복사
출력:
6. 인용 & 코드 표시
•
blockquote (인용문)
◦
설명: 다른 사람의 말이나 문장을 인용할 때 사용해요.
◦
예시
입력:
<blockquote>
“이곳은 인용문을 넣는 공간입니다.”
</blockquote>
HTML
복사
출력:
•
pre (포맷 유지 텍스트)
◦
설명: 띄어쓰기와 줄바꿈을 그대로 보여줄 때 사용해요.
◦
예시:
입력:
<pre>
여기는 줄바꿈과
들여쓰기가
그대로 보입니다.
</pre>
HTML
복사
출력:
•
code (코드 조각)
◦
설명: 짧은 코드나 명령어를 표시할 때 사용해요.
◦
예시:
입력:
<p>터미널에 <code>npm install</code> 을 입력하세요.</p>
HTML
복사
출력:
7. 링크 & 이미지
•
a (링크)
◦
설명: 클릭하면 다른 페이지나 주소로 이동하는 링크를 만들어요.
◦
예시 1
입력:
<a href="https://moari.chat">moari.chat 사이트로 이동 (바로 이동됩니다!)</a>
HTML
복사
출력:
◦
예시 2
입력:
<a href="https://moari.chat" target="_blank" rel="noopener noreferrer">
새 창에서 열리는 moari.chat 링크
</a>
HTML
복사
출력:
•
img (이미지)
◦
설명: 이미지를 넣을 때 사용해요. src와 alt가 중요해요.
◦
예시
입력:
<img src="캐릭터이미지.png" alt="캐릭터 전신 이미지" />
HTML
복사
출력:
◦
alt에는 “이미지를 말로 설명하면 어떻게 말할지”를 짧게 적어 주세요.
8. 표(Table)
•
태그별 역할
◦
table: 표 전체
◦
thead: 표의 머리글 부분
◦
tbody: 실제 데이터 부분
◦
tr: 가로 한 줄(행)
◦
th: 제목 셀(보통 굵게, 가운데 정렬)
◦
td: 일반 셀
•
예시
입력:
<table>
<thead>
<tr>
<th>이름</th>
<th>역할</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>탐험가</td>
</tr>
<tr>
<td>김철수</td>
<td>마법사</td>
</tr>
</tbody>
</table>
HTML
복사
출력:
복합 예시
입력:
<h1>캐릭터 이름</h1>
<p>
이 캐릭터는 <strong>용감한 모험가</strong>입니다.<br>
<em>숲</em>과 <em>산</em>을 여행하는 것을 좋아해요.
</p>
<hr>
<h2>특징</h2>
<ul>
<li>공격력이 높아요.</li>
<li>체력이 튼튼해요.</li>
<li><mark>동료를 잘 챙기는 성격</mark>이에요.</li>
</ul>
<h2>이미지</h2>
<img src="character.png" alt="숲을 배경으로 서 있는 캐릭터 이미지" />
<h2>한 마디</h2>
<blockquote>
“오늘도 새로운 모험을 떠나볼까요?”
</blockquote>
HTML
복사
출력:
