12일차_CSS 개요: 선언 방식_20210726

CSS 개요: 선언 방식

 

내장 방식

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

<style>

  div{

    color: red;

    margin: 20px;

  }

</style>

 

링크 방식

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

: 병렬 연결 방식

링크로 연결된 두개의 css파일 main.css, box.css

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

main.css 파일

div{

  color: red;

  margin: 20px;

}

 

인라인 방식

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

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

: 우선순위가 너무 앞서있어서 유지보수가 쉽지 않음

 

@import 방식

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

: 직렬 연결 방식

하나의 css만 링크로 연결되어있고, main.css에 box.css가 링크되어있음

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

main.css 파일

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

div{

 ...

}

box.css 파일

.box{

  background-color: red;

  padding: px;

}