[HTML/CSS] 📚 CSS 개요

pyeonne·2022년 6월 9일

제로베이스 프론트엔드 스쿨 4기

목록 보기

4/25

Rule
1. 선택자 (Selector)
2. 선언 블록 (declation block)
3. 선언 (declations): 프로퍼티와 값으로 이루어진 쌍
4. 선택자 { 하나 이상의 선언 }의 형태로 이루어진 하나의 Rule (혹은 Rule Set)

<head>
  <style>
    h1 {
    	color: red;
    }
  </style>
</head>

<h1 style="color:red">Welcome!</h1>

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

동일한 스타일이라도 선언된 곳에 따라 우선 순위가 정해진다.
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일 (색약 모드와 같은 특수한 상황)
적용 범위가 적을수록 우선시된다.
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
소스 코드의 순서가 뒤에 있으면 덮어쓴다.
부모 요소에 있는 스타일 속성들이 자식 요소로 전달되고, 자식 요소에서 재정의할 경우 부모의 스타일을 덮어쓴다.
상속이 되지 않는 속성도 있다. (예: 배경이미지, 배경색 등)

건강한 몸과 마음에서 건강한 코드가 태어난다 !