CSS(SCSS)

CSS(SCSS)

Pure CSS radio로 탭 만들기

CSS로 탭을 만드는 방법 중 하나는 앵커 태그로 마크업하여 CSS 선택자 :target으로 구현하는 방법이 있습니다. 이 방법은 몇 줄 안되는 CSS로 구현할 수 있지만 URL 해시를 사용하여 스크롤이 점프되는 이슈가 있기에 권장하지 않습니다. 이를 대체해주는 멋진 아이디어는 바로 input의 radio type을 이용하는 것이죵 체크박스, 스위치버튼을 커스텀할 때 label과 :checked를 활용하여 스타일링 하듯이 이 방법 또한 마찬가지입니다. HTML 탭 메뉴와 내용을 같은 div로 감쌉니다. .tab-label이 탭 메뉴의 역할을 합니다 input radio 기본 사용법처럼 name명은 모두 tabGroup으로 통일하고, 각 input id와 label for을 매칭합니다. Tab Menu 1..

CSS(SCSS)

Pure CSS Counter로 리스트 자동 넘버링하기

가뭄에 콩 나듯 사용하는 빈도수는 적지만, 알아두면 유용한 속성입니다. counter 속성은 화면에 자동으로 번호를 그려주는 기능을 합니다. 문법 counter(name, style) name 카운터 이름으로 변수처럼 네이밍합니다. style 기본값은 decimal(십진수)이고 list-style-type에 적용되는 속성들을 선택적으로 사용할 수 있습니다. list-style-type: disc, circle, square, decimal, decimal-leading-zero, lower-roman ... 사용법 1. 부모 요소에서 카운터 초기화 counter-reset: 이름 / 시작숫자 2. 사용할 요소에 카운터 선언 counter-increment: 이름 / 증감숫자 contnet: counter..

개굴이 dev
'CSS(SCSS)' 카테고리의 글 목록