<main>
  <aside>
    <nav>
      <h2>목차</h2>
      <ul>
        <li>
          <a href="#intro">머리말</a>
        </li>
        <li>
          <a href="#html">HTML</a>
        </li>
        <li>
          <a href="#css">CSS</a>
        </li>
        <li>
          <a href="#http">HTTP</a>
        </li>
        <li>
          <a href="#outro">맺음말</a>
        </li>
      </ul>
    </nav>
  </aside>

  <article>
    <h1>Web 기술</h1>
    <section>
      <h2 id="intro">머리말</h2>
      <p>웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는 사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을 알아야 웹 기술을 잘 활용할 수 있습니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.</p>
    </section>
    <section>
      <h2 id="html">HTML</h2>
      <p><a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML</a>(HyperText Markup Language)은 웹페이지에 내용을 기술하고 정의하는 데 사용합니다.</p>
    </section>
    <section>
      <h2 id="css">CSS</h2>
      <p><a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>(Cascading Style Sheets)는 웹페이지 콘텐츠의 모양이나 표현을 기술하는 데 사용합니다.</p>
    </section>
    <section>
      <h2 id="http">HTTP</h2>
      <p><a href="https://developer.mozilla.org/ko/docs/Web/HTTP">HTTP</a>는 웹을 통해 문서, 스타일시트, 스크립트, 이미지, 비디오, 글꼴 및 기타 리소스를 가져오고 웹 서버로 다시 보내기 위한 기본적인 인터넷 프로토콜입니다.</p>
    </section>
    <section>
      <h2 id="outro">맺음말</h2>
      <p>웹 기술을 잘 배우셔서 멋진 웹사이트나 애플리케이션을 만드셨으면 좋겠습니다. 읽어주셔서 감사합니다.</p>
    </section>
  </article>
</main>

/* html {
  scroll-behavior: smooth;
}
 */
body {
  background: navy;
}

main {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 48px 0;
}

section {
  padding-block: 4rem;
}

article {
  flex: 3;
  background: white;
  padding: 32px;
  border-radius: 16px 0 0 16px;
  line-height: 2;
}

aside {
  position: sticky;
  top: 0;
  flex: 1;
  background: white;
  padding: 24px;
  border-radius: 0 16px 16px 0;
  line-height: 1.6;
}

aside h2 {
  font-size: 1.2rem;
  color: dimgray;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
}