1. 내장 방식 : <style></style>의 내용(Contents)로 스타일을 작성하는 방식.
<head> 부분에 작성함. 유지 보수 측면에서 안좋아 비추천
<head>
<style>
div {
color: green;
margin: 50px;
}
</style>
</head>
2. 인라인 방식 : 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)
유지 보수 측면에서 안좋아 비추천, 스타일 바꿀 때 CSS가서 바꾸는게 좋음.
<div style="color: green; margin: 50px;"><div>
3. 링크 방식 : <link/>로 외부 CSS 문서를 가져와서 연결하는 방식.
병렬 방식으로 볼 수 있음.
<link rel="stylesheet" href="./css/main.css">
main.css 파일의 내용
div {
color: green;
margin: 50px;
}
4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서
또 다른 CSS 문서를 가져와 연결하는 방식. 직렬 방식으로 볼 수 있고,
연결이 지연됨.
<link rel="stylesheet" href="./css/main.css">
main.css 파일의 내용
@import url("./box.css");
div {
color: green;
margin: 50px;
}
box.css 파일의 내용
.box {
background-color: greed;
padding: 50px;
}
'개념 창고 > HTML & CSS' 카테고리의 다른 글
| [CSS] id 속성과 class 속성의 차이? (0) | 2024.02.01 |
|---|---|
| CSS 기본 선택자 (0) | 2022.05.20 |
| CSS 정의 및 기본 문법 (0) | 2022.05.20 |
| HTML 전역 속성 (0) | 2022.05.18 |
| HTML의 주석처리 (0) | 2022.05.18 |