<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JS with Codeit</title>
</head>
<body>
<div>
<h1 class="title">오늘 할 일</h1>
<ol id="today" class="list today">
<li class="item">자바스크립트 공부</li>
<li class="item">고양이 화장실 청소</li>
<li class="item">고양이 장난감 쇼핑</li>
</ol>
<h1 class="title">내일 할 일</h1>
<ol id="tomorrow" class="list tomorrow">
<li class="item">자바스크립트 공부</li>
<li class="item">뮤지컬 공연 예매</li>
<li class="item">유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>위의 html 문서에서, 오늘 할 일 중 나는 자바스크립트 공부를 다 했으니, 그것을 줄을 긋고 싶다.
어떻게 해야 하는가? 라는 문제 다.
그럼 우선 css 파일로 가서,
.finish {
opacity: 0.5;
text-decoration: line-through;
}줄 긋는 코드를 만들어 주자. line-through은 줄을 만들어주는데, text-decoration: line-through하면 텍스트에 줄을 그어준다!
js 파일로 가서
const todolist = document.querySelector('#today')
const taeyoung = today.children[0]
taeyoung.classList.add('finish')이 코드 아니면,
item.className = 'finish';입력 해보자. 다른 방법도 2가지 있지만, 필자는 이 두 방법을 선호 함.
출처 : 코드잇