<main>
  <aside>
    <nav>
      <h2>목차</h2>
      <ul>
        <li>
          <a href="/">머리말</a>
        </li>
        <li>
          <a href="/">HTML</a>
        </li>
        <li>
          <a href="/">CSS</a>
        </li>
        <li>
          <a href="/">HTTP</a>
        </li>
        <li>
          <a href="/">맺음말</a>
        </li>
      </ul>
    </nav>
  </aside>
  
  <article>
    <h1>Web 기술</h1>
    <section>
      <h2>머리말</h2>
      <p>웹(World Wide Web)의 개방성은 웹사이트나 온라인 애플리케이션을 제작하려는 사람들에게 많은 기회를 제공합니다. 하지만 그 사용 방법을 알아야 웹 기술을 잘 활용할 수 있습니다. 아래의 링크들을 확인하여 다양한 웹 기술을 배워보세요.</p>
    </section>
    <section>
      <h2>HTML</h2>
      <p><a href="https://developer.mozilla.org/ko/docs/Web/HTML">HTML</a>(HyperText Markup Language)은 웹페이지에 내용을 기술하고 정의하는 데 사용합니다.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p><a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>(Cascading Style Sheets)는 웹페이지 콘텐츠의 모양이나 표현을 기술하는 데 사용합니다.</p>
    </section>
  </article>
</main>
body {
  background: navy;
  line-height: 1.6;
}

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

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

aside {
  flex: 1;
  background: white;
  padding: 24px;
  border-radius: 0 16px 16px 0;
}

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

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

a {
  text-decoration: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

@media (max-width: 40rem) {
  main {
    padding: 24px;
  }
  
  article {
    border-radius: 16px;  
  }
  
  aside {
    display: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.