워드프레스의 장점 중 하나는 다양한 테마를 이용할 수 있다는 점입니다. 유료 테마뿐만 아니라 쓸만한 무료 테마도 많이 있습니다. 개인적으로 Attitude라는 테마가 마음에 드는데요, 이 테마는 무료로 제공되지만 테마 옵션을 강화한 유료 버전도 있습니다.
하지만 이 Attitude를 비롯하여 대부분의 무료 테마에서는 블로그 글이 매우 평범하게 표시됩니다. 이렇게 평범하게 표시되는 블로그 글(혹은 카테고리 글 등)을 그리드 형식으로 표시한다면 사이트가 더욱 살아날 것입니다. 특히 포트폴리오를 구성할 때 그리드 형식을 많이 사용하게 됩니다.
단순히 CSS를 사용하여 간단히 2단 혹은 3단 등으로 배열하는 것이 가능합니다. jQuery와 CSS를 함께 사용한다면 더욱 쉽게 그리드 레이아웃을 구현할 수 있습니다.
예를 들어, 아카이브 페이지에서 개별 글 요소에 컬럼별로 별도의 클래스를 추가한다면 그리드에서 개별 글의 좌우 여백/패딩을 보다 수월하게 설정이 가능합니다.
jQuery를 사용하면 개별 글의 각 요소에 컬럼별로 class를 추가할 수 있습니다. 이 방법을 사용하면 별도의 테마 소스 파일을 수정할 필요가 없이 가능합니다. (만약 PHP로 구현한다면 테마 소스를 복잡하게 수정할 수밖에 없을 것입니다.) 다음과 같은 스크립트를 사용하면 홀수번째 글에는 [fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][pcode]odd[/pcode] 클래스가 추가되고 짝수번째 글에는 [/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][pcode]even[/pcode] 클래스가 추가됩니다.
$('section:odd').addClass('odd'); // 홀수 컬럼
$('section:even').addClass('even'); // 짝수 컬럼요소 이름은 테마에 맞게 수정하도록 합니다.
이제 CSS로 그리드 컬럼이 나오도록 조정할 수 있습니다.
2단 배열 예시:
section {
width: 48%;
display: inline-block;
vertical-align: top;
}
section.odd {
padding-right: 10px;
box-sizing: border-box;
}
section.even {
padding-right: 10px;
box-sizing: border-box;
}그러면 다음과 같은 형식으로 블로그 글이 배열됩니다.
마찬가지 방식으로 3단, 4단 등으로도 배열할 수 있습니다. 이런 경우 jQuery 스크립트에 [/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][pcode]nth-child[/pcode]를 추가하여 컬럼별로 [/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][pcode]class[/pcode]를 달리하여 추가할 수 있습니다.
참고:
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
