[CSS] CSS 개요와 선언 방식

blockzzie·2023년 4월 19일

HTML/CSS

목록 보기
8/14

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;
}
profile
막무가내 코딩노트

0개의 댓글