본문 바로가기

개발일지/Front

css 파일 불러오기(link,import)

<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파일을 불러 오면 끝!