요 며칠 내내 웹 코딩 공부를 많이 했어요. 하하 그중에서 가장 많이 사용되는 input 중 checkbox와 radio 중 checkbox를 사용해 보려고 합니다. input과 label 태그를 id값으로 하나로 묶어서 사용해서 시작하도록 하겠습니다.위 사진에서 보시는 것처럼 기본적인 checkbox는 형편없습니다. 사용하는 인터넷 브라우저마다 체크박스 읽는 법이 다른데… 사파리에서 보면 더 허술한 거예요. 문제는 마우스 오버 혹은 체크했을 때 색깔까지 다르고 모양도 네모나면 심심하지 않나요? 그걸로 한번 바꿔볼게요. 아래 사진처럼!어도비xd로 작업했습니다.먼저 기본 html 코드를 입력합니다. 아래와 같이 코딩하면 끝. 이제 이 코드들에 영혼을 불어넣기 위해 css 작업을 할 차례입니다.나는 body와 html 태그를 모두 묶어서 편집하는 것을 좋아해요. 배경 카드의 형태는 다음 번에 구현하도록 했고, 오늘은 구별을 위해 배경 색상만 아래와 같이 구현해 보았습니다.그러면 아래와 같이 체크박스를 한번 만져봤어요.아무 변화가 없었거든요. 그렇다면 이제 방법은 하나네요!아래 사진처럼 불필요한 여성 서적은 삭제!그리고 새로운 창조를 하는 것입니다. 그래서 span 태그를 사용한 것입니다. label 태그의 특징은 for 값으로 input에 사용된 id 값을 적으면 label 태그 안의 요소를 클릭했을 때도 checkbox가 함께 태그 부착된다는 장점이 있습니다. radio도 마찬가지입니다.화면 가운데 두려고 위치를 부여해봤습니다. 중요한 것은 position: relative; 와 overflow: hidden; 입니다.포지션에서 relative, absolut, fixed를 자주 사용합니다. relative는 기준을 정해주는 요소입니다. 그리고 overflow 즉 기준점에서 벗어나면 어떻게 할지 선택할 수 있는데 hidden 값을 주어 보이지 않게 합니다. 이 방법을 사용하여 아래와 같이 position:absolute 값을 설정하면 겹치는 효과를 사용할 수 있습니다.바깥 원형을 나타내는 요소보다 원 안의 요소가 더 위로 와야겠죠? 이때 사용하는 것이 :nth-child입니다. 몇 번째 아이 요소를 선택할지 결정할 때 큰 도움이 됩니다. (웃음)둘째 요소에서 중요한 것이 투명도인 opacity와 transition입니다. 웹상에서도 어느 정도 애니메이션을 구현할 수 있었는데요. 그중에서 가장 중요한 게 원활하게 전환이죠? 그것을 가능하게 해주는 것이 transition입니다. 그냥 시간만 써도 상관없는데… 영상을 다뤄본 경험이 있다면 1초는 굉장히 긴 시간이라는 거 아시죠? 그래서 저는 .3s 혹은 .35s 를 자주 사용합니다.마우스 오버 했을 때의 값은:hover로, 체크 박스를 클릭했을 때는:checked 값으로 설정해 주세요. 그러면 다음과 같은 결과가 나옵니다. (웃음)마우스 오버마우스 오버 후 클릭!마우스 오버 후 클릭!