하나의 웹사이트에서 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>
버튼은 "&lang", "&rang" 기호를 사용하여 좌우 화살표 부호를 넣어 주었고 CSS를 통하여 좌우로 정렬하려 합니다.
letprev_bttn=document.getElementById('prev');
letnext_bttn=document.getElementById('next');
letimgs=document.querySelectorAll('#slides img');
letimg_num=0;
우선 각 요소의 값들을 변수에 저 정합니다.
getElementByid()를 통하여 좌우 버튼에 대한 값을 저장하고 querySelectorAll()을 통하여 #slides의 img들의 값을 배열형태로 가져왔습니다.
imgs의 배열값을 선택하기 위해 img_num를 생성했습니다.
functionshowimg(n) {
for(leti=0;i<imgs.length;i++) {
imgs[i].style.display='none';
}
imgs[n].style.display="block"
}
setInterval(prev_bttn.onclick,2000)
화면이 전환되는 동작을 수행하는 함수 showimg()를 생성하였습니다.
변수 n값을 통하여 화면에 출력할 이미지의 배열값을 지정할 수 있도록 합니다.
for문을 통하여 전체 이미지의 display값을 "none"으로 변경하여 화면에 출력되지 않도록 하고 imgs [n]에 대한 display값만 "block"으로 지정하여 화면에 보이도록 설정하였습니다.
setinterval() 함수를 통하여 prev_bttn.onclick 이벤트를 2000밀리 초마다 실행하도록 설정하여 2초마다 자동으로 이미지 전환이 이뤄지도록 하였습니다.
버튼 클릭이벤트에 대해서는
prev_bttn.onclick=function() {
img_num--;
if(img_num<0) {
img_num=2;
}
showimg(img_num);
}
next_bttn.onclick=function() {
img_num++;
if(img_num>2) {
img_num=0;
}
showimg(img_num);
}
이미지를 3개 넣어주었기 때문에 이미지 배열은 0~2까지로 onclick 이벤트 발생 시 0에서 -1 이하로, 2에서 3 이상으로 넘어가는 것을 방지해 주기 위해서 if문을 통하여 0~2 안에서만 전환되도록 해주고 버튼을 클릭할 때마다 img_num-- , img_num++ 을 해주어 배열값이 변경되도록 설정해 주었습니다.
그리고 그 변경된 값으로 다시 showimg() 함수를 호출해 주었습니다.
3. CSS
<style>
#slideshow {
overflow: hidden;
position: relative;
width: 1200px;
height: 300px;
margin: 0auto;
}
#slide {
position: absolute;
}
#slides > img {
width: 1200px;
height: 300px;
}
button {
position: absolute;
height: 300px;
top: 0;
border: none;
padding: 20px;
background-color: transparent;
color: #000;
font-weight: 800;
font-size: 24px;
opacity: 0.5;
}
#prev {
left: 0;
}
#next {
right: 0;
}
button:hover {
background-color: #222;
color: white;
opacity: 0.6;
cursor: pointer;
}
button:focus {
border: none;
}
</style>
#slideshow{
overflow:hidden;
position:relative;
width:1200px;
height:300px;
margin:0auto;
}
#slide{
position:absolute;
}
#slides>img{
width:1200px;
height:300px;
}
#slideshow 에서 이미지가 화면을 넘어갔을 때에 화면에 보이지 않게 하기 위해서 overflow속성을 hidden값을 주었고
, position을 relative으로 설정해 주었습니다.
button{
position:absolute;
height:300px;
top:0;
border:none;
padding:20px;
background-color:transparent;
color:#000;
font-weight:800;
font-size:24px;
opacity:0.5;
}
#prev{
left:0;
}
#next{
right:0;
}
button:hover{
background-color:#222;
color:white;
opacity:0.6;
cursor:pointer;
}
button:focus{
border:none;
}
버튼은 opacity속성을 통해 투명하도록 설정하였고 left, right 값을 0을 주어 좌우 끝에 붙도록 하였습니다.
