css 기초

css 기초

css 파일에 '@charset "utf-8";'을 사용해서 문자열 인코딩에 대비하는게 좋다.

길이의 단위

px: 1px을 1로 한다. 창의 크기랑 관계가 없다. 모니터 해상도에 관련있다.

em: font의 높이를 1로 한다.

rem: root font 기준

%: 브라우저의 viewport에 관계가 있다.

선택자 우선 순위

element > element : 자식 선택자만 선택하고 싶을때 사용한다.

element + element: 형제 엘리먼트를 선택할 때 사용한다.

[attribute]: 속성 선택자이다.

[attribute=value]: 정확한 value의 속성을 가지고 있는 요소만 찾는다.

[attribute^=value]: 해당 value로 시작하는 속성 값의 요소를 찾는다.

[attribute$=value]: 끝나는 부분을 확인하여 찾는다.

[attribute~=value]: 완전한 단어가 포함된 속성을 가진 element를 찾는다.

[attribute*=value]: 불완전한 단어가 포함된 속성을 가진 element를 찾는다.

    [title]{
    }
    a[title]{

    }
    a[href = 'http://site.com']{

    }
    a[href ^= 'https://']{

    }
    a[href $= '.jpeg']{

    }

    // 링크 상태
    a:link{}
    // 방문 한 적 있는 상태
    a:visited{} 
    // 마우스가 올라간 상태
    a:hover{}
    // 마우스 누른 상태
    a:active{}
    // tab 키로 접근할 때도 사용한다.
    a:focus{}

    // 첫번째 라인만 선택한다.
    p:first-line {}
    // 첫번째 글자만 선택한다.
    p:first-letter{}

    // 해당 element 앞에 추가한다.
    p:before{
        content: "Before area ";
    }
    // 해당 element 뒤에 추가한다.
    p:after{
        content: "After area ";
    }

선택자 우선 순위

inline: 1000
id: 100
element: 1
class: 10

조합하면 우선 순위가 더 강해진다.
!important는 무조건 적용되지만 별로 권장 X