두번째 Rounded Box입니다. 이번 글에서는 첫번째와 마찬가지로 폭은 고정되어있지만 높이 제한이 없는 박스를 만들어볼께요. 제 나름대로 생각해본 것이지만 너무 쉬운거라 다른 분들도 이미 쓰고 계신 방법이 아닐까 싶네요. 암튼 정리 차원에서 작성해보렵니다.
목차
- 고정폭 박스 - 방탄웹 방법
- 고정폭 박스 - 망고의 방법
- 유동폭 박스 - 방탄웹 방법
- 유동폭 박스 - 이외의 방법
- 아주 조금 먼 미래
고정폭 박스 - 망고의 방법
생긴 것부터 보죠
박스의 생김새는 차이가 없습니다. 하지만 이번에는 background 이미지로 아래의 두 이미지를 사용합니다.
상단이미지(rBox2_bg_top.gif)
하단이미지(rBox2_bg_bottom.gif)
상단 이미지와 하단 이미지만을 사용하여 라운드를 구현하고 중간 부분은 background color를 동일한 값으로 일치시켜주었습니다. 위 아래 이미지만 있기 때문에 중간이 늘어나더라도 박스형태는 유지됩니다.
[HTML] 코드
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</div>
[CSS] 코드
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 망고
