구글블로그 사용법: 가젯.위젯(gadget.widget)의 안팎 마진(여백) 조절하는 방법

사용법과 팁: 구글블로그, 텀블러, 크롬, 파이어폭스, 애드센스, HTML... 

구글 블로그의 템플릿을 적용하여 보면, 블로그 구조에 따라 위젯(가젯)의 안팎 여백을 조절할 필요가 있을 때가 있다. 아래와 같이 코드를 추가해 주면 간단히 해결할 수 있다.


1. 메인과 사이드바의 모든 위젯에 적용

/* Main and Sidebar widget
---------------------------------------- */
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:1px 2px 3px 4px;
padding:1px 2px 3px 4px; 
}

2. 메인의 모든 위젯에만 적용

/* Main widget
---------------------------------------- */
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:1px 2px 3px 4px;
padding:1px 2px 3px 4px; 
}

3. 사이드바의 모든 위젯에만 적용

/* Sidebar widget
---------------------------------------- */
.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:1px 2px 3px 4px;
padding:1px 2px 3px 4px; 
}

※ 위의 코드들은 구글 블로그 템플릿 가운데 심플-템플릿에서만 작동합니다.

※  border-bottom:1px dotted $bordercolor; 
이 코드는 위젯의 아랫쪽 테두리선을 지정하는 것이므로 필요에 따라 삭제해도 됩니다.
코드의 " $bordercolor "부분은 #123456 과 같은 색상코드로 바꾸어도 됩니다. 

※ 수치는 픽셀(px), 포인트(pt), 퍼센트(%) 또는 em으로 주면 됩니다.
수치는 -5px 과 같이 음수(마이너스)로 지정을 해도 됩니다.

※ 수치 단위에 대한 자세한 내용은 여기를 참조하세요 >>
※ 코드를 추가하는 방법은 여기를 참조하세요 >>



도움이 되었기를 바랍니다.

Labels: Google Blogger 구글 블로그