스킨 편집 첫걸음, 내 블로그 CSS 위치 5분 만에 찾는 법
크롬 개발자 도구(F12)의 Elements 탭과 Inspect 기능만 알면 블로그의 어떤 요소든 CSS 위치를 5분 내에 찾아낼 수 있다. 스킨 편집의 첫 번째 장벽인 "어디를 수정해야 하는지 모르겠다"는 문제를 크롬 개발자 도구가 완전히 해결해준다.
스킨 편집 하고 싶은데 CSS 파일이 너무 길어서 어디에 뭐가 있는지 모르겠다는 분들이 많다. 개발자 도구 쓰는 법 알면 그게 다 해결된다. 이제부터 단계별로 설명할게요.
📋 목차
- 크롬 개발자 도구란 무엇인가
- 개발자 도구 여는 3가지 방법
- Elements 탭 구조 이해하기
- Inspect로 원하는 요소 CSS 찾는 법
- 실시간으로 CSS 수정하고 확인하기
- 티스토리 스킨에 적용하는 실전 흐름
- 자주 쓰는 개발자 도구 단축키 모음
🔍 크롬 개발자 도구란 무엇인가
"크롬 개발자 도구"는 구글 크롬 브라우저에 내장된 웹 개발 및 디버깅 도구다. 웹 페이지의 HTML 구조, CSS 스타일, JavaScript 동작, 네트워크 요청, 성능 지표 등을 실시간으로 확인하고 수정할 수 있다.
개발자 전용 도구라는 이름 때문에 어렵게 느껴지지만, 블로그 스킨 편집에 필요한 기능은 Elements 탭 하나만 이해해도 충분하다. 나머지 탭들은 나중에 필요할 때 하나씩 알아가면 된다.
🚀 개발자 도구 여는 3가지 방법
"개발자 도구"를 여는 방법은 세 가지다.
첫 번째는 키보드 단축키다. Windows에서는 F12 또는 Ctrl+Shift+I, Mac에서는 Cmd+Option+I를 누르면 바로 열린다.
두 번째는 마우스 우클릭 메뉴다. 원하는 요소 위에서 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택하면 해당 요소에 바로 포커스가 맞춰진 채로 개발자 도구가 열린다. 이게 CSS 찾을 때 가장 빠른 방법이다.
세 번째는 크롬 메뉴 → 도구 더보기 → 개발자 도구 경로다. 단축키가 안 될 때 사용하는 방법이다.
🗂️ Elements 탭 구조 이해하기
개발자 도구가 열리면 기본적으로 Elements 탭이 보인다. 왼쪽에는 HTML 구조가, 오른쪽에는 선택된 요소에 적용된 CSS가 표시된다.
HTML 영역에서 요소를 클릭하면 오른쪽 Styles 패널에 해당 요소에 적용된 모든 CSS가 표시된다. 위에 있는 스타일일수록 우선순위가 높고, 취소선이 그어진 스타일은 다른 스타일에 의해 덮어씌워진 것이다.
Computed 탭에서는 실제로 최종 적용된 스타일 값을 확인할 수 있다. 예를 들어 font-family가 최종적으로 어떤 폰트로 결정됐는지 여기서 확인하면 된다.
🎯 Inspect로 원하는 요소 CSS 찾는 법
"크롬 개발자 도구"의 Inspect 기능이 스킨 편집의 핵심이다. 사용 방법은 이렇다.
개발자 도구를 열고, 왼쪽 상단의 화살표 아이콘(커서 모양)을 클릭한다. 단축키는 Ctrl+Shift+C다. 그 다음 수정하고 싶은 블로그 요소 위에 마우스를 올리면 파란색으로 하이라이트되면서 클래스명과 크기가 보인다. 클릭하면 Elements 탭에서 해당 요소의 HTML이 선택되고, 오른쪽에 CSS가 표시된다.
여기서 확인한 클래스명을 티스토리 스킨 CSS에서 찾아 수정하면 된다. 예를 들어 글 제목의 CSS 위치가 .entry-title이라는 클래스에 있다는 걸 알았다면, 스킨 CSS에서 .entry-title을 검색해서 원하는 스타일을 수정하면 된다.
✏️ 실시간으로 CSS 수정하고 확인하기
개발자 도구의 강력한 기능 중 하나는 CSS를 실시간으로 수정해서 바로 화면에서 확인할 수 있다는 점이다. 이 변경사항은 새로고침하면 사라지기 때문에, 마음껏 실험해봐도 블로그에 영향이 없다.
Styles 패널에서 속성 값을 클릭하면 직접 수정할 수 있다. 예를 들어 font-size: 16px을 클릭해서 20px으로 바꾸면 화면에서 즉시 크기가 변하는 걸 볼 수 있다. 마음에 드는 값을 찾았으면 그 값을 실제 스킨 CSS에 적용하면 된다.
체크박스를 클릭하면 해당 속성을 켜고 끌 수도 있다. 어떤 CSS가 어떤 효과를 내는지 확인할 때 유용하다.
🏠 티스토리 스킨에 적용하는 실전 흐름
크롬 개발자 도구를 활용한 티스토리 스킨 편집의 실전 흐름이다.
먼저 내 블로그를 크롬으로 열고 F12를 누른다. 수정하고 싶은 요소(예: 글 제목 폰트)에서 마우스 오른쪽 클릭 → 검사를 선택한다. Elements 탭에서 해당 요소의 클래스명을 확인한다. Styles 패널에서 현재 적용된 CSS 속성과 값을 파악한다. 개발자 도구에서 원하는 값으로 실시간 테스트를 해본다. 마음에 드는 스타일이 나오면 티스토리 스킨 편집 → CSS 탭에서 해당 클래스를 찾아 적용한다.
이 흐름을 반복하다 보면 어느 순간부터 CSS 파일을 보는 눈이 생긴다. 처음엔 느려도 금방 익숙해진다.
⌨️ 자주 쓰는 개발자 도구 단축키 모음
"크롬 개발자 도구" 사용 시 자주 쓰는 단축키를 정리했다.
F12 또는 Ctrl+Shift+I는 개발자 도구 열기/닫기다. Ctrl+Shift+C는 Inspect 모드 토글이다. Ctrl+F는 Elements 탭에서 HTML 검색이다. Escape는 콘솔 열기/닫기다. Ctrl+Shift+M은 Device Mode(모바일 뷰) 토글이다.
Mac은 Ctrl 대신 Cmd를 쓰면 된다. 단축키를 외워두면 스킨 편집 속도가 확 빨라진다.
개발자 도구에 익숙해지면 티스토리 스킨 편집뿐 아니라 다른 사람 블로그에서 마음에 드는 디자인의 CSS를 참고하는 것도 가능해진다. 이게 "CSS 공부가 실전으로 이어지는" 순간이다.
출처 및 참고
- Chrome DevTools 공식: https://developer.chrome.com/docs/devtools
- MDN 개발자 도구: https://developer.mozilla.org/ko/docs/Tools
- 티스토리 스킨 편집: https://notice.tistory.com/category/편집기