이번에는 외곽선 속성에 대해서 알아보도록 하겠습니다.
아웃라인(외곽선)은 테두리와 많이 유사합니다. 그래서 준비했습니다.
이 두개의 차이점:
외곽선은 공간을 차지하지 않습니다.
외곽선은 직사각형일 필요가 없습니다.
외곽선은 사방이 모두 똑같은 선입니다. 테두리처럼 왼쪽은 점선, 오른쪽은 직선, 이렇게 따로 설정할 수가 없습니다.
NOTE: 이 속성도 IE 6 이나 Netscape 7에서는 안된다고 하는군요. 아직도 이런 브라우저를 사용하시는 분들은 없겠지만요 ㅋ
자 그럼 외곽선 관련 속성에 어떤것들이 있는지 한번 알아봅시다.
outline-width
outline-style
outline-color
outline
The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick . just like the border-width attribute
A width of zero pixels means no outline.
다음 예제를 한번 보시죠.
<p style="outline-width:thin; outline-style:solid;"> This text is having thin outline. </p> <br /> <p style="outline-width:thick; outline-style:solid;"> This text is having thick outline. </p> <br /> <p style="outline-width:5px; outline-style:solid;"> This text is having 5x outline. </p> |
결과는 아래와 같습니다.
|
This text is having thin outline. This text is having thick outline. This text is having 5x outline. |
The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values:
none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.
다음 예제를 한번 보시죠.
<p style="outline-width:thin; outline-style:solid;"> This text is having thin solid outline. </p> <br /> <p style="outline-width:thick; outline-style:dashed;"> This text is having thick dashed outline. </p> <br /> <p style="outline-width:5px;outline-style:dotted;"> This text is having 5x dotted outline. </p> |
결과는 아래와 같습니다.
|
This text is having thin solid outline. This text is having thick dashed outline. This text is having 5x dotted outline. |
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
다음 예제를 한번 보시죠.
<p style="outline-width:thin; outline-style:solid;
outline-color:red">
This text is having thin solid red outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;
outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>
|
결과는 아래와 같습니다.
|
This text is having thin solid red outline. This text is having thick dashed green outline. This text is having 5x dotted blue outline. |
The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
다음 예제를 한번 보시죠.
<p style="outline:thin solid red;"> This text is having thin solid red outline. </p> <br /> <p style="outline:thick dashed #009900;"> This text is having thick dashed green outline. </p> <br /> <p style="outline:5px dotted rgb(13,33,232);"> This text is having 5x dotted blue outline. </p> |
결과는 아래와 같습니다.
|
This text is having thin solid red outline. This text is having thick dashed green outline. This text is having 5x dotted blue outline. |
Reference : http://www.tutorialspoint.com/css/css_outlines.htm
| [CSS] 19. Scrollbars ( 스크롤바 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 18. Dimension ( 높이, 너비, width, height ) (0) | 2016.06.12 |
| [CSS] 16. Cursor ( 마우스 커서 모양 ) (0) | 2016.06.12 |
| [CSS] 15. Paddings ( 패딩 ) (0) | 2016.06.12 |
| [CSS] 14. Lists ( 리스트, 목록 ) (0) | 2016.06.12 |