반응형 웹 만들기

미디어 쿼리

css 모듈 중 하나로 접속 기기에 따라 특정한 CSS 스타일을 사용하도록 해줌

[ONLY | NOT] @media 미디어 유형 [AND 조건]*[AND 조건]

미디어 유형의 예 :

all : 모두

print : 인쇄장치

screen :  컴퓨터 스크린

미디어 쿼리의 조건에는 뷰 포트의 너비(width, height)나 단말기 브라우저의 너비(device-), 

단말기 방향(landscape, portrait) 등을 속성으로 사용할 수 있다.

처음부터 미디어 쿼리를 이용해 반응형 웹을 만들 때

스마트폰 스타일이 간단한 스타일을 사용하므로, 처음부터 미디어 쿼리를 이용해 반응형 웹을 만들 때는 모든 기기에서 공통되는 스타일을 정의하고 

스마트폰->태블릿 -> PC 순으로 미디어 쿼리를 적용한다.

화면 너비가 1024 이상일 때 #container 너비를 960px로 지정

style.css

@media screen and (min-width:1024px) {
    #container {
        width: 960px;
    }
}

유동형 레이아웃

픽셀로 레이아웃을 지정하면 화면이 작은 스마트폰이나 태블릿 PC에서는 글자가 작아 보기가 어렵다.

미디어 쿼리는 기기 해상도별로 따로 CSS를 정의해야하며 까다롭다. 따라서 문서 안의 각 요소 너비를 픽셀 값과 같은 고정폭이 아닌 백분율(%)과 같은 가변폭으로 지정하면 좋다.

이렇게 사이트 레이아웃을 백분율로 지정하는 것을 '유동형 레이아웃(fluid layout)'이라고 한다. (브라우저 너비 값이 바뀔 때마다 너비 값이 바뀜)

요소의 너비를 백분율로 바꾸기

// 960px를 백분율로 변경 -> 96%

#wrapper {
width:96%
( ...)
}

// wrapper너비인 960px를 기준으로 600px를 백분율로 변경, 600px / 960px = 0.625 -> 62.5%

article {
float : left;
width: 62.5%;
padding:20px;
}

글자 크기를 em 단위로 변환하기

px는 모니터의 해상도를 기준으로 하기 떄문에 N-screen 시대에는 적합하지 않아서, em 단위를 사용하는 것이 좋다.

16px가 1em 이므로, em값을 구하려면 px 글자크기를 16px로 나누어 em 값을 계산하면 된다.

em = 글자 크기(px) / 16px

유동형 이미지 만들기

백분율로 지정한다. (100%)

img {
    max-width: 100%;
}

유동형 비디오 만들기

마찬가지로 백분율로 지정. (100%)

video {
        max-width: 100%;
    }
 

그리드 레이아웃

백분율로 지정하는 유동형 레이아웃도 N-screen 시대에 대처할 순 있지만, 사이트 전체 레이아웃을 똑같이 유지하기 때문에

스마트폰처럼 브라우저 창의 너비가 좁을 경우에는 적합하지 않을 수 있다.

그래서 나온 것이 그리드 레이아웃 기법이다.

PC나 태블릿, 스마트폰 용 각각에 맞게 레이아웃을 먼저 구상한다.

그런 후 각각의 요소에 적절한 시맨틱 태그나 id값을 지정한다.

CSS 리셋

문서 전체의 글꼴, 마진이나 패딩의 값을 지정하지 않으면 브라우저마다 각기 다른 기본 값을 적용하게 된다. 그것을 막기위해 필요한 CSS 기본 값들을 미리 설정하는 것을 'CSS reset' 이라고 한다.

<style>
      body { /* 문서전체의 글꼴, 마진, 패딩 리셋*/
        margin: 0;
        padding: 0;
        font-family: "돋움";
        font-size: 1em;
      }
      a:link {
        text-decoration: none;
      }
      a img {
        border: 0; /* 이미지 링크 테두리 0 */
      }
    </style>

geoMap_result.html