Fastboot v1.6.2 본문 여백 설정하기(CSS margin)

본문 타이틀과 본문내용이 너무 바짝 붙어있으면 제가 보기 불편하더라구요. 그래서 본문 상단에 여백을 두고 시작하게끔 설정해놨습니다.

당시에는 그냥 후다닥 대충해서 별 생각이 없었는데 궁금해하시는 분도 계시고하여 오늘은 Fastboot 스킨의 본문 여백을 설정하는 방법에 대해 간단히 설명하겠습니다.

 

CSS의 margin 속성과 관련한 것이므로, Fastboot 스킨 사용자가 아니더라도 참고하시면 도움이 될 거예요.

 

 

 

#1. CSS의 margin

 

margin은 영역 밖의 여백을 설정하는 거라 생각하면 됩니다. 

margin 태그를 사용하는 방법은, 3가지 형태로 알아두세요.

 

① margin: 50px;

② margin-top: 50px;

③ margin : 50px 50px 0 50px;

 

첫번째 <margin: 50px;>는 상하좌우 여백을 통틀어 50px로 일괄 지정하는 겁니다.

두번째 <margin-방향:50px;>는 특정 방향의 여백을 각각 설정할 수 있어요.

margin-top 위

margin-right 오른쪽

margin-bottom 아래

margin-left 왼쪽

세번째 <margin : 50px 50px 0 50px;>는 네 방향을 각각 설정하되, 한 번에 설정하는 거예요.

이 경우에는 각 수치들이 시계방향으로 적용됩니다.

순서대로 위, 오른쪽, 아래, 왼쪽을 가리키는 거죠.

 

 

 

#2. Fastboot 스킨에서 여백 설정하기

 

margin에 대해 이해를 하셨다면, 스킨에 직접 적용해봅시다.

 

우선 어느 영역에 스타일을 지정해야할지 파악하세요.

Fastboot 스킨의 경우 클래스명이 article 이라는 div의 속성을 다루어야 합니다.

 

관리 < 꾸미기 < HTML/CSS 편집 < CSS 탭에서

Ctrl+F를 눌러  [ .article { ]을 찾아주세요.

article과 관련한 태그가 몇몇 있으니 한 방에 찾으려면 중괄호까지 빠뜨리지 않고 검색해주세요.

 

초록박스를 찾으셨나요? 저기에 margin 태그를 원하는대로 삽입하기만 하면 됩니다.

저는 상단만 적용했습니다.

 

 

 

만약 좌, 우 여백도 지정하고 싶다면

margin-left, margin-right를 더 추가하세요.

 

너무 여백을 많이 설정하면 자칫 허전해 보일 수도 있고,

반대로 너무 좁게 설정하면 답답해 보이고 가독성도 떨어져요.

본인의 포스팅 스타일 및 디자인에 맞추어

균형감을 줄 수 있는 적당한 여백을 설정하세요*^^*