'Script > JavaScript' 카테고리의 다른 글
css 활용방법 (0) | 2016.12.28 |
---|
css 활용방법 (0) | 2016.12.28 |
---|
출처 : http://webdir.tistory.com/341
CSS 속성중 테두리를 둥글게 하거나 색상, 모양을 설정하는 border 속성에 대하여 알아봅니다.
축약 속성으로, border-width, border-style, border-color 순서로 작성한다. 몇몇 값을 생략해도 상관없다.
p {border: 5px solid red;}
object.style.border="3px solid blue"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
축약 속성.
p {border-top: thick solid #ff0000;} p {border-right: thick dashed #ff0000;} p {border-bottom: thick dotted #ff0000;} p {border-left: thick double #ff0000;}
object.style.borderTop="3px solid blue" object.style.borderRight="3px solid blue" object.style.borderBottom="3px solid blue" object.style.borderLeft="3px solid blue"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
4방향의 테두리에 적용될 색상을 지정한다. top, right, bottom, left 순서로 작성한다.
h1, h2, h3, h4 {border-style: solid;} h1 {border-color: red green blue pink;} /* top-red, right-green, bottom-blue, left-pink */ h2 {border-color: red green blue;} /* top-red, right & left-green, bottom-blue */ h3 {border-color: red green;} /* top & bottom-red, right & left-green */ h4 {border-color: red;} /* all four borders are red */
항상 border-color 속성을 지정하기 전에 border-style을 선언해야 한다. 요소는 반드시 색상을 바꾸기전에 borders가 존재해야 한다.
border-color 데모 보기
object.style.borderColor="#FF0000 blue"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
IE6 이하 버전들은 transparent 속성값을 지원하지 않는다. inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
4방향의 테두리에 적용될 선의 스타일을 지정한다.
h1 {border-style: dotted solid double dashed;} /* top-dotted, right-solid, bottom-double, left-dashed */ h2 {border-style: dotted solid double;} /* top-dotted, right & left-solid, bottom-double */ h3 {border-style: dotted solid;} /* top & bottom-dotted, right & left-solid */ h4 {border-style: dotted;} /* all four borders are dotted */
border-style 데모 보기
object.style.borderStyle="dotted double"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값과 hidden 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
4방향의 테두리에 적용될 선의 두께를 지정한다. 숫자는 px, pt, em 단위가 될 수 있다.
h1, h2, h3, h4 {border-style: solid;} h1 {border-width: thin medium thick 10px;} /* top-thin, right-medium, bottom-thick, left-10px */ h2 {border-width: thin medium thick;} /* top-thin, right & left-medium, bottom-thick */ h3 {border-width: thin medium;} /* top & bottom-thin, right & left-medium */ h4 {border-width: thin;} /* all four borders are thin */
항상 border-width 속성을 사용하기 전에 border-style 속성을 선언해야 한다.
border-width 데모 보기
object.style.borderWidth="thin thick"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
inherit 값과 hidden 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.
CSS3에 추가된 속성으로 축약 속성이며 4방향의 모서리에 지정될 반지름을 지정한다.
h1 {border-radius: 25px;} h2 { border-top-left-radius: 2em; border-top-right-radius: 2em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em; } h3 {border-radius: 2em 1em 4em / 0.5em 3em;} h4 { border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; }
border-radius 데모 보기
object.style.borderRadius="5px"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE9+ | FF4 | SF5, iOS3 | CH10, An2 | O10.6 |
각 모서리에 개별적으로 반지름을 지정한다.
h1 { border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; } h2 { border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em; }
object.style.borderBottomLeftRadius="5px"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE9+ | 지원 | 지원 | 지원 | 지원 |
표의 칸 종류를 조정한다.
table {border-collapse: collapse;}
object.style.borderCollapse="collapse"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
border-collapse 속성의 inherit 속성값은 IE9 이하 버전에서는 지원하지 않는다. !DOCTYPE이 지정되지 않았다면 border-collapse는 기대하지 않은 결과를 초래한다.
CSS3에 추가된 속성이고 축약 속성이며 border-style 속성에 지정된 스타일을 덮어쓸 이미지를 지정하고 추가적인 배경 레이어를 생성한다.
div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }
속성값들의 자세한 설명은 아래에 따로 다룬다.
border-image 데모 보기
object.style.borderImage="url(border.png) 30 30 round"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE11+ | FF4 | SF3, iOS3 | CH9, An2 | O11 |
오페라는 -o-border-image 속성을 대안으로 제공한다. 사파리 5는 -webkit-border-image 속성을 대안으로 제공하여 사파리 6부터 정식지원한다.
CSS3에 추가된 속성으로 보더 이미지를 9등분 하도록 각 변으로부터의 offset 거리를 지정한다. 1~4개의 값을 지정할 수 있으며, 윗쪽 방향에서의 offset 거리부터 시계방향으로 지정된다. 기본값은 100%이다.
div { border: 30px solid transparent; border-image-source: url(border.png); border-image-slice: 30; }
object.style.borderImageSlice="50% 10%"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE11+ | 지원 | SF6+ | 지원 | 미지원 |
CSS3에 추가된 속성으로 추가로 배경 이미지 레이어를 만들어 border-style 속성을 덮어쓸 이미지를 정의한다.
div {border-image-source: url(border.png);}
object.style.borderImageSource="url(border.png)"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE11+ | 지원 | SF6+ | 지원 | 미지원 |
CSS3에 추가된 속성으로 테두리 이미지의 width 값을 지정한다.
div { border-image-source: url(border.png); border-image-width: 10px; }
border-image-width 데모 보기
object.style.borderImageWidth="20px 30px"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE11+ | 지원 | SF6+ | 지원 | 미지원 |
CSS3에 추가된 속성으로 border box를 넘어서 확장되는 테두리 이미지 영역의 양을 지정한다.
div { border-image-source: url(border.png); border-image-outset: 5px; }
border-image-outset 데모 보기
object.style.borderImageOutset="5px 10px 20px 15px"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE11+ | 지원 | SF6+ | 지원 | 미지원 |
CSS3에 추가된 속성으로 테두리 이미지의 스케일을 조정하는 방법을 지정한다.
div { border-image-source: url(border.png); border-image-repeat: stretch; }
border-image-repeat 데모 보기
object.style.borderImageRepeat="round"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
IE11+ | 지원 | SF6+ | 지원 | 미지원 |
테두리와 셀사이의 거리를 지정한다.
table { border-collapse: separate; border-spacing: 10px 50px; }
object.style.borderSpacing="15px"
인터넷익스플로우 | 파이어폭스 | 사파리 | 크롬 | 오페라 |
---|---|---|---|---|
지원 | 지원 | 지원 | 지원 | 지원 |
IE8은 !DOCTYPE이 지정되어 있어야만 border-spacing 속성을 지원한다.
Blob(블랍) 이해하기 (0) | 2020.10.19 |
---|