조회 수 707 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

<style>

* { margin: 0px; padding: 0px; }

li {

  list-style-type: none;

  position: relative;

  margin: 2px;

  padding: 0.5em 0.5em 0.5em 2em;

  background: lightgrey;

  font-family: sans-serif;

}

 

li.done {

  background: #CCFF99;

}

 

li.done::before {

  content: '';

  position: absolute;

  border-color: #009933;

  border-style: solid;

  border-width: 0 0.3em 0.25em 0;

  height: 1em;

  top: 1.3em;

  left: 0.6em;

  margin-top: -1em;

  transform: rotate(45deg);

  width: 0.5em;

}

</style>

<ul>

  <li>자드 음악 듣기</li>

  <li>자드 화보 보기</li>

  <li>자드 꿈 꾸기</li>

  <li>자드 음악 들으며 화보 보기</li>

  <li>자드 음악 들으며 꿈꾸기</li>

  <li>꿈꾸며 자드 음악듣고 화보보기</li>

</ul>

<script>

var list = document.querySelector('ul');

list.addEventListener('click', function(ev) {

  if (ev.target.tagName === 'LI') {

     ev.target.classList.toggle('done'); 

  }

}, false);

</script>

?

List of Articles
번호 분류 제목 날짜 조회 수
41 SASS Sass @while 2019.09.20 696
40 SASS Sass @for 2019.09.20 430
39 SASS Sass @each 2019.09.20 385
38 SASS Sass @if and @else 2019.09.20 431
37 SASS Sass Operators 2019.09.20 377
36 SASS Sass Introspection Functions 2019.09.19 360
35 SASS Sass Color Functions 2019.09.19 311
34 SASS Sass Selector Functions 2019.09.19 286
33 SASS Sass Map Functions 2019.09.19 393
32 SASS Sass List Functions 2019.09.19 415
31 SASS Sass Numeric Functions 2019.09.19 364
30 SASS Sass String Functions 2019.09.19 512
29 SASS Sass @extend 2019.09.19 408
28 SASS Sass @mixin과 @include 2019.09.19 473
27 SASS Sass @import 2019.09.19 443
26 SASS Sass 중첩 규칙과 속성 2019.09.19 402
25 SASS Sass 변수 2019.09.19 390
24 SASS Sass 소개 2019.09.19 404
23 SASS SASS 샘플 2019.08.16 703
» HTML ::after ::before 토글 사용 예제 2019.06.28 707
Board Pagination Prev 1 2 3 Next
/ 3