css를 활용한 라운드 박스 및 박스 속성

css를 활용한 라운드된 박스와 박스 속성에 대해 알아보자.

css3에서 부터 라운드박스의 형태는 지원이 가능합니다. 이미 예전부터 이야기 되고 있었지만 여전한 문제점은

IE이다.   IE는 IE9부터 지원이 가능합니다.  먼저 박스의 속성부터 확인해보자.

박스의 속성은 CSS상의 가로세로의 개념을 이야기 하는것이 아나라 계산되어져 화면에 보여진 형태의 박스를 말합니다. 

 

 박스의 속성,컨텐츠,마진,패딩,보더

레이아웃을 구성할때 우리는 미리 계산을 잘 하여 만들어야 합니다. 가로는 콘텐츠의 너비 + 패딩 +보더입니다. 브라우저 플러그인 파이어버그를 설치하여 레이아웃을 보면 쉽게 확인가능합니다.

아래의 가름과 같이 border가 계산되어진다는 것을 기억합니다.

 outline 과 border

그림과 같이 border는 박스 계산에 계산되어집니다. 그러나 아웃라인은 계산되어지지 않습니다. 아웃라인은 이런점에서 계산하기 좋지만 단점으로는 아웃라인이라는 단어 그대로 엘리먼트 전체를 감싸기만 할뿐 border-bottom과 같이 한쪽 면을 지정하는 옵션이 없다는것이 단점입니다. 또한 outline은 border와 같이 사용할때 border효과 다음으로 나타납니다.

 overflow-x, overflow-y

세로의 계산은 컨텐츠의 내용을 다보여줄 길이를 반영합니다. 이때 overflow로 제어할수 있는건 안다는 가정하에  CSS3부터는 x,y로 별도 지정이 가능해졌습니다. 근래의 대부분의 브라우저가 지원하지만 IE는 9부터 지원합니다. 그리고 브라우저마다 버전상 지원여부가 있기에 아직은 모질라,웹킷 별도 지정을 필요로 한다고 생각합니다.

하단의 그림 버전까지는 모질라, 웹킷의 지정을 별로로 필요로 합니다.

border-radious 지원 현황. 이브라우저는 별도 지정없이 바로 사용가능하다

<css코드>

<div id="RoundBox">dungx2 dungx2</div>

<html코드>

#RoundBox{ 

width:200px;

height:100px;

padding:15px;

background-color:#CCC;

-moz-border-radius: 21px; /*모질라*/

-webkit-border-radius: 21px; /*웹킷*/

/*IE9+,FF4+,chrome,Safari5,+opera*/

border-radius: 21px;

}