본문 바로가기
Html & Css

[새싹 프론트엔드] 2주차 - 3 반응형 웹

ddorongg 2022. 10. 26. 15:50

반응형 웹

PC, TV, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트

  • 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적화된 화면 레이아웃을 보여줌
  • 사용자에게 편리한 웹 사이트를 제공
    •  사용자가 웹 사이트의 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있음

 

모든 사이트를 반응형 웹 사이트로 만들어야 하나?

- 사이트의 용도와 사용자가 주로 접속하는 기기에 따라 결정

 

반응협 웹 사이트에 적합

PC용 웹 사이트 사용자와 모바일용 웹 사이트 사용자의 접속 빈도가 비슷한 경우

사이트를 하나만 만들어도 PC와 모바일 기기에서 모두 사용 할 수 있음

 

모바일용 사이트에 적합

사용자가 이동 중에 모바일 기기로 접속하는 경우가 많은 사이트  예) 포털 사이트, 쇼핑몰 사이트 등

 

반응형 웹 장점

  • 기기의 화면 크기나 해상도에 영향을 받지 않음 
    • 웹 브라우저가 포함된 기기라면 어떤 기기에서나 화면 크기 와 해상도에 상관없이 알맞은 웹 사이트 레이아웃을 보여줌 
  • 화면 변화에 즉시 반응
    • 브라우저 화면 크기를 바꾸면 바뀐 화면 크기에 맞게 사이트 레이아웃이 변경됨
  • 어느 기기에서도 사이트 주소가 동일
    • 모바일 주소를 따로 만들지 않아도 됨
  • 유지 관리가 편함
    • 기기 마다 따로 페이지를 만드는 것이 아니기 때문에 코드와 콘텐츠 유지가 간단하고 편리

반응형 웹 단점

  • 구 버전 브라우저와 호환성에 문제가 있을 수 있음
    • 하위 버전 브라우저 사용자들을 수용할 사이트라면 브라우저 를 체크해 별도의 관리가 필요
  • 사이트 디자인이 단순함
    • 반응형 웹은 브라우저의 너비값에 따라 레이아웃을 변경하기 때문에 사이트의 디자인이 단순한 경우가 많음

 

뷰포트(viewport)

스마트 폰 화면에서 실제 내용이 표시되는 영역

  • pc 화면에 맞춰 제작한 사이트를 모바일 기기에서 확인 시 문제점
    • 모바일 기기에서 글자가 아주 작게 표시 됨
    • pc 화면과 모바일 화면의 픽셀 표시 방법이 다르기 때문
  • 뷰포트를 지정하면 기기의 화면 크기에 맞춰 내용을 확대 및 축소해서 표시 가능

 

뷰포트 작성

<meta> 태그를 이용하여 <head></head> 태그 사이에 작성

<meta name=“viewport” content=“속성1=값1, 속성2=값2, … “> 
<!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="./style.css" />
  </head>
  <body>
  </body>
</html>

 

종류 설명 사용 가능한 값 기본값
width 뷰포트 너비 device-width 또는 크기 브라우저 기본값
height 뷰포트 높이 device-height 또는 크기 브라우저 기본값
user-scalable 확대/축소 가능 여부 yes 또는 no yes
initial-scale 초기 확대/축소 값 1~10 1

* initial-scale - 원본으로 보려면 1.0배, 크게 보고싶으면 n.0배 작게 보고싶으면 0.n배

<meta name=“viewport” content=“속성1=값1, 속성2=값2, … “>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0“>

 

뷰포트 단위

단위 설명
vw(viewport width) 1vw는 뷰포트 너비의 1%와 같음
vh(viewport height) 1vh는 뷰포트 높이의 1%와 같음
vmin(viewport minimum) 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같음
vmax(viewport maximum) 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음

1vw는 뷰포트 너비의 1%와 같음 = 접속하는 기기의 가로사이즈 브라우저의 1%라는 뜻 (기기마다 너비는 다 다름)

→ 자동으로 폰트사이즈 조절

 

예시)  너비 1000px, 높이 800px 뷰포트 단위

1vw : 10px (1000의 1%)

1vh : 8px (800의 1%)

vmin : 8px

vmax : 10px

 

 

미디어 쿼리(Media Queries)

사이트에 접속하는 기기별로 적용할 스타일 파일을 다르 게 지정해주는 CSS의 모듈

  • 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있음 
  • 미디어 쿼리를 사용한 사이트 https://mediaqueri.es/
 

Media Queries

 

mediaqueri.es

 

미디어 쿼리 기본 문법

@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {
    실행문
}

@media - 미디어 쿼리 문법의 시작

 

[only 또는 not]

키워드 설명
only 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석함
not not 다음에 지정하는 미디어 유형을 제외

 

미디어 유형의 종류

기기명 설명
all 모든 장치(기본값)
print 인쇄 장치
screen 컴퓨터 화면 장치 또는 스마트 기기의 화면
tv 영상과 음성이 동시에 출력되는 장치

 

