조회 수 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 4. DIV안에 DIV 넣어 정렬하기 4 file 2015.12.23 86096
40 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 38687
39 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 17343
38 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 12614
37 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 11573
36 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 11261
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 10576
34 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 10059
33 HTML Transition에 대해 알아보자. 8 2016.06.22 9382
32 HTML Form 요소 설명 2 2016.06.01 7704
31 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 7133
30 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 6572
29 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 6443
28 HTML li 에 대해 알아보자. 2 file 2016.02.15 6198
27 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 5219
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 4895
25 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 4500
24 HTML class 에 대해 알아보자. file 2016.02.16 4375
23 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 3806
22 HTML ::before & ::after Pseudo Element 예제 1 2019.06.27 342
Board Pagination Prev 1 2 3 Next
/ 3