개발자도구를 활용하면 블로그의 CSS 적용지점을 쉽게 찾아내고 변경 테스트를 해볼 수 있습니다. 이 기능을 알고, 모르고의 차이가 꽤 큰 편인데요. 블로그를 처음 수정해보는 사람들은 개발자 도구의 존재는 알아도, 이러한 기능이 있는지 여부까지는 알기 어려울 것 같아서 기능에 대하여 공유해보려 합니다.
여는글
블로그를 꾸미다보면 특정 요소가 맘에는 안드는데, 수정하려고 보니 2,000~5,000줄 쯤 되는 HTML을 돌아다니다가 지쳐 나가떨어지는 때가 많습니다.
특히 구글 블로그의 경우, 기본 기능이랍시고 제공하는 부분에 하필 커스터마이징이 안되게 세팅되어있는 부분들이 종종 있어서 결국은 CSS를 찾아서 수정해야 할 때가 많더라구요. 가령 검색창의 글씨체라던가, 항상 접힌채로 있는 카테고리 문제라던가, 본문 게시물 창의 테두리가 마냥 직각이라는 문제 등등 여러모로 세부조정이 필요한 경우가 꽤 있었습니다.
문제는 이러한 요소들의 CSS를 HTML 문서상에서는 일일이 찾기가 꽤나 어렵다는 것이죠. 그러나 다행히도 개발자 도구에서는 이러한 CSS가 어떤 순서로, 어떤 태그와 매칭되어 적용되고 있는지를 간단히 알 수 있도록 도와주는 기능이 있습니다.
개발자 도구
기본 설명
수정하려는 페이지에서 F12를 누르면 개발자 도구를 열 수 있습니다. 개발자 도구의 메뉴가 굉장히 다양한데, 그 중 우리에게 유용한 부분은 아래 5가지 정도를 확인해 볼 수 있겠습니다.
- 요소 선택 / 기기 전환 기능 : 화살표모양은 CSS 및 HTML을 확인해 볼 부분을 선택하는 도구이며, 노트북과 핸드폰이 합쳐진 모양의 아이콘은 핸드폰에서 어떻게 표시되는지를 미리 확인해 볼 수 있는 도구입니다.
- 기기 전환 기능의 경우, 구글 서치 엔진에서 모바일 특화 페이지에 문제가 있다고 할 때, 어떤 문제가 있는지를 데스크톱에서 확인 해 볼 수 있게 해줍니다.
- 메인 윈도우 : 보통 요소가 선택되어있습니다. 1번위치 바로 아래에 있는 버튼이 요소 선택기입니다. 요소선택기로 어떤 개체를 선택하면, 해당 선택 부분에 대한 코드로 자동이동됩니다.
- 스타일 : 가장 중요한 부분입니다. 요소 선택기로 선택한 부분의 CSS가 어떤 순서로 적용되고 있는지를 보여줍니다. 이때, 해당 요소에 CSS를 추가하거나 삭제하면서 테스트 하는것도 가능하고, 각 구역별로 상단에 기재된 CSS 태그를 확인하므로써 HTML에서 찾아 들어갈 수도 있습니다. (세부내용은 후술하겠습니다.)
- 테두리 확인 창(가칭) : 어떤 태그를 감싸고 있는 테두리의 종류와 크기를 일목요연하게 보여줍니다. 가령 상단 스크린샷에서 선택한 태그는 Margin, Border, Padding이 전부 0으로 세팅되어 있는 것을 볼 수 있습니다. 원한다면 수정을 원하는 부분을 더블클릭하여 숫자를 수정하여 볼 수도 있습니다. 특정 개체가 붕 떠있을 때 빈칸이 어디서 발생하는지 알아보는 데 사용됩니다.
- 도킹 설정 : 처음 개발자 도구를 열면 도구가 우측에 뜨는 경우가 있는데, 원활하게 사용하려면 스크린샷과 같이 아래에 뜨게 하거나, 별도의 윈도우로 빼내는 것이 좋습니다. 이러한 배치를 수정할 때는 세로로 된 … 모양을 누른 후, 도크 측을 수정해주시면 됩니다.
블로그를 수정하는 경우, 가장 주목할 부분은 3번의 스타일 부분
스타일 부분은 어떤 CSS를 수정하는지 모르겠을 때 CSS 구조를 파악하는 용도로 사용하는 경우도 많고, HTML에서 편집, 저장 후 새로고침하려면 오래걸리므로 이를 즉각 반영하면서 효율적으로 수정하기 위한 도구가 되기도 합니다.
CSS를 HTML에서 수정하였는데 반영되지 않았거나, 어느 부분을 수정해야 할 지 감을 잡지 못하겠다면 아래 스크린샷과 같이 선택된 요소의 CSS의 특정 부분에 직접 태그를 넣어보고 삭제하면서 테스트를 하다가 해당 부분 상단의 태그명을 HTML에 검색한 후 해당 위치에 넣으면 됩니다.
'컴퓨터 & 코딩 공부 > 웹 & 코딩 기초지식 정리' 카테고리의 다른 글
| 구글블로그에 올린 글에 방문객(유입)이 0인 이유 - 샌드박스 기간 (1) | 2024.04.23 |
|---|---|
| 블로그 포스트 상단에 목차 자동 생성하기 - Table of Contents(TOC) 생성기 (0) | 2024.04.23 |
| 구글 블로그 기본 템플릿에서 우선 수정할 사항 : 인기글 위젯 요약문 글자수, 사진크기, 빈 사진 띄우기 등 (0) | 2024.04.23 |
| 구글 블로그 기본 템플릿에서 우선 수정할 사항 : 코딩에 서식 적용 (0) | 2024.04.23 |
| 구글 블로그 기본 템플릿에서 우선 수정할 사항 : 본문 그림크기 제한 (0) | 2024.04.23 |