티스토리 스킨 원하는 위치 수정할때 익스플로러 요소검사 이용하기

티스토리를 이용하시는 분들께서 가장 많이 초반에 투자하는 부분이 바로 스킨 부분일 것이다. 그리고 각종 UI 부분이나 사이드바 크기, 모듈 조정 등등 다양하게 원하는 입맛대로 조절을 하는데 시간을 보낸다. 그러나, 초보분들께서 이렇게 디테일한 설정을 하는 것 자체가 쉬운 일이 아니다.

피가되고 살이되는 블로그, 친절한효자손 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#

#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#

티스토리 스킨 원하는 위치 수정할때 익스플로러 요소검사 이용하기

특히 어느 정도의 HTML/CSS 관련 코딩을 볼 줄 아시거나 다룰 줄 아시는 분들도 많이 어려워 하는 분야이기에 결코 만만한 부분이 아니다. 이 내용에서는 완전 초보분들께서 접근하는 방법이 아닌, 어느정도 HTML/CSS에 대한 개념을 이해하고 계시는 분들에게 도움이 되는 내용이다. 한번 잘 읽어보도록 하자.

이 방법은 크롬에서도 가능하지만, 필자의 경우는 익스플로러에서 볼 때가 더욱 알아보기 쉬웠고 사용도 편리했기 때문에 익스플로러로 하는 방법에 대해 언급하고자 한다. 이 노하우를 전수해준 오쏘오쏘에게 매우 깊은 감사를 표한다.

예전부터 바꾸고 싶었던 부분이 바로 저 제목 부분이다. 머리말 태그인데, 글씨 색상 말고, 왼쪽과 밑 줄의 색상을 통일시키고 싶었다. 그러면 어떻게 이 위치의 태그를 찾아내야할까? 생각보다 쉽다.

이렇게 해당 위치에서 마우스 오른쪽 버튼을 눌러서 요소 검사로 들어간다. 참고로 위에 언급했듯 익스플로러에서 진행한다.

그러면 밑에 이런 코드창이 생성이 된다. 오른쪽과 왼쪽으로 나뉘어 있는데, 왼쪽보다는 오른쪽을 보는 것이 더 빠르다. 현재 보니까, 머리말 태그는 CSS 부분의 855행부터 시작이 되는 듯 하다.

h3. 관련 font-size 라고 하는 것을 보니, 머리말의 기본 폰트 크기를 설정하는 곳 같다. 하지만 아직까지 원하는 색상을 변경하는 태그는 보이지 않는다. 스크롤을 밑으로 조금 더 내려보자.

드디어 나온 것 같다. border-bottom 그리고 border-left 라고 나와있는 것을 보니, 거의 100% 확실히다. CSS의 844행에 이런 태그가 나오는 모양이다. 밑줄 색상은 CCC 이고, 왼쪽의 상자 색상은 55555B 이다. 이제 이것을 원하는 색상코드로 변경만 해주면 된다.

진짜 색이 변하는지 현재 익스플로러 요소검사 화면에서 아무 숫자 6자리를 넣어서 확인이 가능하다. 한번 해보도록 하자.

필자는 원하는 색상코드인 1FAFDA를 넣었다. 왼쪽과 밑줄 색상 모두 같게 말이다.

색상이 변했다! 이 코드가 틀림 없음을 확인하였다. 내친김에 한번 굵기도 바꿔보자.

분명 여기 숫자만 좀 올려주면 바뀔것이다.

역시 바뀌었다. 이제 위치가 확인이 되었고 어느것을 수정해야 바뀌는지도 알았으니, 진짜 수정을 위해서 티스토리 관리 화면으로 들어가서 HTML/CSS 편집 부분으로 들어간다. 요소검사에서 바꾼것은 확인만 하는 과정일 뿐, 실제 적용되지는 않는다.

CSS 부분에서 844행을 찾으니, 정말 해당코드가 나온다. 이제 위에서 미리변경해본 태그들로 모두 변경하고 저장을 눌러 적용시킨다. 바로 지금 이 글의 제목 부분처럼 잘 적용이 된 모습을 확인할 수 있다. 익스플로러 요소검사로 매우 쉽고 빠르고 확실하게 티스토리의 HTML/CSS 부분을 원하는대로 편집이 가능함을 확인하였다. 너무 많은 변경은 오히려 해가 될 수 있으니, 꼭 필요하다 싶은 부분만 변경하도록 하자. 끝.