구글 블로거 HTML 코드 예시 모음

블로그 글쓰기 시 자주 사용하는 HTML 태그들의 설명과 코드 예시를 구분하여 제공합니다.

---

문단 작성

설명: 문단은 <p> 태그를 사용해 구분합니다.

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

이것은 일반 문단입니다.

줄바꿈

설명: 문장 중간에 줄바꿈을 넣고 싶다면 <br> 태그를 사용합니다.

<p>문장 중간에<br>줄이 바뀝니다.</p>

문장 중간에
줄이 바뀝니다.

강조(굵게/기울임/밑줄)

설명: 텍스트를 강조하려면 <strong>, <em>, <u> 태그를 사용합니다.

<p>
  <strong>굵은 글씨</strong>, 
  <em>기울임</em>, 
  <u>밑줄</u>
</p>

굵은 글씨 기울임 밑줄

하이퍼링크

설명: 다른 사이트로 이동하는 링크를 생성합니다. target="_blank"로 새 창에서 열 수 있습니다.

<a href="https://www.google.com" target="_blank" rel="noopener">구글로 이동</a>

구글로 이동

이미지 삽입

설명: 이미지를 삽입할 때는 alt 속성을 반드시 작성하고, 반응형을 위해 width="100%" 권장합니다.

<img src="https://via.placeholder.com/600x300.png?text=샘플+이미지" alt="샘플 이미지 설명" width="100%">

인용구

설명: 인용구는 <blockquote> 태그를 사용합니다.

<blockquote>
  인용하고 싶은 문장을 여기에 작성합니다.
</blockquote>

인용하고 싶은 문장을 여기에 작성합니다.

목록

설명: 순차 목록은 <ol>, 비순차 목록은 <ul>을 사용합니다.

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

<ol>
  <li>1단계</li>
  <li>2단계</li>
</ol>

• 첫 번째 항목
• 두 번째 항목

1. 1단계
2. 2단계

표(table)

설명: 데이터를 정리해 보여줄 때 <table> 태그를 사용합니다.

<table border="1" cellspacing="0" cellpadding="5">
  <thead>
    <tr><th>항목</th><th>설명</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>웹 구조</td></tr>
    <tr><td>CSS</td><td>스타일 지정</td></tr>
  </tbody>
</table>

항목	설명
HTML	웹 구조
CSS	스타일 지정

코드 블록 표시

설명: 프로그래밍 코드를 강조하려면 <pre><code>를 사용합니다.

<pre>
<code>
function hello() {
  console.log("Hello, Blogger!");
}
</code>
</pre>

function hello() {
  console.log("Hello, Blogger!");
}

목차 + 앵커 연결

설명: 본문 특정 위치로 점프하기 위한 목차와 ID 설정입니다.

<ul>
  <li><a href="#intro">1. 소개</a></li>
  <li><a href="#usage">2. 사용법</a></li>
</ul>

<h2 id="intro">1. 소개</h2>
<p>이곳은 소개 섹션입니다.</p>

<h2 id="usage">2. 사용법</h2>
<p>이곳은 사용법 섹션입니다.</p>

• 1. 소개
• 2. 사용법

1. 소개

이곳은 소개 섹션입니다.

2. 사용법

이곳은 사용법 섹션입니다.

---

이 코드는 구글 블로거에서 HTML 모드로 작성 시 복사하여 붙여넣으면 그대로 사용 가능합니다. 필요에 따라 각 항목을 선택적으로 활용해보세요.