お前の悲しみは僕には切望 :: 방탄웹 - 둥근모서리 박스 만들기

2010. 2. 11. 13:35

방탄웹 - 둥근모서리 박스 만들기

2010. 2. 11. 13:35 in life & Computer/bulletproof & CSS

디자이너가 포샵이나 일러스트로 만들어준 둥근모서리 박스...
디자이너는 너무 쉽게 만들어주지만.. 그것을 코딩화하는 웹퍼블리셔에게는 그리 쉬운 작업이 아닙니다.

아니 어쩌면 아주 짜증나는 일이기도 합니다. 그것을 구현 못하면 그것도 못하냐 하는 하대투의 눈초리가 더 주먹을 불끈쥐게 만들죠..

왜냐하면 박스라는것은 내용이 늘어나거나 박스가 커지면 그에 맞게끔 박스도 변형이 되어야 하니깐 말이죠.

그런데 의도한대로 웹으로 둥근 박스를 만들었다 할지라도..

표준 브라우져에서는 잘보이던 둥근박스가 한심한 브라우져인 ie6에서는 깨지고 하는 현상이 많이 발생하지요..

내 브라우져에서는 잘보이던 박스가 납품처 사장의 브라우져에서 깨져버린다면, 아니.. 납품처 사장에게는 어캐 어캐해서 넘어갔다고 쳐도.. 대학교 다니는 사장의 아들의 브라우져에서 깨져버린다면.. 참으로 난감한 일이 발생하고 말죠..

자 그럼.. 이제 부터 쓰는 포스팅은.. 어떤 웹브라우져에서도.. 어떤 폰트가 얼마큼 커져도 박스가 깨지지 않게 하는 실무에서 많이 쓰이는 코딩을 소개합니다.

1. 우선적으로 박스 이미지를 준비해야 겠죠...

이미지 없이 둥근 박스를 코드로만 만든다고들 하는데 현재 최신 버젼의 파폭과 사파리에서는 box-rounded 속성이 적용되고 있습니다. 하지만,ie계열에서 안되면 의미가 없는것이 되겠죠...특히 ie6에서 안되면 상용 웹페이지에서는 의미가 없겠죠.... 그리고 코드로만 둥근 웹박스를 만든다는것은 어디까지나 개인의 만족을 위해서는 해볼만한 가치입니다만.. CSS라는것이 코드의 간결화를 위해 태어난것인데... 목적을 상실한다면 차라리 table로서 둥근박스를 만드는것보다 못한 일이 되겠죠.. 그래서 이미지를 이용해서 박스를 만들어보도록 하겠습니다.

포토샵의 박스툴의 rounded rectancle tool을 이용해서 둥근박스를 만듭니다.
(만드는게 구찮으시면 일러스트에서 둥근박스를 만들어 가져오면 구찮은 작업을 안해도 됩니다. 포샵있는 컴터에 대개는 일러스트는 같이 있으니깐요...)

위와 같이 둥근 박스를 이미지로 만들었습니다.

포샵은 잠깐 손을 놓구 에디터로 와서 둥근박스안에 들어갈 내용을 임시적으로 만듭니다.

요따구로 우선 엘리먼트들을 만듭니다.

이제 박스에 맞게끔 이미지를 잘라야 합니다.

우선 아래와 같이 잘라줍니다.

자른 이미지가 요따구로 생길겁니다.

left.gif

right.gif

이제 CSS스타일을 적용해봅시다.. 우선 아래와 같이 적용해봅시다.

#box { float:left; background:url(right.gif) top right no-repeat; }
.contents { background: url(left.gif) top left no-repeat; font-size: 30px;}

실험을 위한것이니 폰트사이즈도 30정도로 줘보고 박스안의 컨텐츠 크기에 따라 박스너비가 커지게 하기 위해 float: left를 줍니다.
그럼 다음으로 contents2에 대해서 속성을 부여해봅시다.

.contents2 { background:url(left.gif) bottom left no-repeat; }

자 이제 오른쪽 아래를 처리해야 겠군요..
앞의 div 코드를 변형해봅니다.

속성을 주기위해 <akas></akas>식으로 양옆을 만들어줍니다.
그리고 속성을 줘보죠..

.contents2 akas { background:url(right.gif) bottom right no-repeat; }

이러면 어떻게 보일까요?

이제 패딩과 마진을 줘서.. 각 위치를 잡아줘야 합니다.

content엘리먼트의 여백을 0으로 줍니다.
그러면 왼쪽상단 모서리가 올라가게 됩니다.

콘텐츠와 박스가 붙어서는 아무런 일도 못하게 되죠..
content 엘리먼트의 패딩값을 적절수준으로 줍니다..
단 bottom의 값은 0으로 주어야 합니다. bottom을 0으로 주지않으면 content2엘리먼트와 20간격이 생겨져 버리겠지요..padding 20, 20, 0, 20

.contents { margin: 0px; padding: 20px; padding-bottom: 0px; background: url(left.gif) top left no-repeat; font-size: 30px; }

content2도 content엘리먼트와 각격을 주지 않기 위해 여백을 0으로 주고 엘리먼트가 박스안으로 들어와야 하니 왼쪽 패딩만 위와 같이 20패딩을 줍니다. padding 0 , 0 , 0, 20
.contents2 { margin: 0px; background:url(left.gif) bottom left no-repeat; padding: 0px; padding-left:20px; }

박스안으로 콘텐츠들이 들어오게 되죠...
자 이제 박스를 닫아주기 위해 만든 합니다. 추가해준 <akas></akas>엘리먼트에 속성을 부여해야 겠네요..

contents2엘리먼트를 블록화해보죠..
display: block을 줍니다.. 이 속성은 해당 엘리먼트가 블럭화되어 보여집니다.. 간단히 이야기하면 html코드에서 div선언을 하지않아도 div처럼 블럭화 되어 보여준다는 뜻입니다.

블럭화 되면서 백그라운드 이미지가 표시되면서 박스가 완성되어 집니다.

자 이제 content2도 오른쪽 아래쪽 여백을 주어야 겠죠...padding: 0, 20px, 20px, 0
.contents2 akas { display:block; background:url(right.gif) bottom right no-repeat; padding: 0px; padding-right: 20px; padding-bottom: 20px; }

완성된 둥근 박스 테두리입니다.. 완성 소스이고요..
#box { float:left; background:url(right.gif) top right no-repeat;}
.contents { margin: 0px; padding: 20px; padding-bottom: 0px; background: url(left.gif) top left no-repeat; font-size: 30px; }
.contents2 { margin: 0px; background:url(left.gif) bottom left no-repeat; padding: 0px; padding-left:20px; }
.contents2 akas { display:block; background:url(right.gif) bottom right no-repeat; padding: 0px; padding-right: 20px; padding-bottom: 20px; }

물론 이건 누군가 개발해논것을 가져다 쓴거구요.. 이런 고차원적인 생각은 전 할수 없죠...
다만.. 원래 베껴쓰는것도 나쁜일이 아니죠... 기법을 배워가는건데요..

하지만 이 소스를 실무에 적용하려 하니 문제가 좀 있군요..

원본 이미지 그림보다도 div이 커져버리면..방탄웹이 되지못하는 그런 상황이 옵니다..즉 그럼 아무 의미없는거 아닌가..ㅋㅋㅋ

어쨋든 다음엔 ie6의 버그에 대해 함... 포스팅하겠습니다..