구글 블로거(Blogger.com / Blogspot) 기본 템플릿 그리드(Grid) 스타일로 수정하기 초간단 코드

오랫동안 반응형 스킨을 사용하다가, 다시 구글에서 제공하는 블로거 기본스킨으로 돌아왔습니다. 기본스킨으로 돌아왔지만 그 자체로는 제가 사용하기에 기능상으로 문제가 있어서 개조를 좀 했습니다. 그 중 첫번째 팁을 공유하고자 합니다.

블로거에서 제공하는 기본 템플릿은 그리드 스타일을 지원하지 않습니다. 그래서 그리드 타입의 포스트 리스트를 제공하는 커스텀 반응형 템플릿을 사용하다가 이번에 다시 기본스킨으로 돌아왔습니다.

돌아온 이유는, 일단 반응형 스킨들의 로딩 속도가 너무 느립니다. 불필요한 기능들이 너무 들어가서 그런지 모르겠습니다만, 이것 저것 꾸미고 나면 하나같이 로딩이 맘에 안들더군요.

또 한 가지 이유는, 저처럼 레이블이 엄청 많은 경우 메뉴 구성하기가 까다로운데, 지금까지 한동안 3단 슬라이딩 아코디언 메뉴를 사이드바에 달아서 커버했습니다. 그런데 전체 레이블을 한번에 보고 고를 수 없다는 단점이 있고, 최하위 3단계에 속한 레이블에 접근하려면 3번의 클릭을 요구하기 때문에 접근성에 문제가 있다고 판단했습니다.

그래서 결국 "만들어 써 볼까나.." 생각하게 되었습니다.

이번 템플릿 제작의 컨셉은 다음과 같습니다.

1. 포스트 목록 그리드 스타일 구현
자료실 성격의 메뉴의 경우 편리한 탐색을 위해서는 반드시 그리드 스타일 적용이 필요하다.

2. 사이드바 컬럼 갯수를 4개로 늘린다
모든 레이블을 사이드바에 집어넣기 위해서는 기본 템플릿이 제공하는 3단 사이드바로는 부족하다. 아울러 푸터 컬럼도 4개로 늘려놓는다.

3. 최대한 적은 스크립트
자바 스크립트 같은거 떡칠하지 않고 최대한 간단한 코드로 필요한 기능을 얻는다.

4. 빠른 로딩속도
이상의 조건들을 충족하여 최대한 로딩속도 지연을 방지한다.


이 중, 핵심적인 수정사항인 그리드 스타일 목록 구현에 대해 나누고자 합니다.
그리드 스타일을 구현하는데 있어서 자바스크립트를 일절 사용하지 않고 기본으로 출력되는 포스트 목록을 그리드 스타일로 구현하는 것입니다.



0. 들어가기에 앞서 주의사항
이 강좌는 블로거에서 '점프 브레이크 (Jump Break)'기능을 사용하는 사람에게 더 적절한 강좌 입니다. 당연하겠죠?



1. 포스트 목록 위치 파악
제가 사용하는 파이어폭스 기준으로 설명합니다. 여러분의 블로그 메인화면에서 첫 번째 포스트의 제목을 확인하시기 바랍니다.

예를 들어 저의 경우
"Beijing Olympic Main Stadium 3D Model Free Download"
가 첫 번째 포스트 제목이라고 합시다.

그러면 여러분의 블로그에서 공백 아무곳에나 마우스 오른쪽 퍼튼을 눌러 나오는 메뉴에서 "페이지 소스"를 클릭합니다.


그러면 코드들이 주르륵 나올겁니다. 그러면 키보드에서 "Ctrl + F" 를 클릭하면 하단에 검색창이 뜰겁니다. 거기에 첫 번째 포스트의 제목을 붙여넣고 검색합니다. 그러면 다음 그림과 같이 제목부분을 찾아 줍니다.


초록색으로 된 부분이 포스트 제목인데, 제목 윗줄과 아랫줄에 자주색 "h3" 가 보이시죠? 그것이 제목이란 뜻입니다. 윗줄은 제목영역 시작, 아랫줄은 제목영역 끝을 뜻합니다.

meta 어쩌구 하는 것들은 건너띄고 몇 줄 위에 보면 div class 로 시작하는 부분들이 보일겁니다. 이것이 레이아웃을 정의하는 것이니 잘 보셔야 합니다.

<div class='post-outer'>라는 것이 시작되고 그 몇 줄 아래에 제목이 나오는 것을 알 수 있습니다. 그러므로 개별 포스트 외곽의 이름은 'post-outer' 되겠습니다. 기본스킨이면 찾아볼 것도 없이 'post-outer' 라는 class 이름을 사용하셔도 될겁니다.

다음으로는 포스트 목록이 표시되는 영역의 class 이름을 알아야 합니다. <div class='post-outer'> 위로 몇 단계가 보이죠? 저는 위 이미지에서 가장 위에 보이는 <div class='blog-posts hfeed'>에 적용하기로 했습니다. 여기서 빈 칸 다음에 붙은 'hfeed'는 빼고 'blog-posts'가 class 이름이 되겠습니다.

이렇게 두 개의 이름을 찾았습니다.
개별 포스트는 외곽 영역은 'post-outer'
포스트 목록이 표시되는 영역은 'blog-posts'



2. 코드 적용하기
코드를 적용해봅시다. 먼저, 코드를 어디에 넣느냐가 중요하겠죠? 템플릿 수정 메뉴에 들어가서 HTML 수정 창으로 들어갑니다. 다음 그림을 봅시다.


보시면 9번 라인에 </b:skin>으로 끝나고 516번 라인에 <b:template-skin>으로 시작하죠? 찾기 쉽도록 그 사이에 넣도록 합시다.



