TIL 23. 2024-01-29

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>