<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>