Jade_o.o

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 코드 코드 실행 시 결과창

CSS 적용방법 3가지 인라인 방식 인라인 방식 인라인 방식 vs style 태그 내장 스타일 태그 방식 내장 스타일 태그 방식 외부 스타일시트 방식 html 코드 코드 실행 시 결과창

html 코드 /* transition vs animation - transition - 전환된 스타일을 지정할 수 있음 - hover나 onclick 같은 "이벤트"에 의해 발생 - animation - 중간 스탭을 지정해 보다 세밀한 스타일 전환 가능 - 시작, 반복, 정지 동작 가능 - @keyframes로 이루어짐 */ .box{ width: 100px; height:100px; background-color: cyan; position: relative; animation-name: my-ani; animation-duration: 5s; animation-iteration-count: 1.7; /*infinite = 무한히 사용 가능*/ animation-iteration-count: infi..