[CSS] 반응형 웹과 미디어 쿼리, 가변 레이아웃

 

 

공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

반응형 웹 디자인(Responsive Web Design)

  : 화면 크기에 따라 화면 요소들을 다르게 보여주도록 디자인된 웹 페이지

 

   미디어 쿼리  : CSS모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해주는 기능

    ex)  @media [only | not] 미디어유형 [and 조건] * [and 조건]

          @media screen and (min-width:200px) and (max-width:360px)

          : 화면의 최소 너비가 200px이고 최대 너비가 360px일 경우 미디어 쿼리를 사용한다.

 

  * 미디어 유형 종류

all	모든 미디어 유형
print	인쇄 장치
screen	컴퓨터 스크린(스마트폰의 스크린도 포함)
tv	tv
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille	점자 표시 장치
handheld	Pad같은 장치
projection	프로젝터
tty	디스프레이 기능이 제한된 장치(이 장치에서는 px단위 사용 불가)
embossed	점자 프린터

 

 

 

미디어 쿼리에서 사용하는 조건

  1. 뷰포트의 너비와 높이

    뷰포트  : 실제 웹 문서의 내용이 화면에 보여지는 영역. 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있다.

 

  * 너비와 높이 속성

width / height	웹 페이지의 너비, 높이
min-width / min-height	최소 너비, 최소 높이
max-width / max-height	최대 너비, 최대 높이

 

  2. 단말기의 너비와 높이

    : 단말기 브라우저 창의 너비와 높이를 체크할 수 있다.

 

    * 단말기의 너비와 높이 속성

device-width / device-height	단말기의 너비와 높이
min-device-width / min-device-height	단말기의 최소 너비와 높이
max-device-width / max-device-height	단말기의 최대 너비와 높이

 

  3. 화면회전

    : 화면이 어느 방향인지도 체크할 수 있다.

 

    * 화면 회전 속성

orientation:portrait	단말기의 세로 방향 (=뷰포트의 너비 < 높이)
orientation:landscape	단말기의 가로 방향 (=뷰포트의 너비 > 높이)

 

  4. 화면비율

    : 브라우저 화면 너비 값을 높이값으로 나눈 것. 숫자 값을 사용하거나 계산식을 사용할 수 있다.

    @media all and (aspect-ratio:16/9) : 뷰포트의 화면 비율이 16:9면 미디어 쿼리 사용

 

    * 화면 비율 속성

aspect-ratio	화면 비율( width/height )
min-aspect-ratio	최소 화면 비율
max-aspect-ratio	최대 화면 비율

 

  5. 단말기의 물리적 화면 비율

    : 단말기 브라우저의 너비 값을 높이값으로 나눈 것.

 

    * 단말기 화면 비율 속성

device-aspect-ratio	단말기 화면 비율( width/height )
min-device-aspect-ratio	단말기 최소 화면 비율
max-device-aspect-ratio	단말기 최대 화면 비율

 

  6. 색상당 비트 수

    : 단말기에서 사용하는 최대 색상 비트 수. color:n이면 최대 두 가지(2^n) 색을 사용 가능

    @media all and (color) : 컬러를 지원하면 실행

    @media all and (color:0) : 컬러를 지원하지 않으면 실행

 

    * 화면 비율 속성

color	비트 수
min-color	최소 비트 수
max-color	최대 비트 수

 

 

 

미디어 쿼리 적용하기

  ■ CSS파일 연결하기

1. <link href="css파일 경로" rel="stylesheet" type="text/css" media="미디어 쿼리 조건">
2. @import url(css 파일 경로) 미디어 쿼리 조건

 

  ■ 웹문서에서 직접 정의하기

    1. <style>안에서 media 속성을 이용하여 조건과 스타일을 지정한다.  

<style media="미디어쿼리 조건">

   스타일 규칙들

</style>

 

    2. @media문을 사용해서 각 조건별로 스타일을 지정해 놓고 사용할 수 있다.

<style>

   @media 미디어 쿼리 조건{

      스타일 규칙들

   }

</style>

 

 

  ■ 뷰포트 지정하기

  : 미디어 쿼리를 이용해도 스마트 폰에서 봤을 때 스마트폰용 화면이 아닌 pc 화면이 그대로 축소만 되어 보이는 경우가 있다. 이런 경우에는 <meta>를 이용해 뷰포트 크기나 배율을 조절해야 한다.

  <meta name="viewport" content="속성1=값, 속성2=값 ...">

  <meta name="viewport" content="width=device-width">

  : 웹 페이지의 뷰포트 너비를 스마트폰의 화면 너비에 맞춰 지정

 

  * 뷰포트 속성

width	뷰포트의 너비를 지정(기본값은 device-width)
height	뷰포트의 높이를 지정(기본값은 device-height)
initial-scale	초기 배율(기본값 1, 1보다 작으면 축소, 1보다 크면 확대)
user-scalable	사용자가 페이지를 확대/축소할 수 있는지 여부를 표시 (기본값은  yes 이고  no 로 지정하면 사용자가 확대/축소할 수 X)
minimum-scale	사용자가 축소할 수 있는 최솟값을 지정(기본값은  0.25 고 가로값을 기준으로 한다.)
maximum-scale	사용자가 확대할 수 있는 최댓값을 지정한다.(기본값은  5.0 )

 

 

 

 

가변형 레이아웃(Fluid Layout)

  : 사이트의 모든 요소를 상대적인 크기로 지정해서 브라우저 크기에 따라서 다르게 표시해주는 방법.

 

  ■ 그리드 시스템

    : 화면을 몇 개의 column으로 나누어 요소들을 배치하는 것이다. 그리드 시스템을 사용하면 화면을 규칙적으로 만들기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있다. 그리드를 이용해서 가변형 그리드 레이아웃을 많이 쓴다.

 

 

   고정형 레이아웃을 가변형 레이아웃으로 만드는 방법 

•  요소의 너비를 백분율(%)로 바꾸기
  : 소수점 이하 자리가 많다면 한두 자리로 표시한다. 오차를 고려하여 실제 계산한 값보다 약간 작게 지정해 주는 것이 좋다.
• 패딩과 마진을 백분율(%)로 바꾸기
• 글자 크기를 em으로 바꾸기
  : em은 대문자의 M의 너비를 1em으로 계산한 것으로 16px=1em이기 때문에 (픽셀 값)/16 하면 변환된 em값이 나온다.
• 이미지나 비디오가 있는 경우 크기 조절
  max-width:100%해주면 브라우저 너비를 기준으로 항상  100%에 맞게 이미지 너비가 조절된다.