[CSS 개념잡기] CSS의 개요



0. CSS의 개요

 

1) CSS 소개

✔ CSS(Cascading Style Sheets)

웹 문서의 스타일을 책임 진다.

  • CSS3 부터는 모듈별로 버전을 달리 함 ex) font, table...
  • 사용시 웹브라우저마다 지원 되는지 확인
  • cascading : 폭포, 위에서 적용한 스타일이 아래 요소에게 적용 됨




2) CSS의 생김새

CSS는 룰 기반(Rule-based) 언어이다.

  • CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음
  • 선택자(Seletor): 스타일을 지정할 HTML 요소를 선택
  • 선언 블록(declation block): 중괄호 {} 내부의 여러 선언들을 작성
  • 선언(declation): 프로퍼티와 값으로 이루어진 쌍
  • 선택자 { 속성: 값; }의 형태로 이루어진 Rule(Rule Set)
  • 주석(Comments): /* contents */, 여러 줄 가능




3) CSS를 적용하는 방법

 내부 스타일(embedded)

  <html>
    <head>
      <style>
        h1 { color: red; }
      </style>
    </head>
    <body>
      <h1>Welcome!</h1>
    </body>
  </html>



 인라인 스타일(inline)

되도록 지양하는 것이 좋음

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

 

 외부 스타일(embedded)

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




4) 캐스캐이딩 원칙

 스타일 우선순위

  • 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐
    • 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
  • 적용 범위가 적을 수록 우선시 됨
    • tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
  • 소스코드의 순서가 뒤에 있으면 덮어씀



 스타일 상속

  • 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨
    • 자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어씀
  • 상속이 되지 않는 속성도 있음(ex. background-image, background-color...)




5) MDN 활용

property와 값을 알고싶으면 열심히 활용할 것~

  • can i use: property 호환성 확인 site