부트스트랩 및 반응형 웹정리

부트스트랩 및 반응형 웹정리

부트스트랩 및 반응형 웹정리

반응형 웹 핵심기술 3가지

///////////////////////////////////////////////////////////////////////////////////
1 가변그리드:  px(픽셀) 대신 %(가변) 로 사용하는것

가변(변동) 그리드(여백,패딩)

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

@media all end (min-width:320px) {

body{background:green;}

}

 

 

3 뷰포트  화면에 보이는 영역을 제어하는 기술

미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할때 꼭 필요함

데스크톱은 사용자가 지정한 해상도가 보이는 영역이 되지만

스마트 기기는 기본 설정값이 보이는 영역으로 설정되기 때문에

미디워쿼리를 사용해도 스마트 기기의 실제화면 크기를 감지하기 못하기 때문에

반응형 웹 제작시 반드시 필요한 기술

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

가변마진과 가변 패팅 이해하기

///////////////////////////////////////////////////////////////////////////////////

가변 마진과 가변 패딩 이해하기

(가변 패딩을 적용할 패딩값 /나누기  적용할 박스를 감싸고 있는 박스의 가로너비 *  100 = 가변패딩값

//////////////////////////////////////////////////////////////////////////////////

가변 폰트

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

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

1em 은 16px

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

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

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

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

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

////////////////////////////////////////////////////////////////////////////////////

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

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

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

////////////////////////////////////////////////////////////////////////////////////

가변크리고 박스 만들기(본격적으로 가변 그리드 배우기)

가변크리고 만들 박스의 가로너비 /나누기 가변크기로 만들 박스를 감싸고 있는 박스의 가로너비 * 100