Fastboot 반응형 스킨 수정
이번 시간에는 fastboot스킨의 포스트영역, 본문 넓이를 줄이는 방법에대해 알아보도록 하겠다.
흔히 이 정보를 찾으면 'col-md' 수치를 조절하는 방법을 많이 이야기하는데, 조금 다른 방법이니 참고하도록 하자.
스마트폰이 보급되기 전에는 오로지 PC에만 신경쓰면 되었기에 글 작성이 수월했던 것 과 다르게, 요즘은 모바일 유입이 대부분인 만큼 모바일에서 어떻게 보여질지 신경을 쓰지 않을 수 없게 되었다.
하지만 그렇다고 모바일에서 보기 편하게 글을 작성하다보면 PC에서는 어정쩡하게 문단이 나뉘어지게 되었는데, 이 것을 해결하기 위해서는 PC에서의 본문 영역도 어느정도 줄이는 게 낫겠다는 판단을 했지만 fastboot 스킨은 수정하기 조금 까다로운 부분이 있었다.
흔히 검색하면 나오는 "col-md'값을 조정하는 방법은 너무나 극단적인 변화를 보여주었고, 사이드바가 너무 커져서 본문에 집중이 안되는 상황이 발생하다보니 많은 사람들이 fastboot 스킨의 너비 조절을 포기한 것 으로 알고 있는데, 혹시 필자와 같은 생각을 갖고 있었다면 이번 포스팅이 도움이 될 것 이다.
fastboot 본문영역 css 수정
<티스토리 스킨편집창 - CSS>에서 컨트롤+F를 이용하여 '#content' 검색을 하면 이렇게 나타난다.
여기서 padding은 영역은 그대로인 상태에서 글의 위치가 바뀌고, margin은 영역 그 자체를 조절하는데, 설명하기가 참 애매하니 아래의 사진을 참고하도록 하자.
padding
오른쪽의 수치가 잘 안보이는데 이 사진은
left와 right가 모두 15px인 기본설정 상태이다.
이 부분에 왼쪽과 오른쪽 모두 50px로 설정하니
사진 처럼 포스트영역과 글 영역의 거리가 넓어졌다.
하지만 이 부분을 줄이면 가뜩이나 좁은
모바일에도 영향을주니 건드리지 않는 게 좋다.
margin
margin은 사진에 체크된 부분에 영향을 준다.
상단 좌측의 Home을 기준으로 많이
줄어든 것을 확인할 수 있는데
우측 사진과 같이 모바일에도 영향을 끼치니
이 방법도 써먹을 수 없었다.
해결방법
fastboot는 이유는 모르겠지만 'margin-left: -15xp'가 기본값인데, 이 부분을 이상하게 여겨 수치를 이리저리 바꿔보니 모바일은 왼쪽을 기준으로 변화가 생긴다는 것을 알게 되었다.
즉, 오른쪽 값만 수정하면 된다는 것.
실제로 'margin-right' 부분만 수정을 했더니 PC에서는 넓이가 줄어들고, 모바일에서는 우측과 같이 변화가 전혀 없는 것을 확인 할 수 있다. 하지만 이 방법도 완벽하지는 않은게, 저 수치를 너무 줄여버리면 포스트영역이 왼쪽으로 쏠리는 것 같은 모습이 된다.
개인적으로는 15px가 가장 적당한 것 같고, 최대 30px 정도 까지는 괜찮은 것 같았으니 참고해서 수치를 조정해보도록 하자.
마무리
필자의 경우 본문 폭을 줄이고 싶었지만, 왼쪽값을 기준으로 모바일에 보여지다보니 결과적으로 드라마틱한 효과를 보지 못 했는데, 반대로 포스트 영역을 넓히고 싶은 사람은 조금만 응용하면 유용하게 써먹을 수 있다.
Fastboot는 살짝 본문이 왼쪽에 위치하고 있는데 이 방법을 조금 응용해서 사이드바 부분을 줄이고, 본문을 오른쪽으로 넓히면 위의 사진 처럼 중앙으로 이동시킬 수 있으니 실험해보길 바란다. (위-원본, 아래-수정본)
어차피 왼쪽을 기준으로 모바일에서 보여지기 때문에 저 수치면 변경 안하면 오른쪽은 마음껏 바꿀 수 있다.
마지막으로 짧게 해결방법만 딱 쓸 수 있는 글을 이렇게 장황하게 작성한 이유는 결과 보다 과정을 보여주기 위함 이며, 블로그를 운영하다보면, 특히 마케팅을 한다면 검색으로 해결 할 수 없는 문제들과 마주하게 되기에 문제를 스스로 해결하려는 습관이 필요 하다.