CSS3 border-image 테두리 이미지

CSS/CSS3 2012.03.04 16:48

CSS3 border-image 테두리 이미지

라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다.

일단 필요한 것은 정사각형 이미지

이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다
html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp

h2{
width:200px;
border-width:30px;
-moz-border-image:url(../images/flower.jpg) 30 round; 
-webkit-border-image:url(../images/flower.jpg) 30 round; 
border-image:url(../images/flower.jpg) 30 round;
}

결과이미지 여기서 주목할부분은 보더(border)의 이미지라는 점이다 따라서 보더와 관련한 CSS 속성을 정해주지 않으면 나타나지 않는다. 보더는 레이아웃, 박스 크기에 영향주므로 보더를 사용아 적절한지 심각히 고려해보고 border-image를 사용해야 할 것이다.


위에서 border-width:15px; 로 정해준것은 이미지를 좀더작개 하기위함이였다. 이미지 크기가 90px, 따라서 3으로 나누면 각변,모서리는 30px로 나올 것이다  이걸 반으로 나누어 15px로 잡았으니 1/2크기로 이미지가 나타나는 것이다.결과물은 세세하다.

각 요소 들을 살펴보면 처음에는 이미지 주소, 두번째는 마진 패딩과 같은  오른쪽 시계방향으로 이미지 옵셋을 결정한다. 마찬가지로 한번에 정하면 네 변모두 동일시 되며 각기 지정할 수도 있다.

마지막  옵션은 다음 세가지다.
1)stretch : 기본값으로 이미지가 박스의 너비나 높이에 맞게 이미지 스케일을 조정한다.


2)repeat : 말그대로 반복시킨다. (가로 세로 길이 무시)

3)round : 반복하지만 엘리먼트 가로세로에 정확하게 맞게 정한다.

적용 할 이미지의 가로,세로 가운데 반복되는 부분은 작을 수록 좋다. repeat의 경우는 정확히 맞지 않기에 문제가 있고, round,repeat의 경우는 이미지 크기가 따라 이미지 비율이 깨지기 때문이다.(확대해서 이미지를 관찰해보자). 그리고 역시 IE에서는 아예 지원하지 않는다.

저작자 표시
신고

설정

트랙백

댓글

CSS3 라운드박스 및 박스 속성

CSS/CSS3 2012.03.04 12:58

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부터 지원한다. 또한 브라우저마다 버전상 지원여부가 있기에 아직 약간의 모질라,웹킷 별도 지정을 필요로 한다고 본다.

아래 그림 버전까지는 모질라, 웹킷의 지정을 별로로 필요로한다

border-radious 지원 현황. 이브라우저는 별도 지정없이 바로 사용가능하다
<div id="RoundBox">THIS IS THE TEST</div>
위는 html 아래는 css코드
#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가 사라진 기간을 생각해보자 끔직하다...

저작자 표시
신고

설정

트랙백

댓글

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS/CSS3 2010.07.07 00:14

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것

출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards

데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/

다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/

소스를 알아보자

CSS3 : border-radius

border-radius 는 박스의 라운드를 가능하게 해준다.
아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도의 지정이 필요하다


.box{ width:600px;height:600px; 
       border: 10px solid #000; 
       /*확인을 위해 테두리를줌*/ 
       background:#fff;
       /*IE에서는 테두리가 배경색이된다*/
       -moz-border-radius: 15px;
        /*파이어폭스*/
        -webkit-border-radius: 15px;
        /*웹킷기반 브라우저 구글크롬 사파리*/
        border-radius: 15px;
        /* 오페라 10.5이상 */
        behavior: url(ie-css3.htc);
        /*IE6이상 IE-CSS3 핵사용*/
       }

아주간단 html은 다음과 같다


<div class="box"><p>박스내용</p></div>

주석에서 달아 놓았듯이 테두리만 주면 IE에서는 모두 테두리색으로보인다.
따라서 다시 배경색을 지정 해 줬다.

위소스의결과를 확인: http://sianasiatiger.cafe24.com/study/CSS3_RBox.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바