...
728x90
반응형
반응형 레이아웃
웹사이트의 레잉아웃을 만들 때, 방문자가 사용하는 모니터의 화면 해상도에 따라 레이아웃의 크기를 변경하게끔 하는 반응형 레이아웃에 대해서 알아보겠습니다.
레이아웃 틀 짜기
<!DOCTYPE html>
<html lang="ko">
<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>레이아웃 20</title>
<style>
* {
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #EEEBE9;
}
#nav {
height: 100px;
background-color: #B9AAA5;
}
#main {
height: 780px;
background-color: #886F65;
}
#footer {
height: 100px;
background-color: #4E342E;
}
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.2);
}
.container1 {
height: 100px;
background-color: #74574A;
}
.container2 {
height: 200px;
background-color: #684D43;
}
.box {
height: 480px;
display: flex;
flex-wrap: wrap;
}
.container3 {
width: 50%;
height: inherit;
background-color: #594139;
}
.container4 {
width: 50%;
height: inherit;
background-color: #4A352F;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="main">
<div class="container">
<div class="container1"></div>
<div class="container2"></div>
<div class="box">
<div class="container3"></div>
<div class="container4"></div>
</div>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
</body>
</html>기본적으로 레이아웃의 틀을 flex 유형으로 만든 방법입니다.
반응형 추가하기
@media(max-width:1280px){
.container{
width: 96%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.container1{
width: 33.3333%;
height: 780px;
}
.container2{
width: 66.6666%;
height: 390px;
}
.box{
width: 66.6666%;
height: 390px;
}
}
@media(max-width:768px){
.container{
width: 100%;
}
.container1{
width: 40%;
height: 780px;
}
.container2{
width: 60%;
height: 260px;
}
.box{
width: 60%;
height: 520px;
}
.container3{
width: 100%;
height: 50%;
}
.container4{
width: 100%;
height: 50%;
}
}
@media(max-width:480px){
.container1{
width: 100%;
height: 150px;
}
.container2{
width: 100%;
height: 210px;
}
.box{
width: 100%;
height: 420px;
}
}각각의 환경(노트북 : 1280px, 태블릿 : 768px, 휴대폰 : 480px)에 맞추어 미디어 속성을 추가한 css입니다.
max-width값을 정하고 변하는 속성을 다시 한번 적어주어 환경에 맞는 레이아웃으로 변경 가능합니다.
Tip !
변하지 않는 속성에 대해서는 다시 적을 필요가 없습니다 !
728x90
반응형