반응형 웹페이지 기본 틀 만들기(그리드, 미디어쿼리 활용)

코딩/web|2020. 5. 26. 16:05

오늘은 반응형 웹페이지의 기본 틀을 만들어보겠습니다. 동기부여를 위해 우선 결과물을 보여드리고 시작하겠습니다. 화면의 크기를 줄이다보면 어느 순간 사이드바 영역이 본문 영역 아래로 내려가는 형태의 반응형 웹페이지입니다.  

 

클릭해서 보세요.^^

 

위와 같은 웹페이지를 만드려면 html 코드와 css 코드가 필요합니다. 이 둘은 같은 폴더 내에 있어야 합니다. 먼저 html 코드는 다음과 같습니다.

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <h1>bskyvision</h1>
    
    <div id="main">
        <div id="contents">본문 영역입니다.</div>
        <div id="sidebar">사이드바 영역입니다.</div>
    </div>

    <div id="footer">푸터 영역입니다.</div>
</body>
</html>

 

여기서 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 이 부분이 없으면 모바일 환경에서 제대로 작동하지 않을 수 있으니 유의하세요. 

 

또한 css 코드는 다음과 같습니다. 

 

style.css

h1 {
    text-align:center;
}

div {
    font-size: 30px;
    text-align: center;
}

#main {
    display: grid;
    grid-template-columns: 3fr 1fr;    
}

#main #contents {
    min-height: 500px; 
    background-color:#00ffff; 
    margin-right: 10px;
}

#main #sidebar {
    min-height: 500px; 
    background-color: #00bfff;
}

#footer {
    margin-top: 10px; 
    background-color: #00bfff;
}


@media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/
    #main {
        display: block;    
    }

    #main #contents {  
        margin-bottom: 10px; 
        margin-right: 0px;
    }
    #main #sidebar {
        min-height: 0;
    }

}

 

여기서 핵심은 미디어 쿼리라는 것을 사용하는 점입니다. 미디어 쿼리는 보통 반응형 웹을 만들 때 사용하는 기술입니다. 위 css 코드에서 @media 로 시작하는 부분을 의미합니다. 미디어 쿼리를 사용함을 통해서 "가로 너비가 600px 이하일 때 사이드바가 본문 아래로 내려오게 한다"와 같은 기능을 실현시킬 수 있습니다. 즉, 반응하는 웹을 만들 수 있는 것이죠. 

 

이것을 기본틀로 해서 나름대로 유용한 웹사이트를 만들 수도 있겠죠? 웹페이지 만드는 것 독학해가는 재미가 쏠쏠하네요. ㅎㅎ

 

 

<참고자료>

[1] https://aboooks.tistory.com/368?category=516604, 지구별 안내서, "CSS로 반응형 웹사이트 (소스) 만들기: 사이드바가 본문 아래로 떨어지게"

[2] https://ccuram.tistory.com/30, yucalip, "[HTML/CSS] 화면의 크기와 환경을 감지하는 기술, 미디어 쿼리 (Media Queries)"