티스토리 스킨 CSS 파일을 열었더니 3,000줄이 넘어서 그냥 닫아버린 적 있으신가요? 저는 있습니다. 글 제목 폰트 하나 바꾸려고 Ctrl+F로 "title"을 검색해서 나오는 항목을 전부 열어보던 시절이요. 어떤 "title"이 내가 바꾸려는 그 제목인지 알 수 없어서, 하나씩 바꿔보고 저장하고 확인하고를 반복했습니다. F12 하나로 그 시간이 거의 사라집니다.
CSS 위치를 모른다는 건 어떤 느낌인가
스킨 편집을 처음 시작하면 가장 먼저 막히는 지점이 있습니다. "수정하고 싶은 부분은 알겠는데, 코드 어디에 있는지 모르겠다"는 것입니다. CSS 파일이 길면 길수록 이 막막함은 커지고, Ctrl+F로 뭘 검색해야 할지도 모른 채 위아래로 코드를 긁어 내리게 됩니다.
직접 겪어봤는데, 이 상태에서 잘못된 선택자를 건드리면 생각지 못한 곳이 무너집니다. 선택자란 CSS에서 어떤 HTML 요소에 스타일을 적용할지 지정하는 표현식으로, .post-title이나 #header처럼 점이나 샵으로 시작하는 코드가 바로 그것입니다. 저는 한 번 잘못된 선택자를 수정했다가 목록 레이아웃 전체가 무너졌고, 어딜 건드렸는지 몰라서 결국 스킨 전체를 초기화하는 것으로 마무리했습니다. 그날 이후로 F12를 제대로 배워야겠다고 마음먹었습니다.
개발자 도구라는 이름이 주는 부담감이 있습니다. "이건 개발자들이 쓰는 거 아닌가"라는 생각이요. 그런데 실제로 써보니 블로그 CSS 위치를 찾는 데 쓸 수 있는 가장 빠른 도구가 바로 이겁니다. 개발자 전용이 아닙니다.
F12를 누르면 뭐가 보이는가
크롬에서 F12를 누르거나, 수정하고 싶은 요소 위에서 우클릭 후 '검사'를 선택하면 개발자 도구가 열립니다. 화면이 처음에는 복잡해 보이지만, 실제로 쓰는 영역은 두 곳입니다.
왼쪽에 보이는 것이 DOM 트리입니다. DOM이란 웹페이지의 HTML 구조를 트리 형태로 표현한 것으로, 페이지를 구성하는 요소들이 부모와 자식 관계로 펼쳐져 있습니다. 여기서 특정 요소를 클릭하면 오른쪽 Styles 패널에 해당 요소에 적용된 CSS 속성들이 나타납니다.
Inspect 모드(Ctrl+Shift+C)를 쓰면 훨씬 빠릅니다. 이 모드를 켜고 화면의 요소 위에 마우스를 올리면 해당 요소가 하이라이트되고, 클릭하는 순간 DOM 트리에서 그 위치로 바로 이동합니다. 이때 오른쪽 Styles 패널에 클래스명과 CSS 속성이 같이 나옵니다. 저는 이걸 알고 나서 작업 시간이 체감상 5분의 1로 줄었습니다.
개발자 도구 입문 글 대부분이 기능 나열로 끝나는 경우가 많은데, 솔직히 처음 배울 때 진짜 막히는 건 "이 패널이 뭘 말하는지 모르겠다"는 해석의 문제였습니다. 기능을 아는 것보다 패널을 읽는 방법이 먼저입니다.
Styles 패널에서 취소선이 그어진 CSS는 왜 그런가
Styles 패널을 열면 같은 속성이 여러 번 나오는 경우가 있습니다. 그중 일부는 취소선이 그어져 있습니다. 이것이 캐스케이딩 충돌의 결과입니다. CSS는 같은 속성이 여러 곳에서 선언됐을 때 특이도가 높은 선택자나 나중에 선언된 규칙이 우선 적용되고, 나머지는 취소선으로 표시됩니다.
특이도란 선택자가 얼마나 구체적인지를 수치로 나타낸 개념으로, #id가 .class보다 특이도가 높고, .class는 태그 선택자보다 높습니다. 티스토리 스킨처럼 CSS가 복잡하게 쌓인 경우 취소선이 많이 보이는 건 이 때문입니다. 초보자가 가장 혼란스러워하는 부분 중 하나입니다.
Computed 탭은 이 혼란을 정리해줍니다. Computed 탭이란 여러 스타일 규칙이 충돌할 때 최종적으로 어떤 값이 브라우저에 실제 적용되는지 보여주는 패널입니다. Styles에 취소선이 많아 어느 값이 살아 있는지 헷갈릴 때, Computed로 가면 최종 적용 값 하나만 깔끔하게 확인할 수 있습니다.
Styles 패널에서 값을 직접 수정하면 화면에 즉시 반영됩니다. 단, 새로고침하면 초기화됩니다. 이 점을 이용해서 값을 미리 테스트하고, 마음에 드는 결과가 나오면 그 값을 스킨 편집기에 옮겨 적는 흐름으로 작업하면 실수가 줄어듭니다. 이게 습관이 된 뒤로 스킨 편집이 실험하는 과정으로 바뀌었습니다. 두려워하면서 고치는 게 아니라, 먼저 눈으로 확인하고 옮기는 것으로요.
실제 작업 순서
수정하고 싶은 요소 위에서 우클릭 후 '검사'를 클릭합니다. 오른쪽 Styles 패널에서 해당 클래스명을 확인합니다. 패널에서 CSS 값을 직접 수정해 결과를 미리 확인합니다. 마음에 드는 값이 나오면 티스토리 스킨 편집기에서 해당 클래스명을 검색한 뒤 값을 교체합니다.
이 흐름을 한 번 몸에 익히면 CSS 파일 전체를 스크롤하는 일이 없어집니다. Inspect 모드에서 요소에 마우스를 올리면 그 요소의 마진과 패딩이 색깔별로 시각화됩니다. 마진은 요소 바깥 여백, 패딩은 요소 안쪽 여백을 뜻하는데, 레이아웃이 어긋났을 때 어느 쪽 여백이 문제인지 바로 눈으로 확인할 수 있어서 꽤 유용합니다. 텍스트로 읽는 것보다 시각 확인이 훨씬 빠릅니다.
달라진 건 도구가 아니라 도구를 읽는 방법이었습니다. 지금도 블로그 스킨을 수정할 때 F12 없이는 시작하지 않습니다. 수정하고 싶은 요소를 클릭하고, 클래스명을 메모하고, 스킨 편집기에서 검색해서 바꾸는 이 흐름이 자리 잡히고 나서는 5분이 채 걸리지 않습니다. 처음에는 그냥 F12 눌러보는 것부터 시작하면 충분합니다. 클릭 몇 번이 30분짜리 코드 탐색을 대체해줍니다.
참고:
- Chrome DevTools 공식 문서
- MDN Web Docs - CSS 디버깅
- 티스토리 스킨 편집 가이드