티스토리 바꾸고 싶은 부분의 HTML, CSS 태그 찾는법
안녕하세요! 오늘도 티스토리 블로그를 내 마음대로 꾸미고자 찾아 헤메고 있습니다. 아시다시피 티스토리는 HTML과 CSS를 다룰 줄 알아야 내 입맛대로 블로그를 꾸밀 수가 있는데요, 일부 무료로 보급하는 블로거분들의 스킨을 설치하면 편의기능이 제공되는 것 같기는 한데 이 부분은 좀 더 알아봐야 할 것 같습니다.저는 티스토리에서 기본 제공되는 북클럽 스킨을 쓰고 있는데 기본적인 양식이 만족스러워서 앞으로도 계속 이 스킨을 쓰지 않을까 합니다.
HTML과 CSS에 대해서 조금 알게되니 이것저것 건드려 보고 바꿔보는 재미가 있습니다. 아직까지는 아주 초보적인 부분들만 건드리고 있지만 계속 공부를 하다보면 마음대로 바꿔보는 재미가 있지 않을까 기대합니다. 언젠가 '삼성물산'의 티스토리 블로그를 방문했던 했었는데, 마치 홈페이지를 제작해 놓은 것 처럼 깔끔하고 예쁘게 만들어놓아서 언젠간 그리 되리라 마음먹었던 기억이 납니다.
▷ 블로그에서 바꾸고 싶은 부분의 HTML, CSS 태그 찾기
저는 처음에 참 바꾸고 싶었던 부분이 메인페이지에서 최신글들의 썸네일 사진 위치와 크기였습니다.
문제는 저와 같은 북클럽 스킨을 쓰면서도, 같은 위치와 크기까지 바꾸고 싶어하는 정보글을 찾기가 힘들다는 것이었죠. 찾는다 하더라도 디테일한 부분까지는 생각이 다르기 때문에 한계가 있었습니다.
그러던중! 발견한 방법이 있었으니. 직접 원하는 부분의 HTML과 CSS 태그를 찾는 방법이 있었습니다!
키보드의 F12 버튼을 눌러 개발자도구의 DOM탐색기를 이용하는 방법입니다. 저는 인터넷익스플로러를 이용하였습니다.
f12키를 누르면 위 사진과 같이 아래쪽에 창이 하나 생깁니다.
왼쪽 중간부분에 주황색으로 네모친 부분을 누른 후 위쪽 창에서 변경하고 싶은 부분에 마우스 커서를 가져갑니다.
저는 최신글 썸네일에 마우스 커서를 가져다 놨는데요. 편리하게도 저렇게 칸이 생겨서 원하는 부분인지 확인할 수 있어요. 마치 표적처럼 말이죠! 그리고 실제로 클릭을 해보면 아래 창에 정보들이 바뀝니다.
왼쪽의 초록색 네모친 부분은 HTML에 관련된 부분이고, 오른쪽에 파란색 네모친 부분은 CSS에 관련된 부분인걸 확인하였습니다. 저는 해당 페이지의 모든 최신글들의 썸네일 양식을 바꾸고 싶었기 때문에 오른쪽 푸른색 네모 부분의 CSS태그를 확인하였습니다.
파란색 네모친 부분에 위쪽을 보면 .cover-thumbnail-2 ul li figure img 라는 부분이 보입니다. 제가 스킨 편집에서 홈설정을 커버로 해놓았기 때문에 앞에 커버cover라고 쓰인게 맞는듯 보입니다. 또한 이어지는 내용을 보면 썸네일(thumbnail)이라고 쓰여있고, 나타나는 이미지(figure img)라고 쓰인 것으로 보아 해당 태그인 것을 확신했습니다. 또한 아래 쪽에 width(너비), height(높이)와 같은 값들이 있는 것 또한 사진의 크기에 해당하는 부분인 걸로 알 수 있었습니다!
아하! 그래서 저는 저 부분들을 편집창에서 찾아서 바꾸면 되겠구나! 라고 생각하였죠.
▷ DOM 탐색기를 사용하는 구체적인 방법
먼저 인터넷 익스플로러로 티스토리 관리 페이지로 들어갑니다.(크롬도 가능하지만 저는 익스플로러가 보기 편하더라구요)
스킨편집에서 HTML편집으로 들어가주세요. *중요* 참고로 저는 html편집 아래쪽에 보면 홈 설정을 커버로 해놓았습니다. 최신 글 설정일 때와 커버 설정일 때 태그가 다른것으로 알고 있습니다. 밑에부터는 커버 설정일 때 제가 했던 방법을 소개한 것이니 꼭 참고하세요!
오른쪽 위 주황색 네모의 CSS를 눌러주세요.
CSS아래 명령어가 있는 부분을 아무곳이나 한 번 클릭한 후 컨트롤+F를 눌러서 아까 찾았던 태그 .cover-thumbnail-2 ul li figure img를 입력해 찾아줍니다.
저 같은 경우는 주황색 네모칸처럼 찾아졌는데요, 기존에 글 오른쪽에 있던 사진을 왼쪽으로 바꾸기 위해서는 검색된것 위에 있는 부분의 float 부분을 기존의 right에서 left로 바꿔주었습니다. 그리고 사진 크기는 그 아래 검색된 곳의 width와 height를 바꿔주었구요. 위 아래가 다른것은 저도 정확하진 않지만 쓰여있는 것으로 보아 썸네일을 나타내는 부분과 이미지에 대한 부분이 각각 나뉘어 있는 것 같습니다.
지금까지 내 블로그의 원하는 부분의 HTML과 CSS 태그를 찾는 방법에 대해서 알아보았는데요. 제가 위에서 했던 방법처럼 하시면 다른 부분들도 편리하게 바꾸실 수 있을 거라 생각합니다!
오늘도 읽어주셔서 감사합니다 :)
이 글이 마음에 드셨다면 다른 글도 추천 드리고 싶습니다.
▷ [티스토리 정보] - HTML과 CSS는 무엇일까? 초보의 티스토리 꾸미기
'티스토리 정보' 카테고리의 다른 글
| HTML과 CSS는 무엇일까? 초보의 티스토리 꾸미기 (0) | 2020.06.13 |
|---|
댓글