[html/css 기초] border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)

 

 

[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>
<table style="border:1px solid red;">

<tr>

<td style="border:1px solid red;">번호</td>

<td style="border:1px solid red;">이름</td>

</tr>

</table>

 

 

 

사용 예(internal 스타일 적용)

 

 

<html>
<head>
 <style type="text/css">

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 2014. 3. 24. 11:44

댓글을 달아 주세요

  1. 한세 2016.03.07 18:21  수정/삭제  댓글쓰기

    십년도 전에 테이블 태그를 사용하여 문서를 만들었는데 그동안 손을 놓고 있다가 요즘 들어 변화한 태그를 다시 배우고 있습니다. 여러 사이트를 다니며 배우는데 이 곳이 간결하고, 쉽고, 포괄적으로 설명하고 있어서 많은 도움을 받고 있습니다. 자료를 작성하고 올린 수고에 감사 합니다.

Powerd by Tistory, designed by criuce