<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.