선언 방식

티스토리 뷰

CSS

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

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

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>

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 길이가 길어져 가독성이 좋지 않다

느낀 점

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

오늘의 학습 만족도

⭐⭐⭐⭐⭐

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함