Introduction
네번째 Rounded Box입니다. 지난번 IE에서 박스 깨짐현상은 아직 해결못했습니다. 해결방법을 아시는 분은 답글 달아주시면 감사!
이번 박스는 인터넷에서 찾아낸 것입니다. www.cssplay.co.uk이란 곳이었는데 Stuart Nicholls라는 61세 할아버지가 운영하는 곳이더군요. 오... 나이드시고도 코드에 대한 열정을 갖고 계신 것이 참 보기 좋았습니다. 이 분이 만들어놓은 라운드 박스는 아예 이미지를 사용하지 않고 CSS만으로 구현되었습니다.
목차
- 고정폭 박스 - 방탄웹 방법
- 고정폭 박스 - 망고의 방법
- 유동폭 박스 - 방탄웹 방법
- 유동폭 박스 - www.cssplay.co.uk
- 아주 조금 먼 미래
유동폭 박스 - from www.cssplay.co.uk
일단 두말할 것 없이 생긴 것부터 보겠습니다.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae pede a nisi commodo egestas. Sed dignissim, justo a commodo blandit, augue pede suscipit velit, ac semper dolor velit ut eros. Vestibulum tellus. Morbi tincidunt. Pellentesque ac justo. Etiam et massa. Mauris lacus. Quisque vitae nibh at nisi euismod pellentesque. Phasellus cursus, arcu vehicula vulputate blandit, quam nulla porta sapien, eu volutpat nunc elit quis nisl.
이 방법은 박스의 위 아래로 높이 1px의 b 태그를 네 개씩 붙인후 b 태그의 margin값을 조정해서 마치 라운드 코너처럼 보이도록 만드는 방법입니다. 재미있는 방법이지요? 아이디어가 직관적이고 코드도 단순해서 이해하기 쉽습니다. 아쉬운 점이 있다면 HTML에 데이터와 관계없는 디자인 태그들이 들어간다는 것이겠지요. 더구나 b 태그란 건 의미상으로도 맞지 않구요 ㅡㅡ;;;
[HTML] 코드
<div class="box">
<b class="b1f"></b>
<b class="b2f"></b>
<b class="b3f"></b>
<b class="b4f"></b>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae pede a nisi commodo egestas. Sed dignissim, justo a commodo blandit, augue pede suscipit velit, ac semper dolor velit ut eros. Vestibulum tellus. Morbi tincidunt. Pellentesque ac justo. Etiam et massa. Mauris lacus. Quisque vitae nibh at nisi euismod pellentesque. Phasellus cursus, arcu vehicula vulputate blandit, quam nulla porta sapien, eu volutpat nunc elit quis nisl.
</div>
<b class="b4f"></b>
<b class="b3f"></b>
<b class="b2f"></b>
<b class="b1f"></b>
</div>
<b class="b1f"></b>
<b class="b2f"></b>
<b class="b3f"></b>
<b class="b4f"></b>
<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae pede a nisi commodo egestas. Sed dignissim, justo a commodo blandit, augue pede suscipit velit, ac semper dolor velit ut eros. Vestibulum tellus. Morbi tincidunt. Pellentesque ac justo. Etiam et massa. Mauris lacus. Quisque vitae nibh at nisi euismod pellentesque. Phasellus cursus, arcu vehicula vulputate blandit, quam nulla porta sapien, eu volutpat nunc elit quis nisl.
</div>
<b class="b4f"></b>
<b class="b3f"></b>
<b class="b2f"></b>
<b class="b1f"></b>
</div>
[CSS] 코드
.box {
width: 300px;
padding: 30px;
}
.b1f, .b2f, .b3f, .b4f{
height: 1px
font-size:1px;
overflow:hidden;
display:block;
background: #ddd;
}
.b1f {
margin:0 5px;
}
.b2f {
margin:0 3px;
}
.b3f {
margin:0 2px;
}
.b4f {
margin:0 1px;
}
.content {
padding: 10px;
background: #ddd;
}
width: 300px;
padding: 30px;
}
.b1f, .b2f, .b3f, .b4f{
height: 1px
font-size:1px;
overflow:hidden;
display:block;
background: #ddd;
}
.b1f {
margin:0 5px;
}
.b2f {
margin:0 3px;
}
.b3f {
margin:0 2px;
}
.b4f {
margin:0 1px;
}
.content {
padding: 10px;
background: #ddd;
}
인터넷 상을 뒤져보면 수많은 CSS Rounded Box 테크닉이 있습니다. 어떤 것들은 웹표준의 철학을 지키려고 CSS가 지나치게 복잡하지는가 하면 어떤 것들은 HTML내에 태그를 심게해서 '이러면 기존 이미지를 찢어 붙일 때랑 뭐가 다른가' 싶은 방법도 있던데요. 정답은 없는 것 같습니다. 아! 인터넷에서 어떤 이가 이것이 정답이다 라고 주장하는 방법이 있더군요. 다음 글에서 다뤄보겠습니다. :)
Posted by 망고
