블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다.
블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다.

HTML

<div class="m_todo">
<h1>할 일 목록</h1>
<ul>
<li>
<span>장보기</span>
<div class="checkbox"></div>
</li>
<li done>
<span>호텔 델루나 시청</span>
<div class="checkbox"></div>
</li>
</ul>
</div>


CSS

.m_todo {
margin: 0 auto;
background: #4DD0E1;
padding: 10px;
border-radius: 10px
}

.m_todo h1 {
font-size: 2rem;
text-align: center;
background: #4DD0E1;
padding: 10px 0 20px 0;
color: #fff
}

.m_todo ul {
padding: 20px;
background: #eee;
border-radius: 10px
}

.m_todo li {
display: flex;
justify-content: space-between;
line-height: 1.5rem;
padding: 1rem;
cursor: auto;
color: #000;
align-items: center
}

.m_todo .checkbox {
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
border: 2px solid #000;
border-radius: 50%;
flex-shrink: 0
}

.m_todo li[done] span {
text-decoration: line-through
}

.m_todo li[done] .checkbox {
display: inline-flex;
justify-content: center;
align-items: center;
background: #000
}

.m_todo li[done] .checkbox::before {
content: "";
width: .45rem;
height: .7rem;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}


완성된 투 두 리스트

할 일 목록

  • 장보기
  • 호텔 델루나 시청

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)