CSS

선언 방식

미짱~ 2023. 1. 25. 10:09

 

내장 방식 

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

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

링크 방식 

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

html <head> 안에 쓰고 
<link rel = "stylesheet" href="./css/main.css">


// main.css 파일 

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

인라인 방식 

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

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

 

@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 { 
  background-color: red;
  padding: 20px;
}

 

 

keypoint

-인라인 작성 시 css 속성 우선순위가 높으니 권장하지 않음

- 링크 방식은 병렬 방식임으로 한꺼번에 스타일을  한꺼번에 갖고 오는 장점

- import 방식은 직렬 방식임으로 스타일을 지연시킬 때 사용할 수 있음 

-내장 방식 같은 경우 html 길이가 길어져 가독성이 좋지 않다 

 

느낀 점

각자 선언 방식 다 경험해 봤으나 각자 장점이 있긴 하다 

 

 

오늘의 학습 만족도 

⭐⭐⭐⭐⭐