반응형 웹 만들기 #1

반응형 웹 만들기

반응형 웹 만들기

반응형 웹에 대한 1차 포스팅에서 반응형 웹이란 어떤것이며 무엇을 위해 만들어 졌는지에 대하여 알아보았다.

그럼 이번시간에는 반응형 웹은 어떻기술들로 만들어 지는지에 대하여 알아보는 시간을 가져보자

크게 반응형 웹을 만드는 기술은 3가지로 분류할 수있다.

1 가변그리드

가변그리드란 웹화면 구현에 있어 px(픽셀) 단위대신 %(비율, 가변)으로  처리하는것을 말한다. 만일 고정된 px 로 화면에 사이즈를 정한

다면. 모바일 화면에서는 화면이 작게 보여질 수 밖에 없고, 이런 문제를 비율로 보여지도록 처리하여 적당한 사이즈로 처리되도록 한다.

#wrap {

/* width:960px; */                                                                                         

width: 90%;
height:500px;
margin:0 auto;
background:#00ff88;
border:4px solid #000;

}

2 미디어쿼리(화면크기를 질문 device 화면사이즈)

@media (‌min-width:300pxd) {


.myclass {                                                                                                

        width:200px;
        height:150px;


    } 

}

3 뷰포트

미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할때 꼭 필요함, 데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만

스마트 기기는 기본 설정값이 보이는 영역으로 설정되기 때문에 미디워쿼리를 사용해도 스마트 기기의 실제화면 크기를 감지하기 못하기 때문에 반응형 웹 제작시 반드시 필요한 기술이다.

 
<meta name="viewport" content="width=device-width, inital-scale=1, minimum-scale=1, maximum-scale=1, user-scalable-no">

4 가변폰트

(가변폰트를 적용할 글자 크기값 /나누기 적용할 요소를 감싸고 있는 요소의 글자크기값 = 가변폰트값

rem ->  html 최상의에 적용되어 상속되지 않아 문제해결이 쉬움

1em 은 16px

vw, vh, vmin, vmax 등 css3 에서 나와 진정한 가변폰트 지정임

vm -> 브라우저의 너비를 100으로해서 결정

vh -> 브라우저의 높이를 100으로 기준으로해서

vmin -> 브라우저의 작은쪽을 기준으로

vmax -> 브라우저의 큰쪽을 기준으로해서

5 멀티미디어적 요소 가변적으로

width:100%   -> 가변적으로 변경됨(하나만 해도 가변적으로 바뀜)

max-width:100% ->  안정성을 위해 같이 써줌( 이미지 같은 경우 자신의 기본크기 이상으로는 늘어나지는 않는 문제점 해결)

이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^