<link 태그 적용전>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border: 2px solid #662500;
width: 400px; height:300px;
text-align : center;
}
td{ border:1px dotted; }
th{ border:1px dotted; }
caption{ color:#662500; }
#t1{ background:#FFD8D8; }
#t2{ background:#FAF4C0; }
</style>
</head>
<body>
<table>
<caption><h1>시간표</h1></caption>
<tr id="t1">
<th>월</th> <th>화</th> <th>수</th> <th>목</th>
</tr>
<tr id="t2">
<td>Java</td> <td colspan="2">수학</td> <td rowspan="2">html</td>
</tr>
<tr id="t2">
<td>영어</td> <td>국어</td> <td>JSP</td>
</tr>
</table>
</body>
</html>
시간표를 만든 태그 파일이 있다.
css를 붙여 놓으니 코드가 너무 길어져
css 파일을 따로 만들어서 연결해주려고 한다.
<html 파일>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/css.css">
</head>
<body>
<table>
<caption><h1>시간표</h1></caption>
<tr id="t1">
<th>월</th> <th>화</th> <th>수</th> <th>목</th>
</tr>
<tr id="t2">
<td>Java</td> <td colspan="2">수학</td> <td rowspan="2">html</td>
</tr>
<tr id="t2">
<td>영어</td> <td>국어</td> <td>JSP</td>
</tr>
</table>
</body>
</html>
<css파일>
table{
border: 2px solid #662500;
width: 400px; height:300px;
text-align : center;
}
td{ border:1px dotted; }
th{ border:1px dotted; }
caption{ color:#662500; }
#t1{ background:#FFD8D8; }
#t2{ background:#FAF4C0; }html <head> 부분에 <link> 태그를 넣는다. rel="stylesheet" 불러오는 파일을 stylesheet 라고 한다. href은 어디에 있는 파일을 불러 올 건지 결정한다. (css 폴더 안에 있는 css 라는 이름의 css 확장자 파일)
다른 방법으로는 @import(불러오기)가 있음
<style>
@import url("./css/css.css");
</style>style 부분에 @import 선언을 해주고 url로 CSS파일을 불러 오면 끝!
'개발일지 > Front' 카테고리의 다른 글
| html 파일 frame 영역에 불러오기(src), 주석 (0) | 2021.09.03 |
|---|---|
| 클래스 선언과 화면 나누기 (0) | 2021.09.02 |
| 03. 다양한 frmae 태그활용하기(화면나누기, 프레임 안에서 페이지 띄우기) (0) | 2021.09.01 |
| 02.form 태그연습 (0) | 2021.09.01 |
| 01. html, css의 기본구성 & table태그 (0) | 2021.08.31 |
