목차
- 반응형 작업 전 고려사항
- 반응형 웹 장단점
- 반응형 제작법 종류
- 반응형 해상도 분기점
- 반응형 예제 (@media 쿼리)
- 반응형 viewport (뷰포트 = 브라우저 창크기)
- 반응형 이미지 - (사이즈 변동 + 다른 이미지 노출)
- 반응형 텍스트 - vw 단위
- 반응형 BS 레이아웃
반응형 작업 전 고려사항
Mobile First (모바일 우선)
: 작은 기기에서 큰 기기로 확장하며 레이아웃 고려.
Wireframe (대략적 배치)
: 작업 전 대략적인 레이아웃 배치를 그려보고 작업.
각 요소에 id 및 class 부여
: 선택자가 명확해야 CSS 및 JS 작업하기에 수월함.
반응형 웹 장단점
[장점]
1. 동일 주소 사용 가능.
PC, 모바일 분리형이라 해서 주소가 꼭 다른 것만은 아님.
2. 유지 보수 관리 용이.
퍼블리싱 양이 더 적고, 수정 시 수정할 양도 줄어듦.
3. 콘텐츠 내용 전달성 ↑
화면 해상도에 맞게 레이아웃 변해서 콘텐츠 보기 편함.
4. 검색 엔진 노출 가능↑
동일 콘텐츠에 대한 주소 단일성으로 인해서 좀 더 선호.
5. 사이트 제작비 절감.
퍼블리싱 양 줄어들어, PC 모바일 분리형보다 더 저렴.
[단점]
1. 로드 속도 ↓
페이지 구성 코드량. + PC 모바일 동일 이미지 사용.
2. HTML 코드 복잡↑
많은 선택자와 속성 사용으로 지저분해짐. ㅡㅡ;
참고: https://youtu.be/3Vz-Nk417qs
PS. 적응형 (= PC 모바일 분리형)
반응형 제작법 종류
flex, grid, %, vw, vh 등의 CSS 활용.
①
<table>이나 <div> 태그에 float:left 속성 줘서
브라우저 폭에 따라 자연스레 옆이나 아래로 움직이게 하는 법
예제보기
②
CSS의 @media 속성을 이용해서
브라우저 좌우 폭이나 기기에 따라 스타일을 별도로 직접 지정해 제작하는 법
예제보기
③
W3.CSS 나 BOOTSTRAP 등 이미 짜여진 CSS 프레임워크 가져와 그 선택자를 이용하는 법
https://homzzang.com/b/css-254 (19번 참조)
④
반응형 빌더/테마 이용.
PS. ③ ④ 경우는 ② 방법을 활용해 미리 적절하게 세팅해놓은 것들임.
반응형 해상도 분기점
[예전]
320 ~ 767 : 모바일
768 ~ 1023 : 태블릿
1024 ~ : 데스크탑
[최근]
320 ~ 480 : 모바일 세로
480 ~ 767 : 모바일 가로 + 태블릿 세로
768 ~ 1023 : 테블릿 가로
1024 : 데스크탑
cf. 아미나 (BS3)
~ : 노트북・데스크탑
~ 991 : 태블릿
~ 767 : 모바일 가로
~ 480 : 모바일 세로
cf. 나리야 (BS4)
1200 ~ : 데스크탑
992 ~ : 태블릿 가로・노트북
768 ~ : 태블릿 세로
576 ~ : 모바일 가로
~ 575 : 모바일 세로
PS. 사용자마다 또 프레임워크마다 다름.
반응형 예제 (@media 쿼리)
<!DOCTYPE html>
<html lang='ko'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.box {
overflow:auto
}
.left {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.center {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.center img {
max-width:100%;;
}
.right {
background-color: PeachPuff;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:750px ) {
/* 태블릿 */
.center {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
/* 모바일 */
.left, .center, .right {
width: 100%;
}
}
body {font-family:Verdana;}
.header {background-color:gray; color:white; padding:15px;}
.footer {background-color:silver; text-align:center; padding:10px; margin-top:7px; font-size:12px;}
</style>
</head>
<body>
<div class="header">
<h1>홈짱닷컴</h1>
<h3>Homzzang.com</h3>
</div>
<div class="box">
<div class="left">
<div class="menuitem">HTML</div>
<div class="menuitem">CSS</div>
<div class="menuitem">JS</div>
<div class="menuitem">JQUERY</div>
</div>
<div class="center">
<h2>홈페이지 제작</h2>
<p>HTML (뼈대) + CSS (디자인) + JS (기능)</p>
<img src="https://source.unsplash.com/random">
</div>
<div class="right">
<h2>HTML</h2>
<p>홈페이지 기본골격 (= 레이아웃)을 코딩.</p>
<h2>CSS</h2>
<p>골격을 보완하고, 디자인을 입힘.</p>
<h2>JS</h2>
<p>홈페이지에 역동적인 동작과 기능 추가</p>
</div>
</div>
<div class="footer">
홈짱닷컴 Homzzang.com
</div>
</body>
</html>
결과보기
▒ 반응형 웹 제작 시 고려 사항
1.
반응형 viewport (뷰포트 = 브라우저 창크기)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
※ <head> 태그 안에 뷰포트 <meta> 태그 추가. (<head> 태그 없이도 가능하긴 함.)
※ 접속기기 화면해상도 정보를 브라우저에게 알려 화면 사이즈에 맞게 콘텐츠 표시케 함.
※ 모바일・태블릿으로 접속 시, PC 화면을 단순축소시킨 것처럼 보일 경우 이 코드 적용.
2.
반응형 이미지 - (사이즈 변동 + 다른 이미지 노출)
[사이즈 변동]
width:100%; height:auto;
이미지 원래 크기보다 더 커질 수 있음. (무조건 부모요소 너비 가득 참.)
max-width:100%; height:auto;
이미지 원래 크기보다 더 커지지 않음. (원래 이미지 크기 안에서 변동)
[다른 이미지]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="large.jpg" media="(max-width:750px )">
<source srcset="large.jpg">
<img src="large.jpg" alt="Flowers" style="width:auto;">
</picture>
결과보기
3.
반응형 텍스트 - vw 단위
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">홈짱닷컴 Homzzang.com</h1>
<p style="font-size:5vw;">홈페이지 제작관리</p>
<p style="font-size:5vw;">그누보드 코딩언어</p>
<p>HTML CSS JS JQUERY PHP SQL</p>
결과보기
PS.
viewport
브라우저 창크기
vw 단위
1vw = viewport 너비의 1% (즉, 1/100)
(예: 뷰포트 너비가 1000px 일 때, 1vw는 10px)
4.
반응형 BS 레이아웃
BS3 - float 기반 그리드
https://getbootstrap.com/docs/3.4/getting-started/#download
BS4 - flex 기반 그리드
https://getbootstrap.com/docs/4.5/getting-started/introduction/
BS5 - JQuery 대신 Vanilla JS 사용.
https://v5.getbootstrap.com/
PS.
mdn responsive 강의
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
엘리 님 반응형 헤더 만들기 강의
https://youtu.be/X91jsJyZofw
