마케터도 이제는 HTML을 조금은 알아야 하는 시대죠.
블로그를 운영하거나, 랜딩페이지를 수정할 일이 생기면
기본적인 HTML 구조만 알아도 작업 속도와 이해도가 확 달라집니다.
저도 HTML을 처음 배우는 입장에서 하나씩 실습해보고 있는데요,
이번 글에서는 HTML의 가장 기본인 문단 태그 <p>와 제목 태그 <h1>, <h2>를 직접 연습해본 내용을 공유합니다.
1. HTML 문서의 기본 구조는 이렇게 생겼어요
html
복사편집
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 첫 HTML</title>
</head>
<body>
<h1>안녕하세요, 저는 마케터입니다!</h1>
<h2>자기소개</h2>
<p>저는 마케팅에 관심이 많은 초보 마케터입니다.</p>
<p>HTML을 배우고 있어요.</p>
</body>
</html>
- h1: 가장 큰 제목 (페이지 타이틀 등)
- h2: 두 번째로 큰 제목
- p: 문단을 작성할 때 사용하는 태그
2. 질문: <p1>, <p2>처럼 쓰면 안 되나요?
HTML을 처음 배우다 보면 이런 궁금증이 생기기 마련입니다.
❓ 질문:
<p1>, <p2>라고 써서 문단을 구분하면 안 되나요?
✅ 답변:
안 됩니다. HTML에는 <p1>, <p2>라는 태그는 존재하지 않아요.
문단을 작성할 땐 반드시 <p> 태그를 사용해야 합니다.
<p>는 문단을 의미하는 유일한 표준 태그입니다.
3. 문단을 구분하고 싶다면?
문단마다 다른 스타일이나 역할을 주고 싶을 땐 class나 id를 사용합니다.
html
복사편집
<p class="p1">브랜딩에 관심 있어요.</p>
<p class="p2">블로그도 운영하고 있어요.</p>
이렇게 클래스 이름을 붙여주면, 나중에 CSS를 활용해서
문단마다 색상, 크기, 여백 등을 자유롭게 조정할 수 있어요.
예시 CSS:
css
복사편집
.p1 {
color: navy;
}
.p2 {
color: darkred;
}
4. 태그별 역할 한눈에 보기
구분 사용 예 설명
| <h1>, <h2> | 제목 | 페이지나 구역의 제목 |
| <p> | 본문 | 일반 문장이나 설명 같은 본문 내용 |
| <a> | 링크 | 클릭해서 다른 페이지로 이동할 수 있는 링크 |
| <img> | 이미지 | 화면에 사진이나 그림을 삽입 |
5. 초보 마케터의 실전 팁
'마케터 실무도구 > HTML' 카테고리의 다른 글
| 초보 마케터가 HTML을 배우면 어디에 쓰고, 어떻게 돈이 될까? (2) | 2025.04.19 |
|---|---|
| HTML 안에 CSS를 넣어도 될까? 확장자까지 깔끔하게 정리해드립니다 (0) | 2025.04.19 |
| 초보 마케터를 위한 HTML 연습 방법 (1) | 2025.04.19 |
| 마케터가 알아야 할 HTML 기초 태그 10개 (0) | 2025.04.01 |
| 신입 마케터, HTML 어떻게 공부해야 할까? (0) | 2025.04.01 |
