반응형 웹 사이트 작성 법 & 디바이스별 규격

반응형 웹 디자인

• 디바이스 화면 크기에 따라 웹 페이지가 표현되는 방법이 바뀌는 것을 의미한다.

 

반응형 짜는법

HTML에

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

을 입력한다. (요즘엔 기본적으로 다 들어가있음.)

 

viewport 는 화면크기만 디바이스에 맞추는 것 뿐 레이아웃은 최적화 되지 않는다. 따라서 레이아웃도 최적화 시키려면 미디어 쿼리를 사용해야한다.

 

반응형 작성하기

1.CSS 파일에 작성하는 경우

/*MOBILE SIZE
================================================ */
@media (max-width: 700px) {
    .title {
        font-size: 4rem;
    }
}

미디어쿼리는 @media (max-width: 크기) { 코드 } 를 말한다.

 

반응형

2.HTML파일에서 link태그로 적용하기

<link href="css/style.css" rel="stylesheet">

보통의 css는 html에서 저렇게 불러온다.

하지만

<link href="css/style.css" rel="stylesheet" media="(max-width:701px)">
<link href="css/style.css" rel="stylesheet" media="(max-width:700px)">

link 태그에 media 속성을 줘서 따로 css를 적용 시킬 수도 있다.

 

3.css파일에서 css 파일 불러오기(다른 방법보다 느리기 때문에 선호는 안함)

@import url(style.css) (max-width:700px);

@import를 사용하여 미디어 쿼리가 적혀있는 css를 불러올수도 있다.

 

 

미디어 특성

미디어 특성은 미디어 쿼리 작성 시 max-width 나 min-width 같읕 속성들을 말한다.

특성 종류	의미
width	화면 가로 폭, max-width, min-width 작성 가능
height	화면 세로 폭, max-height, min-height 작성 가능
aspect-ratio	화면 너비와 높이의 비율
orientation	화면방향.ortrait(세로방향),landscape(가로방향)
resolution	디바이스 해상도

 

미디어 쿼리 디바이스별 가로 너비 기준점

디바이스 종류	너비 (width)
와이드 스크린 데스크톱	1440 px
데스크톱	1280 px
큰 테블릿 - landscape	1024 px
스마트콘+작은 테블릿 - landscape	800 px
큰 테블릿 - portrait	768 px
작은 테블릿 - portrait	600 px
스마트폰 - landscape + portrait	480 px
스마트폰 - portrait	320 px

portrait =  세로모드

landscape = 가로모드 를 말한다.

 

위의 기준점은 총 8분기로 나누었습니다.

 

미디어 쿼리 기준점은 몇분기로 나누냐에 따라 크기가 달라집니다. 4분기, 5분기.. 처럼 적은 갯수로 나눌수록 너비 또한 달라지니 주의하시기 바랍니다.