▶ CSS 선언 방식
1. 인라인(Inline) 방식
- HTML 요소(태그)의 style 속성에 직접 작성하는 방식.
- 직접 작성하기 때문에 선택자를 작성할 필요가 없음.
- 사용 예시
/* HTML */
<body>
<div style="color:red; font-size: 20px; font-weight: bold;">hello</div>
</body> - 반복적인 사용이 많은 경우나 유지보수 등에서 위와 같이 직접 입력하는 방식은 좋은 방법이 되지 못함.
- 사용 빈도를 떠나 직접 입력하는 행위는 지양하는 것이 좋음.
2. 내장(embedded) 방식
- HTML 문서의 <style></style> 안에 작성하는 방식.
- 사용 예시
/* HTML */
<head>
<style>
div{
color:red;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div>hello</div>
</body>
3. 링크(link) 방식.
- HTML의 <link>를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식.
- 사용 예시
/* HTML */
<head>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div>hello</div>
</body>/* main.css */
div{
color:red;
font-size: 20px;
font-weight: bold;
}
4. @import 방식
- CSS의 @import를 이용하여 외부 문서로 css를 불러와 적용하는 방식.
- CSS에는 at(@) 규칙이 있음. ex. @media
- @import는 CSS에서 import를 통해 외부 문서를 가지고 옴.
- CSS가 CSS를 가져오는 것.
- 사용 예시
/* HTML */
<head>
<link rel="stylesheet" href="./main1.css">
</head>
<body>
<div>hello</div>
</body>- HTML 파일에서는 main1.css를 연결
/* main1.css */
@import url(./main2.css)- main1.css에서는 main2.css를 import.
/* main2.css */
div{
color:red;
font-size: 20px;
font-weight: bold;
} - main2.css 내용.
- @import 사용 시 주의사항
- <link>를 이용해 여러 css 문서들을 가져오는 경우 HTML은 이들을 거의 동시에 불러 옴.
- 병렬 방식 호출.
- @import는 첫 번째 외부 파일을 부르고 첫 번째 파일이 도착한 후 두 번째 외부 파일을 호출하는 방식.
- 직렬 방식 호출.
- 따라서 호출 시간이 소요될 수 있음.
- 특정 외부 문서가 사용되기 위해 다른 하나가 미리 세팅되어 있어야 한다면 @import 방식이 유용함.
- 일반적으로는 링크 방식을, 특수한 상황에서는 @import를 사용.
'CSS' 카테고리의 다른 글
| [CSS] 가상 클래스 선택자(Pseudo-classes Selectors) (0) | 2020.09.02 |
|---|---|
| [CSS] 복합 선택자(Combinators) (0) | 2020.08.31 |
| [CSS] 기본 선택자(Basic selectors) (0) | 2020.08.31 |
| [CSS] 기본 문법 (0) | 2020.08.31 |
| [CSS] CSS 적용 우선순위 (0) | 2020.08.09 |
