“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
옛날과 다르게 요즘 우리는 다양한 크기의 디바이스에서 동일한 웹사이트를 사용가능합니다.
2007년에 인터넷 사용이 가능한 모바일 기기가 세상에 나온 이후로 사람들은 모바일 웹에 열광하기 시작합니다.
모바일 기기에 최적화된 웹사이트를 제공하기위해 사람들은 노력했지만 비용과 시간 인력에 두배로 투자해야 하는 현실적인 문제를 해결했어야 했습니다.
그렇게 개발된 기술이 반응형 웹이라는 기술이 등장하였습니다.
반응형 웹은 pc, tv, 내비게이션 스마트 기기등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다.
왜 반응형 웹으로 만들어야 하는가?
1. 유지보수가 간편합니다.
내용을 추가하거나 수정할 때 모바일 버전과 데스크톱버전 같은 두개의 웹사이트를 개별적으로 수정해야 하지만 하나의 페이지를 수정하기 때문에 유지보수가 쉽습니다.
2. 모바일 점유율의 증가
요즘은 모바일로 인터넷을 사용하는 것은 당연한 일이 되었습니다. 한국의 스마트 기기 인터넷 보급률 및 사용률90%가 넘는 지금 모바일용 사이트를 만드는 것이 기본이 되었습니다.
3. 마케팅유리합니다.
웹사이트를 개발하면 환경이나 기기에 따라 최적화된구조로 웹사이트가 크기가 변경되어 보여줄수 있기 때문에 전달할 내용이 확실하게 전달 할 수 있습니다. 언제 어디서든 접근이 용이해 웹 마케팅에 효과적입니다.
4. 검색엔진 최적화가 가능합니다.
반응형 웹사이트는 하나의 주소와 하나의 파일로만 이루어져 있어 검색 결과에 좀더 잘 노출될 수 있고 광고효과가 납니다.
반응형 웹 제작을 위한 기술
가변 그리드
가변 그리드는 웹사이트를 제작할때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀대신 퍼센트로 제작하는 기술입니다. 이때 가변 폭에 따라 내용들도 가변적으로 늘어나거나 줄어듭니다.
미디어 쿼리
미디어 쿼리란 크기를 지정하고 그 크기에 맞게 조건이 되면 그에 맞게 웹사이트의 구조를 바꿀 수 있기 때문에 반응형 웹을 제작 할때 필요한 기술입니다.
뷰포트
뷰포트는 화면에 보이는 영역을 제어하는 기술 로 미디어 퀴리로 수 많은 크기를 감지해야 할 때 꼭 필요합니다. 스마트 기기의 보이는 영역을 기기의 실제 화면크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지 할 수 잇도록 하기위해 이용합니다.
플렉서블 박스
단어에서 알수 있듯이 가변적인 박슬을 만드는 기술인 동시에 웹사이트의 구조 설계를 위한 새로운 기술입니다.
요즘 반응형 웹제작 시 필수 기술인 가변 그리드 기술을 이용해서 만드는 가변적인 박스를 간단하게 만들어줄 뿐만 아니라 박스 를 손쉽게 배치 할 수 있다는 장점때문에 반응형과 호흡이 좋습니다.
미디어 쿼리 예제
<!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>레이아웃06 - float 반응형</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #FFE0B2;
}
#nav {
width: 100%;
height: 100px;
background-color: #FFCC80;
}
#aside {
width: 30%;
height: 780px;
background-color: #FFB74D;
float: left;
}
#contents {
width: 70%;
height: 780px;
background-color: #FFA726;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: #FF9800;
clear: both;
}
@media (max-width:1220px) {
#wrap {
width: 96%;
}
}
@media(max-width: 768px){
#wrap {
width: 100%;
}
}
@media(max-width: 600px){
#aside {
width: 100%;
height: 300px;
}
#contents {
width: 100%;
height: 480px;
}
}
</style>
</head>
<body>
<div id="wrap" class="clearfix">
<div id="header"></div>
<div id="nav"></div>
<div id="aside"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
</body>
</html>
미디어쿼리 기본형
@media(max-width: 설정하고자하는 기기의 width값){
#아이디{
CSS속성
}
.클래스{
CSS속성
}
} // 미디어 쿼리 기본형미디어 쿼리의 기본형으로 max-width의 값으로 기기별로 레이아웃을 변경할 수 있습니다.
변경하고자하는 속성들 css를 서술하듯이 적으면 됩니다.
위에 예제를 보면 wrap의 width값을 다르게 지정하여 웹사이트버전말고도 1220px, 768px, 600px에서의 레이아웃을 다르게 지정하였습니다.
width : 1220px
wrap이라는 박스는 레이아웃의 전체적인 박스로 1220px의 창에서 width값이 원본의 96%로 표현됩니다.
@media (max-width:1220px) {
#wrap {
width: 96%;
}
}
width : 768px
768px의 창에서부터 wrap박스의 width값이 원본의 100%로 표현됩니다.
@media(max-width: 768px){
#wrap {
width: 100%;
}
}
width : 600px
600px의 창에서 aside의 width값이 원본의 100%, height는 300px로 표현됩니다. 또한 contents의 width값이 원본의 100%, height는 480px로 표현됩니다.
@media(max-width: 600px){
#aside {
width: 100%;
height: 300px;
}
#contents {
width: 100%;
height: 480px;
}
출처
김윤아, 『DO it! 반응형 웹페이지만들기』, 이즈스 퍼블리싱(2021년 3월30 초판), p.20-p.44.