Programming/Etc.

HTML 기초 문법 가이드

Joo-Topia 2025. 3. 16.

블로그 작성을 위한 필수 HTML 문법 가이드

블로그를 HTML로 직접 작성하면 더 많은 커스터마이징이 가능해집니다. 이 글에서는 블로그 포스팅에 자주 사용되는 HTML 태그들과 그 사용법을 알아보겠습니다.

1. 기본 구조

모든 HTML 문서는 다음과 같은 기본 구조를 가집니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블로그 제목</title>
</head>
<body>
    <!-- 여기에 블로그 내용을 작성합니다 -->
</body>
</html>

2. 제목 태그

제목은 <h1>부터 <h6>까지의 태그를 사용합니다. <h1>이 가장 큰 제목이고, 숫자가 커질수록 크기가 작아집니다.

<h1>블로그 제목</h1>
<h2>챕터 제목</h2>
<h3>소제목</h3>

3. 단락

본문 내용은 <p> 태그를 사용하여 작성합니다.

<p>이것은 단락입니다. 블로그의 주요 내용을 여기에 작성합니다.</p>

4. 강조

텍스트를 강조하기 위해 <strong>과 <em> 태그를 사용합니다.

<p>이것은 <strong>굵은 글씨</strong>입니다.</p>
<p>이것은 <em>기울어진 글씨</em>입니다.</p>

5. 링크

다른 페이지로의 링크는 <a> 태그를 사용합니다.

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

6. 이미지

이미지는 <img> 태그로 삽입합니다.

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

7. 목록

순서 없는 목록은 <ul>, 순서 있는 목록은 <ol> 태그를 사용합니다.

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

<ol>
    <li>첫 번째 단계</li>
    <li>두 번째 단계</li>
</ol>

8. 인용문

긴 인용문은 <blockquote>, 짧은 인용문은 <q> 태그를 사용합니다.

<blockquote>
    <p>이것은 긴 인용문입니다. 다른 사람의 글을 길게 인용할 때 사용합니다.</p>
</blockquote>

<p>그리고 이것은 <q>짧은 인용문</q>입니다.</p>

9. 코드

인라인 코드는 <code>, 코드 블록은 <pre><code> 조합을 사용합니다.

<p>이것은 <code>인라인 코드</code>입니다.</p>

<pre><code>
function example() {
    console.log("이것은 코드 블록입니다.");
}
</code></pre>

10. 구분선

섹션을 구분하기 위해 <hr> 태그를 사용합니다.

<hr>

이러한 HTML 태그들을 적절히 조합하여 사용하면, 구조적이고 가독성 높은 블로그 포스트를 작성할 수 있습니다. 또한, CSS를 함께 사용하면 더욱 아름답고 개성 있는 디자인을 적용할 수 있습니다.

HTML은 계속해서 발전하고 있으므로, 최신 HTML5 명세를 참고하여 새로운 기능들도 활용해 보시기 바랍니다. 즐거운 블로깅 되세요!

저작자표시

'Programming > Etc.' 카테고리의 다른 글

[Thread] 스레드란 무엇인가 (vs 프로세스) (0)	2019.11.02
[Process] 프로세스란 무엇인가 (0)	2019.11.02
[DevOps] DevOps란 무엇인가 (0)	2019.11.02