테이블 태그 2 - 선 모양, 굵기, 색깔, 크기 정하기

테이블 태그 1 이랑 이어짐 (http://2liter.tistory.com/29)
※제가 언어능력이 현저하게 떨어지는 관계로 글이 불편하게 느껴질 수도 있겠네요.
그냥..그러려니 하시고 너그러운 마음으로 봐주셨으면 감사할게요.

[* 아 왠지 모르겠는데 다음뷰로 들어오면 제 컴퓨터에선 3번 테이블이 제대로 보이지 않아요.
3번의 선이 왼쪽처럼 보이지 않으면, 다음뷰를 닫고 다시 보시면 제대로 보여요 ~
* 그리고 크롬에서도 선이 제대로 보이지 않...네요.....IE로 접속하시면 잘 보입니당..
참고해주세요 :) ]






소스가 급해서 찾고 들어오신 분들도 있겠고,
하다보면 어느새 자신도모르게 이해가 되는 순간도 있긴하지만,

그래도 테이블 태그를 처음접하고 잘 모르는 분들을 위해
최대한 이해할 수 있도록 설명을 하려고 하니 글이 길어질 것 같네요.
그래도 잘 읽어주세요 :)
데헷?! 앜....손발이 오그리토그리

우선, 어제꺼 복습을 하도록 하겠습니다.

(예제 1.)

<table border="1" cellspacing="0" cellpadding="0" > <tbody> <tr> <td width="100" height="30"> </td> </tr> </tbody> </table>

'테이블 태그 1'에서 테이블태그의 기본형이라고 했던 예제 1이다.

사실은 기본형이 예제 1과 같은 경우도 있고 예제 1과 약간 다르게

<table border=1 cellSpacing=0 cellPadding=0 width=100 height=30> <tbody> <tr> <td> </td> </tr> </tbody> </table>

이런 경우도 있다. (이것을 예제 2로하자.)


↑ 예제 1을 적용시킨 것.

↑ 예제 2를 적용시킨 것.


미묘하게 차이가 있는데, 똑같은 100x30 이어도 크기가 다르다.
사이즈를 재봤을 때, 예제 2의 사이즈가 정확하게 100x30이다.
<td>에 width값과 height값을 넣었을 때와 <table>에 width값과 height값을 넣을 때 왜 달라지는지는 나도 잘 모르겠다.

테이블을 정확히 하고자 한다면 <table>에 width값과 height값을 넣어주는게 바람직하다고 할 수 있겠다.
(나는 버릇을 잘못들여서 예제 1이 편하지만..)

뭐 편한대로 쓰면 될 것 같다.
복습은 여기까지하고, 다음으로 넘어가보자.

그럼 계속해서, 예제1, 2의 태그소스만 가지고 테이블을 만들기에는 뭔가... 허접해보이고, 촌스러워 보인다.
테이블태그를 뭔가 더 예쁘게 쓸 수는 없을까?

왠지 이런 게 좀 시크해보이지 않는가?

색도 바꿔보고 싶지 않은가?

이렇게 한다거나,
이렇게도 해본다거나~
이렇게도 해본다거나, 이런 저런 모양도 내보고 싶지 않은가?


자, 그럼 시작해보겠다.
(밑에 테이블 태그들은 드래그되니까, 복사가능)

1. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#424242> <TBODY> <TR bgColor=#ffffff> <TD> </TD> </TR> </TBODY> </TABLE>

위의 50x50짜리 검은색 선으로만 이뤄진 테이블의 태그소스다.
table style을 써도되고 안쓰고 바로 table width=50 height=50 border=0 … 이렇게 써도 되지만,
어떻게 쓰던지 편한대로만 쓰면 된다.
width 가로값
height 세로값
알맞은 픽셀값을 넣어주면 땡~

이 태그소스는 겉보기에 검은색 줄로만 있는 것으로 보이나, 실상은 그렇지않다.
table 전체 배경색깔을 #424242 (검은색에 가까운회색)으로 깐 뒤에,
cellspacing(테이블 안쪽 여백)에 1을 주고,
<tr> 전체에 흰색 배경을 깔아줌으로써 cellspacing값만큼 검은색이 보이게 되는 것이다.
당연히 cellspacing값을 1보다 더 큰 숫자를 주게 될 경우엔 선이 굵게 보이게 된다.

이건 알아도 되고 몰라도 되는거지만, tr에 흰색을 깔아주지 않을 경우엔
이렇게 나오게 된다는거~

tr의 #ffffff 부분을 다른 rgb색상코드로 넣어주면 흰색말고도 다른 색을 깔 수 있다.
요렇게~
이 쯤 알아두시고, 다음으로 넘어가자.

2. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#ff375d> <TBODY> <TR bgColor=#ffffff> <TD> </TD> </TR> </TBODY> </TABLE>

위의 검은 테이블과 같은 원리로 만든 테이블이다.
다만 다른점이 있다면, 위의 #424242 부분을 #ff375d로 바꿔줬을 뿐이다.
그럼 눈치가 빠른 사람이라면, bgColor= 뒤에 rgb색상코드표를 붙여넣어주면 원하는 색상으로 바꿀 수 있다는 것을 알 수 있으리라.

*** rgb색상코드는 rgb색상코드표라고 포털사이트에서 검색을 하거나,
포토샵과 같은 그래픽 툴을 이용해 알 수 있다.


3. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#ff375d> <TBODY> <TR bgColor=#ffffff> <TD style="BORDER-BOTTOM: rgb(255,255,255) 1px dashed; BORDER-LEFT: rgb(255,255,255) 1px dashed; BORDER-TOP: rgb(255,255,255) 1px dashed; BORDER-RIGHT: rgb(255,255,255) 1px dashed"> </TD> </TR> </TBODY> </TABLE>

