허접한 CSS3 활용

당연하지만, 브라우저의 환경이나 등등, 아직까진 css3은 완벽하게 구현되진 않습니다만.. 에.. 그러니까 말많은 css3의 환경이랄까, Mozilla/Firefox/Gecko는 -moz-를 쓰고, Webkit, 그러니까 Safari/Chrome은 -webkit-이란 녀석을 씁니다. ie8은 아직 css3를 지원하지 않..고 있죠? 아무튼 (...) 나름 공부도 할겸.. 정리 해봤습니다.

1. 그림자 효과 넣는 것부터 볼까요? 그림자효과를 넣을때는[code]box-shadow: #333 3px 3px 4px; -moz-box-shadow: #333 3px 3px 4px; -webkit-box-shadow: #333 3px 3px 4px;[/code]moz와 webkit을 사용하는 브라우저에 보이게 하기 위해서 요로케 작성하죠. 아시겠지만 #333은 색을 지정하고, 첫번째와 두번째 px값은 각각 가로와 세로로 얼마만큼 그림자를 줄 것인가-이고, 마지막 px값은 blur, 그러니까 보기좋게 번짐효과를 얼마나 줄건지 결정하는 부분입니다. 위 스타일을 사용하면 아래그림처럼 나옵니다. 참 쉽죠잉?

2. 다음은, 그라디언트입니다. 사실, 개인적으로 이것때문에 css3를 찾아봤었습니다.[code]-moz-linear-gradient(-90deg,#1aa6de,#022147); -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));[/code]그라디언트.. 첨엔 moz랑 webkit이 미묘하게 달라서 이게뭥미-스러운 부분도 있긴한데.. 어짜피 저는 스타일만 알면되니 상관없다능! moz는 첫번째 정의값, -90deg가 어느 방향으로 얼마만큼 그라디언트를 줄지를 정하는겁니다. 물론 뒤에 컬러값은 시작되는 색과 끝나는 색이죠. webkit의 사용예는, 첫번째 linear가 그라디언트의 형태를 지정하는 부분이고, 두번째 세번째가 위에서 아래로 방향을 제시, 다음값이 시작되는 색과 끝나는 색입니다.

3. 다음은 RGBA, 사용해보니 여러모로 유용할 것 같습니다. 뭐 설명이 필요없죠. 예제와 함께 데모도 함께 보시면 이해가 빠르실 겁니다.[code]background-color: rgba(0, 54, 105, .5);[/code]이걸 이용해서, 예제를 만들어본다면...? 아래처럼 배경이 50% 투명화를 시켜줄 수 있습니다. 참 쉽죠잉? 주의할건, 헥스(#)값이 아니라 rgb모드로 색을 지정해줘야 된다는 점입니다. 아시다시피 1,2,3번째 값에 rgb색을 주고, 맨 끝의 값이 투명화 %입니다. 0에 가까울 수록, 투명해지고, 10에 가까울 수록 불투명해지죵.

4. 다음은 은근히 자주 애용하는 border, 테두리넣는 방법입니다.[code]border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;[/code]얼만큼 테두리를 줄건지 px값을 정하고, 색을 지정합니다. 여기서 중요한건 bottom, top, left, right를 같은 색으로 정의해주어야 합니다. 그래야 아래 그림처럼 이쁘게(?)나옵니다.

5. 이번엔, 드레그로 선택한 텍스트의 배경값을 바꿔주는 겁니다만. 참고로 ::selection은 지금 현재 CSS3에서는 빠진 걸로 알고 있습니다만.. (...) 아무튼...[code]::selection { background: #3C0; /* Safari */ color: #90C; } ::-moz-selection { background: #3C0; /* Firefox */ color: #90C; }[/code]코드를 적용하면 아래처럼 드레그 했을 시에, 색이 바뀝니다. 나름 활용도가 높을 지도 모르겠네요.

6. 다음은 마우스를 올렸을대 선택된 박스를 키워주는 겁니다.[code]-moz-transform: scale(1.15); -webkit-transform: scale(1.15);[/code]이걸 li:hover에 넣어서 예제를 만들면, 마우스를 롤오버시켰을 때, 크게 키워주는 효과를 낼 수 있습니다.

7. 마지막으로, 제가 이용해보고 싶었던 칼럼넣는 방법인데, 나름 쓸만할 것 같습니다. [code]-moz-column-count:3; -moz-column-rule: solid 1px black; -moz-column-gap: 20px;[/code]이렇게 주면, 그 부분에 한해서 칼럼을 3개로 나눠주더군요. 물론 두개도 가능합니다. 글이 길어지면 다음 칼럼으로 넘어가는데, 애초에 두개의 칼럼을 나눠서 쓸 수 있는 간단한 방법이 있으면.. 좋겠습니다만.. 음!

쿠나님 블로그에 보니까, css3으로 이미지 반사효과도 낼 수 있던데.. css만으로 그런 효과를 낼 수 있다니.. 한편으론 신기하고, 한편으론 그걸 또 적용할 생각하면 머리가 아프네요. 그럼 오늘의 css3 공부는 끝-

참고, http://www.webdevout.net - 이 곳에 가면, css3의 특징과 적용가능한 브라우저를 살펴볼 수 있습니다.