Custom Fields Part1.

WordPress에서는 글 작성시 Custom Fields를 이용하여 css를 작성하면 http://ilovetypography.com/같은 블로그처럼 포스팅마다 새로운 디자인의 페이지를 만들어 낼수가 있습니다.

사용하고 계신 Themes의 header.php파일을 열고 head안쪽으로 아래와 같이 소스를 추가해 줍니다.
[html]
<?php //Custom Fields
if(is_single()) {
$style = get_post_meta($post->ID, ‘_custom_style’, true);
if($style) {
?>
<style type="text/css" media="screen, print">
<?=$style?>
</style>
<?php
}
}
?>
[/html]

Themes를 수정하셨다면 글 작성시 아래 이미지와 같이 Custom Fields부분에 내용을 작성 하시면 새로운 디자인의 페이지를 만들어 내실수 있습니다.

툴바 감추기?

윤석찬님 블로그의 글 중 “검색은 멈추지 않는다!“라는 글에서 보이는 검색 통계를 보면 모바일 검색의 트래픽은 점심, 잠들기전 시간에 올라가는것을 볼수 있습니다. 점심을 먹으러 가서도 웹 페이지를 열고 검색을 하고 있다는 뜻이겠죠.

모바일의 특성상 어디서든 사용할수 있지만, 느린 환경에서 사용할 경우도 많은데 검색을 하기 위해서 아래 컨텐츠까지 전부 로드 되는걸 기다리는건 시간, 트래픽 낭비라고 봅니다. 그렇기에 html만 로드된 상태서도 분명 검색이 가능해야 한다가 제 생각입니다.
허나 현실은 그렇지 못하죠 좀 더 많이 보여주자는 기획때문인지 대부분의 포탈 사이트들은 아래와 같은 툴바를 감추는 소스(소스 자체는 틀릴수도 있습니다.)를 사용하고 있습니다.

더 보기 “툴바 감추기?”

column을 이용한 vGrid따라하기

요즘 유행하는 레이아웃 중 vGrid(이름이 맞는지 몰라서, jQuery플러그인 이름을 따랐습니다.)라는 레이아웃이 있습니다. jQuery플러그인으로 나온 뒤 많은 사이트에서 사용되고있는 멋진 레이아웃 방법이라고 생각합니다.

이 레이아웃 방식은 박스별로 float을해서 코딩을 하면 position으로 바꿔서 알맞는 위치에 담아주는게 핵심이라고 생각합니다. 문제는 유동적인 박스때문에 javascript를 이용하지 않으면 방법이 없었지만, css3의 속성 중 column을 이용하면 비슷하게나마 구현이 가능한듯합니다.

익스에서는 column을 지원하지 않기 때문에 작동하지 않습니다.

Demo

height: 70px
height: 50px
height: 40px
height: 60px
height: 90px
height: 100px

column에 대해선 다른곳에서도 많이 다뤘기때문에 설명 드리지 않겠습니다.

문제는 div의 높이가 정의 되있지만, column을 세개로 정확하게 나눠버린다는것 입니다.
긴 div박스가 있다면 중간에 짤라서 다음 column에 이어서 보여주게 되는거죠 파이어폭스4 기준으로 붉은색 부분과 파란색 부분이 다음 칸으로 짤려서 올라간 걸 보실수 있습니다.

해결방법

파이어폭스, 오페라의 경우 div에 display속성을 바꿔주시면 해결이됩니다. 여러 속성르 테스트해보진 않았고. inline-block, table두가지 속성을 이용해서 테스트 해본결과 문제 없이 돌아갔습니다.
webkit엔진을 사용하는 브라우저(사파리, 크롬)의 경우에는 더 확실한 방법을 제시해놨습니다. -webkit-column-break-before, -webkit-column-break-after, -webkit-column-break-inside를 이용해 문제를 해결 할수 있더군요.

완성된 Demo

height: 70px
height: 50px
height: 40px
height: 60px
height: 90px
height: 100px

완선된 Code

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> new document </title>
<style media="screen, print" type="text/css">
.vGrid { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:10px; -webkit-column-gap:10px; column-gap:10px; }
.vGrid div { -webkit-column-break-before:always; display:inline-block; width:100%; margin-bottom:10px; background-color:#dadad9; }
.vGrid .item1 { height:70px; }
.vGrid .item2 { height:50px; }
.vGrid .item3 { height:40px; background-color:red; }
.vGrid .item4 { height:60px; }
.vGrid .item5 { height:90px; background-color:blue; }
.vGrid .item6 { height:100px; }
</style>
</head>
<body>
<div class="vGrid">
<div class="item1">height: 70px</div>
<div class="item2">height: 50px</div>
<div class="item3">height: 40px</div>
<div class="item4">height: 60px</div>
<div class="item5">height: 90px</div>
<div class="item6">height: 100px</div>
</div>
</body>
</html>
[/html]

webkit의 버그?

하위 div에 opacity값을 줄 경우 -webkit-column-break-before등이 동작하지 못하는 문제가 있습니다.
다른 해결 방법이 있을지 모르겠지만..
몇달간 찾아본 결과 opacity값을 빼는 방법 외에는 다른 방법을 아직 찾지 못했습니다.

더 좋은 방법을 아신다면 피드백 부탁드립니다.ㅋ