티스토리 HTML / CSS 수정하기

티스토리가 광고하면서 하는 말이

블로그를 마음대로 꾸밀 수 있고 자유도가 높고

기타등등 어쨌든 좋다 이건데

웹디자이너도 아니고

뭘 안아야 손을 대던가 하지

대부분의 사람들은 HTML / CSS 코드를 봐도

이런 생각밖에 들지 않는다

유저 친화적으로 만들어야지 

코드만 달랑 던져놓고 말면 뭐 어쩌라는 말인가

그래서 대부분의 티스토리 블로그를 보면

사람들이 HTML / CSS 수정을 못해서

온갖 필요하지도 않는 메뉴들이 가득 차 있고

블로그는 주인이 글도 제대로 찾지 못할만큼 엉만진창이다

그냥 존나 구리다는거다

하지만 네이버 블로그에는 구글 애드센스를 심을 수 없으므로

눈물을 머금고 티스토리를 써야만 한다

하자있는 블로그지만 어떻게 잘 굴려봐야 하지 않겠나

먼저 위의 내 블로그 사진만 봐도

CSS 조정 잘못해서 개판인데

이게 많이 고쳐놔서

이 모양이지 고치기 전에는 참담한 수준이었는데

스크린샷을 안 찍어놔서 증명할 길이 없다

어쨌든 좀 고쳐봐야 겠는데

일단 블로그를 들어간 다음 f12를 누르자

짠짜잔!! 우측에 뭔가 생겼는데

딱 봐도 대부분의 사람들은 이런 생각이 들 것이다

근데 아직 끝장난 것이 아닌만큼 침착하게 따라해 보자

f12를 눌러 생긴 창에 마우스를 갖다 대 보면

특정 영역을 지나갈 때 왼쪽 화면이 변경되는 것을 볼 수 있는데

▶ 이 화살표를 눌러서 ▼로 만든 다음에 아래로 타고 계속 내려가 보면

사각 박스가 점점 작아지는 것이 보일 것이다

이게 처음에는 큰 범위로 시작했다가 점점 세부 요소들로 나누어 지는 것인데

나는 하단에 방명록, 글쓰기 부분까지 내려가야 하므로 계속 내려가 보겠다

쭉쭉 내려가다가 드디어 하단 부분을 관할하는 영역인

wrap_box_footer에 도착했다

이제 이 안에서 세부 사항들을 수정할 수 있다

하단 줄 안맞는 부분이

<div class = line_copy ~~ 이 부분인데

요 부분을 고쳐야 내가 원하는 파트를 원하는 사이즈로 조절 가능하다

여기서부터 진짜 중요하니까 집중해라

줄 안맞는 부분을 눌러보니 우측 하단에

네모 그림 부분에 500 x 0이 보이는데

이게 해당 영역의 사이즈다

<div ~~ 하나당 하나의 영역 사이즈를 가지기 때문에

 클릭 후에 늘여도 보고 줄여도 보고 엔터 땅땅 때리면

바로바로 화면에 반영이 된다

div 왔다갔다 하면서 엔터 열심히 땅땅 때려서 최적 사이즈 나올때까지 해보자

지금 보면 엔터 땅땅 때려서 wrap_box_footer 부분하고

line_copyright 부분의 width를 각각 1115, 300으로 바꿨는데

엔터 땅땅 때려서 가운데 부분으로 이동시킨 것이 보인다

이제 성공이야!! 

이러고 나갔다 들어오면 똑같아서 좌절하니까

 긴장을 유지해야 한다

왼쪽에 .wrap_box_footer 가 보이는가?

이걸 메모장이라던가 수첩에라든가 써 놓고

바꾼 width 사이즈 역시 써 놓은 뒤에

관리자 -> 꾸미기의 스킨 변경 -> 스킨 편집을 누르자

여기서 html 편집을 누르면 새 창이 열리는데

우측 상단 부분에서 HTML이 기본으로 잡혀 있는데

CSS 누르면 창이 바뀐다

이제 ctrl + f로 아까 적어둔 .wrap_box_footer를 입력하면

바로 동일한 위치로 이동이 되는데

여기서 침착하게 width를 아까 적어둔 숫자로 변경을 하고

 우측 상단에 적용을 누르고 새로고침을 하자

적용 완료!!!

새로고침을 해서 보면 처음 설정한 그대로 깔끔하게 적용이 된 것이 보인다

내 경우에는 하단의 영역 한곳만 수정한거긴 한데

div하고 .~~ 내용만 잘 확인하면

어느 곳을 고치건간에 동일하게 고칠 수 있다