블루큐브 스킨 뜯어보기 Part.1 - 「CSS3」
스킨
2010. 6. 1. 20:15
CSS3[씨에스에스삼]으로 div(글상자)의 모서리를 둥글게 만들어 보세요.
저도 방금 알아냈어요. (...)
드디어 시작된 스킨 뜯어보기 코너. 그런데 처음부터 난데없이 CSS3인 이유는...
블루큐브 스킨을 보시면 전체적으로 둥글둥글하다고 느끼실 겁니다. 그 둥근 테두리를 전부 이미지로만 처리해야 하는 애로사항이 있었는데, CSS3의 사용법 중 div(글상자)의 모서리를 둥글게 만드는 것이 있다는 것을 뒤늦게 깨닫고 말았습니다.
...-ㅅ-;; 많이 늦긴 하지만 CSS3을 사용하는 스킨이 되었다는 말입니다.
예를 들어 이런 부분이 있다고 하면
이렇게 세 부분으로 나누어져서, 각각 부분을 글상자로 만든 다음
윗부분과 아랫부분은 테두리를 둥글게 그려놓은 배경이미지로 채워넣고,
가운데 부분은 흰색 배경으로 채워 넣는 것이었습니다.
.commentReplyTop {
width:603px; height:6px;
margin-top:12px;
background:url(images/commentReplyTop.png) center center no-repeat;
}
.commentReplyBottom {
width:603px; height:6px;
margin-bottom:12px;
background:url(images/commentReplyBottom.png) center center no-repeat;
}
.commentList p {
background-color:#FFF;
padding:5px 12px 5px 12px;
margin:0;
}
<div class="commentReplyTop">
<div class="commentReplyTop">
</div>
<p>[샵샵_rp_rep_desc_샵샵]</p>
<div class="commentReplyBottom">
</div>
이렇게 난잡하기 짝이 없던 코드가
.commentList p {
background-color:#FFF;
padding:12px;
margin:12px 8px 12px 0;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
<p>[샵샵_rp_rep_desc_샵샵]</p>
<p>[샵샵_rp_rep_desc_샵샵]</p>
무려 이렇게 간단하게 바뀌어버렸습니다. 오오 이런...
결과는 위의 사진과 거의 동일하게 나오겠죠?(귀찮아서 사진 안올리려는 수작)
결과는 위의 사진과 거의 동일하게 나오겠죠?
색깔이 좀 달라진건 신경쓰지 말아주시고, 결과물이 아주 약간 더 깔끔하다는 것을 확인할 수 있습니다.
코드를 보시면 감이 확 오실 겁니다. 넵. 크롬, 사파리, 파이어폭스에서만 보입니다.
사용법은 이렇습니다.
-webkit-border-radius:(수치)px;
-moz-border-radius:(수치)px;
위의 두 줄을 CSS파일의 원하는 부분에 부담없이 넣어주시면 됩니다. 픽셀 말고 다른 단위는 되나 확인을 안해봤네요.
div 뿐만 아니라 img(이미지)에도 먹히더군요. 예뻐 죽겠네요. -ㅂ-
신기술과 친하게 지내는것은 언제나 좋은것 같습니다. 어허허
위의 글상자 모서리 둥글게 다듬어주는것뿐만 아니라 텍스트 그림자에 글상자 그림자, 그라이언트까지 아주 지옥같은 집이 천국의 러브하우스로 변하는중.
이것들을 굉장히 다양한 방법으로 혼합해서 사용하면 무한한 응용이 가능하더군요.
근데 이제부터 IE나 오페라에서는 제 스킨이 매우 각지게 나오겠군요? 완전 다른 스킨마냥...
2010.06.02 01:09
이거 적용된것도 올려주시면 안될까요?
2010.06.02 13:34 신고
사진이라면 방금전에 추가했습니다.
2010.06.02 08:28 신고
훔 나중에 참고 하겠습니다.
2010.06.02 13:37 신고
넵.
2010.06.02 09:14 신고
오페라는 표준화된 CSS3 속성을 사용합니다.
앞의 수식어를 빼주는 격이지요. 예를들면 box-shadow라던가 border-radius 식으로 ..
IE에서도 가능합니다. htc 파일을 사용하거나 Prototype/JQuery 기반으로 자바스크립트 꼼수를 쓰는 건데... 사실상 거의 이건 내부적으로 노가다가 심하니, IE9에서 CSS3를 제대로 지원해주기를 두손 두발 모아서 기도하는 수밖에는 없네요 ;ㅅ;..
2010.06.02 13:41 신고
오페라가 더 낫군요 -ㅅ-; 폰트만 어떻게 할 수 있으면 더 좋은데
그리고 전 노가다는 잘하지만 어려운건 몰라서 ㅠㅠ 그래도 좋은 정보 감사합니다.
2010.06.02 11:23
진짜 ie에서는 안보이네요.
좋은정보 감사
2010.06.02 13:42 신고
IE는 쿠나님 말씀대로 9를 기대해봐야 할것 같아요.
(체험판 써보니까 속도는 꽤 빠른듯.)
2010.06.02 15:46
IE9 체험판으로 제 블로그를 들어가면 다운됩니다.
2010.06.02 15:50 신고
허억;;
블로그마다 다른가보네요 http://tweetphoto.com/25165639
2010.06.03 21:01
특별출연했당 낄낄