IT종합 블로그

function fnOpenChapter() {02.var obj = $('#chapter_select');03.var iHeight = (document.body.clientHeight / 2) - obj.height() / 2 + document.body.scrollTop;04.var iWidth = (document.body.clientWidth / 2) - obj.width() / 2 + document.body.scrollLeft;05. 06.obj.css({07.position: 'absolute'08., display:'block'09., top: iHeight10., left: iWidth11.});12.} 팝업등 추가로 열리는 창을 반응형으로 항상 가운데 고정시켜줍니다.

* 예시 width : 90%; / * CSS3를 지원하지 않는 예전 브라우저를 위한 설정 * / width : -webkit-calc(100% - 50px); / * 크롬 브라우저와 사파리 * / width : -moz-calc(100% - 50px); / * 파이어폭스 * / width : calc(100% - 50px); / * 인터넷 익스플로러 * /

CSS3 미디어 쿼리 (media queries) 먼저 보는 기본 예시 @media only screen and (max-width: 68.75em) { /\* 1100 \*/ } @media only screen and (max-width: 62.5em) { /\* 1000 \*/ } @media only screen and (max-width: 47.5em) { /\* 760 \*/ } 역사 간단한 형태의 미디어 쿼리는 CSS2에서 부터 사용되었습니다. 예제1: 예제2: @media screen { * { font-family: sans-serif } } 즉, ‘screen’이나 ‘print’ 처럼 ‘미디어 타입 (media types)’ 에 따라서 특화된 스타일을 사용할 수 있었습니다. 그밖에 제안..