반응형스킨 본문넓이 및 여백 PC와 모바일 다르게 설정하기 (Fastboot기준)


시작하기 전에


최근 블로그 스킨을 원하는대로 꾸미기 위해 여러 정보를 찾아보면서 느낀 것이 있는데, 애석하게도 인터넷에 있는 정보는 거의 복사 붙여넣기 수준이 대부분이라는 것 이었다. 


특히 필자가 사용하는 반응형 스킨인 Fastboot는 정말 심한 수준인데, 아무래도 많은 사람들이 사용하는 만큼 관련 정보도 많이 있었지만, 그 내용을 살펴보면 하나 같이 전부 똑같은 이야기를 하고 있었고, 실제로 그 블로그들의 모습 역시 복사 붙여넣기 수준의 모습이었으니..  출처가 있는, 오리지널 정보가 아니란 이야기다.


오해를 할 수 있기에 덧붙이자면 어떠한 정보를 참고하여 작성하는 사례를 이야기하는 것이 아니라,  '자신의 경험이나 견해 없이, 그저 무의미하게 같은 정보를 옮기는 경우'를 말한다는 것을 알아주길 바란다.




하스텐의 리뷰창고는 솔직한 후기와 직접 경험한 정보를 제공하며, 자신의 의견이 없는 죽은 글은 발행하지 않으려 노력 하고 있습니다.  Fastboot 스킨 정보의 경우 인터넷에 별로 없던 내용을 직접 실험하며 알게 된 것 들이며, 기초설정 부분은 인터넷에 검색하면 수 많은 자료가 있으니 참고하시길 바랍니다. 


하스텐의 블로그 정보 보기◀



반응형 스킨 본문 넓이 줄이기

반응형스킨 본문 넓이와 여백 설정


참고글

fastboot스킨 본문 크기, 너비폭 조절하기 (포스트 가로 길이 줄이는법)


얼마전 fastboot 스킨의 사이드바를 줄이고 본문 폭을 넓히는 것은 가능하지만, 반대로 줄이는 것은 모바일 때문에 다소 만족스럽지 않다는 이야기를 했었는데, 이 것을 완전히 해결할 수 있게 되었다. 



*위의 글을 읽지 않으면 이해가 안될 수 있으니 먼저 확인하길 바란다.



1. 본문 여백 줄이기(모바일과 PC 다르게)


블로그 스킨 본문 여백주기


▼1. 티스토리 CSS에서 이렇게 검색을 하자

@media screen and (max-width: 767px)


▼ 2. 아래 내용을 추가해주면 된다.

content {

padding: 0 10px;

}


위의 사진에 나타난 부분이 모바일 영역이다. 여기에 콘텐츠 부분 padding 값을 추가하여 PC와 모바일의 설정을 다르게 하는 것인데, 저기 'px값'에 따라 모바일에서 여백이 변경되니 원하는 만큼 조절하도록 하자.



☆: 저기는 모바일에서만 보이는 설정이기에 PC설정은 따로 해주어야 한다. 위에 링크한 글을 참고 하자. 



여백 완성본



완성. 

pc와 모바일에서 여백을 다르게 설정할 수 있게 되었다.


2. 본문 폭 넓이 줄이기

블로그 본문 넓이 줄이기


▼ CSS창에서 검색하자.

media screen and (max-width: 991px)



이 부분을 보면 따로 추가 할 필요 없이 #content가 존재 하는데, 처음에는 margin-right만 존재 할 것 이다. 이전 글에서 오른쪽은 아무리 크기 변경을 해도 모바일에 나타나지 않아서 왜 그런가 했더니 비밀이 풀렸다.



그럼 방법은 간단하다. 여기에 사진과 같이 'margin-left'를 추가하여 오른쪽도 고정 시켜 버리면 된다. 사진에는 이 부분에 각각 padding값이 들어가 있지만 1번 방법을 적용 시켰다면 따로 넣을 필요가 없다.

3. PC 부분 참고

콘텐츠영역 PC css

필자의 PC부분 설정이다.


 이전 글에서 했던 이야기이니 자세한 내용이 궁금하다면 그 글을 참고하길 바라며, 귀찮다면 일단 이렇게 설정해서 수치를 하나씩 변경해보면서 뭐가 어떤 용도인지 알아보도록 하자.



4. 완성된 결과물 (PC)

PC 변경전


▲ Fastboot 기본 설정 모습.



PC 변경후


▲ 수정된 지금의 모습.


변화 포인트

  1. 왼쪽 콘텐츠 영역 시작 길이.

  2. 본문 넓이.

  3. 콘텐츠 영역과 글의 가로 여백.

  4. 사이드바와 콘텐츠 거리.



Fastboot 스킨의 콘텐츠 부분이 다소 왼쪽에 있는게 마음에 들지 않아서 중앙부분으로 이동시켜주었다. 조금씩 수치를 조절해가면서 글을 읽기 편한 최적의 넓이를 찾아야 할 것 같다.



5. 모바일 결과물

모바일 완성



PC에서 설정한 것과 다르게 모바일은 독립적으로 넓이를 유지하고 있으며, 이전에 왼쪽 영역을 수정하면 모바일에서도 쏠리는 현상이 발견되었던 것과 다르게 이번에는 완벽하게 적용된 것을 확인할 수 있다.



마무리

1일 1포스팅을 목표로 하고 있는데, 지금 시각이 오후 11시 45분이라 급하게 작성하였습니다. 혹시 빠트린 부분이 있을지도 모르니, 추가적으로 궁금한 사항은 언제든 말씀해주시면 친절하게 답해드리겠습니다 :)



반응형

댓글

Designed by JB FACTORY