프론트엔드/CSS24 속성 선택자 예제 HTML [ABC] : 속성 ABC을 포함한 요소 선택 [type] { color: red; } [ABC="XYZ"] : 속성 ABC을 포함하고 값이 XYZ인 요소 선택 [type = "password"] { color: red; } data 타입 추가 예제 사과 [data-fruits-name]{ color: aqua; } 2021. 4. 13. 가상 클래스 선택자 예제 준비 HTML CSS .box { width: 100px; height: 100px; background-color: orange; transition: 1s; // 속성을 서서히 변화시키는 속성 } ABC:hover : 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택. .box:hover { width: 300px; background-color: royalblue; } ABC:active : 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택 .box:active { width: 300px; background-color: royalblue; } ABC:focus : 선택자 ABC 요소가 포커스되면 선택 input:focus{ background-color: orange; } ta.. 2021. 4. 13. 기본 선택자 * : 전체 선택자 모든 요소를 선택 * { color: red; } ABC : 태그 선택자 태그 이름이 ABC인 요소 선택 li { color: red; } .ABC : 클래스 선택자 HTML class 속성의 값이 ABC인 요소 선택 .ABC { color: red; } #ABC : 아이디 선택자 HTML id 속성의 값이 ABC인 요소 선택 #ABC { color: red; } 2021. 4. 12. CSS 선언 방식(link, import) link 방식: 병렬 방식(한번에 가져와서 처리) 태그를 이용하여 외부 CSS문서를 가져와서 연결하는 방식 import 방시: 직렬 방식(순서대로 처리) CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 @import url("./box.css"); 고의로 해당 CSS파일이 늦게 적용되기를 바랄 때 유용하게 사용 2021. 4. 11. iframe 높이 자동 조절 참고 NAVER About Login about login Test1 Test2 2021. 4. 11. CSS 초기화 (크로스브라우저 이용시) 권장 구글창에 reset.css cdn 검색 주소 www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. www.jsdelivr.com reset.min.css: 경량화한 버전(추천) 클릭 후 URL복사 태그안에 태그를 추가 2021. 4. 11. 이전 1 2 3 4 다음
