반응형 웹 (5)

 

CSS 분리하여 link 로 구성하는 것과 @import에 대한 설명, 그리고 반응형 웹 샘플을 만들어서 설명을 하려고 합니다.

 

 

1. link

 

아래는 지난번 작성했던 html 파일입니다. (index.html 이라고 정했습니다.)

CSS를 적용하기 위해서 <style> 안에 코드를 적어놓았습니다.

 

아래 내용은 짧지만, 페이지에 따라서 내용이 길어질 수 있습니다.

보기에 불편하니 스타일 관련 부분은 다른 파일로 빼는 편입니다.

 

아래 푸른색으로 된 부분을 css 확장자를 가진 파일로 저장합니다.

 

<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>

 

 

편의상 style.css 라는 파일을 만들어서 아래 내용을 붙여넣었습니다.

 

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

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

 

처음에 index.html 파일과 style.css 파일로 분리를 하였습니다.

index.html 안에 style.css 파일을 포함 시키기 위해선 아래와 같이 작성해줍니다.

 

<link rel="stylesheet" href="style.css">

 

html 파일에 아래와 같이 적용을 해주면 됩니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">

 

 

2. @import

 

위의 같은 방식에 따라 link를 @import로 변경해서 적용이 가능합니다.

아래와 같이 바꿔서 사용할 수 있습니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    @import url('style.css');
</style>

 

LINK 와 @import 어떤 것을 써도 성능에는 큰 무리가 없다고 합니다.

2개를 같이 혼용하면 스타일을 다운로드 받는데, 차이가 난다고 하네요.

그로 인해 사이트가 약간 느려진다고 하는데, 눈에 띌 정도는 아닌거 같습니다.

 

예전에는 웹 브라우저에서 파일을 다운로드 받는 방식이 js 스크립트 파일을 먼저 다운 받고, 그 다음 스타일 파일을 다운로드 받아서 속도에 영향이 있었다고 하는데, 요즘 브라우저 호환성이 좋아져서 크게 신경 쓰지 않아도 된다고 합니다.

(단, ie 경우에는 페이지 로딩 후 바로 스크립트를 실행하는 경우, 제대로 실행을 못하는 경우가 있어서 setTimeOut 으로 약간의 딜레이를 주고 있습니다.)

 

 

3. 반응형 웹 샘플

 

지난 주에 만든 샘플을 약간 변형시켜서 아래와 같이 만들었습니다.

 

div 에다가 .cLayer 라는 클래스를 적용시키고, .cLayer 스타일을 <style> 구문 상단에 올려놓았습니다.

cLayer 은 @media screen 에 포함되어 있지 않으니, 해상도가 달라져도 영향을 받지 않고 그 형태를 그대로 적용시킬 수 있습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>반응형 웹 디자인 테스트</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        .cLayer {
            float: left;
            padding: 1.2em;
        }
        
        /* 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>
</head>
<body>
<div id="layer1" class="cLayer" style="background-color:#FF6666;">메뉴1</div>
<div id="layer2" class="cLayer" style="background-color:#FFCC33;">메뉴2</div>
<div id="layer3" class="cLayer" style="background-color:#FFFF00;">메뉴3</div>
<div id="layer4" class="cLayer" style="background-color:#33FF66;">설정</div>
</body>
</html>

 

위의 파일을 PC 웹 브라우저에서 불러왔을 때, 화면입니다.

 

 

아래는 아이폰에서 불러왔을 때, 화면입니다.

 

 

 

두 화면의 차이는 cLayer 로 적용된 div 형식은 그대로 이고, @media 태그에서 해상도에 따른 배경색 부분만 적용되었습니다.

 

 

4. 반응형 웹 샘플 테스트

 

위의 경우는 두가지 화면 크기만 예로 들었는데, 아래와 같이 여러 가지 경우가 있다고 가정을 합니다.

 

<style>
    어떤 스타일
    해상도 가로 320 일때,
    해상도 가로 640 일때,
    해상도 가로 1024 일때,
    해상도 가로 1280 일때,
    해상도 가로 1650 일때,
    해상도 가로 1920 일때,
</style>

 

어떤 객체의 스타일은 모든 경우게 동일하게 적용시키지만, 하나 또는 두 개의 해상도에서만 객체의 스타일을 다르게 적용하고 싶다면.. 어떻게 할까요?

각 해상도마다 스타일을 복사해주면 되지만... 손발이 고생합니다.

 

답은 위에서 했던 예제를 잘 보면 알 수 있습니다.

예제처럼 해상도를 적용하기 전에 스타일을 적용해주고, 변경하고자 하는 해상도에서만 내용을 적어주면 됩니다.

 

아래와 같이 .cLayer 스타일을 먼저 적어줍니다. 그러면 모든 해상도에서 적용이 됩니다.

내가 원하는 해상도... 아래에서는 0 ~ 640 해상도에 .cLayer 속성을 추가해줬습니다.

화면에 약간 작게 보이게 하려고 padding 부분의 값은 줄였습니다.

그러면 기존의 .cLayer 의 float 속성은 그대로 유지하면서 padding 값만 변경해서 적용해줍니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>반응형 웹 디자인 테스트</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        .cLayer {
            float: left;
            padding: 1.2em;
        }
        
        /* width : 0 ~ 640 */
        @media screen and (max-width:640px) {
            html {
                background: purple;
            }
            .cLayer {
                padding:0.9em;
            }
        }
        
        /* width : 641 ~ max */
        @media screen and (min-width:641px) {
            html {
                background: cyan;
            }
        }
   </style>
</head>

 

아래는 위의 결과에 따라 비교해본 화면입니다.

위쪽의 하늘색 배경은 640 이상의 해상도에서 캡쳐하였고, 아래 보라색 배경은 640 이하에서 캡쳐한 것입니다.

기존의 .cLayer 의 float 속성은 그대로 유지하면서 padding 값이 작게 적용된 것을 확인할 수 있습니다.

 

 

 

^ㅇ^!!!

 

반응형 웹의 내용은 간단합니다.

해상도에 따라 분류를 하고 화면을 어떻게 표시할 까 하는 부분에서 좀 어려움을 느낄뿐이지, 조금씩 테스트를 하다보면 같은 소스를 가지고서도 해상도에 따라 다양한 화면을 구성할 수 있을 겁니다.

 
이 게시물을...