두번째 Rounded Box입니다. 이번 글에서는 첫번째와 마찬가지로 폭은 고정되어있지만 높이 제한이 없는 박스를 만들어볼께요. 제 나름대로 생각해본 것이지만 너무 쉬운거라 다른 분들도 이미 쓰고 계신 방법이 아닐까 싶네요. 암튼 정리 차원에서 작성해보렵니다.
목차
- 고정폭 박스 - 방탄웹 방법
- 고정폭 박스 - 망고의 방법
- 유동폭 박스 - 방탄웹 방법
- 유동폭 박스 - 이외의 방법
- 아주 조금 먼 미래
고정폭 박스 - 망고의 방법
생긴 것부터 보죠
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
박스의 생김새는 차이가 없습니다. 하지만 이번에는 background 이미지로 아래의 두 이미지를 사용합니다.
상단이미지(rBox2_bg_top.gif)
하단이미지(rBox2_bg_bottom.gif)
상단 이미지와 하단 이미지만을 사용하여 라운드를 구현하고 중간 부분은 background color를 동일한 값으로 일치시켜주었습니다. 위 아래 이미지만 있기 때문에 중간이 늘어나더라도 박스형태는 유지됩니다.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In velit erat, dignissim at, lacinia ac, tincidunt in, neque. Aliquam erat volutpat. Nunc nulla turpis, sagittis eu, nonummy id, placerat sit amet, justo. Integer egestas magna fringilla orci. Morbi cursus mauris nec ligula. Sed consectetuer facilisis est. Maecenas consectetuer. Ut quis dui. Aliquam velit. Aliquam rutrum nisl eget ligula. Pellentesque et est. Vivamus odio quam, elementum nec, pellentesque nec, faucibus at, magna. Etiam sit amet enim. Nulla facilisi.
[HTML] 코드
<div class="box">
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
[CSS] 코드
.box {
background: #477C98 url(rBox2_bg_bottom.gif) no-repeat bottom left;
}
.content {
padding: 10px;
background: url(rBox2_bg_top.gif) no-repeat top left;
}
background: #477C98 url(rBox2_bg_bottom.gif) no-repeat bottom left;
}
.content {
padding: 10px;
background: url(rBox2_bg_top.gif) no-repeat top left;
}
내용이 길어지더라도 하단 이미지를 교체해야하는 작업은 발생하지 않습니다. 하지만 클라이언트가 폭을 늘려달라고 하면 어쩌나요 ㅡㅡ;; 좀 더 방탄웹으로 가려면 폭도 유동적인 것이 좋겠죠? 다음 글에서 유동폭 라운드 박스를 만들어볼께요.
Posted by 망고
