Jade_o.o

css를 통해 selector 선택자 중 속성 선택자에 대해 알아보자 [변수명]{}, [class="클래스명"], [type="password"] 코드를 살펴보며 자세히 알아보자

css를 통해 selector 선택자 중 가상 클래스 선택자, 가상 요소 선택자에 대해 알아보자 1. 가상 클래스 선택자 1-1 hover, active, focus, checked*/ - E:active {} E 요소에 마우스 클릭 또는 키보드 엔터가 눌리는 동안 - E:hover {} E 요소에 마우스가 올라가 있는 동안 - E:focus {} E 요소에 포커스가 머물러 있는 동안(input, textarea) - E:checked {} E 요소가 체크 되었을 때 (radio, checkbox) 1-2 순서와 관련된 가상클래스 선택자 - E:first-child E 요소가 첫번째라면 선택 - E:last-child E 요소가 마지막이라면 선택 - E:nth-child(n) E 요소가 n번째라면 선택 ..

css를 통해 selector 선택자 중 복합 선택자에 대해 알아보자 직계 자식 선택자 - div > h2, .first > h2, main > .first > article > ul > li ..등등 후손 선택자(띄어쓰기) - .second li 인접 형제 선택자 - #first + li, #fairy ~ li 선택자 배우기 첫번째 section 전래동화 토끼와 거북이 선녀와 나무꾼 햇님 달님 콩쥐 팥쥐 두번째 section 신데렐라 백설공주 => html, css 코드 => 코드 실행 시 결과창

css를 통해 selector 선택자 중 기본 선택자에 대해 알아보자 전체 선택자 - * {} 태그 선택자 - li, h3, span.. {} 등등 클래스 선택자 - .p, .small, .big{} 등등 아이디 선택자 - #p{} 등등 => tag 아이디 선택자가 우선순위가 높음 => 같은 레벨이라면 뒤에 선언된 스타일이 적용됨 쥐 소 용 토끼 올해는 청룡의 해 입니다. p tag span tag html 코드 코드 실행 시 결과창