안녕하세요.
모서리가 둥글게 처리된 사각형을 표현해보고 싶은데 잘 못하겠어서 질문드립니다.
각 모서리에 사용할, 부채꼴 이미지 네개를 직사각형으로 길쭉한 div 들로 연결하면 될거라고 생각했는데, div 들의 연결 자체는
생각했던대로 되는데 이미지가 박스에서 빠져나와서는 그 바로 아래에 그려지는 현상이 생기네요;
혹시나 싶어서 모서리 하나만 따로 떼놔봤더니 그 박스는 제대로 이미지를 포함해서 그려졌습니다.
뭔가 컨테이너에서 엄한 속성을 상속받아온게 아닌가 싶기도 한데, 컨테이너들은 별다른 속성 지정한것도 없는데 의문입니다.
소스 올릴께요 ㅠ
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
html xmlns=http://www.w3.org/1999/xhtml lang=en xml:lang=en
head
meta http-equiv=Content-Type content=text/html; charset=euc-kr /
title/title
style type=text/css
div.topbox {
width: 600px;
margin: 0 auto 0 auto;
}
div.topbox div.lcorner {
width: 5px;
height: 5px;
float: left;
background-color: silver;
}
div.topbox div.rcorner {
width: 5px;
height: 5px;
float: right;
background-color: silver;
}
div.topbox div.center {
width: 590px;
height: 5px;
margin-left: 5px;
margin-right: 5px;
background-color:gray;
}
/style
/head
body
div class=topbox
div class=lcornerimg src=image/rounding_topleft_5px.gif width=5 height=5 alt= //div
div class=rcornerimg src=image/rounding_topright_5px.gif width=5 height=5 alt= //div
div class=center/div
/div
/body
/html
영빈이 2026.07.08
jQuery://
... 너무 간단하게 해결해주시니 할말이 없네요 감사합니다;;
경단://
예 저도 그 생각은 많이 했는데, 전 이걸 실무로 한다던가 하는 부분이 아니라 공부삼아 연습삼아 하는 것이라서 최대한 이런저런 방법을 동원해서 해보고 싶은거라서요 ^^
maxim://
CSS3.info 에 가보니 rounded border에 관한 이야기가 있었습니다. jQuery나 Prototype은 아직 제가 욕심낼만한 범위는 아닌거같아서요 ^^;
좋아해 2026.07.08
div.topbox div.lcorner {
width: 5px;
height: 5px;
float: left;
background-color: silver;
font-size: 0px;
}
이러면 되나요?
가림새 2026.07.08
jquery나, prototype으로 검색해보세요~
이미지없이 모서리 라운딩처리하는방법이 있떠라구요