HTML 및 CSS (2) 썸네일형 리스트형 [HTML/CSS] 토글 버튼 - 순수 CSS로 만든 토글 버튼 / Toggle Toggle Button with pure CSS 목적 토글 버튼은 생각보다 쓰이는 곳이 많다. 그때마다 구글링하며 토글 버튼 소스를 긁어 써왔다. 난 기능 구현을 최우선하고 그 후에 보완하거나 핵심 개념을 공부하는 스타일이라 이번 기회에 토글 버튼을 파헤쳐 볼까 싶다. 토글 버튼을 직접 처음부터 만들 것은 아니다. 시간적 이유도 있고 주로 사용할 리액트 프레임워크에서는 또 다를 것 같기 때문이다. 그래서 이번 목표는 자바스크립트 동작 없이 순수 CSS만으로 동작하는 토글 버튼을 정리해두는 것으로 하겠다! 과정 최대한 간단하고 코드도 간결하면서도 토글 버튼 생김새는 느낌있는 결과물을 원했다. 그래서 완성된 토글 버튼 소스를 바탕으로 필요한 것만 간추려보는 식으로 해보려고 하며 구글링을 하였고 멋진 곳을 .. [HTML/CSS] 마우스 드래그 방지 - 모든 브라우저 호환 게임 듀오 매칭 관련 프로젝트 중 포지션 선택 아이콘을 만들었다. 그런데 다음 사진처럼 아이콘이 드래그가 되어 보기 좋지 않다고 생각하여 드래그를 방지하는 방법을 찾아보았다. 결론은 간단한 CSS로 설정이 가능하다. 적용 전 드래그 방지는 한번씩 사용할 일이 있을것 같아서 정리해두려고 한다. .drag-prevent{ -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } 적용 후 드래그 방지 코드를 적용 한 모습이다. 드래그가 되지 않고 디자인 해놓은대로 체크박스 체크 및 호버링이 잘 된다. 편안하다. 위와 같이 따로 ".drag-pr.. 이전 1 다음
