Web Dev/CSS (5) 썸네일형 리스트형 CSS - Selector - User Action Pseudo-classes ex) a:hover { } a:active { } input:active { } input:focus { } CSS - Structural Pseudo-classes 개요 모든 가상 클래스는 ':'기호를 통해 표현합니다. element:first-child 첫 번째 element에만 적용 element:last-child 마지막 element에만 적용 element:nth-child(n) n번째 element에만 적용 (2n)으로 짝수번째 모두 선택 가능 (2n-1)으로 홀수번째 모두 선택 가능 CSS - Selector - Child, Descendant, Sibling Combinator 개요 div를 기준으로 div는 부모 요소, div 바로 아래에 속한 h1, ul은 div의 자식요소, 그리고 ul에 속한 li, h1, p등은 자손 요소가 된다. News hello bla bla 자식 선택자 parent > child 자손 선택자 parent descendants - 공백을 사용. 자손 요소에는 자식 요소도 포함된다. 형제 선택자 parent + sibling - parent 다음에 오는 하나의 sibling 요소만 선택 parent ~ sibling - parent 다음에 오는 모든 sibling 요소들을 선택 CSS - selector - type, class, id Selector 및 참조하는 방법 Type Selector html의 tag를 지칭하는 선택자 p { color: red; } h1 { color: blue; } Class Selector tag 괄호 안에 class 라는 속성을 선언하고 속성의 값에 임의의 클래스 이름을 넣어준 선택자 . 이렇게 선언한 클래스를 CSS에서는 '.'을 사용하여 참조한다. // html에서의 class 선언 bla bla // css에서 class를 참조하는 법 .story { } 아래와 같이 여러 개의 클래스를 부여할 수도 있다. CSS - 기본 구조, 사용 방법 CSS의 기본 구조 selcector { property: value; } css을 작성할 때 ';' 을 빠트리지 않도록 주의해야합니다. CSS 사용 방법 CSS를 적용하는 세 가지 방법이 있지만 가장 권장되는 한 가지 방법을 기억합시다. 바로, link 태그를 이용해 css 파일을 불러오는 방법입니다. 이전 1 다음