사용자 지정 속성
:element { 사용자 지정 속성 이름: 속성값; }
cf) html 전체에 적용하고 싶을 때
:root { 사용자 지정 속성 이름: 속성값; }
속성값 반환
var(사용자 지정 속성);
가상 선택자_ before, after
- 요소 앞뒤에 생성되는 자식요소
- 반드시 content(none, string, image 등) 써야 함
햄버거 전환
html)
<!DOCTYPE html> <head> <link rel="stylesheet" href="style.css"> <title>Project_Hamburger</title> </head> <body> <label> <div class="container"> <input type="checkbox" class="toggle"> <div class="hamburger"></div> </div> </label> </body> </html>
- label로 묶을 경우 체크박스가 확장되어 사용자가 누르기 편리함
css)
html, body { height: 100%; } body { display: flex; } .container { display: inline-block; flex-direction: relative; width: 80px; height: 80px; } .hamburger, .hamburger::before, .hamburger::after { background: black; width: 80px; height: 8px; position: absolute; transition: 0.8s; } .hamburger::before, .hamburger::after { content: ""; } .hamburger { top: 10%; } .hamburger::before { top: -25px; } .hamburger::after { top: 25px; } .toggle:checked + .hamburger::before { top: 0; transform: rotate(45deg); } .toggle:checked + .hamburger::after { top: 0; transform: rotate(135deg); } .toggle:checked + .hamburger { background: white; } .toggle { opacity: 0; }
