반응형 웹 (4)

 

반응형 웹을 조금씩 다뤄보면서 어느정도 감이 잡히는 느낌입니다.

강좌에서는 기초적인 부분을 하고 있지만, 진행 중인 프로젝트 테스트 항목으로 다양한 해상도 별로 스타일을 각기 달리 적용하다보니 제대로 적용되었는지 웹페이지 새로고침을 많이 해야하더라구요.

 

이번에는 미디어 쿼리 종류에 대해서 알아보고 해상도에 따라 다르게 적용되는 소스를 조금 더 추가해보도록 하겠습니다.

 

 

1. media query

 

지난번에 메타 태크에 아래와 같이 width 랑 initial-scale 등 화면에서 얻을 수 있는 속성 값을 설정한 적이 있습니다.

 

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

 

이런 것을 미디어 쿼리라고 합니다.

 

속 성 설 명
width 화면의 너비
height 화면의 높이
device-width 장치의 너비
device-height 장치의 높이
orientation 장치의 방향
device-aspect-ratio 화면의 비율
color 장치의 색상 비트
color-index 장치에서 표현 가능한 최대 색상 개수
resolution 장치의 해상도

 

미디어 쿼리는 CSS에서 아래와 같이 max-width를 입력해서 적용시킬 수 있습니다.

 

@media screen and (max-width:640px) { }

 

아이폰, 아이패드의 경우, 레티나 디스플레이를 탑재해서 고해상도의 화면을 보여줍니다.

특별히 설정을 하지 않아도 되지만, 고해상도를 적용한 차이를 적용하고 싶다면 아래와 같이 입력하면 됩니다.

 

<style>
   @media screen and (-webkit-min-device-pixel-ratio:2) {
         // 내용 입력
   }
</style>

 

 

2. 예제

 

일반적으로 모바일 화면은 작고 세로로 길게 되어 있습니다.

반면 컴퓨터 모니터상에서 보는 화면은 가로로 길게 되어 있습니다.

 

어떤 객체들을 올려놓는 다고 가정할 때, 모바일 화면에서는 세로로 스크롤 하는게 편한데, 객체 들이 가로로 길게 늘어져 있으면 보기 싫습니다. 반대로 가로로 넓은 화면을 볼 수 있는 모니터 상에서는 객체들이 가로로 한눈에 보이는 게 나을거 같습니다.

 

모니터 화면으로 볼때는 아래와 같이 정렬되고,

 

       

 

모바일 화면으로 볼때는 아래와 같이 수직으로 정렬되도록 만들어보겠습니다.

 

 
 
 
 

 

 

3. 소스

 

먼저 스타일 부분입니다.

 

가로 너비를 640을 기준으로 나눴습니다.

640 이하일 때는 배경이 보라색으로 보이고, 640 이상일 때는 하늘색으로 보이게 하였습니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    /* width : 0 ~ 640 */
    @media screen and (max-width:640px) {
        html {
           background: purple;
        }
    }
    
    /* width : 641 ~ max */
    @media screen and (min-width:641px) {
        html {
            background: cyan;
        }
    }
</style>

 

아래는 body 부분입니다.

위에서 예를 들었던 빨강, 주황, 노랑, 초록의 4개의 박스 입니다.

 

<body>
<div id="layer1" style="background-color:#FF6666; width:200px; height:200px;"></div>
<div id="layer2" style="background-color:#FFCC33; width:200px; height:200px;"></div>
<div id="layer3" style="background-color:#FFFF00; width:200px; height:200px;"></div>
<div id="layer4" style="background-color:#33FF66; width:200px; height:200px;"></div>
</body>

 

위의 소스를 적용시켜서 출력해보면 아래와 같이 나옵니다.

 

PC 화면

모바일 화면

 

div 가 기본적으로 한 줄에 하나씩만 놓일 수 있어서 세로로 정렬됩니다.

 

참고로 왼쪽 PC 화면과 오른쪽 모바일 화면에서 보이는 각 사각형들의 크기가 다른 이유는 아래 메타 속성에 initial-scale을 적용했기 때문입니다. initial-scale=1.0 비율 때문에 모바일에서는 장치에 맞는 크기로 보여줍니다.

 

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

 

다시 스타일 부분으로 가서 div 속성에 float :left를 적용시켜 줍니다.

한줄에 하나씩만 배치되던 것을 무조건 왼쪽으로 붙여서 한줄에 배치되도록 해줍니다.

 

아래와 같이 추가해줍니다.

 

/* width : 641 ~ max */
    @media screen and (min-width:641px) {
        html {
            background: cyan;
        }
        div {
            float: left;
        }
    }

 

그런 다음 PC 웹 브라우저에서 새로 고침을 하면 아래와 같이 가로로 길게 보여집니다.

물론 모바일에서는 달라진게 없이 세로로 보여질 것입니다.

 

PC 화면

 

 

^ㅇ^!!!

 

문자나 레이아웃을 변경해보겠다고 하는데..

실제 보기엔 색상이 편해서 색상만 쓰고 있네요~

 

다음엔 위에 것을 응용해보도록 하겠습니다.

 
이 게시물을...