[구글 애드센스 #05] 블로그스팟 CSS 설명서 — 표·상자·흐름도를 내 스타일로

지난 글에서 블로그스팟 편집기가 본문의 서식을 지워버린다는 이야기를 했습니다. 해결책은 서식을 본문이 아니라 테마에 두는 것이었고요.

그 이후로 표도 용어 상자도 전부 이 방식으로 만들고 있습니다. 실제로 쓰고 있는 코드 전문과, 각자의 스타일로 바꾸는 방법을 정리합니다. 코드를 몰라도 따라 할 수 있게 썼습니다.

먼저, 용어 세 가지

앞으로 계속 나오는 말이라 짚고 갑니다. 모두 웹에서 통용되는 정식 용어입니다.

HTML — 글의 구조를 정하는 언어입니다. 여기가 제목이고 여기가 문단이라고 표시하는 역할만 합니다. 어떻게 보일지는 정하지 않습니다.
CSS — 그 구조가 어떻게 보일지 정하는 언어입니다. 색, 크기, 여백, 정렬을 담당합니다. HTML이 뼈대라면 CSS는 옷에 해당합니다.
클래스(class) — HTML 요소에 붙이는 이름표입니다. 표에 itd-table이라는 이름표를 달아두면, CSS 쪽에서 "그 이름표가 붙은 표는 이렇게 보여라"라고 지정할 수 있습니다. 웹 표준에 정의된 정식 기능이며, 이름은 원하는 대로 지어 붙일 수 있습니다.

정리하면 이렇습니다. 본문에는 이름표만 달고, 실제 서식은 테마에 모아둔다. 편집기가 지우는 것은 본문에 적힌 서식이지 이름표가 아니기 때문에, 이렇게 두면 저장을 몇 번 하든 그대로 유지됩니다.

어디에 넣는가

테마 › 맞춤설정 › 고급 › 맨 아래 'CSS 추가'

이 칸에 넣은 내용은 블로그 전체에 적용됩니다. 한 번 넣어두면 앞으로 쓰는 모든 글에 자동으로 반영되고, 나중에 색을 바꾸고 싶으면 여기만 고치면 전체 글이 함께 바뀝니다.

테마 › HTML 편집과는 다른 곳입니다. 그쪽은 테마 구조 자체를 건드리는 화면이라 잘못 손대면 복구가 번거롭습니다.

설계할 때 정한 세 가지

1. 이름 앞에 표식을 붙인다

클래스 이름을 모두 itd-로 시작하게 했습니다. 블로그 이름에서 따온 표식입니다.

테마가 이미 쓰고 있는 이름과 겹치지 않게 하기 위해서입니다. table이나 box처럼 흔한 이름을 쓰면 테마 기본 스타일과 충돌해서, 어느 쪽이 적용될지 예측할 수 없게 됩니다.

실제로 처음에는 인용구 태그를 그대로 썼다가 글자가 두 배로 커지고 가운데 정렬되는 일을 겪었습니다. 테마가 인용구를 명언 강조용으로 처리하고 있었기 때문입니다. 이름표를 따로 만들고 나서 해결됐습니다.

2. 색은 역할별로 하나씩

쓸 때마다 색을 새로 고르면 글마다 톤이 달라집니다. 그래서 처음에 정해두고 그 안에서만 씁니다.

개수에 규칙이 있는 건 아닙니다. 화면 요소가 갖는 역할별로 하나씩 정하다 보니 여섯 개가 됐습니다. 어떤 상자든 바탕이 있고, 그 위에 얹히는 면이 있고, 경계를 긋는 선이 있고, 글자가 있고, 시선을 끄는 강조색이 있습니다.

역할색상 값쓰이는 곳
바탕#F2EBDC블로그 전체 배경
면#FDFCF9표 홀수 줄, 상자 안쪽
선#DCD3C0표 테두리, 구분선
글자#2B2B28본문 텍스트
보조 글자#6B6459캡션, 각주
강조#24462F표 머리글, 소제목, 세로선

※ 하나라도 빠지면 다른 색을 빌려 쓰게 되고, 더 늘리면 어디에 뭘 쓸지 매번 고민하게 됩니다.

3. 모바일을 따로 정한다

PC에서 잘 보이는 표가 휴대폰에서는 깨집니다. 특히 열이 네 개 이상이면 글자가 세로로 한 자씩 쪼개집니다.

그래서 두 가지를 넣었습니다. 표를 감싸는 상자에 가로 스크롤을 주고, 화면이 좁아지면 글자와 여백을 줄이는 규칙을 따로 뒀습니다.

클래스별 사용법

본문에는 이름표만 답니다. 서식은 한 줄도 쓰지 않습니다.

표

<div class="itd-scroll">
<table class="itd-table">
  <colgroup><col><col></colgroup>
  <thead>
    <tr><th>항목</th><th>내용</th></tr>
  </thead>
  <tbody>
    <tr><td>첫째 줄</td><td>내용이 들어갑니다</td></tr>
    <tr><td>둘째 줄</td><td>내용이 들어갑니다</td></tr>
  </tbody>
</table>
<p class="itd-caption">※ 표 아래 설명이 필요할 때</p>
</div>

바깥의 itd-scroll이 모바일 가로 스크롤을 담당하고, itd-table이 색과 정렬을 맡습니다. 열 개수는 <col> 개수를 늘리면 됩니다.

용어 설명 상자

<div class="itd-term">
<b>용어</b> — 설명이 들어갑니다.
</div>

왼쪽에 세로선이 붙은 상자가 나옵니다. 지금 이 글에서 용어를 설명할 때 쓰고 있는 형태입니다. 인용문이나 짧은 강조에도 씁니다.

단계 흐름도

<div class="itd-flow">
  <div class="itd-step me"><b>1. 준비</b><span>설명</span><i>사람이 함</i></div>
  <div class="itd-step ai"><b>2. 실행</b><span>설명</span><i>AI가 함</i></div>
  <div class="itd-step me"><b>3. 확인</b><span>설명</span><i>사람이 함</i></div>
</div>
<p class="itd-flow-cap">흐름도 아래 설명</p>

PC에서는 가로로 놓이고 사이에 화살표가 들어갑니다. 모바일에서는 세로로 쌓이며 화살표 방향도 아래로 바뀝니다.

me와 ai는 배지 색을 구분하는 이름표입니다. 다른 기준으로 나누고 싶으면 이름은 그대로 두고 안의 글자만 바꾸면 됩니다.

코드 상자

지금 이 글에서 코드를 보여줄 때 쓰고 있는 상자입니다.

<pre class="itd-code">여기에 코드를 넣습니다</pre>
주의 — 코드 안에 꺾쇠 기호가 들어가면 브라우저가 그것을 태그로 인식해 화면에서 사라집니다. 코드로 보여주려면 여는 기호를 &lt;로, 닫는 기호를 &gt;로 바꿔 써야 합니다. 이 글의 코드 상자도 전부 그렇게 처리했습니다.

내 스타일로 바꾸는 방법

전체를 이해할 필요는 없습니다. 색상 값만 찾아 바꾸면 됩니다.

바꿀 값바뀌는 곳
#24462F표 머리글 배경, 상자 세로선, 소제목 색
#F2EBDC표 머리글 글자색, 흐름도 배지 글자색
#FDFCF9표 홀수 줄, 상자 안쪽 배경
#DCD3C0표 테두리, 구분선
#6B6459캡션과 각주 글자색

※ 편집기의 찾아 바꾸기로 한 번에 처리하면 빠릅니다.

#24462F와 #F2EBDC는 제 경우엔 짝입니다. 하나는 배경이고 하나는 그 위에 얹히는 글자색이라, 둘의 명암 차이가 충분해야 글씨가 읽힙니다.

색을 고르기 어려우시면 진한 색 하나와 아주 연한 색 하나만 정하고 나머지는 그대로 두셔도 됩니다. 회색 계열은 어떤 색과도 무난하게 어울립니다.

전체 코드

실제로 이 블로그에서 쓰고 있는 전문입니다. 그대로 복사해 쓰셔도 됩니다.

구역이 주석으로 나뉘어 있어서 필요한 부분만 가져가셔도 됩니다. 표만 쓰실 거면 표 구역만 복사하시면 됩니다.

전체 코드 펼쳐보기 
/* ═══════════════════════════════════════
   잇다. 블로그 공통 스타일
   테마 > 맞춤설정 > 고급 > CSS 추가
   최종 갱신 2026-08
   ═══════════════════════════════════════ */


/* ───── 1. 기본 표 (itd-table) ───── */

.itd-scroll {
  overflow-x: auto;
  margin: 24px 0;
}
table.itd-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 15px;
  line-height: 1.5;
  table-layout: fixed;
}
table.itd-table th {
  background: #24462F;
  color: #F2EBDC;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid #24462F;
  word-break: keep-all;
}
table.itd-table td {
  padding: 10px 8px;
  border: 1px solid #DCD3C0;
  text-align: center;
  color: #2B2B28;
  word-break: keep-all;
}
table.itd-table tbody tr:nth-child(odd) {
  background: #FDFCF9;
}
table.itd-table td:first-child {
  font-weight: 600;
}
table.itd-table col:first-child {
  width: 22%;
}
.itd-caption {
  font-size: 13px;
  color: #6B6459;
  margin-top: 8px;
  text-align: center;
}