선 안에 점선이 있는 모양의 테이블이다. 이건 맨 처음의 검은색 박스를 생각하면 이해하기가 쉬워질 것이다.
table에 전체적으로 붉은 색을 깔고, tr에 하얀색을 깔아서 2.번과 같은 상태까지 만든다.
그리고 <td>안에
style="BORDER-BOTTOM: rgb(255,255,255) 1px dashed; BORDER-LEFT: rgb(255,255,255) 1px dashed; BORDER-TOP: rgb(255,255,255) 1px dashed; BORDER-RIGHT: rgb(255,255,255) 1px dashed"
이게 추가된다.

그럼 이해하기 쉽게 border-bottom: rgb(255,255,255) 1px dashed를 풀어서 설명하면,
border-bottom 바닥선을
rgb(255,255,255) rgb값 흰색으로
1px 1픽셀의 굵기에
dashed ㅡ 이 선으로 표시한다.
(*dash 는 ─ 이 가로줄을 대시기호라고 한다.)

여기서 잠깐!
 ()괄호 안에 들어가는 세자리 숫자는 무엇을 의미하는 것일까?
의문이 든 사람이 있을 것 같다. *없으면 말고..

포토샵에서 어떠한 색깔을 찍었을 때, #뒤에 6자리 숫자나 알파벳이 붙는 색상코드와,
RGB, HSB, CMYK,  Lab 이렇게 여러가지가 한꺼번에 변하게 된다.
여기에서 R값, G값, B값의 각각의 값을 따와서 괄호 안에 RGB 순서대로 집어넣으면 된다.
(255,207,223) 이렇게.

흰색은 색상코드로 #ffffff rgb값으로 (255,255,255)이다. 숫자가 클수록 흰색에 가까움.
왜냐하면 가산혼합이므로.. R(red) G(green) B(blue) 삼색을 합치면 흰색이 된다고 하는 혼합방식이기 때문.

여하튼, top,left,right,bottom 네 번이나 쓰기 귀찮다면 style="border: rgb(255,2555,255) 1px solid" 로 써주면
블로그에서는 알아서 네 개가 되는 것 같다.

4. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=1 cellPadding=0 bgColor=#ff375d> <TBODY> <TR bgColor=#ffffff> <TD style="BORDER-BOTTOM: rgb(250,250,130) 1px dotted; BORDER-LEFT: rgb(250,250,130) 1px dotted; BORDER-TOP: rgb(250,250,130) 1px dotted; BORDER-RIGHT: rgb(250,250,130) 1px dotted"> </TD> </TR> </TBODY> </TABLE>

3번의 테이블 태그소스를 쪼~끔 변형한 것. 3번이 dashed였다면 여기엔 dotted를 적용한 것이 된다.
dotted 말그대로 점선으로 된 것을 말한다.
살짝 점선이 노랑색으로 보이는데 기분탓이 아니라, 정말 노랑색으로 한거다.
250,250,130이 노랑색. (255,255,255)에서 (250,250,130)으로 바꿨다.

dashed와 dotted 말고도 테이블태그에 적용되는 선의 종류는

none
solid
groove
double
ridge
inset
outset

등이 있다. 난 dahsed하고, dotted, 그리고 가장 기본적인 선인 solid 이 세가지밖에 써보지 않아서
나머지들의 차이점은 써봐야 알 것 같다.

5. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -

<TABLE style="WIDTH: 50px; HEIGHT: 50px" border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD style="BORDER-BOTTOM: rgb(250,130,170) 1px dashed; BORDER-LEFT: rgb(250,130,170) 1px dashed; BORDER-TOP: rgb(250,130,170) 1px dashed; BORDER-RIGHT: rgb(250,130,170) 1px dashed"> </TD> </TR> </TBODY> </TABLE>

3.번이나 4.번과 같은 선을 좋아라 할 수도 있지만, 그냥 Only점선만 있는 선을 좋아하는 사람도 있는 법.

1번부터 4번까지의 원리와는 조금 다르다.
table에 전체 배경색을 깔지 않고, cellspacing값도 주지 않는다.
tr에도 배경색을 깔아줄 필요가 없다.
단지, <td> 안에
style="BORDER-BOTTOM: rgb(250,130,170) 1px dashed; BORDER-LEFT: rgb(250,130,170) 1px dashed; BORDER-TOP: rgb(250,130,170) 1px dashed; BORDER-RIGHT: rgb(250,130,170) 1px dashed"를 적어주기만 하면 땡!

style="border-bottom: rgb(250,130,170) 3px dotted; border-left: rgb(250,130,170) 3px dotted; border-right: rgb(250,130,170) 3px dotted; border-top: rgb(250,130,170) 3px dotted"

응용하면 이렇게도 가능하다~ㅎㅎ 1px dashed를 3px dotted로 했을 때 이러한 예쁜 점이 나오게 되는 것ㅎㅎ

style="border-bottom: rgb(250,130,170) 1px solid; border-left: rgb(250,130,170) 1px solid; border-right: rgb(250,130,170) 1px solid; border-top: rgb(250,130,170) 1px solid"

마치 1번과 같게 보이지 않는가? table에 배경색을 깔아주고 cellspacing값을 주고 tr에 흰색을 깔아주는 것과
눈으로 보는 결과는 같게 나온다 ㅇㅇ

자, 그럼 테이블 선 모양, 색상, 굵기, 크기 바꾸는 법은 여기까지.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - -


도움이 되셨으면, 손가락버튼 꾹~! 눌러주시와요~
궁금한 점 있으시면 제가 알고있는 선에서 성실히 대답해드리겠습니다.
아는건 별로 없지만..OTL