Archive

CSS RESET, Pseudo-Class/Element

|

CSS RESET, Pseudo-Class/Element


  1. CSS Reset

    • CSS 초기화 문서 모음

    • Eric Meyer’s “Reset CSS” 2.0 http://meyerweb.com/eric/tools/css/reset/
    • HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet/
    • Yahoo! (YUI 3) Reset CSS http://yuilibrary.com/yui/docs/cssreset/
    • Normalize.css 1.0 https://github.com/necolas/normalize.css
  2. 가상 클래스 선택자(Pseudo-Class Selector)

    • :link - 방문하지 않은 링크일 때
    • :active - 클릭된 상태일 때
    • :focus - 포커스가 들어왔을 때
    • :checked - 체크 상태일 때
    • :enabled - 사용 가능한 상태일 때
    • :disabled - 사용 불가능한 상태일 때
    • :first-child - 셀렉터에 해당하는 모든 요소 중 첫번째 자식 요소
    • :lasst-child - 셀렉터에 해당하는 모든 요소 중 마지막 자식 요소
    • :nth-child(n) - 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식 요소
    • :nth-last-child(n) - 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식 요소
  3. 가상 요소 선택자(Pseudo-Element Selector)

    • ::after - 콘텐츠의 뒤에 위치하는 공간을 선택
    • ::before - 콘텐츠의 앞에 위치하는 공간을 선택
    • 특정 태그가 시작하는 곳 바로 앞, 끝나는 곳 바로 뒤를 선택하게 된다
    • 반드시 content와 같이 사용한다



참고 자료


모던 자바스크립트 deep dive