728x90
CSS의 로드 style link import
HTML 문서 작성시 각 태그의 디자인은
CSS를 Html 문서 내에 로드하여
입맛에 맞게 꾸밀수 있는데
이를 위해서 자주 쓰는 방법 3가지가 있다.
1. head 태그 내 style 추가
2. head 태그 내 link 추가
3. .Css 파일 내 import url 추가
샘플 예제 ↓
1. Head 태그 내 Style 추가
[html : example.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<!--1. Style 추가-->
<style>
h1 {
color : royalblue;
}
section {
margin : 20px;
}
table {
border-collapse: collapse;
background-color: beige;
}
table>thead {
font-weight: bold;
}
table td {
border : 1px solid gray;
padding : 6px 12px;
}
</style>
</head>
<body>
<section>
<h1>CSS 예제 : Style의 추가</h1>
<table>
<thead>
<tr>
<td>#</td>
<td>제목</td>
<td>내용</td>
<td>조회수</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목 1</td>
<td>내용 1</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>제목 2</td>
<td>내용 2</td>
<td>33</td>
</tr>
<tr>
<td>3</td>
<td>제목 3</td>
<td>내용 3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
2. head 태그 내 link 추가
가장 보편적으로 사용하는 방법으로,
link 태그는 href라는 속성을 통해 css파일에 접근하는 역할을 하는데,
예제 1번에 있던 Style 내 css파일은 example.css라는 파일에 따로 저장해 두었다.
[html : example.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<!--2. link 추가-->
<link rel="stylesheet" href="./example.css">
</head>
<body>
<section>
<h1>CSS 예제 : Style의 추가</h1>
<table>
<thead>
<tr>
<td>#</td>
<td>제목</td>
<td>내용</td>
<td>조회수</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목 1</td>
<td>내용 1</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>제목 2</td>
<td>내용 2</td>
<td>33</td>
</tr>
<tr>
<td>3</td>
<td>제목 3</td>
<td>내용 3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
[css : example.css]
h1 {
color : royalblue;
}
section {
margin : 20px;
}
table {
border-collapse: collapse;
background-color: beige;
}
table>thead {
font-weight: bold;
}
table td {
border : 1px solid gray;
padding : 6px 12px;
}
3. Css 파일 내 import url 추가
Css 를 작성하다보면,
여러 UI를 그룹핑하여 다른 css 파일로 관리해야 할 일이 생기는데,
이렇게 그룹핑한 css파일을 기존에 link 된 css파일에서
불러올수 있다. 하지만 용량이 커질수록 로딩 속도 저하등의
문제가 발생할수 있어, 가독성과 로딩 속도 문제 등을
잘 고려해서 사용해야 한다.
[html :example.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<!--3. import Url 추가-->
<link rel="stylesheet" href="./example.css">
</head>
<body>
<section>
<h1>CSS 예제 : Style의 추가</h1>
<table>
<thead>
<tr>
<td>#</td>
<td>제목</td>
<td>내용</td>
<td>조회수</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목 1</td>
<td>내용 1</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>제목 2</td>
<td>내용 2</td>
<td>33</td>
</tr>
<tr>
<td>3</td>
<td>제목 3</td>
<td>내용 3</td>
<td>13</td>
</tr>
</tbody>
</table>
</section>
</body>
</html>
[css : example.css]
@import url(./table.css);
h1 {
color : royalblue;
}
section {
margin : 20px;
}
[css : table.css]
table {
border-collapse: collapse;
background-color: beige;
}
table>thead {
font-weight: bold;
}
table td {
border : 1px solid gray;
padding : 6px 12px;
}
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [프론트엔드 CSS] 엘리먼트 내 스크롤바 생성 overflow-y (0) | 2021.02.20 |
|---|---|
| [CSS] user-select 텍스트 선택 효과 없애기 (0) | 2021.02.17 |
| [CSS] position - static, relative, absolute, fixed (0) | 2021.02.10 |
| [CSS] 부모의 속성을 따르는 inherit (0) | 2021.02.10 |
| [CSS] 선택자 Selector - (0) | 2021.02.09 |
댓글