[CSS] CSS 개요와 선언 방식

CSS란?

CSS는 웹 페이지의 스타일과 내용적인 부분을 서로 분리해 놓은 스타일 시트이다. 웹 사이트 스타일을 일관성 있게 유지할 수 있게 해주며 유지 보수도 쉬워진다.
선택자 {속성 : 값}: 스타일(CSS)을 적용할 대상 선택자(Selector)

• 속성은 스타일의 종류(Property) 값은 Value => 해석 방법: 속성은 값이다.
• 주석은 /* */ 단축키: crtl + /

CSS의 4가지 선언 방식

1. 내장 방식

• HTML 파일 안에 (보통 head 태그 안에) <style> </style> 태그로 스타일을 작성하는 방식

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

2. 인라인 방식

• 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음)
• 인라인 방식은 우선순위 개념에서 지나치게 우선해서 CSS 내용 수정해도 변경안됌 --> 유지 보수에 좋지 않음

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

3. 링크 방식

• 링크 태그<link />를 이용해 외부 CSS 문서를 가져와서 연결하는 방식
• 링크 방식은 해석이 빨리 끝나는 CSS가 먼저 HTML에 연결되는 병렬 방식 연결

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

4. @import 방식

• css의 @import 규칙으로 css문서 안에서 또 다른 문서를 가져와 연결하는 방식
• @import는 직렬 방식으로 연결가능한데 box라는 css가 main.css에 연결되기 전까지 html에 연결 안돼 - 일부러 연결을 지연할 때 사용 or 연결이 지연된다는 단점

'main.css'
@import url("./box.css"); 
div {
  color : red;
  margin : 20px;
}
.box {
  background-color: red;
  padding: 20px;
}