CSS3 라운드박스 및 박스 속성
CSS3 라운드박스 및 박스 속성
CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다
박스 속성, 콘텐츠,마진,패딩,보더
레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다.
캡처한 그림과 같이 보더도 계산된다는것을 잊지말자.
아웃라인(outline)과 보더(border)
위와 같이 보더는 박스계산에 계산된다 하지만 아웃라인은 계산되지않는다 아웃라인은 이런점에서 계산하기에 좋지만 단점은 아웃라인이란 단어그대로 엘리먼트 전체를 감싸기만 하지, border-bottom 처럼 한쪽 면을 지정할 옵션이 없다는 것이 단점이다. 그리고 아웃라인은 보더화 함께 사용할시 보더 효과 다음에 나타난다.
overflow-x, overflow-y
세로 계산은 컨텐츠의 내용을 다보여줄 길이를 반영한다.이때 overflow로 제어할수 있는건 알테고 CSS3부터는 x,y로 별도 지정이 가능해졌다.
예제를 보려면 여기로가보자
http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-y&preval=hidden
CSS3 라운드박스 border-radious
이미 CSS3초창기부터 잘알려져 있다. 근래의 대부분의 브라우저가 지원하지만 IE는 9부터 지원한다. 또한 브라우저마다 버전상 지원여부가 있기에 아직 약간의 모질라,웹킷 별도 지정을 필요로 한다고 본다.
아래 그림 버전까지는 모질라, 웹킷의 지정을 별로로 필요로한다
<div id="RoundBox">THIS IS THE TEST</div>#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;
}결과는 여기서 확인할 수있다 http://sianasiatiger.cafe24.com/study/css3-box.html
마지막으로 박스를 마음껏 만들어볼 수 있는 장소 http://www.cssportal.com/css3-rounded-corner
덧)CSS3 포스팅때 마다 느끼는거지만..IE는 정말 귀찮은존재다. 거의 사라지는 추세지만 IE6를 사용하는사람이이 더러있고...또 CSS3 "그나마" 마음놓고 사용할 IE9부터이다. IE6가 사라진 기간을 생각해보자 끔직하다...