기존에 Rounded Box는 주로 Table 태그와 이미지를 이용해서 조각조각 이어맞추는 방법을 사용했었습니다. 하지만 이 방법은 몇가지 단점이 있었지요.
- HTML 태그내에 디자인을 위한 요소가 과다하게 사용됨으로써 데이터로서 HTML의 의미가 퇴색되고 따라서 확장성이 크게 떨어집니다. 파싱하기 또한 쉽지 않지요.
- 크기 변화에 유동적이지 못합니다. 글자를 크게 읽고 싶어도 그럴수가 없었죠.
최근에는 이러한 단점들을 보완하여 CSS를 사용한 Rounded Box 기술들이 쓰이더군요. 본 글에서는 최근에 읽었던 방탄웹의 기술과 더불어 몇가지 Rounded Box 기술들을 정리해보려고 합니다. 정리 순서는 다음과 같습니다. 항목 하나당 하나의 포스트로 작성하려고 합니다.
목차
- 고정폭 박스 - 방탄웹 방법
- 고정폭 박스 - 나름의 방법
- 유동폭 박스 - 방탄웹 방법
- 유동폭 박스 - 이외의 방법
- 아주 조금 먼 미래
고정폭 박스 - 방탄웹 방법
폭이 고정되어있는 라운드 박스입니다. 생긴 것은 아래와 같습니다.
rounded box
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.박스의 폭이 고정된 상태에서 높이만 유동적으로 변화하는 박스입니다. 좌우가 고정된 다음의 상하 두 개의 이미지를 사용합니다. 원리는 div 태그의 background 속성에 긴 하단 이미지를 깔아준 다음 제목이 있는 H3 태그의 background 속성에 상단 이미지를 덧씌우는 것입니다. 박스가 길어지면 긴 하단 이미지가 더 보여지게 되고, 짧아지면 덜 보여지게 됩니다.
상단 이미지
하단 이미지
[HTML코드]
<div class="box">
<h3>박스 타이틀</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<h3>박스 타이틀</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
[CSS코드]
.box {
width: 189px;
background: url(rBox1_bg_bottom.gif) no-repeat bottom left;
}
.box h3 {
padding: 5px 0;
background: url(rBox1_bg_top.gif) no-repeat top left;
}
width: 189px;
background: url(rBox1_bg_bottom.gif) no-repeat bottom left;
}
.box h3 {
padding: 5px 0;
background: url(rBox1_bg_top.gif) no-repeat top left;
}
시험삼아 Ctrl키를 누른 상태에서 마우스 스크롤을 움직여보세요. 폰트 크기가 변화함에 따라 박스 크기가 함께 변화하는 것을 볼 수 있습니다.
이미 눈치채셨겠지만 이 방법으로 만든 박스는 하단 이미지의 높이만큼만 확장이 가능합니다. 더 길어지면 박스가 깨집니다. 그리고 이름대로 폭도 고정이 되어있죠. 다음은 높이가 무한대로 확장 가능한 고정폭 박스를 만들어보겠습니다.
참고서적
Posted by 망고
