홈페이지 요소 검사 활용하기

html이나 css의 아주 기초적인 지식 밖에 알지 못하는 제가

다른 사람이 만들어놓은 스킨을 수정하려니 어디서 무엇을 건드려야 할지 전혀 알 수가 없어요.ㅠㅠ

그래서 이렇게도 해보고 저렇게도 해보면서 해당하는 태그를 찾으려고 온갖 수를 쓰는데

기본적으로 활용하는 것이 "요소 검사"입니다.

 

실제 예를 들어 설명해드릴게요.

 

 

 

본문 타이틀에 해당하는 속성을 변경하고 싶은데 css의 어디를 건드려야할지 찾고 싶군요.

본문 타이틀에 마우스를 갖다대고 오른쪽 클릭하면 드랍되는 메뉴 중 요소 검사라고 있습니다.

 

 

 

 

아래와 같이 화면이 하나 추가로 열립니다. 별도로 창을 분리해서 사용할 수도 있고, 화면 아래에 고정할 수도 있으니 보기 편한대로 사용하세요. ( 단축기 Ctrl+P로 고정해제-고정을 변경할 수 있습니다.)

 

 

화면 왼쪽은 해당되는 html 태그의 위치, 경로를 나타내는 것 같습니다.

다만, 단순히 보여지는 화면을 html로 나타낸 것이라서 티스토리 스킨 편집창의 html과 조금 달라요.

그래서 참고는 할 수 있어도 왼쪽 정보만으로는 수정해야 할 태그 속성을 정확히 찾기가 어렵더라구요.

 

우리가 눈여겨 볼 것은 오른쪽 화면입니다.

 

맨 오른쪽 박스의 style.css(222)는 style.css파일의 222째줄이란 얘기고

가운데 박스는 마우스 클릭한 곳에 적용된 속성 중 h3.title 태그에 대해 목록을 나열한 것입니다.

즉, style.css 파일의 222째줄에 시작되는 h3.title태그에 이러한 속성이 적용되었다-는 겁니다.

 

 

 

한번 테스트를 해볼게요.

본문 타이틀의 배경색을 바꿔볼까요.

background의 색상태그를 바꿨더니 배경색도 바뀌었습니다.

(여기서 수정하여도 실제 홈페이지에는 적용되지 않습니다! 시뮬레이션같은 거라고 이해하시면 돼요. 체크박스를 해제해보시기도 하고 이것 저것 적용해보세요.)

 

 

 

※ 구글 크롬에서는 요소 검사가 아니라 그냥 검사 라고 되어있어요^^ 화면이 좀 다르긴 하지만 비슷합니다.

 

 

 

 

 

style.css의 222줄 h3.title의 속성을 변경하면 본문 타이틀을 수정할 수 있다는 걸 알게됐으니 직접 가서 이제 적용해볼게요.

 

관리> HTML/CSS 편집

 

 

 

CSS로 가서 222째줄을 찾습니다.

h3.title 태그 속성이 있네요 !

 

 

 

배경색만 바꿀게요. 색상태그 변경 후 저장 클릭.

 

 

 

본문 타이틀 배경색이 초록으로 변경되었습니다.

이제 적용되는 태그를 알았으니 배경색 뿐만 아니라 글씨 크기, 색상, 테두리 모양 등등 많은 속성을 바꿀 수 있겠죠.

 

 

 

물론 요소 검사를 통해 모든 위치를 정확히 찾을 수 있는 건 아니었어요.

별도의 파일로 속성이 정의되었을때는 또 헤매게 되더라구요.

그래도 미리 시뮬레이션이 가능하고 대부분의 태그 속성은 다 찾을 수 있어요.

 

지극히 Html과 css의 전문을 파악하지 못하는 입장에서 야매로 수정하기 위한 방법일 뿐일지는 모르나

실제로 저는 매우 유용하게 활용 중이며, 혹시 저 같은 분에게 도움이 되었으면 합니다.