블로그를 운영하다 보면 '왜 내 글은 남들처럼 예쁘지 않을까?', '광고는 어디에 넣어야 하지?'라는 고민이 생기기 마련입니다. 이 모든 문제의 해답은 바로 HTML 태그에서 시작됩니다. HTML은 웹페이지의 뼈대를 구성하는 언어로, 단순히 글자를 굵게 만들거나, 표를 삽입하고, 이미지를 정렬하거나, 광고 위치를 설정하는 데까지 다양하게 사용됩니다. 이번 글에서는 HTML의 기초 태그부터 티스토리 블로그에 직접 적용할 수 있는 실전 HTML 소스 예제까지 정리해 보겠습니다.
1. HTML 태그 기초 정리표
| 구분 | 태그/기호 | 사용 예시 | 기능 설명 |
| 제목 | <h1>~<h6> | <h2>소제목</h2> | 제목 계층 표현 (SEO 구조화에 중요) |
| 문단 | <p> | <p>문단 내용</p> | 글의 단락 구분 |
| 줄바꿈 | <br> | 첫 줄<br>둘째 줄 | 줄바꿈 (단독 태그) |
| 강조 | <strong>, <em> | <strong>중요</strong> | 굵게/기울임 강조 |
| 강조박스용 | <div> | <div style="...">내용</div> | 콘텐츠 구역 나눔, 스타일 적용 |
| 인라인 강조 | <span> | <span style="color:red;">빨간 글자</span> | 글자 일부 스타일 지정 (문장 내 사용) |
| 공백 문자 | | A B | 강제 공백(띄어쓰기) 삽입 |
| 링크 | <a href=""> | 네이버 | 다른 주소로 이동하는 하이퍼링크 |
| 이미지 | <img> | <img src="주소" alt="설명"> | 이미지 삽입 (alt 속성 중요) |
| 목록 | <ul>, <ol>, <li> | <ul><li>항목</li></ul> | 리스트(순서有/無) 구성 |
| 표 | <table>, <tr>, <td> | <table><tr><td>데이터</td></tr></table> | 표 형태의 데이터 정렬 |
| 구분선 | <hr> | <hr> | 단락 사이 구분선 삽입 |
2. HTML 색상표 (기본 + 블로그용 추천 컬러)
| 이름 | 색상코드 | 미리보기 |
| 흰색 | #ffffff | |
| 연회색 | #f5f5f5 | |
| 회색 | #cccccc | |
| 진회색 | #666666 | |
| 검정 | #000000 | |
| 파란색 | #2196f3 | |
| 연파랑 | #e3f2fd | |
| 노랑 | #fff9c4 | |
| 연노랑 | #fff8e1 | |
| 주황 | #ff9800 | |
| 연주황 | #ffe0b2 | |
| 초록 | #4caf50 | |
| 민트 | #e0f2f1 | |
| 빨강 | #f44336 | |
| 연분홍 | #fce4ec |
3. HTML 태그 기초부터 블로그 적용까지 실전 예제
3-1. 강조 텍스트 + 버튼
<p data-ke-size="size16"> </p> <p data-ke-size="size16"><b>이 글이 도움이 되셨다면</b> 아래 버튼을 클릭해보세요!</p> <p data-ke-size="size16"><a style="display: inline-block; background: #f90; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold;" href="https://example.com" target="_blank" rel="noopener">더 알아보기</a></p>
이 글이 도움이 되셨다면 아래 버튼을 클릭해보세요!
3-2. 이미지 가운데 정렬
<div style="text-align:center; margin-top:20px;"> <img src="https://via.placeholder.com/150x100" alt="예시 이미지" style="max-width:100%; height:auto;"> </div>
3-3. 정보 안내 강조 박스
<div style="background:#e8f4fd; padding:15px; border-left:5px solid #2196f3; font-size:16px; line-height:1.6;"> 🟦 이 포스트는 <strong>2025년 최신 정보를 기반</strong>으로 작성되었습니다. </div>
🟦 이 포스트는 2025년 최신 정보를 기반으로 작성되었습니다.
3-4. 긴 네모 강조 박스
<div style="background:#fff8e1; padding:25px; border-left:10px solid #ffb300; font-size:17px; line-height:1.8; border-radius:8px;"> 💡 긴 문장을 포함한 강조 박스입니다. 이 박스는 독자의 시선을 끌기 위해 좌측에 굵은 강조선을 두고 배경은 연노란색을 사용합니다. 블로그 글 중간에 배치하면 정보 전달력과 시각적 집중도를 높일 수 있습니다. </div>
💡 긴 문장을 포함한 강조 박스입니다. 이 박스는 독자의 시선을 끌기 위해 좌측에 굵은 강조선을 두고 배경은 연노란색을 사용합니다. 블로그 글 중간에 배치하면 정보 전달력과 시각적 집중도를 높일 수 있습니다.
3-5. 다양한 표 예시
<table border="1" style="width:100%; border-collapse:collapse;"> <tr> <th style="background:#f0f0f0; padding:10px;">이름</th> <th style="background:#f0f0f0; padding:10px;">직업</th> <th style="background:#f0f0f0; padding:10px;">국가</th> </tr> <tr> <td style="padding:10px;">홍길동</td> <td style="padding:10px;">개발자</td> <td style="padding:10px;">대한민국</td> </tr> <tr> <td style="padding:10px;">존 스미스</td> <td style="padding:10px;">디자이너</td> <td style="padding:10px;">미국</td> </tr> </table>
| 이름 | 직업 | 국가 |
| 홍길동 | 개발자 | 대한민국 |
| 존 스미스 | 디자이너 | 미국 |
3-6. 추가 응용 예시 - 정렬 예제 표
<table border="1" style="width:100%; border-collapse:collapse;"> <tr> <td style="text-align:left;">왼쪽 정렬</td> <td style="text-align:center;">가운데 정렬</td> <td style="text-align:right;">오른쪽 정렬</td> </tr> <tr> <td style="text-align:left;">텍스트 A</td> <td style="text-align:center;">텍스트 B</td> <td style="text-align:right;">텍스트 C</td> </tr> </table>
| 왼쪽 정렬 | 가운데 정렬 | 오른쪽 정렬 |
| 텍스트 A | 텍스트 B | 텍스트 C |
4. 사각형 박스 소스 & 결과
4-1. 사각형 흰색 박스 소스
<div style="background: #ffffff; padding: 15px; border: 1px solid #ddd;">흰색 사각 박스</div>
4-2. 사각형 회색 박스 간단 소스
<blockquote data-ke-style="style3">회색 사각 간단 소스</blockquote>
4-3. 사각형 회색 박스 소스
<div style="border: 1px solid #ddd; background: #f9f9f9; padding: 15px 20px; margin: 20px 0; border-radius: 6px; font-size: 15px; line-height: 1.6;"><span style="background-color: #fcfcfc; color: #666666; text-align: left;">회색 사각형박스소스</span></div>
4-4. 색깔 있는 사각 박스
<p style="color: #333333; text-align: start;" data-ke-size="size16">2. 색깔 있는 사각 박스</p>
<div style="background: #e8f4fd; padding: 15px; border-left: 5px solid #2196f3;"> </div>
<p data-ke-size="size16"> </p>
<div style="background: #e8f4fd; padding: 15px; border-left: 5px solid #2196f3;"> </div>
<p data-ke-size="size16"> </p>
4-5. 버튼 만들기 소스
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"><a style="display: inline-block; background: #f90; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none;" href="
https://example.com
" target="_blank" rel="noopener">버튼</a></p>
5. HTML 태그와 애드센스 광고 적용 팁
| 위치 | 추천 HTML 태그 | 적용 팁 |
| 본문 상단 | <div> + <ins> | 글 본문 바로 아래 div 태그로 광고 노출 영역 확보 |
| 중간 광고 | <hr> + 광고 태그 | <hr>로 단락 구분 후 광고 삽입 |
| 사이드바 | <aside>, <div> | 사이드바에 고정형 광고 배치 시 <div style="width:100%;"> 활용 |
| 표 내부 | <td> 내 광고 코드 | CTR 높이려면 콘텐츠 표 한가운데 삽입 |
6. 마무리 정리
처음에는 복잡하게 느껴지는 HTML 태그도 몇 번 적용해보고 눈에 익히면, 내 글이 확 달라집니다. 특히 애드센스 광고를 효율적으로 배치하고, 방문자의 시선을 사로잡는 디자인을 만들기 위해선 HTML 이해는 필수입니다. 이번 글에서 소개한 기초 태그와 실전 예제들을 복사해서 직접 블로그에 붙여 넣고 연습해보세요. 단순히 글만 쓰는 블로그에서 벗어나, 읽는 사람에게 더 친절하고, 광고 수익이 나는 블로그로 변화할 수 있습니다.