본문 바로가기

꾸미기2

CSS로 스크롤바 꾸미기 간혹 스크롤바가 생기는 고정된 크기의 Div를 써야 할 때 기본 스크롤바는 너무 크고 못생겼다는 생각이 들 때가 있습니다. 이럴때 사용할 수 있는 CSS 입니다. 스크롤바를 원하는대로 꾸밀 수 있게됩니다. See the Pen Custom Scrollbar styling by Alex Park (@alikong) on CodePen. 위에서 CSS 탭을 눌러 보시면 원하는 모양의 스타일 번호와 코드를 찾으실 수 있습니다. 그 외 비슷한 용도로 스크롤바를 만들어주는 여러 js 라이브러리들도 있지만 css로는 모양만 꾸며주고 기본 스크롤바를 쓰는게 좋은 것 같습니다. 이 외에도 검색해보시면 더~ 많은 소스들이 있겠지만.. 왠만해선 전 위 애들중 하나 골라서 색상좀 만져주고 끝냅니다. 2020. 10. 14.
라디오 radio / 체크박스 checkbox - input 꾸미기 input의 type들 중 radio 나 checkbox 를 많이 쓰게 되는데.. 이 둘은 CSS로 꾸미기가 가능하고 선택되고 안되고 같은 상태가 감지되기 때문에 다양한 용도로 변형되어 사용됨 나도 하나 뚝딱 만들어 봄 예제와 소스는 아래 참고 https://jsfiddle.net/alikong/24t87bvu/ 핵심은 input은 숨기고 label을 마음껏 꾸미는 것 (필요하면 :before 나 :after 등으로 좀 더 확장해가면서...) 그리고 체크 상태일때와 아닐때에 따라 다른 스타일을 적용하는 것 잘 이해하고 응용하면 메뉴로 만들 수도 있고, 탭으로 쓸 수도 있고 각종 버튼으로 만들 수 있음 2020. 8. 6.