상속(Inheritance) .ecosystem { color : red; } 생태계 동물 호랑이 사자 코끼리 식물 설명 .ecosystem 에 적용된 색상(부모에서 지정한 스타일)이, 하위 요소들에게도 적용 상속되는 속성들(properties) 상속이 CSS 속성 모두 적용되는 것이 아니라, 글자를 다루는 속성들이 대부분 포함 font font-size font-weight font-style line-height font-family color text-align text-indent text-decoration letter-spacing opacity 기타 등등 강제 상속 상속되지 않는 속성(값)도 inherit 이라는 값을 사용하여 부모에서 자식으로 강제 상속 자식을 제외한 후손에게는 적용되지 않..

속성 선택자(Attribute Selectors) HTML 속성을 이용 대괄호([]) 사용 ATTR 속성 attr을 포함한 요소 선택 [disabled] { opacity : 0.2; /* 20% */ color : red; } ATTR=VALUE 속성 attr 을 포함하며 속성 값이 value 인 요소 선택 value 인 요소에 쌍따옴표 생략 가능 [type=“password"] { opacity : 0.5; color : red; } ATTR^=VALUE 속성 attr 을 포함하여 속성 값이 value 로 시작하는 요소 선택 [class^=“btn-"] { font-weight : bold; boder-radius : 20px; } DANGER NORMAL ATTR$=VALUE 속성 attr 을 포함..

NTH OF TYPE E 의 타입(태그이름)과 동일한 타입인 형제 요소 중 E 가 n 번재 요소라면 선택(n 키워드 사용 시 0 부터 해석(Zero-base)) 예제 1) .fruits { font-size : 40px; } .fruits p:nth-of-type(1) { color : red; } 딸기 사과 망고 오렌지 설명 클래스 선택자 fruits 찾아 태그 중에서 첫번째 요소 선택 예제 2) .fruits { font-size : 40px; } .fruits .red:nth-of-type(1) { color : red; } 오렌지 딸기 망고 사과 설명 red 라는 클래스를 가진 요소의 태그 이름은 li 태그 red라는 클래스를 먼저 검색 이후 타입을 li 반환 li 태그 중에 첫번째 요소 반환(오..

가상 요소 선택자(Pseudo-Elements Selectors) '::’ 가 기호 BEFORE E 요소 내부의 앞에 내용(Content)을 삽입 content 속성(property) 필수 ul li::before { content : “숫자”; Font-weight : bold; } 1 => 숫자1 2 => 숫자2 3 => 숫자3 4 => 숫자4 5 => 숫자5 6 => 숫자6 AFTER E 요소 내부 뒤에 내용(Content)을 삽입 content 속성(property) 필수 ul li::after { content : “.0”; } 1 => 1.0 2 => 2.0 3 => 3.0 4 => 4.0 5 => 5.0 6 => 6.0 ※ 추가사항 이미지 삽입 가능 출처 : heropy.org

FIRST-CHILD E 가 형제 요소 중 첫번재 요소라면 선택 .fruits li.first-child { color : red; } 딸기 사과 오렌지 망고 설명 fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 첫번재 요소만 선택 ※ 띄어쓰기 : 후손선택자 LAST-CHILD E 가 형제 요소 중 마지막 요소라면 선택 .fruits li.last-child { color : red; } 딸기 사과 오렌지 망고 설명 fruits 클래스 선택자 찾아 그 안에 있는 li 태그 선택, 단 마지막 요소 선택 NTH-CHILD E 가 형제 요소 중 n 번째 요소라면 선택(n 키워드 사용시 0 부터 해석(Zero-base)) 예제 1) .fruits li.nth-child(2) { color :..

가상 클래스 선택자(Pseudo-Classes Selectors) hover, active, focus ‘:’ 가 선택자 기호 HOVER E(기본선택자) 에 마우스(포인터)가 올라가 있는 동안에만 E 선택 a:hover { font-weight : bold; font-size : 20px; } .box { width : 100px; height : 100px; background : tomato; transition : 0.4s; } .box:hover { width : 200px; } Google! ACTIVCE E 를 마우스로 클릭하는 동안에만 E 선택 .box { width : 100px; height : 100px; background : tomato; transition : 0.4s; } .bo..