EverGiver

반응형 웹 본문

Front-End (웹)/반응형 웹과 미디어 쿼리

반응형 웹

친절한개발초보자 2022. 1. 11. 20:58
728x90
반응형 웹 디자인이란

 

웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현한다.

 

모바일 기기를 위한 뷰포트

 

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

 

뷰포트 지정하기

 

  • 뷰포트는 <meta> 태그를 이용해 <head>와 </head> 태그 사이에 작성한다.
    <meta name="viewport" content="속성1=값1", "속성2=값2", ....">​
  • 뷰포트 속성
    종류 설명 사용 가능한 값 기본값
    width 뷰포트 너비 device-width 또는 크기 브라우저 기본값
    height 뷰포트 높이 device-height 또는 크기 브라우저 기본값
    user-scalable 확대/축소 가능 여부 yes 또는 no
    (yes는 1로, device-width와 device-height값은 10으로 간주)    		 yes
    initial-scale 초기 확대/축소 값 1~10 1 
    <meta name="viewport" content="width=device-width", initial-scale=1">​​
    <head>    
<meta charset="UTF-8">   
 <meta name="keyword" content="html의 구조">   
 <meta name="description" content="html의 구조를 알아봅시다">   
 <meta name="author" content="제작자">    
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, 
user-scalable=yes, shrink-to-fit=no">
<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<![endif]-->
<title>rsponsive</title>
<link rel="stylesheet"   href="#"  type="text/css" >
<!--[if it IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>​
  • width=device-width
    - 웹 페이지의 크기가 모니터가 스마트폰의 실제 액정 크기를 따라가도록 한다.
  • initial-scale=1
    - 보이는 화면의 zoom up 정도를 1배율로 한다는 것이다.
      ▷이 값을 키우면 보여지는 화면이 좀 더 크게 보인다.
      ▷ 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷하다.
          (스마트폰에서만 효과가 있다)
  • maximum-scale
    - 확대할 수 있는 최대 비율
  • minimum-scale
    - 축소할 수 있는 최소 비율
  • user-scalable
    - 사용자가 배율을 확대 또는 축소 허용 여부를 설정한다.
      ▷ user-scalable=yes
          : 크기 조절을 가능하게 설정 (기본값)
      ▷ user-scalable=no
          : 크기 조절을 불가능하게 설정
            (no로 설정하면 웹페이지가 input 영역에서 텍스트를 입력할 때 스크롤되는 것도 방지한다.)
  • shrink-to-fit=no
    - 애플의 사파리 브라우저에만 영향을 미치는 속성이다. 
      ▷ 사파리는 기본적으로 viewport의 크기보다 보여줘야 할 내용이 크면, 보여줘야할 내용을 줄여서라도 보여주는데, 이 과정을 방지하기 위해 코드를 작성한다.
  • 랜더링 모드 적용
    - 현재의 웹 표준을 지키는 브라우저들을 기준으로 제작된 웹페이지들은 이 호환성 보기 버튼이 굳이 필요하지 않고, 해당 브라우저의 최신 렌더링 모드로 작동하게 강제할 필요가 생겼습니다. <meta> 태그를사용해서 어떤 렌더링 엔진을 사용할 것인지 전달할 수 있다.
     
    <!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<![endif]-->​
  • 위의 content 값에 지정할 수 있는 값
    - IE=5 : 관용 모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용된다.
    - IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용된다.
    - IE=8 : IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링 된다.
    - IE=EmulateIE8 : IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용 모드로 렌더링 된다.
    - IE=edge : 최신 모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링 된다.

    cf) 조건부 주석 옵션 참고
        - ! : 아니다 (not)
        - lt : 작다 (less than)
        - lte : 작거나 같다 (less than equal)
        - gt : 크다 (greater than)
        - gte : 크거나 같다 (greater than equal)
        - () : 우선 처리
        - & : 그리고 (and)
        - | : 또는 (or)

 

뷰포트 단위

 

  • 뷰포트를 기준으로 하는 단위
    단위 설명
    vw(viewport width) 1vw는 뷰포트 너비의 1%와 같다.
    vh(viewport height) 1vh는 뷰포트 높이의 1%와 같다.
    vmin(viewport minimum) 뷰포트의 너비와 높이 중에 작은 값의 1%와 같다.
    vmax(viewport maximum) 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같다.
728x90
저작자표시

'Front-End (웹) > 반응형 웹과 미디어 쿼리' 카테고리의 다른 글

CSS 그리드 레이아웃  (0) 2022.01.12
플렉스 박스 레이아웃  (0) 2022.01.12
그리드 레이아웃  (0) 2022.01.11
미디어 쿼리 알아보기  (0) 2022.01.11
'Front-End (웹)/반응형 웹과 미디어 쿼리' Related Articles more
Comments