반응형 웹이란?

반응형 웹

반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다. 미디어 쿼리(Media Query)는 접속하는 장치에 따라서 CSS 스타일을 변경한다.( 다른 프로그래밍 언어의 if 조건문과 비슷한 개념) PC로 접속하면 PC화면에 맞게, 스마트폰으로 접속하면 스마트폰 화면에 맞게 레이아웃을 변경한다.

view port

뷰 포트(View Port)는 작은 화면의 스마트폰에서 PC의 웹 페이지 표시할 때 전체적인 페이지의 배율을 조정해준다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

뷰 포트 설정
width=device-width	페이지의 가로 길이를 기기의 스크린 가로 길이로 설정한다.
height=device-height	페이지의 세로 길이를 기기의 스크린 세로 길이로 설정한다.
initial-scale	페이지 로드 시 줌 레벨을 조정한다.
minimum-scale	줄일 수 있는 최소 크기를 지정한다. (기본값 = 0.25)
maximum-scale	늘릴 수 있는 최대 크기를 지정한다. (기본값 = 1.6)
user-scalable	yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지는 지정한다. (기본값 = yes)

 

 

미디어 쿼리 (Media Query)

1. CSS 파일 안에서 적용할 때

.title { // .title에 font-size를 100px로 적용
    font-size: 100px;
}

@media (max-width: 600px) { // 600px보다 작은 화면에서는 font-size를 50px 적용 
  .title {
          font-size: 50px;
    }
}

@media (min-width: 1000px) { // 1000px보다 큰 화면에서는 font-size를 200px 적용 
  .title {
          font-size: 200px;
    }
}

2. 태그에서 적용할 때

<link rel="stylesheet" media="(max-width:600px)" href="main.css" > // main.css를 600보다 작은화면에 적용