004 반응형적용

지금까지 만든 페이지를 반응형으로 한 번 수정해보도록 하겠습니다. 페이지의 화면 크기를 한 번 줄이면 아래와 같이 페이지가 난장판으로 변하게 됩니다.

하지만 반응형 웹 페이지는 크기가 줄어들면 이에 맞게 레이아웃이 변하는 것을 보여주고 있습니다. 이처럼 웹 페이지를 반응형 적용을 추가하여 웹 페이지를 수정해 보도록 하겠습니다.

반응형 웹 사이트를 만들기 앞서 먼저 meta 태그에 설정을 주어야 합니다. meta 태그는 웹 사이트의 설정을 도와주는 역할을 하고 있다고 이해하시면 됩니다. 그래서 meta 태그에 name="viewport" 를 명시해 주어야 반응형 웹 사이트를 만들 수 있습니다. viewport 를 명시하지 않을 경우 형태를 유지하면서 줄어들기 때문에 반응형 웹 사이트의 제작이 불가능합니다.

또한 content 의 모든 크기는 디바이스(PC)와 동일하게 가겠다고 설정하고 최소값과 최대값도 똑같이 크기를 1로 맞춰줍니다.

파일명 : index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    **<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">**
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

**...**

viewport 를 명시해 주었다면 반응형 웹 사이트를 만들기 위해선 media 쿼리를 사용하여야 합니다. 중괄호 안에는 최댓값과 최솟값을 입력해주시면 됩니다. 1000px 이하가 되었을때 side_box 가 없어지도록 만들어 보겠습니다.

먼저, 좌우값을 지정해 주었던 것들을 가지고 옵니다. 1000px 이하로 내려갔을 때 좌우값이 바껴야 하는데 픽셀을 주게 되면 더 줄어들 때 마다 픽셀을 고쳐야 하기 때문에 백분율로 계산해서 주도록 하겠습니다. contents는 javascript를 이용하여 설정하는 것이 편합니다.

파일명 : css/style.css

**...**

@media screen and (max-width:1000px){
    #header .inner{
        width: 975px;
    }

    #main_container .inner{
        width: 935px;
    }

    .contents{
        width: 614px;
        /* height: 500px; */
        border: 1px solid rgba(0,0,0,0.09);
        border-radius: 3px; /* 테두리를 둥글게 만듬 */
        margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
        background: white;
    }
}

파일명 : css/style.css

**...**

@media screen and (max-width:1000px){
    #header .inner{
        width: **97.5%**;
    }

    #main_container .inner{
        width: **93.5%**;
    }
}