블로그 디자인을 고치려면 어디를 고쳐야 하는지부터 알아야 합니다. 스킨 편집 화면에서 CSS를 고치려는데 "이 글씨가 무슨 이름으로 적혀 있는지" 몰라서 막히는 경우가 많습니다. 크롬 같은 브라우저에는 이미 그 이름을 알려 주는 기능이 들어 있고, 이름을 확인하는 용도라면 어렵지 않습니다. 이 글은 크롬 개발자 도구(DevTools) 공식 문서를 바탕으로, 블로그를 고칠 때 필요한 부분만 골라 순서대로 정리했습니다.
여는 방법
고치고 싶은 부분 위에서 오른쪽 클릭 → 검사를 누르면 됩니다. 화면 옆이나 아래에 창이 열리고, 방금 누른 부분이 Elements 패널에 표시됩니다. 크롬 공식 문서도 이 방법을 가장 먼저 소개합니다.
단축키로도 열 수 있습니다. 공식 문서 기준으로 Elements 패널은 윈도우 등 맥이 아닌 환경에서 Ctrl+Shift+C, 맥에서 Cmd+Option+C입니다. 콘솔은 Ctrl+Shift+J(맥은 Cmd+Option+J)이고, 마지막에 쓰던 패널은 F12 또는 Ctrl+Shift+I(맥은 Cmd+Option+I)로 엽니다. Elements 단축키는 화면 위를 훑으며 요소를 고르는 검사 모드로 시작하는 점이 다릅니다.
엣지와 파이어폭스에도 비슷한 기능이 있지만 메뉴 이름과 화면 배치가 조금씩 다릅니다. 이 글의 설명은 크롬 기준입니다. 사파리는 설정에서 개발자용 메뉴를 먼저 켜야 나온다고 알려져 있는데, 이 부분은 이 글이 참고한 공식 문서에서 다루지 않으므로 사파리를 쓰신다면 애플 안내를 따로 확인하세요.
두 군데만 본다
창에 내용이 많지만 블로그를 고칠 때는 두 군데면 충분합니다.
- 왼쪽(또는 위쪽) DOM 트리 — 페이지의 구조입니다. 눌렀던 부분이
<div class="post-item">같은 형태로 나옵니다. 여기class뒤에 적힌 게 고칠 때 쓸 이름입니다. - 오른쪽(또는 아래쪽) Styles 탭 — 그 부분에 적용된 CSS 규칙 목록입니다. 지금 어떤 규칙이 걸려 있는지 보입니다.
창의 배치는 도킹 위치에 따라 달라질 수 있습니다. 창이 아래에 붙어 있으면 트리가 왼쪽, Styles가 오른쪽에 있고, 옆에 붙어 있으면 위아래로 나뉩니다. 위치가 달라도 "구조 한 곳, 꾸밈 한 곳"이라는 구분은 같습니다.
바로 고쳐 볼 수 있다
가장 쓸모 있는 기능입니다. Styles 탭에서 값을 바꾸면 화면이 곧바로 바뀝니다. 공식 문서가 소개하는 방법은 다음과 같습니다.
- 선언 추가 —
element.style을 누르고 속성 이름(예:background-color)을 쓴 뒤 Enter, 값을 쓰고 다시 Enter를 누릅니다. - 클래스 켜고 끄기 —
.cls버튼으로 클래스 이름을 추가하고, 체크박스로 적용 여부를 바꿔 봅니다. - 마우스를 올렸을 때 모양 보기 —
:hov를 눌러:hover같은 상태를 체크하면, 마우스를 올리지 않아도 그 상태의 규칙을 볼 수 있습니다. - 여백 조절 — 사이드바 보기를 켜면 박스 모델 그림이 나오고, 그 안의 숫자를 더블클릭해 바꿀 수 있습니다.
배경색을 바꿔 보고, 글자 크기를 키워 보고, 마음에 드는 값을 찾은 다음 그 값을 스킨 편집의 CSS에 옮겨 적으면 됩니다.
줄 그어진 규칙이 뜻하는 것
Styles 목록에서 줄이 그어진 항목이 보일 때가 있습니다. 일반적으로 이는 같은 속성에 더 우선하는 다른 규칙이 있어서 그 값이 적용되지 않았다는 표시입니다. 다만 크롬 공식 CSS 문서의 해당 페이지에는 이 표시에 대한 설명이 따로 없으므로, 이 해석은 일반적인 CSS 우선순위 원리에 따른 설명이라는 점을 밝혀 둡니다.
내가 적은 규칙이 화면에 안 먹을 때는 오른쪽 목록에서 내 규칙에 줄이 그어져 있는지 먼저 봅니다. 줄이 그어져 있다면 스킨의 기본 규칙이 더 강한 경우가 많습니다. 이때 같은 속성을 더 구체적인 선택자로 쓰거나 !important를 붙이는 방법이 있는데, 후자는 나중에 고치기 어려워지니 마지막 수단으로 두는 편이 낫습니다.
이 우선순위를 MDN은 구체성(specificity)이라고 부릅니다. 같은 속성을 두고 규칙이 부딪히면 아이디(#이름)가 클래스(.이름)보다, 클래스가 태그 이름(p 같은 것)보다 앞섭니다. 구체성이 같다면 나중에 적힌 규칙이 이깁니다. 글에 직접 붙인 style="" 속성은 일반 규칙보다 강하고, 이를 이기는 유일한 방법이 !important입니다. MDN은 구체성을 뛰어넘으려고 !important를 쓰는 것을 피해야 할 나쁜 습관으로 설명하며, 먼저 선택자를 더 구체적으로 쓰거나 같은 구체성의 규칙을 뒤쪽에 두는 방법을 권합니다.
화면 크기 바꿔 보기
DevTools 위쪽 막대에 기기 툴바 전환(Toggle device toolbar) 버튼이 있습니다. 누르면 폰 크기로 화면을 볼 수 있습니다. 공식 문서에 따르면 이 모드는 다음을 흉내 냅니다.
- 화면 폭: 직접 끌어서 조절하거나 기기 크기를 고르고, 320px부터 2560px까지 폭 프리셋을 쓸 수 있습니다.
- 화면 배율(기기 픽셀 비율), 모바일 또는 데스크톱 유형, 터치 여부, 가로 회전
- CPU 속도 제한: 중간급 모바일은 4배, 저사양 모바일은 6배 느리게
- 네트워크 제한: 중간급은 빠른 3G, 저사양은 느린 3G 수준
다만 공식 문서도 이 기능을 모바일 환경의 "대략적인 근사"라고 설명하며, 실제 모바일 CPU의 구조까지 재현하지는 못한다고 밝힙니다. 정확하게 확인하려면 실제 기기를 연결하는 원격 디버깅을 권합니다. 그래서 블로그 글이 폰에서 잘 보이는지 같은 중요한 확인은 마지막에 실제 폰으로 한 번 더 열어 보는 게 맞습니다.
엣지 브라우저에서도 같은 방식입니다
마이크로소프트의 엣지 개발자 문서도 거의 같은 순서를 안내합니다. 고칠 글자 위에서 오른쪽 클릭 후 검사를 누르고, Elements 도구의 Styles 패널에서 element.style을 눌러 background-color 같은 속성을 입력합니다. :hov 버튼으로 :hover, :active, :focus, :visited 상태를 고정해 볼 수 있고, Box Model 그림에서 여백 숫자를 더블클릭해 100px처럼 바꿀 수도 있습니다. 숫자만 쓰면 픽셀로 취급하지만 25%나 10vw도 받습니다. 기기 모드는 Ctrl+Shift+M(맥은 Command+Shift+M)으로 열고, 여기서 미디어 쿼리 막대를 켜면 화면 폭이 바뀌는 지점을 눈으로 볼 수 있습니다. 크롬과 화면 구성이 거의 같아서 어느 쪽을 쓰셔도 이 글의 순서를 그대로 따라 할 수 있습니다.
주의할 것
일반적으로 Styles 탭에서 바꾼 값은 그 탭의 화면에만 적용되고 새로고침하면 원래대로 돌아옵니다. 다만 이 동작은 공식 CSS 문서 페이지에 명시돼 있지 않습니다. 크롬에는 작업 폴더를 연결해 변경을 파일에 저장하는 기능이 따로 있으므로, 그 기능을 켠 적이 없다면 "저장되지 않는다"고 생각하고 움직이는 쪽이 안전합니다.
실수를 줄이는 방법은 단순합니다. 마음에 드는 값이 나오면 바로 메모장에 선택자 이름, 속성, 값 세 가지를 적어 둡니다. 새로고침이나 탭 닫기 한 번이면 작업이 사라질 수 있습니다.
블로그 수정 순서: 막히는 지점과 해결
아래 표는 이 글에서 따로 정리한 "화면 순서"입니다. 스킨 CSS를 고치다 막혔을 때, 어느 단계에서 막혔는지에 따라 무엇을 확인할지 정리했습니다.
| 순서 | 하는 일 | 막히는 지점 | 해결 방법 |
|---|---|---|---|
| 1 | 고칠 부분 위에서 오른쪽 클릭 → 검사 | 메뉴에 검사가 없다 | F12 또는 Ctrl+Shift+I(맥은 Cmd+Option+I)로 열고 Elements에서 요소를 직접 고릅니다. |
| 2 | DOM 트리에서 class 이름 확인 | class 이름이 여러 개다 | 점으로 이어 쓰면 모두 가진 요소를 가리킵니다. 가장 구체적인 하나를 먼저 시험합니다. |
| 3 | Styles에서 값을 바꿔 보기 | 바꿔도 화면이 안 변한다 | 줄 그어진 규칙인지, 속성 이름 철자가 맞는지 봅니다. |
| 4 | 마음에 드는 값을 메모 | 새로고침하니 값이 사라졌다 | 저장되지 않는 것이 기본입니다. 선택자·속성·값을 바로 적어 둡니다. |
| 5 | 스킨 편집의 CSS에 옮겨 적기 | 옮겼는데 실제 블로그에 안 먹는다 | 저장 후 캐시를 지우고 다시 열고, 같은 요소를 다시 검사해 새 규칙이 목록에 있는지 확인합니다. |
| 6 | 폰 모드로 확인 후 실제 폰 확인 | 폰 모드와 실제 모습이 다르다 | 폰 모드는 근사치입니다. 실제 폰에서 최종 확인합니다. |
작은 연습: 제목 글씨 색 바꿔 보기
처음 쓰신다면 아래 순서로 한 번 따라 해 보세요. 블로그 글 제목 위에서 오른쪽 클릭 후 검사를 누릅니다. DOM 트리에서 제목을 감싼 요소의 class 이름을 읽고, Styles 탭에서 color 값을 찾아 다른 색으로 바꿉니다. 화면의 제목 색이 바로 바뀌면 이름을 제대로 찾은 것입니다. 이제 같은 선택자와 색 값을 메모해 두었다가 스킨 편집의 CSS에 옮겨 적고 저장합니다. 이 연습에서 달라지는 것은 색 하나뿐이라서, 문제가 생겨도 원인이 어디인지 바로 알 수 있습니다. 여기에 익숙해지면 글자 크기, 여백, 배경색 순서로 하나씩 범위를 넓혀 가면 됩니다.
한 번에 하나만 바꾸는 이유
수정 전후를 비교하려면 한 번에 많은 것을 바꾸지 않는 편이 좋습니다. 색 하나, 여백 하나처럼 변경 범위를 좁히고 날짜와 이유를 적어 두면 나중에 어떤 선택이 효과 있었는지 알 수 있습니다. 스킨을 통째로 바꾼 뒤에 이상해졌을 때 원인을 찾기 어렵다는 점이 이 방식의 가장 큰 이유입니다.
블로거(Blogger)를 쓰신다면 구글 도움말이 안내하는 백업 순서가 있습니다. 블로그를 고른 뒤 왼쪽 메뉴의 테마에서 맞춤설정 버튼 옆 아래 화살표를 누르고, 백업을 선택한 다음 대화상자의 다운로드를 누르면 현재 테마 사본이 내려받아집니다(영문 화면에서는 Theme, CUSTOMIZE, Backup, DOWNLOAD). 화면 이름은 바뀔 수 있으니 실제 화면과 도움말을 함께 확인하세요.
스킨 편집 화면에서 수정하기 전에는 템플릿 백업을 받아 두는 것도 좋은 습관입니다. 문제가 생기면 백업으로 되돌릴 수 있어서, 시험해 보는 부담이 크게 줄어듭니다.
짧은 점검표
- 고칠 요소의 class 이름을 확인했는가 — 눈으로 보이는 이름이 아니라 DOM 트리에 적힌 이름을 씁니다.
- 줄 그어진 규칙인지 봤는가 — 안 먹는 규칙의 첫 번째 의심 대상입니다.
- 값을 메모했는가 — 검사 창에서 바꾼 값은 기본적으로 저장되지 않는다고 가정합니다.
- 템플릿 백업을 받았는가 — 스킨에 옮기기 전에 원본을 보관합니다.
- 실제 폰으로 확인했는가 — 기기 모드는 근사치입니다.
업데이트
이 글은 크롬 개발자 도구 공식 문서(2026-10-09 기준)의 단축키, Styles 탭 편집 방법, 기기 모드의 범위와 한계를 바탕으로 합니다. 공식 문서에 없는 부분(줄 그어진 규칙의 의미, 새로고침 시 값이 사라지는 동작, 사파리 설정)은 본문에 그렇다고 표시해 두었습니다. 단축키와 메뉴 이름은 크롬 버전에 따라 바뀔 수 있으니 실제 적용 전에는 아래 공식 문서를 확인하세요.
확인 자료
- Chrome DevTools 열기 (공식 문서) (확인: 2026-10-09)
- CSS 보기와 바꾸기 (Chrome DevTools 공식 문서) (확인: 2026-10-09)
- 기기 모드로 모바일 화면 흉내 내기 (Chrome DevTools 공식 문서) (확인: 2026-10-09)
- MDN: CSS 구체성(Specificity) (확인: 2026-10-18)
- Microsoft Edge DevTools: CSS 보기와 바꾸기 (확인: 2026-10-18)
- Blogger 도움말: 블로그 백업 또는 가져오기(테마 사본 저장) (확인: 2026-10-18)