부트스트랩 및 반응형 웹정리
부트스트랩 및 반응형 웹정리
반응형 웹 핵심기술 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