목차
반응형 작업 전 고려사항 반응형 웹 장단점 반응형 제작법 종류 반응형 해상도 분기점 반응형 예제 (@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 활용.
① float:left 속성 줘서예제보기
CSS의 @media 속성을 이용해서 예제보기 W3.CSS 나 BOOTSTRAP 등 이미 짜여진 CSS 프레임워크 가져와 그 선택자를 이용하는 법https://homzzang.com/b/css-254 (19번 참조)
반응형 빌더/테마 이용.
반응형 해상도 분기점
[예전]
320 ~ 767 : 모바일
768 ~ 1023 : 태블릿
1024 ~ : 데스크탑
[최근]
320 ~ 480 : 모바일 세로
480 ~ 767 : 모바일 가로 + 태블릿 세로
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> 태그 없이도 가능하긴 함.)
※ 접속기기 화면해상도 정보를 브라우저에게 알려 화면 사이즈에 맞게 콘텐츠 표시케 함.
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 단위
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
