[CSS]티스토리 CSS 위치 찾기 및 편집

어제 문득 블로그를 다크모드로 쓰고 싶은 생각이 들어서 별 생각없이 스킨 변경을 진행했었는데요. 안내메시지가 나왔음에도 그냥 생각없이 넘겨 버렸더니 모조리 초기화 되어버리는 사달이 났습니다. 그래서 어제 코드블럭이며 뭐며 하나하나 건드리다가 또 늦게 잠이 들었는데요. 예전에 했던 것들이 많다 보니까 기억이 잘 안나서 찾아보느라고 시간을 엄청 썼습니다. 그래서 이제 부터는 뭐 하나를 해도 기록을 좀 남겨놓기로 했어요.

 

이번 포스팅에서 말씀드리고 싶은 건 티스토리를 꾸미면서 CSS 편집을 해야할 때 어떤 위치에 내가 바꾸고자 하는게 있는지 찾는 방법입니다. 다크 모드를 쓰기 위해서 왓에버로 스킨 테마를 변경했는데 북클럽일 때는 안보이던 것들이 좀 눈에 띄어서 해당 부분을 변경해보겠습니다.

 

1. 개발자 도구

먼저 개발자 도구를 사용하는 방법부터 알아봅시다. 해당 방법을 알아야 밑에서 진행하는 글이 전체적으로 이해가 되실거에요. 가장 대표적인 방법은 F12, Ctrl + Shift + j, 우클릭 + 검사 등의 방법이 있겠네요. 저는 F12를 써서 개발자 도구를 여는 방법을 선호합니다. 개발자 도구를 켜면 이런 화면이 나올겁니다.

표시 옵션에 따라 조금씩은 다를텐데 저는 이렇게 HTML이 위, CSS가 아래에 나옵니다(색이 다른 건 개발자 도구에 다크모드를 적용시켜놨기 때문입니다). 개발자 도구에서는 현재 페이지를 구성하고 있는 요소들의 속성을 볼 수 있습니다. 해당 코드에 마우스 커서를 가져다 대도 볼 수 있구요. 찾기 어렵다면 검사도구(Ctrl + Shift + c 또는 개발자 도구 맨 왼쪽 상단에 마우스 커서 버튼)를 누른 다음 페이지에 있는 요소를 클릭하면 바로 해당 코드를 하이라이트 해줍니다(우클릭 + 검사와 동일한 효과).

이런식으로 코드도 하이라이트 되고 요소도 같이 하이라이트 됩니다. 이제 CSS를 건드려봐야겠죠. 개발자 도구를 띄운채로도 CSS를 편집하면 편집된 화면이 보여집니다. 해당 기능을 이용해서 티스토리 스킨 편집에서 코드를 직접 적용시키기 전에 미리 좀 해볼 수 있겠죠(코드를 바꾸면 바로 요소가 바뀌는게 눈에 보이기 때문에 티스토리 CSS 편집에서 기본 제공하는 새로고침보다 훨씬 편합니다). 또 해당 요소가 실제로 바뀌어서 저장되는게 아니라 해당 페이지에서 건드리는 동안만 적용되는 것이기에 새로고침을 눌러보면 원래 모습 그대로이니 안심하고 이것 저것 건드리셔도 됩니다.

빨간색으로 표시된 곳에 있는 max_width를 10%로 바꿔봤습니다(잘 안보이시면 사진을 클릭하시면 원본 크기로 보입니다). 이런식으로 CSS 코드를 편집해서 어떻게 보이는지를 미리 확인했다면 이제 실제로 바꿔보러 가야겠죠.

 

2. 티스토리 스킨 편집

본인 티스토리 홈 주소 뒤에 /manage를 추가하시면 블로그 관리 모드로 넘어갈 수 있습니다. 넘어오시면 사이드바에 글관리, 카테고리 관리 등 이것저것 보이실텐데 밑으로 쭉 내리다보면 스킨관련된 탭이 보이실 겁니다.

여기서 html 편집을 눌러줍시다(참고로 왓에버 스킨을 쓰시는 분들 중에서 다크모드로 사용하실 분들은 컬러 타입을 어두운으로 바꿔주시면 됩니다).

1. 현재 보이는 화면을 변경할 수 있습니다. 저 같은 경우에는 글을 보면서 이미지를 수정하는게 목적이니까 홈에서 글로 변경해주겠습니다.

2. 코드를 편집한 다음 적용을 누르기 전에 새로고침으로 제대로 됐는지 확인이 가능합니다.

3. 저희는 CSS를 편집할 예정이기에 CSS탭을 눌러줍니다. HTML을 편집하실 거라면 HTML을 눌러주시면 됩니다.

4. 코드 편집과 확인이 완료되었으면 저기서 적용을 눌러주셔야 저장이 됩니다. 열심히 편집하고 적용을 누르지 않는 불상사는 꼭 피해주세요.

 

이제 이미지 사이즈를 변경해봅시다. 참고로 css편집 창에서도 개발자 도구가 켜지기 때문에 필요하다면 보고 수정하시면 됩니다. 저는 켜고 진행을 한 번 해볼게요.

개발자 도구(F12)켜고, 검사도구(Ctrl+Shift+c)로 요소까지 찍었다고 가정했을 때 CSS창에서 바로 보이는 이 친구에게 잠깐 집중을 해보겠습니다. 아까 저기서 max-width를 조절해서 이미지를 작게했었죠. 하지만 지금 집중할 부분은 빨간 밑줄을 쳐놓은 content.css...부분입니다. 사실 이 부분이 저도 많이 헤맸던 부분인데요. CSS에는 style.css와 content.css가 있다고 하는데 저 부분이 style.css인 친구는 티스토리 CSS편집에서 수정이 가능한 코드이고 content.css는 수정은 불가하고 재정의가 가능한 코드라고 합니다. 이게 무슨 소린가 싶으실텐데 해당 친구로 예를 들어볼게요.

 

HTML&CSS편집에서는 Ctrl + f 로 검색 기능을 지원합니다. 저기서 tt-body-page를 검색해보겠습니다.

저 같은 경우에는 해당 내용으로 검색을 하면 아무 내용도 나오지 않습니다. 다른 content.css인 코드들도 전부 마찬가지였습니다. 아무리 검색을 해도 안나와서 저는 이 내용으로 엄청 오랫동안 씨름을 했었습니다. 맨 마지막에 적혀있는 숫자가 줄 번호라서 번호를 찾아가면 있다는 포스팅도 봤었지만 검색해도 나오지 않는데 해당 내용이 거기 존재할리가 없죠. 그래서 한참을 고민하다가. content.css는 재정의가 가능한 코드라는 내용이 기억나서 그냥 복사 붙여넣기를 해봤습니다.

그랬더니 이렇게 원하는대로 변경이 되었습니다. content.css였던 녀석도 (앞에 뭐가 붙어있음)style.css로 바뀌었구요. 줄번호 또한 일치했습니다. 정말 몇 시간을 씨름하다가 이렇게 딱 하고 바뀌었을 때 그 감정은 정말 뭐라 표현하기 힘들었습니다. 누군가로부터 배우는게 정말 중요하다는 생각도 다시 한 번 들었구요.

 

오늘은 이렇게 변경 하고자 하는 요소의 CSS위치와 편집하는 방법까지 알아봤습니다. 저는 따로 프론트엔드 공부를 해본 적이 없기 때문에 글 내용이 어색할수도 약간 틀릴수도 있습니다. 길다면 긴 포스팅이었지만 어떻게 도움이 좀 되셨나요? 저는 이 글을 적으면서 한 번 더 정리가 되어서 훨씬 머리가 깔끔해진 기분이 듭니다. 제 나름대로 최대한 자세하고 보기 편하도록 작성을 해보았지만 이해가 안되는 부분이 있다면 댓글 남겨주시면 감사하겠습니다.