1. 선택자 개요 선택자 종류 선택자 형태 전체 선택자 * 태그 선택자 tag id 선택자 # class 선택자 . 후손 선택자 선택자 선택자 자손 선택자 선택자 > 선택자 property 선택자 선택자[property=value] 선택자[property~=value] 선택자[property|=value] 선택자[property^=value] 선택자[property$=value] 선택자[property*=value] 동위 선택자 선택자 + 선택자 선택자 ~ 선택자 구조 선택자 선택자:first-child 선택자:last-child 선택자:nth-child(수열) 선택자:nth-last-child(수열) 형태 구조 선택자 선택자: first-of-type 선택자: last-of-type 선택자: nth-o..
1. summary 기능 : 숨기기 출처 : web moden 자바 2. 적용 이미지 3. 코드 html lornasdfjlk asdlfjasdl;fjal;sdfjal;sdfjlasj1233efdsmvl css input[type="checkbox"]:checked + div { height: 0px; } div { overflow: hidden; /*height가 0일 될때 h1과 p가 빠져나오기 때문에 hidden 필요*/ width: 650px; height: 300px; transition-duration: 1s; /*transition 과 달리 모든 속성에 적용된다.*/ }
1. @import 규칙 1.1. 개요 핵심 css 파일 내부에 css 파일을 추가가능하도록 해준다. 사용 경우 css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 사용 css file을 제공하는 외부 css를 받아올 때 사용 외부 font 받아오는 경우 사용 방법 @import url(); 외부에서 호스팅되는 CSS 파일을 가져오는 방식 @import ""; 현재 파일과 같은 경로에 있는 CSS 파일을 가져오는 방식 1.2. 예시 css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 /* 현재 code block은 style.css 내부*/ /* default value */ @import "reset.css"; @import "variable.css..
