왕초보도 가능한 티스토리 배경 색깔 바꾸기 / tistory html CSS background color

Tistory 배경 바꾸게 된 배경

 아무래도 남들과 같은 스타일의 티스토리를 운영해서는 지루할 때가 있습니다. 아직 CSS와 html을 기초밖에 모르는 수준이라 정말 프로 개발자분들처럼 이쁘고 깔끔하게 꾸밀 수는 없지만 그래도 유저가 들어왔을 때  "아 여기는 그래도 뭔가 다르네?" 하는 느낌이라도 주기 위해 tistory의 기본 css를 이것저것 수정해 보았습니다. 

 

 기본적으로 배경색깔, 포스팅 란의 좌우 크기 및 둥글게 모서리 처리 , 링크 위에 hover(마우스 커서를 가져다 대고 있는 행위)를 할 때에 글자 색깔 변경(사실 다른 블로그에서는 휘황찬란하게 색깔이 변하길래 그것을 목표로 하긴 헀으나 그러면 너무 난잡할 것 같아서.. ) 등을 변경하였습니다. 

 

 변경 한지가 일주일 정도 되어 무엇을 정확히 바꾸었는지 기억이 나지 않아 스스로 나중에 수정을 다시 할 때 용이하게 기록을 할 겸 포스팅을 남겨 봅니다. 

 

Tistory 배경 바꾸는 방법

 우선 tistory 설정에 들어가 좌측 메뉴에 나와있는 '꾸미기' 란의 '스킨편집'을 클릭합니다. 

 

 

그 다음 바로 우측 상단에 위치한 html 편집을 클릭합니다.  이후에 다시 우측에서 'CSS'를 선택합니다. 아래 사진과 같습니다.

 

html 편집을 누르고

css를 누릅니다.

 

일단 여기서 기본적인 html과 css의 편집이 가능하다는 것을 알면 됩니다.  바로 다음 목차에서 css에서 어떤 선택자가 tistory 배경을 담당하고 있는지 알아보도록 하겠습니다.

 

Tistory 배경 변경 (CSS 편집기) 

 

tistory의 배경을 담당하는 css selector(중괄호 앞에 놓인 요소의 이름들)는 바로 html입니다. css 라인들 중 html로 시작하는 코드들이 우리가 보고 있는 블로그의 전체 배경을 좌우하는 선택자입니다. 

 

즉 20번대의 코드들을 보시면 html로 시작하는 코드가 보입니다. 아래사진을  참고하시면  됩니다.

 

+

/*배경*/이라고 쓰여있는 글자는 제가 나중에 찾기 편하게 주석처리(우리 눈에는 보이지만 컴퓨터는 인식하지 못하게 처리하는 것)를 해놓은 글씨입니다. 이 글을 보시는 분들도 나중에 찾기 편하게 바꾼 지점별로 각자의 방식대로 표시하는 것을 추천드립니다. 

 

 

 위 코드처럼 쓰여있는 것을 보셨으면 그중 background-color:라고 적혀있는 부분이 보이실 겁니다. 바로 그곳에서 우리가 보는 웹사이트의 배경 색깔이 결정되게 됩니다. 

 

아래처럼 1번에서 색깔을 단어로 입력하셔도 되고, hex 코드, rgb 코드 등 여러 방식으로 색을 지정할 수 있습니다.

그렇게 색을 바꾸신 이후에는 우측 상단의 적용버튼을 꼭!! 눌러주셔야 합니다. 

(+만약 아무것도 찾아보기가 귀찮으시다면 색으로 채워진 작은 네모를 클릭하시면 색상표가 나오는데 거기서 직관적으로 설정하실 수도 있습니다.)

 

+ 추가적으로 hex color 코드나 , rgb, 색상의 투명도 지정 등에 대해 궁금하시다면 아래 포스팅을 참고하시기 바랍니다. 

링크 : css 색상지정에 관해서

 

 

Tistory 배경 예시

 

제 티스토리는 일단 베이지 beige 컬러로 지정을 했는데요, 혹시 이 글을 읽은 실 때는 제가 다른 색으로 바꾸고 난 이후일 수도 있습니다. 베이지 색을 적용하면 다음과 같습니다. 일단 이 정도만 해도 사실 티스토리의 흰 배경색보다는 덜 단조롭고 신경을 그래도 쓴 티가 나기 때문에 유저들에게 적게나마 좋은 인상을 줄 수 있다고 생각합니다. 

 

다음 포스팅에서는 티스토리의 파비콘을 변경하는 방법, 그리고 티스토리의 글자 크기 및 티스토리 리스트(unordered list 및 ordered list)에 접근하여 기본 크기를 설정하는 법 등을 차례대로 포스팅하도록 하겠습니다. 

 

궁금하신 부분은 질문 남겨주시면 제가 아는 한도 내에서 성실하게 답변할 수 있도록 하겠습니다.