반응형 블로그 스킨 가로 너비폭 조절 3가지 방법-FastBoot 스킨 본문 사이드바
많은 티스토리 블로거에게 애용되고 있는 반응형 블로그 스킨 FastBoot의 스킨 본문 및 사이드바 가로폭 너비 조절하는 방법 3가지에 대해 기술해보겠습니다.
아시다시피 FastBoot 스킨은 Bootstrap을 기반으로 구성돼있습니다.
Bootstrap은 콘텐츠를 담을 콘테이너 요소를 정의해야합니다. 콘테이너는 화면 일부폭를 사용하는 클래스 .container (fixed-width) 또는 화면 전체폭을 사용하는 클래스 .container-fluid (full-width)가 있읍니다. 콘테이너 안에 열(row)과 행(column)으로 웹페이지를 구성하는 그리드 시스템으로 구성돼 있습니다.
그리드 시스템은 콘테이너폭을 12등분하여 콘텐츠 단위를 표시합니다.
이곳으로 가시면 부트스트랩에 대한 상세를 보실 수있습니다. http://bootstrapk.com/css
스킨 가로폭 너비(스킨 전체 가로폭, 본문 가로폭, 사이드바 가로폭)를 조절하는 방법 3가지는 다음과 같습니다.(css화일은 수정하지 않고 style추가와 인라인 style을 사용하겠습니다.)
1. 미디어 쿼리(@media) style 수정(override)
2. 본문과 사이드바를 포함하는 요소에 padding 적용
3. 그리드 조정(col-md-9, col-md-3)
1. 미디어 쿼리( media query) 수정
●부트스랩 홈페이지의 내용입니다.
|
|
그리드 적용 |
콘테이너 너비 |
|
매우 작은 기기 모바일폰 (<768px) |
항상 |
없음(auto) |
|
작은 기기 태블릿 (≥768px) |
분기점 보다 크면 적용 |
750px |
|
중간 기기 데스크탑 (≥992px) |
분기점 보다 크면 적용 |
970px |
|
큰 기기 데스크탑 (≥1200px) |
분기점 보다 크면 적용 |
1170px |
●FastBoot 스킨의 fastboot.css의 내용입니다.
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
본스킨의 콘테이너 스타일은 부트스트랩 설정을 따르고 있습니다.
네이버 메인 페이지를 보면 콘텐츠 전체폭이 1080px로 설정돼 있습니다.
FastBoot 가로폭 너비가 넓다고 생각되시면 @media 스타일을 변경하는 것도 한 방법입니다.
네이버 가로 너비폭에 준해서 변경해보겠습니다.
<!--fastboot.css @media override-->
<style>
@media (min-width:992px){.container{width:895px}}
@media (min-width:1200px){.container{width:1080px}}
</style>
<!--fastboot.css @media override end-->
위의 style 태그를 스킨 HTML편집에서 head 태그 맨 아래 </head>위에 삽입합니다.
2. 본문과 사이드바를 포함하는 콘테이너 요소에 padding-left 인라인 스타일 삽입
▶스킨 전체 가로폭에 padding-left 60px 설정
<div class="container"> ★
<div id="coverDiv"><div class="info col-md-12 hidden"><h3>넉넉한 일상</h3>
<p class="text-muted">독후감 등산 소소한 IT정보 고사 및 역사정보</p></div><div class="loading"></div></div>
<div id="leftContent" class="col-md-9" style="padding-left: 60px;">
<div id="content" >
HTML내 위부분에 본문과 사이드바를 포함하는 콘테이너입니다.
<div class="container" style="padding-left: 60px;">
★표시된 콘테이너 태그에 위와같이 style="padding-left: 60px;"를 삽입합니다.
스킨 가로 너비폭이 60px 축소되는 효과를 볼 수있습니다.
▶본문 가로폭에 padding-left 60px 설정
<div class="container">
<div class="row">
<div id="coverDiv"><div class="info col-md-12 hidden"><h3>넉넉한 일상</h3>
<p class="text-muted">독후감 등산 소소한 IT정보 고사 및 역사정보</p></div><div class="loading"></div></div>
<div id="leftContent" class="col-md-9">
<div id="content">
본문 가로너비폭만 줄이려면 본문이 들어가는 <div id="content">태그에 아래와 같이 style="padding-left: 60px;"를 삽입합니다. 사이드바 변경 없이 본문만 60px 축소되는 효과가 있습니다.
<div id="content" style="padding-left: 60px;">
3. 그리드 조정
많이 소개되고 있는 그리드 조정입니다.
본 스킨은 본문이 들어갈 좌측 요소를 col-md-9으로 사이드바가 들어가는 우측 요소를 col-md-3으로 설정하고 있습니다. 우측 그리드를 col-md-8로 좌측 그리드를 col-md-4로 변경하는 것입니다. 좌측 본문 요소는 col-md-1 비율만큼 축소되고 사이드바는 col-md-1 비율만큼 확장 됩니다.
<div class="container">
<div class="row">
<div id="coverDiv"><div class="info col-md-12 hidden"><h3>넉넉한 일상</h3><p class="text-muted">독후감 등산 소소한 IT정보 고사 및 역사정보</p></div><div class="loading"></div></div>
★<div id="leftContent" class="col-md-9">
<div id="content">
★표시된 태그의 col-md-9를 col-md-8로 수정합니다.
<div id="leftContent" class="col-md-8">
.<aside><div id="sidebar" class="sidebar col-md-3">
이와 함께 <aside> 태그의 col-md-3을 col-md-4로 수정합니다
<aside><div id="sidebar" class="sidebar col-md-4">
본문은 col-md-1 비율만큼 축소되고 사이드바는 col-md-1 비율만큼 확장됩니다.
1. css @media 수정의 경우
위 이미지 기본 화면 vs 아래 이미지 변경화면
2. padding-left 적용의 경우
▶본문과 사이드바를 포함하는 콘테이너에 padding-left 60px 적용의 경우
위 이미지 기본 화면 vs 아래 이미지 변경화면
▶본문을 포함하는 요소에 padding-left 60px 적용의 경우
위 이미지 기본 화면 vs 아래 이미지 변경화면
3. 그리드 조정의 경우
위 이미지 기본 화면 vs 아래 이미지 변경화면
이미지로는 차이를 식별하기에는 충분치 않은 것 같습니다.
크롬 개발자도구(control+shift+i 또는 크롬 우측상단 더보기 아이콘
을 클릭 도구더보기->개발자도구)에서 표시된 사이즈를 표로 하겠습니다.
|
|
전체 |
본문 |
사이드바 |
| 기본 |
1170px |
832.5px |
262.5px |
|
media query 수정 |
1080px |
765px |
240px |
|
본문 사이드바 포함 padding |
1170px |
798.75px |
251.25px |
|
본문 padding |
1170px |
787.75px |
262.5px |
|
그리드 조정 |
1170px |
735px |
360px |
감사합니다.