본문 바로가기
CSS

CSS-반응형 레이아웃 (미디어쿼리)

by Hrin_0820 2020. 8. 27.

1. 반응형 웹 디자인 Responsive Web Design

 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 한다. 보통 웹사이트가 축소되어 가로 스크롤 없이 콘텐츠를 볼 수 있으나 글자가 너무 작아지기 때문이다. 데스크탑용, 테블릿용, 모바일용 웹사이트를 별도 구축할 수도 있지만 One Source Multi Use의 관점에서 올바른 해결책은 아니다.

 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인(Responsive Web Design)이다. 화면 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것이다. 즉, 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 것이다.

  1-1. viewport meta tag

 viewport란 웹페이지의 가시영역을 의미한다. viewport는 디바이스에 따라 차이가 있다. 예를 들어 모바일 브라우저는 주화면이 세로 화면이고 윈도우 resize가 불가하며 화면 터치를 사용하는 등 데스크탑 브라우저와 구성이나 형태가 다르다. 또한 모바일의 화면은 데스크탑 화면보다 훨씬 작으므로 데스크탑용 웹페이지를 그대로 모바일에 출력하면 가독성이 현저히 나빠진다. 따라서 viewport를 이용하여 디바이스의 특성과 디바이스의 화면 크기 등을 고려하여 각종 디바이스 사용자에게 최적화된 웹페이지를 제공할 수 있다.

속성 설명 사용 예
width viewport 너비(px). 기본값 : 980px width=240
width=device-width
height viewport 높이(px) height=800
height=device-height
initial-scale viewport 초기 배율 initial-scale=1.0
user-scale 확대 축소 가능 여부 user-scale=no
maximum-scale viewport 최대 배율 maximum-scale=2.0
minimum-scale viewport 최소 배율 minimum-scale=1.0

meta tag에서는 px단위를 사용하며 단위 표현은 생략한다. 복수개의 프로퍼티를 사용할 때는 쉼표(,)로 구분한다.

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

위 예제는 가장 일반적인 viewport 설정이다. 가로폭을 디바이스의 가로폭에 맞추고 초기 화면 배율을 100%로 설정하는 것을 의미한다.

 

  1-2. @media

  반응형 웹디자인에 사용되는 핵심 기술은 @media이다.

@media을 사용하여 미디어 별로 style을 지정하는 것을 Media Query라 한다. 디바이스를 지정하는 것뿐만 아니라 디바이스의 크기나 비율까지 구분할 수 있다.

Media Type 설명
all 모든 미디어 장치에 사용 (기본값)
print 프린터에 사용
screen PC, 태블릿, 스마트 폰에 사용
speech 스크린리더기가 페이지를 읽는데 사용

다음은 Media Query의 문법이다.

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Media Query의 표현식에서 사용할 수 있는 프로퍼티.

속성 설명
width viewport 너비(px)
height viewport 높이(px)
device-width 디바이스의 물리적 너비(px)
device-height 디바이스의 물리적 높이(px)
orientation 디바이스 방향 (가로 방향 : landscape, 세로 방향 : portrait)
device-aspect-ratio 디바이스의 물리적 width/height 비율
color 디바이스에서 표현 가능한 최대 색상 비트수
monochrome 흑백 디바이스의 픽셀 당 비트수
resolution 디바이스 해상도

일반적으로 반응형 웹 디자인은 viewport 너비(width 프로퍼티)를 기준으로 한다.