3. 조건문 작성
이제 정해진 자리에 코드를 넣도록 합시다. 먼저 다음과 같이 조건문을 넣읍시다.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.isMobile == &quot;false&quot;'>

</b:if>
</b:if>

<b:if> 로 시작하고 </b:if>로 닫아서 끝납니다.

두 가지 조건인데, 첫번째 것은 인덱스 화면에서만 작동하라는 것입니다. 예를들어서 포스트를 읽으려고 클릭했는데 그것마저 그리드뷰로 보여지면 안되겠죠? 그러니까 메인페이지나 검색결과 페이지등 목록으로 봐야 할 경우만 그리드로 봐야겠죠? 그 얘깁니다.

두 번째는 모바일에서는 작동하지 말라는 뜻입니다. 작은 휴대폰 화면에서는 오히려 불편할 수 있으므로 제외시킨 것입니다. 그러니까 이것은 여러분의 재량에 따라 적용하든 말든 하셔도 무방하겠습니다.



4. CSS 작성
스타일 코드를 작성합시다. 그리고 이렇게 작성된 코드를 위 조건문 사이에 넣으면 되는 것입니다.

<style>
.blog-posts { /* Masonry container */
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 2em;
    -webkit-column-gap: 2em;
    column-gap: 2em;
    column-rule: 1px dotted #000000;
    -moz-column-rule: 1px dotted #000;
    -webkit-column-rule: 1px dotted #000;

}

.post-outer { /* Masonry bricks or child elements */
    background-color: #fff;
    display: inline-block;
    margin: 0 0 3em;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
</style>

.blog-posts.post-outer는 1번 과정에서 찾은 class 이름이죠?

먼저 .blog-posts 부분을 봅시다. 포스트 목록이 표시되는 전체 영역이죠?
3 이라고 된 부분은 3열로 표시하겠다는 말입니다. 그러므로 여러분의 환경과 의도에 맞게 2로 바꾸거나 4로 바꾸어도 됩니다. 2em 이라고 된 부분은 컬럼 사이의 간격 입니다. 그러므로 여러분의 취향에 따라 바꾸셔도 됩니다. 참고로 소숫점도 가능합니다. 그 아래 초록색으로 표시된 부분은 없어도 되는 코드 입니다. 뭐냐면 컬럼 사이에 구분선을 넣는 코드 입니다. 1px 라고 된 부분은 선 두께가 1픽셀이라는 뜻이고, dotted 는 점선이라는 뜻입니다. 실선으로 하고 싶으면 solid 라고 바꾸면 됩니다. 마지막 #000은 색상 입니다. 원래는 #000000 이 정석인데 같은 숫자는 3개로 줄여써도 됩니다. #fff 는 흰색입니다.

다음은 .post-outer 부분입니다. 개별 포스트 영역 입니다.
백그라운드 컬러는 포스트의 배경색이라는거 아실테고, 두번째줄의 display: inline-block; 은 중요 코드이니 빼먹으면 안됩니다. margin 부분은 여백을 말하는데, 세 개의 숫자가 있지요? 첫번째 '0'은 상단여백, 두번째 '0'은 좌우여백, 세번째 '3em'은 하단 여백 입니다. 하단에 붙는 다음 포스트와의 간격만 3em 부여한 것입니다. 'border-bottom'은 포스트 하단에 다음 포스트와의 구분선을 넣은 것입니다. 1픽셀 실선입니다. 이것도 없어도 되는 코드입니다.


5. 완성
이제 완성된 전체 코드는 다음과 같습니다.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.isMobile == &quot;false&quot;'>
<style>
.blog-posts { /* Masonry container */
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 2em;
    -webkit-column-gap: 2em;
    column-gap: 2em;
    column-rule: 1px dotted #000000;
    -moz-column-rule: 1px dotted #000;
    -webkit-column-rule: 1px dotted #000;
}
.post-outer { /* Masonry bricks or child elements */
    background-color: #fff;
    display: inline-block;
    margin: 0 0 3em;
    width: 100%;
    border-bottom: 1px solid #ccc;
}
</style>
</b:if>
</b:if>

적용하고 확인해보시면 그리드 스타일로 바뀐 것을 볼 수 있습니다.



6. 추가코드
다 끝난거 아니었냐? 끝나긴 했는데, 제 경우에 적용한 추가 서비스 몇가지 나갑니다. 3단으로 하고 나면 큰 이미지는 가로가 잘려 보이게 되더군요. 당연하죠? 그래서 다음 코드를 추가 했습니다.

.post-body img {
width:100%;
height:100%;
display: block;
}

위 코드를 추가했을 경우, 커서 짤리는 이미지는 줄여서 적당하게 보여줍니다만, 더 작아서 공간이 남던 이미지를 크게 늘이지는 않습니다. 참고 바랍니다.

그리고 3단 그리드를 만들고 나니 제목이 너무 크게 느껴지더군요. 그래서 다음 코드를 추가했습니다.

h3.post-title a {
  font-size: 15px;
}



7. 마무리
사실 이 외에도 몇 가지 수정 코드가 적용되었지만, 그건 기본 템플릿 중에서 무엇을 베이스로 하느냐에 따라 달라질 코드들이라 여러분에게 알려드릴 수는 없습니다.

아무튼 이 CSS코드를 사용하여 간단하게 그리드를 구현했습니다. 제 경우는 한 페이지에 12개의 목록을 불러오도록 설정했는데 이렇게 하니까 자바스크립트로 구현한 그리드 시스템에 비해 훨씬 가볍고 빠르다는 느낌적인 느낌이네요.

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

No comments:

Post a Comment

Popular Posts