[html/css 기초] border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)
오늘은 border 속성에 대해 배워 보겠습니다.
<table> 태그 작성법에서 배울 때 border 속성은 표의 굵기를 지정하는 역할이라고 했습니다.
(표 색상은 bordercolor)
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
html에서 border 속성 사용 예:
|
<table border="1" bordercolor="red"> <tr> <td>번호</td> <td>이름</td> </tr> </table>
|
실행 화면:
| 번호 | 이름 |
[CSS에서 border 속성 사용하는 법]
CSS란? (HTML과 CSS의 차이, CSS 작성법)
css에서 border 속성 사용법은 조금 다릅니다
|
<table style="border:1px solid red;">
|
border: 선 너비, 선 모양, 선 색상; 을 한꺼번에 지정하고, 특히 선 모양은 꼭 지정해야 합니다.
1. 선 두께 (border-width) : 픽셀로 지정하거나, thin, medium, thick
2. 선 모양(border-style) : none, dotted, dashed, solid, double, groove, ridge, inset, outset
3. 선 색상(border-color) : 색상 이름이나, rgb, 또는 색상코드로 지정 가능
red 또는 #FF0000
위에서 배운 것을 바탕으로 실제로 어떻게 쓰이는지 확인해 볼게요
사용 예(inline에서 스타일 적용)
|
<table> <tr> <td style="border:1px solid red;">번호</td> <td style="border:1px solid red;">이름</td> </tr> </table>
|
사용 예(internal 스타일 적용)
|
<html> table, td { border: 1px solid red; } </style> </head>
<body> <table> <tr> <td>번호</td> <td>이름</td> </tr> </table>
</body> </html> |
실행 화면:
| 번호 | 이름 |
[boder 두께, 선 모양, 색상 따로 지정 하기]
border: 두께, 선 모양, 색상 을 한꺼번에 지정할 수도 있고, 각각 따로 지정할 수도 있어요.
하지만 꼭 border-style(선 모양)은 항상 같이 지정해야 합니다. 그렇지 않으면 올바로 선이 나오지 않습니다
사용 예:
border:5px solid;
border:solid red;
[border 위, 오른쪽, 아래, 왼쪽 스타일 지정 따로 하기]
선의 위, 오른쪽, 아래, 왼쪽의 스타일, 색상, 굵기를 따로 지정할 수도 있어요
사용 예 :
border-top: 5px dashed green;
border-right: 5px solid blue;
border-bottom: 5px dotted red;
border-left: 5px double black;
이때 역시 선 모양(border-style)은 필수로 지정해주어야 합니다
실해 화면 :
'css' 카테고리의 다른 글
| [html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both) (4) | 2014.03.26 |
|---|---|
| [html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0) | 2014.03.25 |
| DIV 태그를 이용하여 레이아웃 만들기 (1) | 2014.03.19 |
| [css 기초] float 속성에 대하여 (3) | 2014.03.18 |
| [html/css] span, div 태그 차이 (1) | 2014.03.14 |
댓글