HTML 문서에 CSS style sheet를 적용하는 방법은 크게 3가지가 있음!
| 명칭 | 설명 |
| 외부 스타일시트 (external style sheet) |
- 외부 css 파일을 생성 후, html head 요소 안에 기술하여 불러옴 - 총 두 가지 방식이 있음 : import, link |
| 인라인 스타일시트 (inline style sheet) |
- html 요소에 직접 기술 - 유지보수를 생각하면 내다버려야 할 방식 |
| 내부 스타일시트 (embedded style sheet) |
- html의 head 요소 내에 직접 기술 - style 요소 내부에 css 코드를 작성 |
세 가지 방법에 대해, 스타일이 적용되는 우선순위는 인라인 > 내부 > 외부 순서.
1. 외부 스타일시트 (external style sheet)
1-1. link 요소를 활용한 방식
다른 방식에 비해 속도, 유지보수 면에서 뛰어난 방식임.
(⬇ 관련해서 이유를 좀 더 찾아보았음)
더보기
더보기
1. link 요소를 사용하는 경우, 브라우저가 css를 병렬로 다운로드 할 수 있어 속도가 빨라짐
2. head 요소 내에 link 요소가 존재하여, 브라우저가 HTML 구문 분석을 하면서 CSS 파일을 동시에 다운로드 및 적용할 수 있음
3. link 요소는 모든 브라우저에 호환됨(@import의 경우 구형 브라우저에서 문제를 일으킬 가능성이 존재)
head 요소 내에서 link 태그를 활용, 외부 CSS 파일을 불러옴
<!-- external.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>external.html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>External 방식</h1>
<p>link 요소를 사용하여 외부에서 생성한 css 파일을 연결</p>
</body>
</html>/* style.css */
h1{
color: aqua;
background-color: aquamarine;
}
p{
color: blueviolet;
background-color: antiquewhite;
}
1-2. @import 규칙을 활용한 방식
다른 css 파일 여러 개를 하나의 css 파일 내에 추가하여 사용할 수 있음.
link 방식과 혼합하여 사용할 수 있음
<!-- external.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>external.html</title>
<style>
@import url(css/style.css);
</style>
</head>
<body>
<h1>External 방식</h1>
<p>@import 규칙을 이용하여 외부에서 생성한 CSS 파일 연결</p>
</body>
</html>/* style.css */
h1{
color: aqua;
background-color: aquamarine;
}
p{
color: blueviolet;
background-color: antiquewhite;
}
(헷갈림을 방지하기 위한 추가 예시)
더보기
더보기
<!-- external.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>external.html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>External 방식</h1>
<p>@import 규칙을 이용하여 외부에서 생성한 CSS 파일 연결</p>
</body>
</html>/* style.css */
@import url(css/sheet.css);
h1{
color: aqua;
background-color: aquamarine;
}/* sheet.css */
p{
color: blueviolet;
background-color: antiquewhite;
}
2. 인라인 스타일시트 (inline style sheet)
html의 태그에서 style 속성을 활용하여 기술.
유지보수를 고려하면 내다버려야 할 방식!(이런 방법이 있다는 정도만 알아두기)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inline.html</title>
</head>
<body>
<h1 style="color:#FF0000; background-color: aqua;">Inline 방식</h1>
<p>요소 내에서 직접 css코드를 기술하는 것</p>
</body>
</html>
한 태그 내에서 style을 두번 사용하면 안됨
(X) style="color:#FF0000" style="background-color: aqua"
(O) style="color:#FF0000; background-color: aqua;"
3. 내부 스타일시트 (embedded style sheet)
html의 head 요소 내에서 style 요소를 활용하여 기술
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>embedded.html</title>
<style>
h1{
color: red;
background-color: aqua;
}
p{
color:blueviolet;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Embedded 방식</h1>
<p>style 요소 내에 직접 CSS 코드를 포함시킴</p>
<p>HTML 파일 내에 CSS 코드를 직접 포함하여 스타일이 적용되게 하는 방식임</p>
</body>
</html>
'언어 > CSS' 카테고리의 다른 글
| [CSS] grid(display 속성 값) (0) | 2024.07.30 |
|---|---|
| [CSS] flex(display 속성 값) (0) | 2024.07.30 |
| [CSS] Media Query(미디어 쿼리) (0) | 2024.07.30 |
| [CSS] Selector(선택자) 정리 (0) | 2024.07.30 |
| [CSS] display 속성(Property) 정리 (0) | 2024.07.29 |
댓글