테두리 (1)

💻 Programming/CSS

[CSS] 12. Borders ( 테두리, 보더 설정 )

이번 포스팅에서는 테두리에 대한 속성들에 대해서 알아보도록 하겠습니다.

  • border-color 테두리 색상을 설정하는 속성이죠. 

  • border-style 테두리 스타일을 결정짓는 속성이네요.

  • border-width 테두리 두께를 설정하는 속성입니다. 

늘 그렇듯이 역시 예제를 보는게 빨리 배우는 지름길이죠.  

 

시작해 볼까요?? 

The border-color Property:

테두리 색상을 변경할 때는 사방을 한꺼번에 변경할 수도 있겠지만 방향마다 다르게 색상을 지정할 수도 있습니다. 아래와 같은 속성들을 이용해서 말이죠.

  • border-bottom-color

  • border-top-color 

  • border-left-color 

  • border-right-color 

예제를 한번 볼까요?? 

<style type="text/css">
p.example1{
   border:1px solid;
   border-bottom-color:#009900; /* Green */
   border-top-color:#FF0000;    /* Red */
   border-left-color:#330000;   /* Black */
   border-right-color:#0000CC;  /* Blue */
}
p.example2{
   border:1px solid;
   border-color:#009900;        /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
</p>

결과는 아래와 같습니다.

 

 

 

The border-style Property:

테두리 스타일을 내 마음대로 변경할 수 있습니다. 테두리 스타일의 종류로는 아래와 같은 것들이 있습니다.

  • none: No border. (Equivalent of border-width:0;)

  • solid: Border is a single solid line.

  • dotted: Border is a series of dots.

  • dashed: Border is a series of short lines.

  • double: Border is two solid lines.

  • groove: Border looks as though it is carved into the page.

  • ridge: Border looks the opposite of groove.

  • inset: Border makes the box look like it is embedded in the page.

  • outset: Border makes the box look like it is coming out of the canvas.

  • hidden: Same as none, except in terms of border-conflict resolution for table elements.

테두리 스타일 역시 방향에 따라 각기 다른 스타일을 설정할 수 있습니다. 아래 속성들을 이용해서 말이죠. 

  • border-bottom-style 

  • border-top-style 

  • border-left-style 

  • border-right-style 

예제를 한번 보시죠. 

<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.
</p>
<p style="border-width:4px; border-style:double;">
This is a double border.
</p>
<p style="border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge">
This is aridge  border.
</p>
<p style="border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style="border-width:4px; 
             border-top-style:solid;
             border-bottom-style:dashed;
             border-left-style:groove;
             border-right-style:double;">
This is a a border with four different styles.
</p>

결과는 아래와 같습니다.

 

This is a border with none width.

This is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

This is a a border with four different styles.

 

 

The border-width Property:

테두리 두께를 내 마음대로 변경할 수 있게끔 해주는 속성입니다. 단위로는 px, pt, cm을 사용할 수도 있고, 정도에 따라 thin, medium, 또는 thick 값을 지정할 수도 있습니다.

이 속성 역시 방향에 따라 각각 부여 할 수 있습니다. 

  • border-bottom-width 

  • border-top-width 

  • border-left-width 

  • border-right-width 

다음 예제를 한번 보시죠. 

<p style="border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style="border-width:4pt; border-style:solid;">
This is a solid border whose width is 4pt.
</p>
<p style="border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style="border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style="border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style="border-bottom-width:4px;
             border-top-width:10px;
             border-left-width: 2px;
             border-right-width:15px;
             border-style:solid;">
This is a a border with four different width.
</p>

결과는 아래와 같습니다. 

This is a solid border whose width is 4px.

This is a solid border whose width is 4pt.

This is a solid border whose width is thin.

This is a solid border whose width is medium;

This is a solid border whose width is thick.

This is a a border with four different width.

 

 

Border Properties Using Shorthand:

지금까지 테두리의 색상, 스타일, 그리고 두께에 대해서 속성값을 변경하는 법을 배워보았습니다.

 

그런데 하나하나 지정해주려니 좀 귀찮은 감이 없지않아 있네요.

 

그래서 여기 type less do more를 실천하고있는 방법을 하나 소개해 드리려고 합니다.

 

다음 예제를 한번 보실까요??

<p style="border:4px solid red;">
This example is showing shorthand property for border.
</p>

결과는 아래와 같습니다. 

This example is showing shorthand property for border.

 

위 처럼 두께, 스타일, 색상 속성을 한꺼번에 쓸 수도 있습니다.

 

어때요? 완전 간단하죠? ^_^ 

 

 

 

Reference : http://www.tutorialspoint.com/css/css_borders.htm

 

 

 

 

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[CSS] 14. Lists ( 리스트, 목록 )  (0) 2016.06.12
[CSS] 13. Margins ( 마진, 여백 )  (0) 2016.06.12
[CSS] 11. Table ( 테이블 설정 )  (0) 2016.06.12
[CSS] 10. Links ( 링크 설정 )  (0) 2016.06.12
[CSS] 9. Image ( 이미지 관련 설정 )  (0) 2016.06.12

Category

Recent Posts

Recent Comments

관리자 | 글쓰기

티스토리툴바