티스토리 블로그를 꾸미는 방법은 매우 간단합니다. 우선은 두 가지 방법을 통해서 꾸며볼 수있는데, 첫번째는 HTML 편집을 통한 방법과 두번째는 CSS코드를 수정하는 것입니다.
HTML 편집은 스킨 레이아웃의 구조를 바꿀 수있다고 보시면 되겠습니다. 예를들어, 티스토리 블로그 하단에 있는 공유버튼을 상단으로 옮긴다거나, 사이드바를 없앤다거나 등이 있습니다. (물론 CSS 혹은 자바스크립트를 통해서도 할 수있기는 합니다만, 아무래도 깔끔하게 제거 혹은 위치 변경을 하기 위해서는 직접 HTML 코드를 수정하는 쪽이 맞다고 생각합니다.)
CSS는 글자 크기나, 배경색상, 폰트 스타일, 콘텐츠 영역 넓이, 글자 간격 등, 내 입맛대로 다양한 스타일들로 적용해볼 수있는 코드라고 보시면 되는데요. 먼저, 이 두 가지 언어들을 통해, 스킨을 꾸며보기 위해서는 코드를 어느정도 보실 줄 알아야 한다고 생각합니다.
이번 포스트에서는 css 코드 수정을 통해서 티스토리 블로그를 어떻게 꾸밀 수있는지 알아보는 시간을 가져보겠습니다.
티스토리 블로그 꾸미기
티스토리 관리자 페이지에서 ‘스킨편집’ 메뉴를 클릭하시고, 위 이미지 대로 접속하시면, CSS 코드를 수정할 수있는 페이지가 나타나는데요.
이 코드를 처음 보시는 분들이라면 매우 당황스럽고, 어떤 것부터 만져야될지 모르실 거라 생각합니다. 하나하나 차근차근 알아보도록 하죠.
여러분들이 꾸미고 싶은 엘리먼트(블록)에다가 마우스 우클릭을 해보세요. 그 다음엔 N(검사) 키를 누르시게 되면 위 이미지와 동일한 HTML 코드창이 나타날 것입니다.
그럼 해당되는 엘리먼트 좌측에 있는 화살표를 하나하나 클릭해보시면, 하위요소에 있는 다양한 태그들이 나타날 것입니다. 여기서 마우스 하나하나 올려보시면
위 이미지처럼 해당되는 블록이 표시될 것인데요. 그 해당되는 범위 우측에 보시면
위 이미지와 같은 화면을 보실 수있습니다. 제가 위에 체크해놓은 빨간박스 부분을 클릭하고, 복사해두도록 합시다.
다시 CSS 코드 편집 페이지로 돌아와서, 아까 복사하신것의 대한 CSS 속성을 찾아주시면 되는데요. 우선 컨트롤+F 를 누르시고, 붙혀넣기 해보세요. 그럼, 그 속성에 알맞은 위치를 표시해줄 것입니다. 위 이미지처럼 말이에요.
저는 티스토리 블로그 메인에 있는 각 게시글의 제목 크기를 변경해주고 싶었습니다. 그럼, 위 이미지와 같이, font-size: ~px 이부분을 수정해주시면 되는데요. px값이 커지면 커질 수록, 글자 크기가 커진다고 보시면 되겠습니다.
마찬가지로, 글자 색상을 변경해주고 싶은 경우에는 color:값 속성을 넣어주시면 되는데요. 만약 없는 경우에는 직접 코드를 삽입해주셔야 하며, 있는 경우에는 색상코드 값만 변경해주시면 됩니다. (색상코드 알아보기)
콘텐츠 넓이 수정하기
위 동일한 방법으로 콘텐츠 영역 넓이를 수정해볼 수도 있는데요.
스킨 편집페이지에서 상단 부분에 있는 ‘홈‘을 ‘글‘로 변경해주시고, 위와 동일한 방법으로, 우측클릭 + N키를 누르시고, 화살표하나하나 열어주신 다음에, 마우스를 올려보면, width 값이 들어가있는 div 블록을 발견하실 수있습니다.
width 값이 얼만큼 들어가있는지는 하단 후측을 보시면 확인이 가능합니다. 그리고, 해당되는 속성을 또 복사해주시고, css편집 페이지에서 코드를 찾아, width 값을 적절하게 변경하시면, 넓이 조절을 하실 수있습니다.
마치며
css 속성 모음 사이트는 여기를 추천드리는 바인데요. 제가 하나하나 설명드리고 싶은 마음은 굴뚝같지만은 너무 많은 속성들이 있기 때문에 큰 어려움이 있습니다. 여러분들이 직접 보시고, 하나하나 알아가면서 수정하시는 것이 더 좋지 않을까 싶은데요.
접속하시게 되면, 각 블록에 테두리를 주는 방법과 사이드바 고정하는 방법, 배경색상 변경 방법, 이미지 넣는 법 등 매우 다양한 속성들이 나와있으니, 참고하시면서 하나하나 꾸며보시면 좋을 것같습니다. 끝!
