CSS(SCSS) 선언방식

• CSS의 선언방식은 내장방식, 링크방식, 인라인방식, @import 방식 총 4가지로 구분되어 있다.

1. 내장방식 : style 태그를 사용해 내용(Content)을 HTML 내부 안에서 스타일을 작성하는 방식
사용 예) HTML 내부에서 사용하는 방법 - style 태그

<style>
	div {
	  color: red;
	  margin: 20px;
	}
</style>

2. 인라인 방식 : 요소에 style 속성에 직접 스타일을 작성하는 방식
사용 예) div 태그 내부 속성에서 사용하는 방법

<div style="color: red; margin: 20px;"></div>

3. 링크 방식 : link 로 외부 CSS 문서를 가져와서 연결하는 방식

사용 예) 외부 속성 연결방법

<link
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
rel="stylesheet"
/>

4. @import 방식 : CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식

사용 예)

• main.css

@import url("./box.css");

div {
color: red;
margin: 20px;
}

• box.css

.box {
background-color: red;
padding: 20px;
}

• import 방식은 HTML 코드가 해석되기 전까지 HTML에 연결이 되지 못하고 적용 되지 못할수도 있음