[CSS개요] CSS 선언방식

1. 내장방식
2. 링크방식
3. 인라인 방식
4. @import 방식

1. 내장방식

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

별도의 css 파일이 없어도 스타일을 적용할 수 있지만 스타일이 많아지면 불편하고, html, css, js 는 나눠서 관리하는것이 좋으므로 유지보수에 좋지 않음.

2. 인라인

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

요소의 style속성에 직접 스타일을 작성하은 방식(선택자 없음)
해당하는 요소를 직접 찾아 작성하는것이기 때문에 선택자가 없다.
문제: css 우선순위에서 인라인이 지나치게 우선하기 때문에 별도의 코드로 수정하려 해도 수정이 안됨. 유지보수에 악영향 미침

3. 링크방식

<link rel="stylesheet" href="./css/main.css">

<link/>로 외부 css문서를 가져와서 연결하는 방식
병렬방식

4. import 방식

<link rel="stylesheet" href="./css/main.css">

main.css

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

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

box.css

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

CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
이미 링크되어있는 css에 다른 css 파일을 연결한다.
직렬방식
main.css가 html에 연결되서 import코드가 해석되기 전까지 box.css는 결국 html 에 연결되지 못하고 적용되지 못함. 연결이 지연됨.