분류 전체보기
-
체크박스를 이용해 슬라이드 메뉴 만들기(뒷 배경 블러효과)CSS 2023. 2. 13. 13:46
javascript없이 CSS만 사용합니다! 기본적인 틀은, 웹 브라우저의 화면에 보이지않는 곳(화면 바깥)에 메뉴를 만들어 놓은 후 체크박스의 체크 여부에 따라 보이는 화면에 들어오고 나가는 개념입니다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 썸네일 상에 보이는 네비게이션 바는 다루지 않습니다! 메뉴, 메뉴를 보여주는 버튼, 메뉴를 닫는 버튼 크게 3가지로 나뉘어집니다. -1 // 기존 체크박스 없애기 #openMenu{ display: none; } -2 // 메뉴오픈 버튼의 영역 및 위치속성 #openMenuLabel { display: block; position: absolute; right: 24px; top: 16px; width: 34px; height: 22px; cursor: pointer..
-
체크박스를 이용해 토글 스위치(ON/OFF)만들기CSS 2022. 12. 23. 10:44
기본 개념은, 체크박스를 레이블로 감싸주고 레이블로 스위치 배경을, 가상요소로 토글 버튼과 글씨의 모양을 잡아줍니다. CSS속성은 크게 6가지를 사용합니다. HTML작성은 간단합니다. // 스위치의 배경 label { display: block; position: relative; width: 100px; height: 45px; background: #d3d3d3; border-radius: 60px; transition: background 0.4s; } 레이블 요소를 이용하여 스위치의 전체적인 틀을 잡아줍니다. // 레이블 가상요소(스위치의 버튼) label::after { content: ""; position: absolute; left: 2.5px; top: 50%; width: 40px; h..