[CODE]
<table>
<tr>
<td> 여기에 내용을 입력한다. </td>
</tr>
</table>
* <table>..</table>은 표의 시작과 끝을 알리고,
* <tr>..</tr>은 한 줄의 시작과 끝을 알린며,
* <td>..</td>은 한 칸의 시작과 끝을 알린다.
[/CODE]
2. table, tr, td의 공통 속성.
① width = px :: 넓이
② height = px :: 높이
③ bgcolor = RGB code or color name :: 바탕색
④ background = 주소 :: 배경이미지
⑤ align = left, center, right :: 수평정렬
⑥ valign = top, middle, bottom :: 수직정렬
3. table만의 속성.
① border = px :: 테이블 경계선 두께
② bordercolor = RGB code or color name :: 테이블 경계선 색.
③ bordercolorlight = RGB code or color name :: 테이블 경계선 색의 밝은 부분.
④ bordercolordark = RGB code or color name :: 테이블 경계선 색의 어두운 부분.
* bordercolorlight, bordercolordark 두 속성 적용시 bordercolor는 무시당한다.
⑤ cellpadding = px :: 셀 내부에서의 내용물이 경계선으로부터 떨어져야 할 여백.
⑥ cellspacing = px :: 각 셀들간에 떨어져야 할 여백.
4. td만의 속성.
① colspan = 합칠 칸의 개수 :: 옆으로 합치기 ( 옆의 열과 .. )
② rowspan = 합칠 칸의 개수 :: 아래로 합치기 ( 아래의 행과.. )
:: 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다.
2. CSS 사용의 장점.
① 페이지 전체의 일관성을 유지할 수 있다.
② 개발시간이 단축된다.
③ 유지,보수가 간편하다.
3. CSS를 HTML에 삽입하는 방법.
① 태그 내의 style 속성을 이용해 삽입.
[CODE] <font style="font-style : italic; font-size : 10pt; color : red">[/CODE]
② style sheet를 정의하여 사용.
[CODE] <head>
<style type="text/css">
<!--
font {font-style:italic; font-size:10pt; color:red}
-->
</style>
</head>[/CODE]
③ 외부 파일을 연결.
②번의 style 부분을 확장자가 css인 파일로 만든 후 밑의 코드를 head 안에 넣어 연결한다.
[CODE] <link rel="stylesheet" type="text/css" href="filename.css">[/CODE]
4. CSS 기본 사용법.
① 사용자 정의 (class)
[CODE] <style type = "text/css">
.myfont { font-size : 12pt; }
</style>
<font class="myfont">[/CODE]
② 여러 개의 selector, 여러 개의 속성.
H1, H2, H3 { font-family: Helvetica; }
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; }
2004/11/07 13:58
정확히 어떤 의미인지 선뜻 이해되지는 않지만,
table-layout:fixed를 쓴다고 해서 셀이 동일한 크기로 나타나지는 않는걸로 알고있는데요.
실례가 안된다면 정확히 어떤 때 그런 문제가 생기는지 예제를 하나 부탁드려도 될까요?
궁금하네요... 새로운걸 하나 배워갈지도 모르겠네요... ^^;;
2004/11/07 19:16
<table style="table-layout: fixed; border: solid 1 black" width="150"><tr><td style="border: 1 solid black" colspan="2">1</td></tr><tr><td style="border: 1 solid black" width="50">2</td><td style="border: 1 black solide" width="150">3</td></tr></table>
이런 소스가 있다면 테이블의 전체 너비는 150픽셀로 고정되고, 첫번째줄은 그냥 한 칸이지만 두번째줄은 두 칸이죠. 여기서 두번째줄의 첫칸엔 50, 두번째칸엔 100을 줘서 저런식으로 나눠질 것을 기대하지만 실제론 75,75 로 나눠진다는 겁니다.
혹시 해결법 알고 계시면 알려주세요. 전 그냥 테이블 속에 테이블 만들었습니다;;
2004/11/08 03:46
적어주신 소스는 말씀처럼 50, 150으로 넓이가 지정되어 있음에도 75씩 나타나는군요.
처음 알았습니다. 저렇게 써본일이 없어서리... ^^;;
저 문제는 td에 넓이값을 주었기 때문에 발생한 겁니다.
table-layout:fixed는 col과 같이 사용해야 합니다.
<table style="table-layout: fixed; border: solid 1 black" width="150"><col width="50"><col width="150"><tr><td style="border: 1 solid black" colspan="2">1</td>
</tr><tr><td style="border: 1 solid black">2</td><td style="border: 1 black solid">3</td></tr></table>
이렇게 하면 정상적으로 출력됩니다. 참고로 예전에 써논 글 트랙백 겁니다.
2004/11/09 01:30