<!DOCTYPE html>
<html style="height:100%; width : 100%">
<head>
<meta charset="utf-8">
<style>
*{
    border: 1px solid black;
}
body{
display:flex;
justify-content: center;
}
.container{
    flex:0 1 900px;
}
.flex-row{
display:flex;
}
.flex-column{
display:flex;
flex-flow: column;
}
#header{
flex: 0 1 50px;
min-height : 30px;
}
#nav_header{
flex: 0 1 50px;
min-height : 30px;
}
#main{
flex: 1 1 300px;
min-height : 300px;
}
#nav_main{
flex: 0 1 100px;
}
#article{
flex: 1 1;
}
#footer{
flex: 0 1 50px;
min-height: 30px;
}

@media(max-width:500px){
#nav_main{
display:none;
}
}
</style>
</head>
<body style="height:100%; width : 100%">
<div class="container flex-column">
<header id="header">
<a href="/index.php/auth/login">login</a>
<a href="/index.php/auth/register">회원가입</a>
<?php if (isset($_SESSION['is_login'])) {?>
<a href="/index.php/auth/logout">logout</a>
<?php }?>
</header>
<nav id="nav_header">
    <a href="/index.php/init">db init</a>
</nav>
<main id="main" class="flex-row">
<nav id="nav_main">nav2</nav>
<article id="article">
<!-- ------------------ -->
<ul class="product_wapper">
<li class="product"><a href="/index.php/shop/product/?id=1">상품1</a></li>
<li class="product"><a href="">상품2</a></li>
</ul>
<!-- ------------------ -->
</article>
</main>
<footer id="footer">footer</footer>
</div>
</body>
</html>






아름답지 않습니까?