CSS10 [CSS] CSS 스타일 상속과 선택자 우선 순위 스타일 상속 : 부모의 글자/문자 관련 속성들이 자식에게 상속된다. 강제 상속 : inherit 선택자 우선 순위 우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1, 점수가 높은 선언이 우선함! 2, 점수가 같으면, 가장 마지막에 해석된 선언이 우선함! 전체 선택자 - 0점 태그 선택자 - 1점 Class 선택자 - 10점 ID 선택자 - 100점 인라인 선언 - 1000점 !important - 무한대 2023. 1. 18. [CSS] CSS 선택자 - 가상 요소, 속성 가상 요소 선택자 (Pseudo-Elements) ABC::before 선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입 .box::before { content : "앞" } ABC::after 선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입 .box::after { content : "뒤" } 속성 선택자 (Attribute) [ABC] 속성 ABC을 포함한 요소 선택 [type] { color:red; } [ABC="XYZ"] 속성 ABC을 포함하고 값이 XYZ인 요소 선택 [type="password"] { color:red; } 2023. 1. 18. [CSS] CSS 선택자 - 가상 클래스 가상 클래스 선택자 (Pseudo-Classes) ABC:hover 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택 a:hover { color:red; } ABC:active 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 a:active { color:red; } ABC:focus 선택자 ABC 요소가 포커스되면 선택 input:focus { background-color:red; } ABC:first-child 선택자 ABC가 형제 요소 중 첫째라면 선택 .fruits span:first-child { color:red; } ABC:last-child 선택자 ABC가 형제 요소 중 막내라면 선택 .fruits h3:last-child { color:red; } ABC:nth-chi.. 2023. 1. 18. [CSS] CSS 선택자 - 복합 ABCXYZ 일치 선택자 (Basic Combinator) : 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 span.orange { color : red; } ABC > XYZ 자식 선택자 (Child Combinator) : 선택자 ABC의 자식 요소 XYZ 선택 ul > .orange { color : red; } ABC XYZ 하위(후손) 선택자 (Descendant Combinator) : 선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호! div .orange { color : red; } ABC + XYZ 인접 형제 선택자 (Adjacent Sibling Combinator) : 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 .orange + li { color.. 2023. 1. 18. 이전 1 2 3 다음