블로그 글 작성 시 알면 유용한 HTML 기호와 태그

많은 블로거들이 기본 편집 모드에서 글을 작성하지만, 그 내용은 결국 HTML로 구성됩니다. 글을 꾸미거나 소제목을 수정하려면 HTML 기호와 태그를 이해하는 것이 필수입니다. 하지만 HTML은 처음 접하는 사람에게 낯설고 어렵게 느껴질 수 있습니다.
이 글에서는 HTML 기초부터 블로그 운영에 꼭 필요한 태그와 기호를 상세히 설명해 드리겠습니다.

HTML이란 무엇인가요?

HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹 페이지의 구조를 정의하는 언어입니다. 블로그 포스팅의 제목, 문단, 이미지, 링크 등은 모두 HTML 태그를 사용해 표현됩니다. 태그는 <태그명> 형태로 작성되며, 대부분 시작 태그(<태그명>)와 종료 태그(</태그명>)로 구성됩니다.

예시: 문단을 나타내는 태그

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

블로그 작성 시 알아두면 좋은 HTML 기호

HTML에서는 특정 기호를 표시하려면 아래와 같은 특수 문자를 사용해야 합니다.

문 자	HTML코드	설 명
<	&lt;	꺾쇠 괄호 열림
>	&gt;	꺾쇠 괄호 닫힘
&	&amp;	앰퍼샌드
"	&quot;	큰따옴표
'	&apos;	작은따옴표
©	&copy;	저작권 기호
®	&reg;	등록 상표 기호

블로그에서 자주 사용하는 HTML

블로그 글을 꾸미거나 사용자 경험을 개선하기 위해 자주 사용하는 HTML 태그를 정리했습니다.

태 그	설 명
<h1>	가장 큰 제목
<h2>	두 번째로 큰 제목
<p>	문단(Paragraph)
<b>	굵은 텍스트(Bold)
<i>	기울임 텍스트(Italic)
<a>	하이퍼링크
<img>	이미지 삽입
<table>	표 작성
<br>	줄 바꿈

HTML 코드 사용 예시

아래는 블로그에서 자주 사용하는 HTML 코드의 예제와 설명입니다.

1) 제목 태그

<h1>가장 큰 제목</h1>

<h2>두 번째 큰 제목</h2>

<h3>세 번째 제목</h3>

2) 문단과 텍스트 꾸미기

<p>이것은 문단입니다.</p>

<b>강조된 텍스트</b>

<i>기울임 텍스트</i>

<u>밑줄 텍스트</u>

3) 목록 만들기

순서 없는 목록:

<ul> <li>항목 1</li> <li>항목 2</li> </ul>

순서 있는 목록:

<ol> <li>첫 번째 항목</li> <li>두 번째 항목</li> </ol>

4) 이미지 삽입

기본 이미지 삽입:

<img src="이미지주소" alt="이미지 설명" width="300" height="200" />

중앙 정렬:

<img src="이미지주소" alt="이미지 설명" style="display: block; margin: auto;">

5) 하이퍼링크 삽입

기본 링크:

<a href="https://example.com">링크 텍스트</a>

 

새 탭에서 열기:

<a href="https://example.com" target="_blank">새 탭에서 열기</a>

6) 표 작성

기본 표:

<table border="1"> <tr> <th>헤더 1</th> <th>헤더 2</th> </tr> <td>데이터 1</td> <td>데이터 2</td> </tr> </table>

스타일 추가:

<table style="width: 100%; border-collapse: collapse; text-align: center;"> <tr> <th style="background-color: #f2f2f2; padding: 10px;">헤더 1</th> <th style="background-color: #f2f2f2; padding: 10px;">헤더 2</th> </tr> <tr> <td style="padding: 10px;">데이터 1</td> <td style="padding: 10px;">데이터 2</td> </tr> </table>

7) 줄 바꿈

문장 1<br>문장 2

 

HTML 수정이 필요한 다양한 상황과 해결 방법

블로그 글을 작성하다 보면 기본 편집기만으로는 원하는 대로 콘텐츠를 꾸미기 어렵거나, 가독성을 높이기 위해 HTML을 수정해야 하는 경우가 종종 생깁니다. 이 섹션에서는 블로그에서 자주 겪는 문제와 그 해결 방법을 HTML 관점에서 자세히 설명합니다.

1) 소제목 크기와 스타일 변경

