Javascript & JQuery & CSS

1. 테두리 모양 - [ border-style ]
- 먼저 border-style속성의 값에 대하여 알아볼까요!
none : 테두리를 표시하지 않으며 굵기 0으로 설정, 표의 셀에 테두리가 중복되는 경우에는 다른값이
우선됩니다.
hidden : 테두리를 표시하지 않으며 굵기 0으로 설정, 표의 셀에 테두리가 중복되는 경우에는 이 값이 가장
우선됩니다.
solid : 테두리를 직선으로 표현합니다.
double : 테두리를 두줄로 표현합니다.
groove : 외곽선이 들어가 보이도록 입체적으로 표현합니다.
ridge : 테두리가 돌출되어 보이도록 입체적으로 표현합니다.
inset : 테두리의 안쪽 전체가 들어가 보이도록 입체적으로 표현합니다.
outset : 테두리의 안쪽 전체가 돌출되어 보이도록 입체적으로 표현합니다.
dashed : 테두리를 긴 점선으로 표시합니다.(익스플로러 5.5이상)
dotted : 테두리를 짧은 점선으로 표시합니다.(익스플로러 5.5이상)

<font style='border-style:none'>[none] 적용</font> <font style='border-style:hidden'>[hidden] 적용</font> <font style='border-style:solid'>[solid] 적용</font> <font style='border-style:double'>[double] 적용</font> <font style='border-style:groove'>[groove] 적용</font> <font style='border-style:ridge'>[ridge] 적용</font> <font style='border-style:inset'>[inset] 적용</font> <font style='border-style:outset'>[outset] 적용</font> <font style='border-style:dashed'>[dashed] 적용</font> <font style='border-style:dotted'>[dotted] 적용</font>


[none] 적용

[hidden] 적용

[solid] 적용

[double] 적용

[groove] 적용

[ridge] 적용

[inset] 적용

[outset] 적용

[dashed] 적용

[dotted] 적용

참고로 아래와 같은 방법으로 적용을 할 수 있습니다. 즉 위의 예제처럼 상하좌우를 다 지정하지 않고 원하고자 하는 면만을 세밀하게 정의 할 수 있습니다.
{border-top-style}와 같은 방법으로 중간에 top,bottom,left,right를 정의할 수 있죠^^*

 

		<font style='border-top-style:solid'>[solid] 적용</font>
		<font style='border-bottom-style:double'>[double] 적용</font>
		<font style='border-left-style:groove'>[groove] 적용 </font>
		<font style='border-right-style:ridge'>[ridge] 적용 </font>
		<font style='border-top-style:inset'>[inset] 적용 </font>
		<font style='border-bottom-style:outset'>[outset] 적용 </font>
		<font style='border-left-style:dashed'>[dashed] 적용 </font>
		<font style='border-right-style:dotted'>[dotted] 적용 </font>

[double] 적용

[groove] 적용

[ridge] 적용

[inset] 적용

[outset] 적용

[dashed] 적용

[dotted] 적용

2. 테두리 두께 - [ border-width ]

- 이속성은 테두리의 두께를 정의하는 속성이랍니다.

그리고 아래 예제에서는 위 에서 언급한것 처럼 세밀하게 정의하는 방법도 같이 예를 들었으니 참조하세요.

<font style='border-style:solid;border-width:1'>border-width 연습 </font>
<font style='border-style:solid;border-top-width:1'>border-width 연습 </font>
<font style='border-style:solid;border-bottom-width:1'>border-width 연습 </font>

border-width 연습

border-width 연습

border-width 연습

3. 테두리 색상 - [ border-color ]

- border-color는 테두리의 색상을 정의하는 스타일 속성입니다

<font style='border-style:solid;border-color:red'> border-color 연습 </font>
<font style='border-style:solid;border-top-color:red'> border-color 연습 </font>
<font style='border-style:solid;border-bottom-color:red'> border-color 연습 </font>

border-color 연습

border-color 연습

border-color 연습

4. boarder-radius - 모서리 라운딩

모서리를 라운딩 처리하는 방법 입니다.
사용 방법은 아래와 같습니다.

border-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px;

5. border-collapse
collapse : 서로 이웃하는 테이블이나 셀의 테투리선 겹쳐서 표현
separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선 분리시켜 표현

 

style="border-collapse:collapse"	style="border-collapse:collapse"
style="border-collapse:collapse"	style="border-collapse:collapse"

style="border-collapse:separate"	style="border-collapse:separate"
style="border-collapse:separate"	style="border-collapse:separate"