HTML 태그를 활용하면 웹페이지를 더욱 풍성하게 꾸밀 수 있고, 원하는 대로 콘텐츠를 맞춤형으로 구성할 수 있습니다. 프로그래밍 경험이 없어도 HTML의 기본적인 태그는 쉽게 배울 수 있으며, 블로그나 페이지에 적절히 적용할 수 있습니다. 이번 글에서는 초보자를 위한 HTML 태그 활용법과 간단한 예시들을 7단락으로 나눠 소개합니다.

1️⃣ HTML 태그란 무엇인가?

HTML(하이퍼텍스트 마크업 언어)은 웹페이지를 구성하는 기본적인 코드입니다. 브라우저는 이 코드를 읽어 웹페이지의 구조와 스타일을 결정합니다. 워드프레스에서 글을 작성할 때, 기본적으로 시각적 편집기를 사용하지만, HTML 편집 모드를 사용하면 더 정교하게 콘텐츠를 제어할 수 있습니다. HTML 태그는 보통 <태그명>과 </태그명>으로 감싸며, 그 안에 내용을 넣어 표현합니다.

예시:

<p>이것은 HTML로 작성된 문단입니다.</p>

이 코드는 브라우저에서 단순한 문단을 나타내며, <p> 태그는 문단을 의미하는 기본적인 태그입니다.

2️⃣ 제목을 꾸미는 <h1> ~ <h6> 태그

HTML에서 제목은 **<h1>**부터 **<h6>**까지 다양한 크기로 표현할 수 있습니다. **<h1>**이 가장 큰 제목을 나타내며, 숫자가 커질수록 작은 제목을 의미합니다. 워드프레스에서 포스팅할 때 이러한 제목 태그를 사용하면 검색엔진 최적화(SEO)에도 도움이 되며, 콘텐츠의 계층 구조를 쉽게 만들 수 있습니다.

예시:

<h1>
이것은 가장 큰 제목입니다.
</h1>
<h2>
이것은 두 번째로 큰 제목입니다.
</h2>

이 코드는 제목의 크기에 따라 텍스트가 커지고 작아지며, 블로그를 보다 구조적으로 만들어 줍니다.

3️⃣ 링크 삽입을 위한 <a> 태그

<a> 태그는 하이퍼링크를 만들 때 사용됩니다. 독자가 다른 페이지로 이동하거나 외부 사이트로 연결할 때 이 태그를 활용합니다. 워드프레스의 편집기에서도 쉽게 링크를 걸 수 있지만, HTML 모드에서 직접 제어하면 더 다양한 옵션을 설정할 수 있습니다.

예시:

<a href="https://www.naver.com">여기를 클릭하세요</a>

이 코드는 **”여기를 클릭하세요”**라는 텍스트를 클릭하면, example.com이라는 사이트로 연결되도록 만듭니다. 이때 href 속성을 사용해 링크를 설정할 수 있습니다.

4️⃣ 이미지 삽입을 위한 <img> 태그

워드프레스에서 이미지를 삽입할 때도 HTML 태그를 활용할 수 있습니다. <img> 태그는 이미지를 페이지에 추가하는 데 사용됩니다. 이미지의 경로와 크기, 대체 텍스트 등을 설정할 수 있어, 시각적인 콘텐츠를 좀 더 자유롭게 배치할 수 있습니다.

예시:

<img src="image-url.jpg" alt="대체 텍스트" width="500" height="300">

이 코드는 지정된 URL의 이미지를 페이지에 삽입하며, alt 속성은 이미지가 로딩되지 않을 때 표시될 텍스트를 나타냅니다. **width**와 height 속성을 통해 크기를 조정할 수도 있습니다.

5️⃣ 리스트 생성하는 <ul>, <ol>, <li> 태그

블로그에서 **리스트(목록)**를 만들 때는 <ul>, <ol>, <li> 태그를 사용합니다. <ul>은 순서 없는 목록을 만들 때, <ol>은 순서 있는 목록을 만들 때 사용되며, 각각의 항목은 <li>로 표시됩니다.

예시:

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

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

이 코드는 순서 없는 목록과 순서 있는 목록을 나타내며, 블로그에서 정보를 구조적으로 나열할 때 매우 유용합니다.

6️⃣ 텍스트 스타일링을 위한 <strong>, <em> 태그

HTML에서는 텍스트를 굵게 또는 기울일 수 있습니다. <strong> 태그는 텍스트를 굵게 표시하며, <em> 태그는 기울임 처리를 할 때 사용합니다. 이를 활용하면 강조하고 싶은 내용을 시각적으로 부각시킬 수 있습니다.

예시:

<strong>이 문장은 굵게 표시됩니다.</strong>
<em>이 문장은 기울임꼴로 표시됩니다.</em>

이 코드는 텍스트의 스타일을 변경해, 독자가 주목해야 할 부분을 쉽게 강조할 수 있게 만듭니다.

7️⃣ 정렬을 위한 <div>와 <span> 태그

**<div>**와 <span> 태그는 HTML에서 구조를 정리할 때 매우 유용합니다. **<div>**는 블록 레벨 요소를, **<span>**은 인라인 요소를 정의합니다. 이 태그를 사용하면 콘텐츠를 논리적으로 그룹화하고, CSS와 결합해 레이아웃을 쉽게 조정할 수 있습니다.

예시:

<div style="text-align:center;">
  <p>이 문장은 가운데 정렬됩니다.</p>
</div>

<span style="color:blue;">이 텍스트는 파란색으로 표시됩니다.</span>

<div> 태그를 사용해 특정 콘텐츠를 중앙에 정렬하거나 **<span>**을 사용해 텍스트의 색상이나 스타일을 변경할 수 있습니다.

워드프레스에서 HTML 태그를 적절히 활용하면 콘텐츠를 좀 더 자유롭고 창의적으로 구성할 수 있습니다. 위에서 소개한 태그들을 실습하면서 워드프레스 블로그의 디자인을 더욱 풍성하게 만들어 보세요!