UI (2) 썸네일형 리스트형 [HTML5, CSS3] input checkbox 스타일 설정하기 checkbox를 스타일해보자 기본적인 input checkbox 로는 이렇게 원하는대로 스타일링을 할 수 없다. 그렇다고 기본 input 태그를 이용하자니 너무 안 이쁘기도 하고, 브라우저마다 제공하는 기본 체크박스 모양이 달라 UX에도 좋지 않다. 기본 checkbox를 사용하는 대신에 input 태그를 숨기고 label 태그를 이용해 스타일링을 하면 된다. 먼저 html을 이렇게 설정하자 클릭 여기서 input 태그의 id 속성 값과 label의 for 속성의 값이 일치해야 한다. 해당 값이 일치해야 label 태그를 클릭했을 때 input 태그도 같이 선택된다. 다음 css를 통해 input 태그를 숨기고 label class="btn" 값을 스타일링 하면 된다. .input-area { posi.. 토스 텍스트 필드 효과 따라하기(UI/UX) 얼마 전에 토스 앱을 사용하던 중 토스의 UI가 너무나 디테일하고 아름답다는 사실을 발견해버렸는데요. 평소에 UI/UX 디자인을 공부하고 싶다는 생각도 들고, UI에 멋진 인터렉션을 걸고 싶다는 생각을 하던 중이어서 이렇게 아름다운 디자인을 조금씩 따라 해 봐야겠습니다. 하나하나씩 만들어가며 조금씩 배워간다면 나중에는 멋진 인터렉션도 잘 만들 수 있는 개발자가 되지 않을까 싶어서.. 티끌 모아 태산이니 하나씩 조금씩 모아보자. 목표 input 영역을 클릭 시 해당 placeholder가 상단으로 움직이며 input 박스에 커서가 올라가는 형태. 간단한 UI이지만 기존 placeholder만 들어있는 input 태그보다는 훨씬 사용자가 봤을 때 디자인적으로나 경험적으로나 좋은 디자인인 것 같다. html .. 이전 1 다음
