반응형 웹 (2)

 

지난번에 반응형 웹 디자인을 간단하게 말하면 웹 화면을 보는 기기의 해상도에 따라서 각각 다른 화면을 보는 것이라고 말을 했습니다.

 

위의 조건을 간단하게 테스트 할 수 있는 샘플 소스를 만들어보도록 하겠습니다.

 

 

1. html5 기본 소스

 

아래는 기본적인 html5 소스 입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>반응형 웹 디자인 테스트</title>
    
    <style>
    /* 여기에 반응형 웹을 위한 스타일을 넣을 예정입니다. */
    </style>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

 

위의 내용을 가지고 웹 브라우저에 출력을 하면 아래와 같은 모습으니 나타납니다.

 

 

 

2. width에 따른 분류

 

반응형 웹 디자인은 기기의 해상도에 따라 달라진다고 했습니다.

해상도를 구분하는 것은 소스가 아닌 Style에서 적용하면 됩니다.

 

아래에서는 각각 3가지의 해상도를 가지고 테스트해 볼 예정입니다.

 

가로 기준으로 640이하, 640 ~ 1024 사이, 1024 이상으로 구분할 것입니다.

 

CSS3 의 @media screen을 통해서 가로 크기 width를 얻어올 수 있습니다.

 

0 ~ 640 가로 크기인 경우엔 max-width:640px을 정해줍니다.

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

 

640 보다 크고 1024 보다 작은 경우엔 아래와 같이 정해줍니다.

@media screen and (min-width:641px) and (max-width:1023px) { }

 

마지막으로 1024보다 큰 경우에는 min-width:1024px 만 정해줍니다.

@media screen and (min-width:1024px) { }

 

각각 괄호 안에 해상도에 따라 변경할 내용을 적어주면 됩니다.

 

 

3.  스타일 적용

 

샘플로 가로 width 640 이하 일때는 빨강, 640 ~ 1024 사이일때는 초록, 1024 이상 일때는 파란 배경으로 나타나게 해보겠습니다.

 

/* width : 0 ~ 640 */
@media screen and (max-width:640px) {
    html {
        background: red;
    }
}

/* width : 641 ~ 1023 */
@media screen and (min-width:641px) and (max-width:1023px) {
    html {
        background: green;
    }
}

/* width : 1024 이상 */
@media screen and (min-width:1024px) {
    html {
        background: blue;
    }
}

 

처음 만들었던 html <style> 사이에 위의 예제를 넣어보도록 합니다.

 

 

4. 화면 테스트

 

먼저 화면을 작게 하여 width 가 640 이하인 화면입니다.

스타일을 적용한 대로 빨간색으로 배경이 바뀌었습니다.

 

 

 

그 다음 640 보다는 조금 크게 하여 화면을 띄워보았습니다.

(아래 이미지 상에는 화면에 보여주는 것 때문에 실제 크기보다 축소 하였습니다.)

 

 

 

마지막으로 1024 이상 해상도 크기로 화면을 늘려보았습니다.

스타일에서 정한 대로 파란색으로 나타납니다.

 

 

 

5. 전체 소스

 

위의 샘플을 진행한 전체 소스 입니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>반응형 웹 디자인 테스트</title>
    
    <style>
        /* width : 0 ~ 640 */
        @media screen and (max-width:640px) {
            html {
                background: red;
            }
        }
        
        /* width : 641 ~ 1023 */
        @media screen and (min-width:641px) and (max-width:1023px) {
            html {
                background: green;
            }
        }
        
        /* width : 1024 이상 */
        @media screen and (min-width:1024px) {
            html {
                background: blue;
            }
        }
        
    </style>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

 

^ㅇ^!!!

 

캡쳐를 편하게 하기 위해서 웹 브라우저 크기를 조절해서 스크린 샷을 찍었습니다.

실제 PC 화면에서 찍어보고 태블릿 및 스마트폰에서 테스트 해봐도 같은 결과를 얻을 수 있습니다.

 

다음엔 색상 대신 문자 및 레이아웃를 변경해보도록 하겠습니다.

 
이 게시물을...