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

코딩/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>

 

또한 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)"