외부 스타일 시트로 꾸미는 테이블
외부 스타일 시트를 이용 해 테이블 만들기
지난 시간에는 인라인 스타일 로 박스를 만들어 봤습니다.
이번 시간에는 외부의Cascading Style Sheet로 박스에 스타일을 지정 해 주는 방법으로 박스를 만드는 방법을 공부 해 봅니다.그럼 CSS란 무었 일까요?Cascading Style Sheet의 접두어로 된 약자 입니다.스타일로 꾸미기를 하기 위한 방식으로는 대략 서너가지 방식이 있는데요 오늘은 외부 시트를 링크해서 적용 해주는 방식 External Style/CSS방식 에 대한 방법으로 테이블을 꾸미는 것을 알아 보도록 하겠습니다.CSS의 방식에 대해서는 지난 시간에 다루었기 때문에 오늘은 생략 하도록 하고 본론 으로 바로 갑니다.우선 테이블 하나를 준비 했습니다.
아래의 테이블은 지난 시간에 태그에 직접주입해 주는 인라인 스타일 방식 으로 만든 테이 블 이고 태그 소스는 이렇습니다.
⇆
<table width="300px" height="150px" align="center" cellpadding="0" cellspacing="0px" border="collapse:collapse">
<tbody>
<tr>
<td align="center" width="150px" heigh="150px" style="border: 1px solid red;">1-1</td>
<td align="center" width="150px" heigh="150px" style="border: 1px solid red;">1-2</td>
</tr>
</tbody>
</table>
↓
| 1-1 | 1-2 |
가상의 스타일 시트로 테이블 구성 방법의 재현
위의 테이블을 외부 시트를 이용해 만들기 위해서는 그 시트가 존재하는 주소를 <head>
헤드부 에 선언을 해 주어야 하죠 아래는 가상으로 만든 skin/html부와 style/css부
이고요 skin/html의 <head>부에 외부 스타일시트의 주소를 링크 한 모습입니다.
<!DOCTYPE html> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link href="./images/fastboot.css" rel="stylesheet" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<title>CSS 스타일 시트로 테이블 만들기</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link href="./images/fastboot.css" rel="stylesheet" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<title>CSS 스타일 시트로 테이블 만들기</title>
</head>
style/css
<style>
.a-box {table width:300px; height:150px; align:center; cellpadding:0; cellspacing:0px; border-collapse:collapse;}
.a-box tbody tr td {text-align:center; width:150px; height:150px; margin:0px; cellspacing:5px; border:1px solid red;
}</style>
그럼 가상의 스타일시트에 External Style/CSS 스타일 방식으로 위의 인라인 방식으로 만든 모양의 테이블을 똑 같이 만들어 봅시다.스타일 시트에 테이블과 td의 스타일을 선언 한 후에 skin/html의 body부 에 태그를 만들어 줍니다.
.a-box {table width:300px; height:150px; align:center; cellpadding:0; cellspacing:0px; border-collapse:collapse;}
.a-box tbody tr td {text-align:center; width:150px; height:150px; margin:0px; cellspacing:5px; border:1px solid red;
}</style>
위에서 보면 외부의 서버를 링크<link href="./images/fastboot.css" rel="stylesheet" />한 것이 External Style/sheet 외부 스타일 링크 방식 이 되 겠죠 그리고 외부의 서버 사이트 뿐만 아니라 자신의 홈 에 있는 에디트의 스타일 시트도 포함 되는 것입니다.
링크한 모슾은 이런 모습이 되겠죠 <link rel="stylesheet" media="screen" type="text/css" href="./style.css" />그리고 헤드부에 도 스타일로 정의 하고 바디와 연결 할수가 있는데 이경우도 Outline 방식으로 이런 방식 역시 internal Style/sheet 방식 으로 생각 할수가 있겠죠 이렇게 내부 링크 스타일 방식 과 임시 추출 한 시트를 혼합 하여 사용 하는 방식을 혼합방식 이라고 하며 이런 유형도 internal Style/sheet 방식 이라고 할수 있겠습니다.
현재 우리가 가장 많이 사용 하는 방식 이라고 할수 있을 것입니다.
<body>
위의 테이블 과 같은 모양의 테이블이 완성된것을 볼수 있죠
<table class="a-box"> <tbody>
<tr>
<td>1-1</td><td>1-2</td>
</tr>
</tbody>
</table>
<tr>
<td>1-1</td><td>1-2</td>
</tr>
</tbody>
</table>
위의 테이블 과 같은 모양의 테이블이 완성된것을 볼수 있죠
| 1-1 | 1-2 |