특정 태그를 세는 것을 javascript 없이 할 수 있을까?
할 수 있다. 아래의 속성을 이용 하면 되는데, css에서 숫자를 새고 해당 값을 content에서 이용 할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter()
자 그러면 위의 속성을 조금 이용해보도록 하자.
위 처럼 체크박스를 새는 것도 가능 하다.
위의 코드를 확인하면, css부분이 중요하므로 css를 확인해보면,
counter-reset은 값을 초기화 하는 속성으로 보면 된다. 초기값이 0이라면 생략해도 되지만, 사용한다는 의미로 작성해 주었다. 초기값을 설정 하는 방식은 아래와 같다.
counter-reset: checked 10;
counter-reset: checked 2 unchecked 20;
위처럼 적당히 작성해 주면 된다.
counter-increment는 값을 증가 시켜주는 속성이다.
counter-increment: checked;
위처럼 한가지 섹션에 대해서 증가 시킬 수도 있고 여러개의 섹션에 대해서 증가 시킬수도 있다.
counter 함수는 섹션의 값을 content에서 사용 할 수 있도록 가져오는 함수이다.
content: counter(checked);
위처럼 밋밋하게 사용하기도 하지만 아래처럼 더욱 추가하여 사용 할 수도 있다.
countent: "[" counter(checked, upper-roman) "]";
간단하게 아래와 같은 것을 만들수 있습니다.
댓글
댓글 쓰기