티스토리 강좌 | 크롬 요소 검사로 CSS 수정할 부분 찾기

요소 검사

아무리 잘 만들어진 스킨이라도 100% 마음에 들 수는 없습니다. 고치고 싶은 부분이 꼭 있기 마련입니다.

구조를 바꾸거나 기능을 추가/삭제 하는 것은 쉽지 않지만, 모양을 바꾸는 것, 즉 CSS를 수정하는 것은 비교적 쉽게 할 수 있습니다.

문제는 고쳐야 할 코드가 어디에 있는지 찾는 것인데, 이 부분은 웹브라우저의 요소 검사 기능의 도움을 받는 것이 편합니다.

요소 검사 기능은 IE, Edge, Firefox 등 여러 웹브라우저에서 제공하는데, 크롬을 기준으로 설명하겠습니다.

크롬 요소 검사

모양을 고치고 싶은 곳에 마우스를 올리고 우클릭을 합니다. 팝업 메뉴 중에 [검사]를 클릭합니다.

왼쪽 또는 아래쪽에 다음처럼 생긴 창이 나타납니다.

선택한 요소에 어떤 CSS 코드가 적용되었는지 확인할 수 있습니다. 여백(margin. padding)과 테두리(border-top, border-bottom)은 CSS의 148줄에서, 색(color)은 CSS의 143줄에서 정하고 있네요.

요소 검사 창에서 값을 변경하면, 바로 결과를 확인할 수 있습니다. 예를 들어 #333333을 red로 변경하면 메뉴의 글자 색이 빨간색으로 변한 걸 확인할 수 있습니다. 실제 블로그에 적용된 것은 아니고, 코드를 수정했을 때의 결과를 미리 보여주는 것입니다.

원하는 결과를 만드는 코드를 찾았다면, 티스토리 관리자의 [HTML/CSS 편집]에서 코드를 수정하고 [저장]하면 블로그에 반영됩니다.

반응형 티스토리 스킨을 찾으시나요?
상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) E-MAIL : jb.jbfactory@gmail.com 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : NAVER Business Platform 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침