본문 바로가기

웹(Web)51

여러가지 선택자들 *는 페이지의 모든 것태그를가르키는 선택자다 A+B는 A 옆에 있는 B를 선택하는 선택자이다 A~B는 A 옆에 있는 모든 B를 선택하는 선택자이다 A>B는 A에 직접 속해있는 B를 선택하는 선택자다 A:only-child는 모든 요소 중에 A가 유일하게 포함되어 있을 경우 A를 선택하는 선택자이다 A:last child는 모든 요소의 마지막 자손인 A를 선택하는 선택자이다 :nth-child(숫자)는 표시된 숫자번째의 요소를 고르라는 선택자이다 :nth-last-child(숫자)는 뒤에서부터 센 숫자번째의 요소를 고르라는 선택자이다 :first-of-type은 가장 처음 타입을 고르는 선택자이다 :nth-of-type()은 타입과 순서에 따라서 고르는 선택자이다 괄호에는 숫자 또는 even 또는 odd가.. 2021. 4. 15.
가상 클래스 선택자 링크와 관련된 가상 클래스 선택자 :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다. color background-color border-color outline-color The color parts of the fill and stroke properties 클래스 선택자처럼 동작하지만 여러가지 선택들을 하게 하며 각각의 엘리먼트들의 상태에 따라서 선택하는 선택자 두 개가 동급이면 뒷쪽이면 뒤에 있는 선택자를 선택한다 visited는 보안상 일부속성만 쓸 수 있.. 2021. 4. 15.
선택자 공부 팁 CSS Diner CSS 선택자를 게임의 형식을 통해서 익힐 수 있는 사이트 http://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS Cheat Sheet 선택자가 정리되어있는 종이 2021. 4. 15.
부모 자식 선택자 ol>li 이렇게 하면 ol의 바로 밑에 있는 li에 대해서만 선언이 적용된다 #lecture>li라고 하면 id값이 lecture인 선택자 바로 밑에 있는 li에 대해서만 선언이 적용된다 HTML CSS JavaScript HTML CSS selector declaration JavaScript A+B A~B A 2021. 4. 15.