Blog/Skin

티스토리 블로그 디자인 변경

chaz.uu 2018. 5. 31. 17:20

이전에는 어떤 부분은 추가하고 불필요한 부분을 제거해도 뭔가 밋밋한 느낌이었는데, 그동안 필요한 정보를 찾기 위해서 구글링을 통해 방문했던 해외 여러 사이트 디자인들을 보고 받은 영감을 토대로 전반적인 느낌을 바꿔봤다.

http://andersnoren.se/themes/lovecraft/

위 링크는 해외 ANDERS NORÉN님이 제작한 워드프레스 테마 데모 페이지다. 이 사이트 디자인을 참고해서 본문과 사이드바를 감싸는 영역에 아래 CSS 속성을 이용해 헤더 영역을 살짝 덮을 정도로 위로 올렸다.

main-wrapper {
  position: relative;
  top: -30px;
}

그리고 추가로 body 영역과 footer 영역에 색을 입했다. 이 세 부분만 수정했을 뿐인데도 블로그 분위기가 전반적으로 많이 변했음을 알 수 있다. 이에 맞게 세세한 부분들을 다듬으려면, 사용 중인 스킨 성격상 따로 분할되어 업로드한 2개의 CSS 파일을 수정해서 재업로드 해야 되기 때문에 시간이 좀 걸릴 듯하다.


아래 링크는 지금까지 사용해온 스킨들과 각 스킨을 사용하면서 수정했던 내역들이 정리된 글이다. 이 글을 쓰는 시점에서 앞으로 눈에 띌 정도로 수정했을 때는 이 글처럼 구체적으로 남겨볼 생각이다.

http://uulog.tistory.com/9

나는 스킨을 수정할 때 비슷한 속성들을 검색해서 최소 탭 5개는 띄워놓고 비교/적용해보는데, 이렇게 하면 공부가 정말 잘 된다. 특히 다른 블로그에서 스킨 수정에 관한 내용을 참고할 경우, 자신의 스킨에 이식할 때는 조금 바꿔서 응용도 해보면 좋다. 여기서 제일 중요한 부분은 각 영역을 지정하는 클래스명이 스킨마다 상이하니 잘 살펴야 한다.

반응형