CSS를 이용한 웹표준? 초간단 모서리가 둥근 박스 정보
CSS를 이용한 웹표준? 초간단 모서리가 둥근 박스
첨부파일
본문
모서리가 둥근 박스를 그리기 위해 우리가 흘렸던 땀은 이루 말할수 없을 것입니다. 땀흘렸던 댓가만큼 소스코드가 깔끔해지기는 커녕 엄청 지저분해지기 일수였습니다. 어제 포토샾을 하던 도중 문득 아이디어가 떠올라서 실제로 해보니 간단하게 표현되는 것같아 이렇게 올려드립니다.
허접하지만 아주 간단하게 모서리가 둥근 박스를 표현하는 방법을 소개해 드리겠습니다. 이미 사용하고 계신 분들도 있을지도 모르지만 제가 지금까지 웹프로그래밍을 해오면서 보지못한 것이기에 소개해 드립니다.
1. 포토샾을 이용해서 모서리가 둥근 박스를 그린다.
저는 모서리 3픽셀짜리 박스를 그렸습니다. 간단하게 박스를 그리고 효과에서 stroke를 3px주면 그려집니다.
2. 다 그린 박스를 삽입할 홈페이지의 배경과 박스 안의 색과 테두리색 등을 적절히 맞춥니다.
3. 박스의 모서리 귀퉁이 4부분을 이미지로 저장합니다. 여기서는 3*3 픽셀짜리 이미지를 4개를 저장합니다.
4. CSS의 상대좌표 지정 방법을 이용해 다음의 코드를 작성합니다.
<style type="text/css">
.box {
border:3px solid #99ccff;
position:relative;
}
.lt, .rt, .lb, .rb {
width:3px;
height:3px;
position:absolute;
}
.lt {top:-3px; left:-3px;}
.rt {top:-3px; right:-3px;}
.lb {bottom:-3px; left:-3px;}
.rb {bottom:-3px; right:-3px;}
</style>
<div class="box" style="width:300px; height:300px;">
<img class=lt src="./img/lt.gif">
<img class=rt src="./img/rt.gif">
<img class=lb src="./img/lb.gif">
<img class=rb src="./img/rb.gif">
</div>
위와 같이 코드를 작성하면 아래와 같은 박스가 완성됩니다.
박스를 여러개 생성하려면 CSS코드는 제외한 나머지 DIV코드만 재활용하면 됩니다.
이렇게 완성된 박스는 크기조절이 자유롭고 이미지도 적게 들어가 좀더 빠른 속도의 사이트를 만드는데 좋을 것입니다.
5. 여기저기 활용해 보시면 됩니다.^^;;;
웹 표준을 공부하다 보니 웹표준을 지킨답시고 테이블을 사용안하기위해서 고심하다가 생기게된 결과물입니다. 그런데 저도아직 웹표준이 뭔지 잘 모르기 때문에 ㅋㅋ;; 웹표준인지 아닌지는 모르겠습니다 ㅎㅎ;;
2
댓글 6개
박스를 세개 생성해서 하나는 ㅤㅇㅟㅆ둥근테두리 하나는 아레 마지막은 본문으로 된거네요^^
이방법의 단점이 가로로 크기를 늘리지 못한다는 단점이 있습니다.^^
그렇군요....
