티스토리(Tistory) 본문 폭 넓히기

안녕하세요 내맴스입니다. 저는 스킨을 고를 때 가장 깔끔하다고 생각돼서 지금 제가 사용하는 스킨을 골랐습니다. 하지만 마음에 들지 않는 부분들도 몇 가지 있습니다. 그중에 본문이 좁아 보이는 것이 마음에 들지 않았습니다. 그래서 본문 디자인을 넓히는 방법을 찾아봤는데요. 아직 CSS가 초보인 저에게는 조금 난이도가 있었습니다. 그래도 제가 찾아본 부분까지는 알려드리겠습니다.

 

주의 사항

1. 스킨을 편집하기 전에는 HTML, CSS를 메모장에 백업해 두세요.

2. 값을 조절하기 전에 본래 값을 기록해 두세요.

3. 스킨이 다르다면 제 글과 다를 수도 있습니다.

 

 

저는 본문 폭을 넓히기 위해서 먼저는 각 부분이 CSS에서 어떤 이름을 가지고 있는지 찾아보았습니다.

제 티스토리 블로그에 볼품없는 홈 화면입니다. 본문은 CSS에서 Container라는 이름을 가지고 있었습니다. 그럼 이제 CSS로 들어가서 Container 부분을 수정해 주면 되겠죠.

 

max-width : 부분을 수정하면 본문이 넓어집니다. 저는 1080에서 1280으로 수정했습니다. 그랬더니

본문의 폭이 늘어났으나, header 부분과 footer 부분이 어색해졌습니다. 또 사이드 부분의 선이 살짝 왼쪽으로 이동했습니다. hedaer 부분과 footer 부분은 본문을 넓힌 만큼 똑같은 수치로 늘려주면 쉽게 해결이 됩니다. 문제는 사이드 부분의 선(margin-left)이 늘어난 것은 똑같은 수치로 조절해도 오히려 더 이상해지더군요.

 

폭을 넓히거나 전체적인 뼈대가 바뀌는 작업은 수정을 해줘야 하는 부분들이 많은 것 같습니다. 아직 CSS가 초보인 저에게는 어려웠습니다. 그래서 계획이 바뀌었습니다. 홈 화면에 전체 글만 있게 만들었는데, 너무 밋밋해 보여 마음에 들지 않습니다.  전체적인 틀은 수정하지 않고, 디자인 부분들을 수정해야겠습니다.