조회 수 295 추천 수 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 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 3806
40 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 6572
39 HTML Transition에 대해 알아보자. 8 2016.06.22 9382
38 SASS Sass 중첩 규칙과 속성 2019.09.19 125
37 SASS Sass 소개 2019.09.19 169
36 SASS SASS 샘플 2019.08.16 281
35 SASS Sass 변수 2019.09.19 142
34 SASS Sass String Functions 2019.09.19 198
33 SASS Sass Selector Functions 2019.09.19 78
32 SASS Sass Operators 2019.09.20 135
31 SASS Sass Numeric Functions 2019.09.19 172
30 SASS Sass Map Functions 2019.09.19 150
29 SASS Sass List Functions 2019.09.19 110
28 SASS Sass Introspection Functions 2019.09.19 134
27 SASS Sass Color Functions 2019.09.19 102
26 SASS Sass @while 2019.09.20 227
25 SASS Sass @mixin과 @include 2019.09.19 185
24 SASS Sass @import 2019.09.19 182
23 SASS Sass @if and @else 2019.09.20 160
22 SASS Sass @for 2019.09.20 168
Board Pagination Prev 1 2 3 Next
/ 3