문제: 소제목의 크기가 작아 눈에 잘 띄지 않거나, 스타일이 단조로워 보입니다.
해결 방법: HTML 태그를 수정해 소제목 크기와 스타일을 조정할 수 있습니다.

소제목 크기 조정:

<h1>가장 큰 제목</h1> <h2>두 번째로 큰 제목</h2> <h3>세 번째 제목</h3>

스타일 추가:

<h2 style="color: blue; text-decoration: underline;">파란 밑줄 소제목</h2>

 

2) 링크 텍스트 수정 및 추가 기능

문제: 링크를 추가했지만, 기본 설정으로 인해 같은 창에서 열려 독자가 블로그를 떠나버립니다.
해결 방법: HTML에서 target="_blank" 속성을 추가해 링크를 새 탭에서 열리도록 설정할 수 있습니다.

링크 기본 형태:

<a href="https://example.com">링크 텍스트</a>

새 탭에서 열리도록 설정:

<a href="https://example.com" target="_blank">새 탭에서 열리는 링크</a>

 

3) 이미지 정렬 및 크기 조정

문제: 삽입한 이미지가 왼쪽으로 치우치거나, 크기가 적절하지 않습니다.
해결 방법: HTML로 이미지의 정렬과 크기를 조정할 수 있습니다.

중앙 정렬:

<img src="이미지주소" alt="이미지 설명" style="display: block; margin: auto;">

크기 조정:

<img src="이미지주소" alt="이미지 설명" width="300" height="200">

 

4) 텍스트 강조 및 스타일 변경

문제: 중요한 문구를 강조하거나, 특정 텍스트를 시각적으로 구분하고 싶습니다.
해결 방법: HTML 태그를 사용해 텍스트를 강조하거나 스타일을 추가할 수 있습니다.

굵게 강조:

<b>강조된 텍스트</b>

기울임 효과:

<i>기울임 텍스트</i>

배경색 추가:

<span style="background-color: yellow;">노란 배경 강조 텍스트</span>

 

5) 표 스타일 수정

문제: 표가 단순하고 밋밋해서 시각적으로 보기 어렵습니다.
해결 방법: HTML과 간단한 스타일을 추가해 표의 가독성을 높일 수 있습니다.

기본 표:

<table border="1"> <tr> <th>헤더 1</th> <th>헤더 2</th> </tr> <tr> <td>데이터 1</td> <td>데이터 2</td> </tr> </table>

스타일 추가:

<table style="width: 100%; border-collapse: collapse; text-align: center;"> <tr> <th style="background-color: #f2f2f2; padding: 10px;">헤더 1</th> <th style="background-color: #f2f2f2; padding: 10px;">헤더 2</th> </tr> <tr> <td style="padding: 10px;">데이터 1</td> <td style="padding: 10px;">데이터 2</td> </tr> </table>

 

6) 줄 바꿈 및 문단 간격 조정

문제: 텍스트 간격이 너무 좁거나, 줄 바꿈이 제대로 이루어지지 않아 가독성이 떨어집니다.
해결 방법: HTML 태그로 간격을 조정하거나 줄 바꿈을 추가할 수 있습니다.

줄 바꿈 추가:

문장1<br>문장2

문단 간격 조정:

<p style="margin-bottom: 20px;">문단 1</p>  <p style="margin-bottom: 20px;">문단 2</p>

 

7) 버튼 스타일 추가

문제: 블로그에 삽입한 버튼이 단조롭고 클릭 유도가 어렵습니다.
해결 방법: HTML과 스타일 속성을 사용해 시각적으로 매력적인 버튼을 만듭니다.

기본 버튼:

<button>클릭하세요</button>

스타일 추가:

<button style="background-color: blue; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;"> 클릭하세요 </button>

 

결론: HTML을 알아야 블로그가 달라진다

HTML은 블로그를 꾸미고 콘텐츠를 최적화하는 데 필수적인 도구입니다. 처음에는 어렵게 느껴질 수 있지만, 기본적인 태그와 기호만 알아도 큰 변화를 만들 수 있습니다. 이번 기회를 통해 HTML의 기초를 익히고, 블로그를 더 세련되고 전문적으로 꾸며보세요. 꾸준히 연습하다 보면 HTML은 더 이상 낯설지 않게 될 것입니다. 😊 지금 바로 HTML을 활용해 블로그를 한 단계 업그레이드하세요!