세상과 연결

css에 em, rem, vw, vh, vmin, vmaem, rem, vw, vh, vmin, vmax em : 부모 font-size를 상속받음rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨vw : 브라우저너비의 해당 %vh : 브라우저높이의 해당 %vmin : 브라우저 너비와 높이중 짧은쪽의 해당 %vmax : 브라우저 너비와 높이중 큰쪽의 해당 %

미디어쿼리 예제 화면너비에 맞춰 다른 CSS 적용 @charset "utf-8";/** 전체박스 */#wrap { width: 80%; height: 600px; margin: 0 auto; border: 10px solid #ffff00;}/* min - 크기가 작은순서대로 작성, max - 크기가 큰순서대로 작성 *//* all : 모든장치 (default) *//* 너비가 320px 이상일때 */@media all and (min-width:320px){ #wrap { width: 40%; background: #000; }}/* 너비가 600px 이상일때 */@media all and (min-width:600px){ #wrap { width: 60%; background: #40b0f9; }}/..

[반응형웹] - 미디어쿼리 (media Query) 간단한 예제 1. 미디어 쿼리 웹 사이트 예제 http://mediaqueri.es/2. 미디어 쿼리 웹 사이트 하나 http://stuffandnonsense.co.uk/ 예제 1 반응형 웹 메뉴1 메뉴2 메뉴3 메뉴4 [출처] [반응형웹] - 미디어쿼리 (media Query) 간단한 예제|작성자 자바킹 예제 2@charset "utf-8" /* 모든 Device를 위한 공통 로드 */ .cLayer{ floot: left; padding : 1.0em;}/* 모바일 Device : 0 ~ 640 */@media screen and (max-width: 640px){ html{ background: red; } .cLayer{ padding: 1.0..

미디어 쿼리의 사용 방법​​​미디어 쿼리의 가장 기본적인 구조는 이렇습니다.​@media all and ( max-width:300px )​ { css 코드 }​​하나 하나 분석을 해드리겠습니다.​all부분의 문구를 mediatype (미디어 타입) 이라 함.​미디어 타입 아래와 같이 대표적으로 3가지 타입이 있습니다.​all : 모든 미디어. 따로 미디어 타입을 지정하지 않으면 all 이 기본값입니다.​​print : 프린트 기기.​ 인쇄기능을 추가해서 인쇄를 했는데 인쇄가 깨질시 print 속성을 이용해서 맞춰줌​screen : ​가장 많이 사용하는 속성값으로 컴퓨터, 모바일, 태블릿 등 현재 미디어쿼리가 실행된 모니터​그 외에 speech, aural, braille, embossedm handhe..