/* ───── 2. 검증 대조표 (itd-vt) ───── */

.itd-verify {
  overflow-x: auto;
  margin: 24px 0;
}
table.itd-vt {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 14px;
  line-height: 1.5;
  table-layout: fixed;
}
table.itd-vt th {
  background: #24462F;
  color: #F2EBDC;
  padding: 10px 8px;
  border: 1px solid #24462F;
  text-align: center;
  word-break: keep-all;
}
table.itd-vt td {
  padding: 9px 8px;
  border: 1px solid #DCD3C0;
  color: #2B2B28;
  text-align: center;
  word-break: keep-all;
  vertical-align: middle;
}
table.itd-vt td.n { font-weight: 700; }
table.itd-vt td.iss { font-weight: 600; }
table.itd-vt td.fct { color: #6B6459; font-size: 13px; }
table.itd-vt tbody tr:nth-child(odd) { background: #FDFCF9; }

/* 판정 표시 */
.itd-vt .ok  { color: #1E7A5A; }
.itd-vt .mid { color: #A8730F; }
.itd-vt .no  { color: #B03A31; }
.itd-vt .na  { color: #A9A79E; }

/* 그룹 구분 행 */
table.itd-vt tr.grp td {
  background: #EFE9DB;
  font-weight: 700;
  color: #24462F;
  font-size: 13px;
  letter-spacing: .03em;
}

/* 범례 */
.itd-legend {
  font-size: 13px;
  color: #6B6459;
  margin: 8px 0 0;
  line-height: 1.8;
  text-align: center;
}


/* ───── 3. 용어 설명 · 인용 박스 (itd-term) ───── */

.itd-term {
  border-left: 3px solid #24462F;
  padding: 10px 16px;
  margin: 16px 0;
  background: #FDFCF9;
  font-size: 15px;
  line-height: 1.6;
  color: #4A4A45;
  text-align: left;
}
.itd-term b {
  color: #24462F;
}
.itd-term ol,
.itd-term ul {
  margin: .5em 0 0;
  padding-left: 1.2em;
}
.itd-term li {
  margin-bottom: .25em;
}


/* ───── 4. 본문 이미지 ───── */

.post-body img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}
.post-body .separator a {
  margin: 0 !important;
}


/* ───── 5. 모바일 ───── */

@media (max-width: 600px) {
  table.itd-table { font-size: 14px; }
  table.itd-table th,
  table.itd-table td { padding: 8px 6px; }

  table.itd-vt { font-size: 13px; }
  table.itd-vt th,
  table.itd-vt td { padding: 7px 5px; }
}


/* ───── 6. 흐름도 (itd-flow) ───── */

.itd-flow {
  display: flex;
  flex-wrap: nowrap;
  margin: 28px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.itd-step {
  flex: 1 0 138px;
  border: 1px solid #DCD3C0;
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  background: #FDFCF9;
  position: relative;
  margin-right: 22px;
}
.itd-step:last-child { margin-right: 0; }
.itd-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: #A9A79E;
  font-size: 16px;
  line-height: 1;
}
.itd-step b {
  display: block;
  color: #24462F;
  font-size: 14px;
  margin-bottom: 4px;
}
.itd-step span {
  display: block;
  font-size: 13px;
  color: #6B6459;
  line-height: 1.45;
}
.itd-step i {
  display: inline-block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.itd-step.me i { background: #24462F; color: #F2EBDC; }
.itd-step.ai i { background: #EFE9DB; color: #24462F; }

.itd-flow-cap {
  font-size: 13px;
  color: #6B6459;
  text-align: center;
  margin: 4px 0 0;
}

@media (max-width: 600px) {
  .itd-flow { flex-direction: column; overflow-x: visible; }
  .itd-step { margin-right: 0; margin-bottom: 26px; }
  .itd-step:not(:last-child)::after {
    content: "\2193";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -21px;
    transform: translateX(-50%);
  }
}

/* ───── 7. 코드 블록 (itd-code) ───── */

pre.itd-code {
  background: #24462F;
  color: #E8E3D5;
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  font-family: Consolas, Monaco, "Courier New", monospace;
  margin: 16px 0;
  white-space: pre;
  tab-size: 2;
}
code.itd-inline {
  background: #EFE9DB;
  color: #24462F;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 14px;
  font-family: Consolas, Monaco, "Courier New", monospace;
}

@media (max-width: 600px) {
  pre.itd-code { font-size: 12px; padding: 12px; }
}

/* ───── 8. 접기 (itd-fold) ───── */

details.itd-fold {
  border: 1px solid #DCD3C0;
  border-radius: 6px;
  background: #FDFCF9;
  padding: 12px 16px;
  margin: 18px 0;
}
details.itd-fold summary {
  cursor: pointer;
  font-weight: 700;
  color: #24462F;
  font-size: 15px;
  list-style: none;
}
details.itd-fold summary::before {
  content: "\25B8 ";
  color: #6B6459;
}
details.itd-fold[open] summary::before {
  content: "\25BE ";
}
details.itd-fold summary::-webkit-details-marker { display: none; }
details.itd-fold[open] summary { margin-bottom: 10px; }

넣고 나서 확인할 것

확인정상이라면
표머리글에 색이 들어가고 줄마다 배경이 번갈아 나옴
용어 상자왼쪽에 세로선, 글자 크기는 본문과 비슷
흐름도PC에서 가로 배치, 사이에 화살표
모바일표는 가로 스크롤, 흐름도는 세로 배치

적용이 안 된 것처럼 보이면 브라우저를 강하게 새로고침해 보세요. 이전 화면이 남아 있는 경우가 많습니다.

그래도 안 되면 본문의 이름표를 확인하세요. class="itd-table"처럼 정확히 적혀 있어야 합니다. 철자가 하나만 달라도 적용되지 않습니다.

한 번 만들어두면 달라지는 것

처음에는 표 하나 정돈하려고 시작한 일이었습니다. 그런데 하고 나니 다른 게 따라왔습니다.

글을 쓸 때 서식을 고민하지 않게 됐습니다. 표가 필요하면 틀을 복사해 내용만 채웁니다. 무슨 색을 쓸지, 여백을 얼마로 할지 매번 정하지 않으니 글 쓰는 시간이 실제로 줄었습니다.

블로그 전체의 인상도 일정해졌습니다. 열 편을 써도 표는 같은 모양이고 상자도 같은 형태입니다. 사소해 보이지만 방문자가 느끼는 완성도는 이런 데서 갈립니다.

작업 자체는 붙여넣기 한 번이면 끝납니다. 어렵게 느껴지는 것에 비해 손이 많이 가지 않고, 한 번 해두면 계속 쓰는 자산이 됩니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

[구글 애드센스 #01] 티스토리·워드프레스 대신 블로그스팟을 고른 이유

이미지
첫 번째 프로젝트는 바로 이 블로그 자체입니다. 첫 프로젝트, 'AI로 블로그 운영 자동화' AI를 활용한 블로그 자동화 는 부업 시장에서 이미 널리 알려진 방법입니다. 하지만 어떤 구조를 가지고 어디까지 자동화가 되느냐는 강사마다 다릅니다. '무작정 따라 하면 된다'는 강의도 몇 번 들어봤지만, 각종 오류와 시스템 개편 탓에 따라가기가 여간 어려운 게 아니었습니다. 그래서 결론을 이렇게 냈습니다. 못 따라 하겠으면 직접 해보자. 그리고 '자동화'만 무조건 주장하기보단 내가 '할 수 있는' 방법을 찾아보자. 이 프로젝트의 목표는 두 가지입니다. AI를 활용한 블로그 (반)자동화 시스템 구축 구글 애드센스를 통한 광고 수익 창출 오늘의 주제는 그 첫 단계, '어디에 글을 쓸 것인가' 입니다. 후보는 세 개 티스토리, 워드프레스, 블로그스팟. 네이버 블로그는 UI와 검색 접근성에서 분명한 장점이 있지만, 구글 애드센스를 통한 수익화가 목적이라 후보에서 제외했습니다. 네이버는 '네이버 애드포스트'라는 별도의 광고 수익 모델을 사용합니다. 티스토리 카카오가 운영하는 블로그 플랫폼입니다. '다음' 검색 노출에 유리하고, 국내 서비스답게 UI와 접근성이 좋습니다. 구글 애드센스 광고도 넣을 수 있습니다. 다만 플랫폼이 자체 광고를 함께 노출하는 구조라 내 애드센스 광고와 자리를 나눠 갖게 됩니다. 그만큼 수익이 줄어드는 셈이죠. 이 자체 광고 정책이 변경되면서 블로거의 독립성이 떨어진다는 지적도 나왔습니다. 워드프레스 가장 큰 장점은 자유도 입니다. 디자인부터 각종 편의 기능까지 플러그인으로 구현할 수 있고, SEO 도구도 잘 갖춰져 있습니다. SEO(Search Engine Optimization) — 검색 엔진 최적화. 검색자의 의도에 맞춰 콘텐츠를 만들고, 태그와 링크 구조를 개선해 검색 결과에 잘...
자세한 내용 보기

[구글 애드센스 #04] 블로그스팟 편집기 최소 사용법 — 서식과 이미지에서 헤매지 않기

이미지
블로그스팟 편집기는 워드나 네이버 블로그처럼 직관적이지 않습니다. 표를 넣거나 이미지를 올리는 단순한 작업에서도 예상 못 한 곳에서 막힙니다. 처음 쓰시는 분이 같은 데서 헤매지 않도록, 실제로 부딪힌 문제와 해결 방법을 정리합니다. 결론부터 — 지켜야 할 네 가지 규칙 이유 HTML 모드에서만 작업 작성 모드로 전환하면 서식이 정리됨 서식은 테마 CSS에 본문에 쓰면 저장할 때 사라짐 이미지 삽입은 PC에서 모바일 앱 마크업이 충돌을 일으킴 대체 텍스트도 HTML에서 설정 창을 거치면 서식이 정리됨 ※ 급하신 분은 여기까지만 보셔도 됩니다. 왜 이런 규칙이 필요한지, 하나씩 풀어보겠습니다. 공들여 만든 표가 저장 한 번에 사라졌다 첫 글에 플랫폼 비교표를 넣었습니다. 색을 입히고 가운데 정렬을 맞추고 모바일에서 가로 스크롤이 되게 만들었습니다. 그런데 저장하고 다시 열어보니 표가 밋밋한 기본 형태로 돌아와 있었습니다. 색도 테두리도 정렬도 전부 사라진 채 내용만 남아 있었습니다. 원인은 편집기의 동작 방식이었습니다. HTML 모드와 작성 모드를 오갈 때, 그리고 모바일 앱에서 저장할 때 본문에 직접 지정한 서식을 정리해버립니다. 인라인 스타일 — 각 태그에 직접 붙이는 서식 지정. style="color:green" 처럼 태그 안에 색이나 여백을 써넣는 방식입니다. 여러 번 다시 넣어봤지만 결과는 같았습니다. 제 실수가 아니라 편집기가 원래 그렇게 만들어져 있는 것이었습니다. 해결 — 서식을 본문 밖으로 빼기 서식을 본문에 쓰지 않고 테마에 미리 심어두는 방식으로 바꿨습니다. 테마 쪽에 '이런 이름이 붙은 표는 이렇게 보여라'라고 규칙을 정해두고, 본문에는 이름표만 답니다. 편집기가 지우는 건 본문에 적힌 서식이지 이름표가 아니라서, 이...
자세한 내용 보기

[구글 애드센스 #10] 글 쓰면서 SEO 신경 안 쓰는 법 — 점검 도구를 만들었습니다

지난 글에서 SEO 항목을 정리하고 나니 다음 문제가 남았습니다. 이걸 글 쓸 때마다 어떻게 챙기느냐 입니다. 실제로 해보면 글이 이상해집니다. 키워드를 넣어야 한다는 생각으로 쓰면 문장이 뒤틀리고, 소제목을 몇 개 넣을지 세다 보면 흐름이 끊깁니다. 주객이 전도되는 거죠. 쓰기와 점검을 분리하기 결론부터 말하면 글 쓸 때는 신경 쓰지 않는 게 맞습니다. 자유롭게 쓰고, 다 쓴 뒤에 점검합니다. 순서를 나누면 문장이 뒤틀릴 일이 없습니다. 앞서 서식을 본문에서 빼내 테마로 옮겼던 것과 같은 발상입니다. 두 가지를 동시에 하려니 어려웠던 것이지, 나눠서 하면 각각은 간단합니다. 항목을 두 종류로 나눈다 점검할 것도 줄일 수 있었습니다. 대부분의 항목은 한 번 설정하면 끝나는 것 이었습니다. 구조 항목 · 한 번만 글 항목 · 매번 사이트맵 제출 제목 반응형 테마 퍼머링크 보안 연결 검색 설명 검색 설명 기능 활성화 이미지 대체 텍스트 이미지 표시 규칙 링크와 링크 텍스트 라벨 구조 소제목 구성 ※ 왼쪽은 이미 끝난 작업입니다. 매번 볼 것은 오른쪽 여섯 개뿐입니다. 이렇게 나누고 보니 실제로 매번 확인할 건 여섯 개였고, 그중 넷은 이미 발행 전 순서에 들어 있었습니다. 스무 가지를 챙겨야 할 것 같던 느낌은 두 종류를 구분하지 않고 나열한 설명들 때문이었습니다. 점검 도구를 만들어봤습니다 여섯 개도 매번 눈으로 세려니 번거로웠습니다. 워드프레스에는 이 역할을 하는 플러그인이 있는데 블로그스팟에는 없습니다. 그래서 만들었습니다. 제목, 퍼머링크, 검색 설명, 본문을 붙여넣으면 항목별로 확인해주는 페이지입니다. 검색 노출 점검기 에서 바로 쓰실 수 있고, 코드는 이 글 아래에 전문을 올려두었습니다. 구역을 셋으로 나눈 이유 만들면서 가장 고민한 부분입니다. 검사 항목을 한 줄로 나열하면 순위 요소와 아닌 것이 섞여 버립...
자세한 내용 보기