728x90
반응형 웹디자인
반응형 웹 기본 개념 이해
Do it! 반응형 웹디자인 인프런 강의영상 정리
반응형 웹
반응형 웹이 나온 이유?
- 모바일 기기의 출현, 모바일 기기에서 웹 사이트가 모바일 화면 크기로 축소되어 보인다는 문제
- -> 이로인한 대안으로 모바일웹이 등장하였지만, 태블릿, 패블릿 기기등에서의 모바일웹의 작은 화면이 문제
- -> PC 버전, 모바일 버전 두 가지로 웹 사이트를 만드는 문제 또한 거론
- -> 이로인한 대안으로 모바일웹이 등장하였지만, 태블릿, 패블릿 기기등에서의 모바일웹의 작은 화면이 문제
- 앞의 문제들을 해결하기 위해 반응형 웹이라는 기술이 등장
반응형 웹이란
화면이 작은 기기에서 반응형 웹으로 제작된 웹사이트를 접속했을 때 웹사이트의 구조를 작은 화면에서 최적화된 구조로 보여주고, 큰 화면을 가진 기기에서는 웹사이트의 구조를 큰 화면에 최적화된 구조로 변경하여 보여주듯이 각 기기화면에 반응하여 맞추어지는 웹이다.
반응형 웹으로 구축하는 이유
- 유지보수가 간편
- 모바일, PC 두 버전을 만들 필요가 없다.
- 모바일 버전, 태블릿 버전 등 여러 화면에 맞춘 디자인을 하나의 HTML과 CSS파일에서 작업하기 때문에 유지보수가 간편한 것.
- 검색 엔진 최적화가 가능
- 검색 엔진 최적화 : 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색 했을 때 나오는 웹사이트 검색 결과에서 상위권에 나타나도록 관리하는 작업
- 만약 모바일, PC 버전이 존재하는 경우 두 가지의 웹사이트가 있기에 검색 결과에서 상위권에 배치되기 힘들다.
- 검색 엔진 최적화 : 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색 했을 때 나오는 웹사이트 검색 결과에서 상위권에 나타나도록 관리하는 작업
반응형 웹 제작 핵심 기술
가변 그리드
웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신 퍼센트(%)로 제작하는 기술
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
#vrap {
width: 90%;
margin: 0 auto;
border: 4px solid #000;
}
</style>
</head>
<body>
<div id="vrap">
content
</div>
</body>
</html>See the Pen KKNLEeo by taegeon-park (@taegeon-park23) on CodePen.
브라우저의 크기를 조작하면, 브라우저의 크기에 맞추어 변경되는 content 박스를 볼 수 있을 것이다.
미디어 쿼리 Media queries
화면의 크기와 환경 감지 및 웹 사이트를 변경
- 컴퓨터나 기기의 '미디어의 종류', '미디어의 화면 크기'를 감지하여 웹 사이트를 변경한다.
- 컴퓨터나 기기의 환경 또는 종류를 감지함으로 인해 기기에 맞게 웹사이트의 구조를 바꿀 수 있어 반응형 웹을 제작할 때 반드시 필요하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
@media all and (min-width:320px) {
body {
background: rgba(0,0,0,0.3);
}
}
@media all and (min-width:768px) {
body {
background: rgba(0,0,0,0.5);
}
}
@media all and (min-width:960px) {
body {
background: rgba(0,0,0,0.8);
}
}
#vrap {
width: 90%;
margin: 0 auto;
border: 4px solid #000;
}
</style>
</head>
<body>
<div id="vrap">
content
</div>
</body>
</html>See the Pen WNoBWeJ by taegeon-park (@taegeon-park23) on CodePen.
최소 화면 너비가 각각 320, 768, 960px 이상일 때 화면의 색상(투명도)가 달라지도록 세팅하였다.
뷰포트 Viewport
화면에 보이는 영역을 제어하는 기술
- 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요하다.
- 데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되만
- 스마트 기기는 기본 설정값이 보이는 영역으로 설정되기 때문에 미디어쿼리를 사용해도 스마트 기기의 실제 화면 크기를 감지하지 못하여 반응형 웹 제작시 반드시 필요하다.