TodoList를 정리해보며 <div>
태그를 사용한 부분을 semantic HTML을 지켜보기 위해 수정해 보았다.
<section className='card'>
<article className='card-body'>
<p className='card-title'>{curTodo.title}</p>
<p className='card-content'>{curTodo.content}</p>
</article>
<article className='card-action'>
<time className='card-date'>{date.toLocaleDateString('ko-KR', options)}</time>
<section className='card-button'>
<button className='card-toggle' onClick={() => ToggleButton(curTodo.id)}>{btnText}</button>
<button className='card-delete' onClick={() => DeleteButton(curTodo.id)}>삭제</button>
</section>
</article>
</section>
<article>
: 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용<section>
: 주제별 콘텐츠 그룹을 나타내는데 사용, 일반적으로 h1 ~ h6 등의 제목 요소와 함께 사용<section>
태그는 하나의 주제를 나타낸다면,<article>
은 주제를 묶는 독립적인 콘텐츠를 나타내지만,<article>
요소 안에<section>
요소가 올 수 있으며,<section>
요소 안에도<article>
요소가 올 수 있습니다.
예시
<section>
<h1>HOT TOPIC</h1>
<section>
<p>World</p>
<article>World news 1</article>
<article>World news 2</article>
<article>World news 3</article>
</section>
<section>
<p>Sport</p>
<article>Sport news 1</article>
<article>Sport news 2</article>
<article>Sport news 3</article>
</section>
</section>