구글 블로그 반응형 테마 상단 사이드바 가젯 위쪽 / 아래쪽 세로 정렬하는 방법

구글 반응형 테마(템플릿)의 사이드바는 위쪽 사이드바(top sidebar)와 아래쪽 사이드바로 나뉘어 있습니다. 아래쪽 사이드바는 세로로 위쪽 정렬이 되므로 일반적인 사이드바와 차이가 없습니다.

위쪽 사이드바는 세로로 가운데 정렬이 되도록 기본 설정되어 있습니다.
블로그 구성이나 특성에 따라서는 세로로 위쪽 정렬 또는 아래쪽 정렬을 하는 것이 더 잘 어울릴 수 있겠습니다.


1. 위쪽 사이드바 내용이나 요소를 세로로 위쪽 또는 아래쪽으로 정렬하는 방법은 아래와 같이 추가한 가젯(gadget)에 margin을 설정하면 됩니다.

세로로 위쪽 정렬을 하려면, margin: 0 auto auto auto; 속성을 주고
세로로 아래쪽으로 정렬하려면, margin: auto auto 0 auto; 속성을 주면 됩니다.

[구글 반응형 테마 상단 사이드바 세로 아래쪽 정렬]

2. 반응형 테마의 상단에 넣은 가젯에 마진(margin) 속성 설정은 테마 디자이너에서 하면 됩니다.
>> 블로그 대시보드 > 테마(Theme) > 사용자 설정 (Customize) > 고급설정 (Advanced) > CSS 추가 (Add CSS)에서 설정합니다.

[예: HTML 가젯을 상단 사이드바에 넣고 세로 아래쪽 정렬 속성을 줌]

#HTML1 {margin: auto auto 0 auto; width: 300px;}

위 예에서
1) HTML1은 추가한 가젯 고유 아이디 (ID)이므로, 실제 추가한 가젯 ID로 대체하면 됩니다. 가젯 ID 앞에는 #을 붙여야 합니다.

예컨데, #HTML2, #HTML3, .... #BlogList1, #PopularPosts1, ... 등.
>> 추가한 가젯 아이디 (ID) 쉽게 찾는 방법은 링크 페이지 참조

2) 가젯의 너비 (width: 300px) 속성을 준 것은, 너비 속성을 주지 않으면 상단 사이드바에서는 사이드바 하단에 가로 스크롤 바가 생성되어 보기가 좋지 않기 때문입니다.

>> 실제로 적용한 예 보기 

도움이 되기를 바랍니다.