반응형 웹
반응형 웹(Responsive Web)
반응형 웹
- PC, TV, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트
- 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌
- 사용자에게 편리한 웹 사이트를 제공
- 사용자가 웹 사이트의 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있음
모든 사이트를 반응형 웹 사이트로 만들어야 하나?
- 사이트의 용도와 사용자가 주로 접속하는 기기에 따라 결정
- 반응형 웹 사이트에 적합
- PC용 웹 사이트 사용자와 모바일용 웹 사이트 사용자의 접속 빈도가 비슷한 경우
- 사이트 하나만 만들어도 PC와 모바일 기기에서 모두 사용할 수 있음
- 모바일용 사이트에 적합
- 사용자가 이동 중에 모바일 기기로 접속하는 경우가 많은 사이트
- 예) 포털 사이트, 쇼핑몰 사이트 등
반응형 웹 장점
- 기기의 화면 크기나 해상도에 영향을 받지 않음
- 웹 브라우저가 포함된 기기라면 어떤 기기에서나 화면 크기와 해상도에 상관없이 알맞은 웹 사이트 레이아웃을 보여줌
- 화면 변화에 즉시 반응
- 브라우저 화면 크기를 바꾸면 바뀐 화면 크기에 맞게 사이트 레이아웃이 변경됨
- 어느 기기에서도 사이트 주소가 동일
- 모바일 주소를 따로 만들지 않아도 됨
- 유지 관리가 편함
- 기기마다 따로 페이지를 만드는 것이 아니기 때문에 코드와 콘텐츠 유지가 간단하고 편리
반응형 웹 단점
- 구 버전 브라우저와 호환성에 문제가 있을 수 있음
- 하위 버전 브라우저 사용자들을 수용할 사이트라면 브라우저를 체크해 별도의 관리가 필요
- 사이트 디자인이 단순함
- 반응형 웹은 브라우저의 너비값에 따라 레이아웃을 변경하기 때문에 사이트의 디자인이 단순한 경우가 많음
뷰포트(viewport)
뷰포트(viewport)
- 스마트폰 화면에서 실제 내용이 표시되는 영역
- PC 화면에 맞춰 제작한 사이트를 모바일 기기에서 확인시 문제점
- 모바일 기기에서 글자가 아주 작게 표시됨
- PC 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문
- 뷰포트를 지정하면 기기의 화면 크기에 맞춰 내용을 확대 및 축소해서 표시 가능
뷰포트 지정하기
- 뷰포트 작성
meta태그를 이용하여head/head태그 사이에 작성- 기본 형식
<meta name=“viewport” content=“속성1=값1, 속성2=값2, ... “>
- 뷰포트 속성
종류 설명 사용 가능한 값 기본값 width 뷰포트 너비 device-width 또는 크기 브라우저 기본값 height 뷰포트 높이 device-height 또는 크기 브라우저 기본값 user-scalable 확대/축소 가능 여부 yes 또는 no yes initial-scale 초기 확대/축소 값 1 ~ 10 1 - 예시
<meta name=“viewport” content=“속성1=값1, 속성2=값2“> <meta name=“viewport” content=“width=device-width, initial-scale=1.0“> <!-- 디바이스에 맞는 너비에 크기는 1배로 -->
- 예시
- 뷰포트 단위
단위 설명 vw(viewport width) 1vw는 뷰포트 너비의 1%와 같음 vh(viewport height) 1vh는 뷰포트 높이의 1%와 같음 vmin(viewport minimum) 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같음 vmax(viewport maximum) 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음 뷰포트 너비 1000px 높이 800px 1vw: 10px 1vh: 8px vmin: 8px vmax: 10px미디어 쿼리
미디어 쿼리
-
사이트에 접속하는 기기별로 적용할 스타일 파일을 다르게 지정해주는 CSS의 모듈
-
미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있음
미디어 쿼리 기본 문법
@media [only 또는 not][미디어 유형] [and 또는 ,] (조건문) { 실행문 }@media
-
미디어 쿼리 문법의 시작
[only 또는 not]
키워드 설명 only 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석함 not not 다음에 지정하는 미디어 유형을 제외 미디어 유형의 종류
기기명 설명 all 모든 장치(기본값) print 인쇄 장치 screen 컴퓨터 화면 장치 또는 스마트 기기의 화면 tv 영상과 음성이 동시에 출력되는 장치 -
사용 방법
```css @media screen { /* 화면용 스타일 작성 */ } @media print { /* 인쇄용 스타일 작성 */ } ```[and 또는 ,(콤마)]
(조건문)키워드 설명 and 앞뒤 조건을 모두 만족할 때 뒤에 따라오는 것을 해석함
생략 가능, 앞뒤 조건 중 하나만 만족하더라도 뒤에 따라오는 것을 해석함
생략 가능 -
사용 방법
```css @media screen and (min-width:768px) and (max-width:1439px) { // 스타일 작성 } ```화면 회전 속성
키워드 설명 orientation landscape: 가로모드(기본값)
portrait: 세로모드 -
사용 방법
```css @media screen and (min-width:768px) and (orientation:landscape) { // 스타일 작성 } ```미디어 쿼리 사용시 주의사항
-
띄어쓰기 주의
@media all and (min-width:320px) { 실행문 }- 예) 논리 연산자 and 구문을 사용할 때 and 구문 뒤에 항상 공백을 한 칸 띄워줘야 함
-
min/max 사용시 작성 순서 주의
- min을 사용시, 크기가 작은 순서대로 작성
- max를 사용시, 크기가 큰 순서대로 작성@media all and (min-width:320px) { 실행문 } @media all and (min-width:768px) { 실행문 } @media all and (min-width:1024px) { 실행문 } <!-- 모든 기기가 내 사이트에 들어올 때 320px 이상일 때 미디어 쿼리 실행 --> <!-- 모든 기기가 내 사이트에 들어올 때 768px 이상일 때 미디어 쿼리 실행 --> <!-- 모든 기기가 내 사이트에 들어올 때 1024px 이상일 때 미디어 쿼리 실행 --> <!-- 반대로 max-width는 이하일 때 실행 -->미디어 쿼리 적용 방식
-
외부 CSS 파일 연결(링크 방식)
-
웹 문서에 직접 정의
외부 CSS 파일 연결
-
링크 방식
- CSS 파일 내에 미디어 쿼리를 작성한 후,
link태그로 연결하여 적용<link rel=“stylesheet” media=“미디어 쿼리 조건” href=“css_파일_경로”> <!-- 중간에 있는 조건을 만족하면 css파일 경로에서 css 파일을 열어서 적용 -->
- CSS 파일 내에 미디어 쿼리를 작성한 후,
-
@import문
-style/style태그 사이에서 사용@import url(“css_파일_경로”) 미디어_쿼리_조건 /* 뒤에 있는 조건을 만족하면 css파일 경로에서 css 파일을 열어서 적용 */웹 문서에 직접 정의 - 1
<style media="조건"> { // 스타일 작성 } </style> -
사용 방법
<style media="screen and (max-width:320px)"> body { background: orange; } </style>웹 문서에 직접 정의 - 2
<style> @media 조건 { // 스타일 작성 } </style> -
사용 방법
<style> @media screen and (max-width:320px) { body { background: orange; } } </style>
-
[실습] 반응형 웹
- topmenu.html
<!DOCTYPE html> <html lang="en"> <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>반응형 메뉴</title> <link rel="stylesheet" media="screen" href="./topmenu.css" /> <script src="https://kit.fontawesome.com/d8399212df.js" crossorigin="anonymous"></script> </head> <body> <div class="menubar"> <div class="logo"> <a href="#"> <img src="../medias/tangerines.jpg" alt="" /> <!-- <i class="fa-regular fa-lemon"></i> <b>Lemon</b> --> </a> </div> <ul class="menulist"> <li><a href="#">Home</a></li> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> </ul> <a href="#" class="hamBtn"> <i class="fa-solid fa-bars"></i> </a> </div> </body> </html> - topmenu.css
/* 전체 태그 초기화 */ * { margin: 0; padding: 0; } /* a 태그 밑줄 제거 */ a { text-decoration: none; color: olive; } .logo a { float: left; padding-left: 30px; font-size: 30px; } .logo img { width: 120px; vertical-align: middle; } .menubar { overflow: hidden; } .menulist { list-style-type: none; overflow: hidden; float: left; margin-left: 20px; } .menubar { height: 100px; line-height: 100px; background: papayawhip; } .menulist li { float: left; font-size: 30px; padding: 0 20px; font-weight: bold; } .hamBtn { float: right; padding-right: 20px; font-size: 30px; display: none; } /* 태블릿 사이즈인 경우 */ @media screen and (max-width: 768px) { /* 메뉴 리스트 제거 */ .menulist { display: none; } /* 햄버거 메뉴 출력 */ .hamBtn { display: block; } }
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅
