[기본 문법]
|
선택자 {
속성: 값;
속성: 값;
}
div {
width: 100px;
height: 100px;
background: red;
}
|
cs |
[선언 방식]
인라인(in-line) 방식
; HTML요소(태그)의 style 속성에 직접 작성하는 방식.
|
<div style="color: red">Inline</div>
|
cs |
내장(embedded) 방식
; HTML <style></style> 안에 작성하는 방식.
|
<head>
<style>
div {
width: 100px;
color: red;
}
</style>
</head>
<body>
<div>Embedded</div>
<body>
|
cs |
링크(link) 방식
; HTML <link> 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식.
|
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div>Link</div>
<body>
|
cs |
@import 방식
; CSS @import 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. 동기화 형태로 로딩됨(직렬).
|
<head>
<link rel="stylesheet" href="./css/common1.css">
</head>
<body>
<div>Import</div>
<body>
/* common1.css */
@import url("./common2.css");
|
cs |
'::public > HTML & CSS(SCSS)' 카테고리의 다른 글
| CSS - 복합 선택자 (0) | 2021.03.31 |
|---|---|
| CSS - 기본 선택자 (0) | 2021.03.31 |
| CSS - 환경 설정 (0) | 2021.03.30 |
| HTML - 전역 속성 (0) | 2021.03.30 |
| HTML - 요소((양식) form, input, label, button, textarea, fieldset, legend, progress) (0) | 2021.03.30 |