사용방법

@media screen { /* 화면용 스타일 작성*/ }
@media print { /* 인쇄용 스타일 작성*/ }

 

[and 또는 ,(콤마)] (조건문)

키워드 설명
and 앞뒤 조건을 모두 만족할 때 뒤에 따라오는 것을 해석함 (생략가능)  and연산
,(컴마) 앞뒤 조건 중 하나만 만족하더라도 뒤에 따라오는 것을 해석함(생략 가능)  or연산

사용 방법

@media screen and (min-width:768px) and (max-width:1439px) {
// 스타일 작성
}

 

화면 회전 속성

키워드 설명
orientation landscape : 가로모드(기본값)
portrait : 세로모드

사용 방법

@media screen and (min-width:768px) and (max-width:1439px) {
// 스타일 작성
}

띄어쓰기 주의

@media all and (min-width:320px) { 실행문 }

논리 연산자 and 구문을 사용할 때 and 구문 뒤에 항상 공백을 한 칸 띄워줘야 함

 

min/max 사용 시 작성 순서 주의

min 사용 시, 크기가 작은 순서대로 작성 ( 크기가 320이상일 때 부터 사용해달라는 뜻)

@media all and (min-width:320px) { 실행문 }

@media all and (min-width:768px) { 실행문 }

@media all and (min-width:1024px) { 실행문 }

 

max 사용 시, 크기가 큰 순서대로 작성 ( 크기가 320이하일 때 부터 사용해달라는 뜻)

@media all and (max-width:320px) { 실행문 } 

@media all and (max-width:768px) { 실행문 }

@media all and (max-width:1024px) { 실행문 }

 

미디어 쿼리 적용 방식

  • 외부 CSS 파일 연결(링크 방식) 
  • 웹 문서에 직접 정의

 

외부 CSS 파일 연결 

링크 방식

css 파일 내에 미디어 쿼리를 작성한 후, <link> 태그로 연결하여 적용

link rel=“stylesheet” media=“미디어 쿼리 조건” href=“css_파일_경로”>

 

@import문

<style></style> 태그 사이에서 사용

@import url(“css_파일_경로”) 미디어_쿼리_조건

 

웹 문서에 직접 정의 (1)

 

웹 문서에 직접 정의 (2)

 

예시)

HTML

  <title>미디어쿼리</title>
    <link rel="stylesheet" media="screen" href="./style.css" />
    <!-- 스크린으로 접속하면 이 기능 실행해주세요 -->
  </head>
  <body>
    <div id="wrap"></div>
    <br />
    <hr />
    <br />
  </body>

 

CSS

#wrap{
    margin: 0 auto;
    height: 500px;
    border: 3px solid black;
}

@media all and (min-width:320px)
{
    #wrap{
        width: 30%;
        background-color: green;
    }
}

@media all and (min-width:768px){
    #wrap{
        width: 60%;
        background-color: blue;
    }
}

@media all and (min-width:1024px)
{
    #wrap{
        width: 90%;
        background: red;
    }
}

 

결과)

 

화면 크기에 따라 배경 이미지 변경

값 설명
cover • 이미지 비율을 유지하면서 영역 전체에 꽉 차게 함
• 이미지가 잘릴 수 있음
contain • 원본 비율을 유지
• 영역 전체에 이미지가 채워지지 않을 수 있음

 

예시)

HTML

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media=“screen” href="./bgImage.css">
<title>미디어 쿼리</title> 
</head>
<body>
</body>
</html>

 

CSS

/* 기본 배경 이미지 지정 */
body {
    background: url(./images/bg0.jpg) no-repeat fixed;
    background-size: cover;
}

@media screen and (max-width:1024px) {
    body{
        background: url("bg1.jpg") no-repeat fixed;
        background-size: cover;
    }
    
}

@media screen and (max-width:768px) {
    body{
        background: url("bg2.png")no-repeat fixed;
        background-size: cover;
    }
    
}

@media screen and (max-width:320px) {
    body{
        background: url("bg3.jpg")no-repeat fixed;
        background-size: cover;
    }
    
}

 

결과)

 

 

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅

'Html & Css' 카테고리의 다른 글

[새싹 프론트엔드] 2주차 - 5 CSS Flex / 구글 클론코딩 / HTML 그리드 레이아웃  (0) 2022.10.28
[새싹 프론트엔드] 2주차 - 4 CSS Flex  (0) 2022.10.27
[새싹 프론트엔드] 2주차 - 2 HTML 목록태그 & 폼태그  (0) 2022.10.25
[새싹 프론트엔드] 2주차 - 1 CSS 레이아웃 & HTML 테이블  (0) 2022.10.24
[새싹 프론트엔드] 1주차 - 5 CSS 위치 속성  (0) 2022.10.21

'Html & Css' Related Articles

티스토리툴바