하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법입니다.
최근에는 모바일 사용자가 증가함에 따라 모바일 퍼스트 개념을 중요시하는 추세입니다.
웹 개발 시 모바일에 맞게 디자인 후 타 해상도에 맞추어 추가 개발을 진행하는 방식을 선호하고 있다고 합니다.
간단하게 레이아웃을 구성해 보고 코드를 해석해 보겠습니다.
-일반적인 전체 해상도에 대한 레이아웃 화면입니다.
-1025px이상, 1280px이하일 때에 보이는 레이아웃 화면입니다.
태블릿에 적합하도록 구현해 보았습니다.
-768px이상, 1024px이하일 때에 보이는 레이아웃 화면입니다.
모바일에 적합하도록 구현해 보았습니다.
2. CSS
<style>
* {box-sizing: border-box;}
h1,h2,ul,li,p,div {
margin: 0px;
padding: 0px;
}
li {list-style: none;}
.clear::after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
color: #333;
line-height: 1.5;
}
body {
background-color: #f1f1f1;
font-size: 13px;
}
header {background-color: coral;}
h1 {
color: white;
padding: 10px;
font-size: 25px;
}
.lnbli {
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
.content {padding: 20px;}
h2 {font-size: 20px;}
.ext {
margin: 10px;
padding: 20px;
background-color: lightgreen;
}
footer {
padding: 10px; background-color: #aaa;
}
@media (min-width:768px) and (max-width:1024px) {
.lnb {
float: left;
width: 25%;
}
.content {
float: left;
width: 75%;
}
.aside {
clear: both;
}
}
@mediaall and (min-width:1025px) {
.wrap {
max-width: 1280px;
}
.lnb {
float: left;
width: 20%;
}
.content {
float: left;
width: 50%;
}
.aside {
float: right;
width: 30%;
}
}
</style>
@1025px이상, 1280px이하 적용 레이아웃
@mediaalland (min-width:1025px) {
.wrap{
max-width:1280px;
}
.lnb{
float:left;
width:20%;
}
.content{
float:left;
width:50%;
}
.aside{
float:right;
width:30%;
}
}
-media 태그를 사용하여 최소 1025px(min-width:1025px)로 최솟값을 지정하여 주었고 최댓값은 1280px로 지정하여 1025~1280px의 범위를 갖게끔 설정하였습니다.
그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하여 좌측 정렬이 되도록 하고 class aside는 float:right를 적용하였습니다.
@768px이상, 1024px이하 적용 레이아웃
@media(min-width:768px) and (max-width:1024px) {
.lnb{
float:left;
width:25%;
}
.content{
float:left;
width:75%;
}
.aside{
clear:both;
}
}
-media 태그를 사용하여 최솟값을 768px로, 최댓값은 1024px로 지정하여 768~1024px의 범위를 갖게끔 설정하였습니다. 그 범위 안에 포함된다면 class lnb와 content를 가진 div box들은 float:left를 적용하고 class aside는 float 설정을 해제, 비율을 조정해서 세로로 보이도록 수정하였습니다.
3. BODY
<body>
<divclass="wrap">
<header>
<h1>Musee d'Orsay</h1>
</header>
<divid="container"class="clear">
<divclass="lnb">
<ul>
<li><ahref="#">작가의 작품</a></li>
<li><ahref="#">작가의 시대</a></li>
<li><ahref="#">작가의 일생</a></li>
</ul>
</div>
<divclass="content">
<h2>PICTURES</h2>
<p><ahref="#">피리부는 소년</a><br><ahref="#">고흐의 방</a><br><ahref="#">황색 그리스도가 있는 화가의 자화상</a><br><ahref="#">오페라좌의 관현악단</a><br><ahref="#">만종</a><br><ahref="#">제비꽃 장식을 단 베르트모리조</a><br><ahref="#">피리부는 소년</a><br><ahref="#">고흐의 방</a><br><ahref="#">황색 그리스도가 있는 화가의 자화상</a><br><ahref="#">오페라좌의 관현악단</a><br><ahref="#">만종</a><br><ahref="#">제비꽃 장식을 단 베르트모리조</a></p>
