<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: column;
}
header {
border-bottom: 1px solid gray;
padding: 10px;
}
footer {
border-top: 1px solid gray;
padding: 10px;
text-align: center;
}
.content {
display: flex;
/* flex-direction: row; 기본값 */
}
.content nav {
border-right: 1px solid gray;
}
.content aside {
border-left: 1px solid gray;
}
nav,
aside {
flex-basis: 300px;
flex-shrink: 1;
padding: 10px;
}
@media (max-width: 500px) {
.content {
flex-direction: column;
}
.content nav {
border-right: none;
border-bottom: 1px solid gray;
}
.content aside {
border-left: none;
border-top: 1px solid gray;
}
nav,
aside {
flex-basis: 100px;
flex-shrink: 1;
padding: 10px;
}
main {
order: 0;
}
nav {
order: 1;
}
aside {
display: none;
}
}
main {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>유석현</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptate expedita ipsam excepturi sunt perspiciatis commodi
saepe explicabo odio. Earum sed asperiores et eos ipsum
suscipit repellat, explicabo omnis id tempora!
</main>
<aside>AD</aside>
</section>
<footer>https://localhost:8082</footer>
</div>
</body>
</html>
Backend Engineer