Aisde

html 코드

<aside>
  <header>
    <h1>Worldwide trends</h1>
    <button type="button" aria-label="Options">
      <!-- Icon -->
    </button>
  </header>
  <ol>
    <li>
      <button type="button" aria-label="Options">
        <!-- Icon -->
      </button>
      <div>
        <button type="button">
          <!-- Icon -->
          This trend is spam
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is abusive or harmful
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is a duplicate
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is low quality
        </button>
      </div>
      <a href="#">
        <span>1 · Trending worldwide</span>
        <strong lang="ko">프렌치케밥</strong>
        <span>100k Tweets</span>
      </a>
    </li>
    <li>
      <button type="button" aria-label="Options">
        <!-- Icon -->
      </button>
      <div>
        <button type="button">
          <!-- Icon -->
          This trend is spam
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is abusive or harmful
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is a duplicate
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is low quality
        </button>
      </div>
      <a href="#">
        <span>2 · Trending worldwide</span>
        <strong lang="ko">프렌치케밥</strong>
        <span>100k Tweets</span>
      </a>
    </li>
    <li>
      <button type="button" aria-label="Options">
        <!-- Icon -->
      </button>
      <div>
        <button type="button">
          <!-- Icon -->
          This trend is spam
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is abusive or harmful
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is a duplicate
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is low quality
        </button>
      </div>
      <a href="#">
        <span>3 · Trending worldwide</span>
        <strong lang="ko">프렌치케밥</strong>
        <span>100k Tweets</span>
      </a>
    </li>
    <li>
      <button type="button" aria-label="Options">
        <!-- Icon -->
      </button>
      <div>
        <button type="button">
          <!-- Icon -->
          This trend is spam
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is abusive or harmful
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is a duplicate
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is low quality
        </button>
      </div>
      <a href="#">
        <span>4 · Trending worldwide</span>
        <strong lang="ko">프렌치케밥</strong>
        <span>100k Tweets</span>
      </a>
    </li>
    <li>
      <button type="button" aria-label="Options">
        <!-- Icon -->
      </button>
      <div>
        <button type="button">
          <!-- Icon -->
          This trend is spam
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is abusive or harmful
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is a duplicate
        </button>
        <button type="button">
          <!-- Icon -->
          This trend is low quality
        </button>
      </div>
      <a href="#">
        <span>5 · Trending worldwide</span>
        <strong lang="ko">프렌치케밥</strong>
        <span>100k Tweets</span>
      </a>
    </li>
  </ol>
  <footer>
    <button type="button">Show more</button>
  </footer>
</aside>

😀 알아둘 점들

aside는 언제 사용할까?

지금의 경우 정보의 완결성은 있으나, section과 article에 비해 핵심적인 주제와 동떨어진 곁다리 같은 정보의 경우 사용함