CSS (cascading style sheet)

폭포수처럼 부모요소의 속성이 자식요소에게로 상속되는 스타일 시트

HTML element의 모양을 정의

.content header > span.title:hover {
    background-color: red;
    color: white;
}

selector (style을 적용할 대상을 가리킴): pseudo selector (대상의 상태) {
    style name:style value;
}

공부 순서

  1. selector 사용법 (중요!)
  2. specificity (style 적용 순서) (중요!)
  3. box 다루는 방법 (테두리, 여백, 박스 계산법)
  4. font 다루는 방법
  5. 색상 지정하는 방법
  6. 배경 다루는 방법
  7. block과 inline 다루는 방법
  8. 위치 조정하는 방법

selector

  • {} : 모든 태그
    tag name {} : 특정 태그
    tag name, tag name, tag name {} : 특정 태그들
    .class name {} : 특정 클래스
    #tag id {} : 특정 id
    [속성명=”값”] {} : 특정 속성
    pseudo selector:status {} : 특정 상태

CSS specificity (CSS style 적용 순서)

  1. !important 속성
  2. inline style : tag안 속성
  3. id style : 아이디에만 적용 (한 아이디에 한 태그만 가능)
  4. class style, 조건 : 클래스에만 적용 (한 클래스에 여러 태그 묶기 가능)
  5. tag, pseudo selector : tag에만 적용
    • : 전역 적용

inline tag는 너비, 높이 임의 지정 불가 block tag는 너비, 높이 임의 지정 가능 img는 콘텐츠 너비가 커져 태그 너비도 맞춰 같이 커지는 것