초보 블로거를 위한 필수 HTML 태그
웹 페이지를 만들 때 가장 중요한 것 중 하나가 바로 HTML입니다. HTML은 웹의 뼈대를 이루는 언어로, 이를 사용해 페이지의 구조와 콘텐츠를 정의할 수 있습니다. 비단 워드프레스 사용자뿐만 아니라, 블로그스팟이나 티스토리 같은 블로그 플랫폼을 사용하는 사람들도 기본적인 HTML 태그를 알고 있으면 콘텐츠 작성과 페이지 구성이 훨씬 더 수월해집니다.
오늘은 초보자들이 꼭 알아야 할 HTML의 핵심 태그와 그 사용 방법을 소개하고, 이를 통해 웹 페이지를 효율적으로 구성할 수 있도록 도와드리려고 합니다. 이 포스팅을 통해 기본적인 HTML 태그를 이해하고, 간단한 웹 페이지 구성을 직접 시도해볼 수 있을 겁니다!
1. 목록 태그 (List)
목록은 웹에서 정보를 깔끔하게 정리하는 데 매우 유용합니다. HTML에서는 순서 없는 목록과 순서 있는 목록 두 가지 종류의 목록을 만들 수 있습니다.
순서 없는 목록 (불릿 리스트)
사용 방법:
<ul>
<li>사과</li>
<li>바나나</li>
<li>체리</li>
</ul>
이렇게 작성하면 다음과 같이 보입니다:
- 사과
- 바나나
- 체리
순서 있는 목록 (숫자 리스트)
사용 방법:
<ol>
<li>사과</li>
<li>바나나</li>
<li>체리</li>
</ol>
이렇게 작성하면 다음과 같이 보입니다:
- 사과
- 바나나
- 체리
2. 이미지 태그 (Image)
이미지를 삽입하는 방법은 다음과 같습니다:
<img src="https://via.placeholder.com/300x200" alt="예시 이미지" width="300" height="200">
이렇게 작성하면 아래와 같이 표시됩니다:
3. 링크 태그 (Anchor)
기본 링크
사용 방법:
<a href="https://example.com">예제 사이트로 이동</a>
이렇게 작성하면 다음과 같이 보입니다:
새 창에서 열리는 링크
사용 방법:
<a href="https://example.com" target="_blank">새 창에서 예제 사이트 열기</a>
이렇게 작성하면 다음과 같이 보입니다:
4. 수평선 태그 (Horizontal Line)
수평선을 삽입하는 방법:
<hr width="50%">
이렇게 작성하면 다음과 같이 보입니다:
5. 인용구 태그 (Blockquote)
인용구를 삽입하는 방법:
<blockquote>“모든 위대한 일은 작은 일에서 시작된다.” - 라오쯔</blockquote>
이렇게 작성하면 다음과 같이 보입니다:
“모든 위대한 일은 작은 일에서 시작된다.” - 라오쯔
6. 헤딩 태그 (Headings)
헤딩 태그를 사용하는 방법:
<h1>블로그 제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
이렇게 작성하면 다음과 같이 보입니다:
블로그 제목
부제목
소제목
7. 포맷팅 태그 (Formatting)
굵은 글씨와 기울임 글씨를 사용하는 방법:
<strong>굵은 글씨</strong>과 <em>기울임 글씨</em>
이렇게 작성하면 다음과 같이 보입니다:
굵은 글씨과 기울임 글씨
8. 줄 바꿈 태그 (Line Break)
줄을 바꾸는 방법:
첫 번째 줄<br/>
두 번째 줄
이렇게 작성하면 다음과 같이 보입니다:
첫 번째 줄
두 번째 줄
9. 정렬 태그 (Alignment)
텍스트나 이미지를 정렬하는 방법:
<p align="center">이 텍스트는 중앙에 정렬됩니다.</p>
<p align="right">이 텍스트는 오른쪽에 정렬됩니다.</p>
이렇게 작성하면 다음과 같이 보입니다:
이 텍스트는 중앙에 정렬됩니다.
이 텍스트는 오른쪽에 정렬됩니다.
이제 사용해 볼 차례
이제 기본적인 HTML 태그를 모두 익혔습니다. 이러한 태그들은 웹 페이지를 구성할 때 필수적으로 사용되며, 다양한 요소들을 추가하고 스타일링하는 데 중요한 역할을 합니다. 처음에는 어려울 수 있지만, 자주 사용하다 보면 자연스럽게 익숙해질 거예요. 웹 페이지를 작성할 때 이번에 배운 태그들을 적극 활용해보세요!