web_frontend(11)CSS 선언방식

CSS 선언방식

 

1. 내장방식

2. 인라인 방식

3. 링크 방식

4. @import 방식

 

1. 내장 방식

 

<style></style>의 내용(Contents)으로 스타일을 작성하는 방식

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

 

장점: css파일이 없어도 html내에서 적용가능

단점: css내용이 많으면 한번에 처리하기 쉽지 않음(HTML CSS JS 파일을 분리해서 관리하는것이 좋음) 

 

권장 하지 않음

 

 

 

2. 인라인 방식

요소의 style 속성에 직접 스타일을 작성한는 방식(선택자 없음)

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

단점 : CSS 우선순위가 있는데 지나치게 우선순위가 높다. 유지보수가 어렵다.

 

 

3. 링크 방식

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

 

HTML

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

main.css

div {

  color: red;

  margin: 20px;

}

 

 

 

4. @import 방식

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

 

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

 

main.css

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

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

box.css

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

 

import 된것이 해석이 끝나야 적용이된다. 그래서 지연되는것이 좋은것일수도 있고 안좋을수도있음 직렬방식