구글 블로그(BlogSpot)에서 '글상자' 박스 추가하기

구글 블로그(Blogger/Blogspot)는 네이버나 티스토리와 달리 기본 에디터에서 '글상자' 버튼을 직접 제공하지 않습니다. 따라서 HTML 편집 모드를 통해 간단한 코드를 삽입하는 것이 가장 깔끔하고 확실한 방법입니다.

초보자도 바로 따라 할 수 있도록 단계별로 정리해 드립니다.

---

1. HTML 코드를 이용한 글상자 삽입법

가장 대중적으로 사용되는 테두리가 있는 글상자 만드는 법입니다.

1단계: 글 작성 화면 전환

1. 포스팅 편집 화면 왼쪽 상단의 연필 모양 아이콘을 클릭합니다.
2. 메뉴에서 [HTML 보기]를 선택합니다.

2단계: 코드 복사 및 붙여넣기

원하는 위치에 아래 코드를 복사해서 넣으세요.

HTML

 

<div style="border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9; border-radius: 5px;">
  여기에 내용을 입력하세요.
</div>

3단계: 다시 기본 모드로 복귀

1. 다시 왼쪽 상단의 [<>] 모양 아이콘을 클릭해 [글쓰기 보기]로 돌아옵니다.
2. 회색 상자가 생겨난 것을 확인하고, "여기에 내용을 입력하세요" 부분을 수정하여 글을 작성합니다.

---

2. 스타일별 글상자 코드 추천 (활용형)

디자인에 따라 아래 코드들을 골라서 사용해 보세요.

(1) 점선 테두리 상자 (강조용)

HTML

 

<div style="border: 2px dashed #3498db; padding: 15px; background-color: #ebf5fb;">
  중요한 포인트나 요약 내용을 적기에 좋습니다.
</div>

(2) 왼쪽 굵은 선 상자 (깔끔한 인용구 스타일)

HTML

 

<div style="border-left: 5px solid #2ecc71; padding: 10px 20px; background-color: #f2fcf5;">
  심플하게 팁(Tip)을 전달할 때 유용합니다.
</div>

---

3. 코드의 주요 속성 이해하기 (커스텀 팁)

코드 내 숫자를 조금만 바꾸면 내 블로그 분위기에 딱 맞는 상자를 만들 수 있습니다.

• border: 테두리 두께와 색상 (예: 2px solid #000)
• padding: 상자 안쪽 여백 (숫자가 클수록 글자와 테두리 사이가 멀어짐)
• background-color: 상자 배경색 (HEX 코드 사용)
• border-radius: 모서리 곡률 (숫자가 클수록 둥글어짐)