viewport 너비에 따라 반응하는 범위(breakpoint)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@media</title>
    <style>
        /* 801px ~ */
        .practice{color: #000;}
        
        /* ~ 800px */
        @media screen and (max-width: 800px){
            .practice{color: blue}
        }
        
        /* ~ 500px */
        @media screen and (max-width: 500px){
            .practice{color: red}
        }
    </style>
</head>
<body>
   <div class="practice">
        <h1>@media practice</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Rem commodi odio, enim iste sit eaque harum illo minus aliquid expedita 
        quis blanditiis aut est doloremque. Nam doloremque accusantium minus sed.</p>
    </div>
    
</body>
</html>

사이즈별 출력 이미지

2. 반응형 웹 디자인 Responsive Web Design 예제

보기 : 해상도별 레이아웃 템플릿

 2-1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>오르세미술관</title>
    <link rel="stylesheet" href="orsay.css">
</head>
<body>
    <div id="rin">
        <header>
            <h1>Musee d'Orsay</h1>
        </header>
        <section id="r-container" class="r-clear">
<!--          float을 대비한 clear 클래스-->
           <nav class="r-lnb">
                <ul>
                    <li><a href="#">작가의 작품</a></li>
                    <li><a href="#">작가의 시대</a></li>
                    <li><a href="#">작가의 일생</a></li>
                </ul>
            </nav>
            <article class="r-content">
                <h2>PICTURES</h2>
                <p>
                    <a href="#">피리부는 소년</a><br>
                    <a href="#">고흐의 방</a><br>
                    <a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
                    <a href="#">오페라좌의 관현악단</a><br>
                    <a href="#">만종</a><br>
                    <a href="#">제비꽃 장식을 단 베르트모리조</a><br>
                    <a href="#">피리부는 소년</a><br>
                    <a href="#">고흐의 방</a><br>
                    <a href="#">황색 그리스도가 있는 화가의 자화상</a><br>
                    <a href="#">오페라좌의 관현악단</a><br>
                    <a href="#">만종</a><br>
                    <a href="#">제비꽃 장식을 단 베르트모리조</a><br>
                </p>
            </article>
            <aside class="r-aside">
                <ul class="ext">
                    <li>
                        <h2>Workshop Go</h2>
                        <a href="#">Life drawing workshop</a>
                    </li>
                    <li>
                        <h2>Summer Exhibition</h2>
                        <a href="#">Summer Exhibition Online 2010</a>
                    </li>
                    <li>
                        <h2>RA Collection</h2>
                        <a href="#">RA Collections</a>
                    </li>
                </ul>
            </aside>
        </section>
        <footer>
            <p>&copy; 2018 Les Amis du Musee d'Orsay. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

 

 2-2. 모바일 사이즈 CSS

  모바일 레이아웃은 모두 100%이니 어떤 요소에도 float 또는 position이 없고 width 값을 지정할 필요가 없다.

@charset utf-8;

/* 기본 셋팅 */
h1, h2, ul, li, p, nav, article{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
.r-clear:after{content: ""; display: block; clear: both;}
a{text-decoration: none; line-height: 1.5; color: #333;}

/* 모바일 사이즈 디자인 */
body{background: #f1f1f1; font-size: 13px;}
header{background: coral;}
header h1{font-size: 25px; padding: 10px; color: #fff;}
.r-lnb li{margin: 10px; padding: 10px; background: lightgreen;}
.r-content{padding: 20px;}
.r-content h2{font-size: 20px;}
.ext{margin: 10px;padding: 20px;background: lightgreen;}
footer{padding: 10px; background: #aaa;}

 

기본 모바일 사이즈 디자인 출력 이미지

 2-3. 태블릿 사이즈 CSS

/* 가로 너비 최소 768px ~ 최대 1024px 디자인 */
@media all and (min-width: 768px) and (max-width: 1024px) {
    .r-lnb{float: left; width: 25%;}
    .r-content{float: left; width: 75%;}
    .r-aside{clear: both;}
}

태블릿 사이즈 디자인 출력 이미지

 2-4. PC 사이즈 CSS

/* 가로 너비 최소 1025px ~ 디자인 */
@media all and (min-width: 1025px) {
    #rin{max-width: 1280px; margin: 0 auto;}
    .r-lnb{float: left; width: 20%;}
    .r-content{float: left; width: 50%;}
    .r-aside{float: right; width: 30%;}
}

PC 사이즈 디자인 출력 이미지

 2-5. 통합 결과물

(브라우저 사이즈를 줄여가며 확인해 보세요.)

오르세미술관

저작자표시

'CSS' 카테고리의 다른 글

CSS-레이아웃Ⅲ: Flex box Layout (플렉스 박스)  (0) 2020.08.29
CSS-레이아웃Ⅱ: float + position  (0) 2020.08.27
CSS-요소의 위치 정의 : position  (0) 2020.08.26
CSS-레이아웃Ⅰ: float  (0) 2020.08.26
CSS-요소의 정렬 : float  (0) 2020.08.26

관련글

댓글

티스토리툴바