mobile font size

html{font-size:calc(100vw*10/360)} @media (min-width:360px) { html{font-size:10px} } /* or */ html{ font-size:calc(100vw*11.66/420); } @media (min-width:420px) { html{font-size:11.66px} } 위 코드처럼 font-size를 주게 되면 브라우저 가로 사이즈에 따라 자동으로 폰트사이즈가 조절되고, rem으로 작성된 스타일의 크기가 자동으로 도절된다. 간단한 모바일 웹 페이지에서 사용하기 용이하다. 계산식은 아래와 같다. 10 : 360 = X : 420 10 : 360 = X : 390

2022.12.21

반응형 풀스크린 영상

반응형 사이트에서 많이 볼 수 있는 풀스크린 영상 띄우기 CSS의 position과 transform, Javascript의 window width, height 를 이용해 표현할 수 있다. 풀스크린~태블릿 사이즈 까지는 영상을 띄우고, 그 이하 디바이스에서는 배경이미지로 교체하여 용량을 최적화한다. SCROLL DOWN 로고 menu01 menu02 menu03 menu04 내용 콘텐츠

2022.01.12

반응형 네비게이션 2

반응형 네비게이션 2 해상도 별 다르게 표현되는 네비게이션 햄버거먹구잡다 조아란1 조아란2 조아란3 조아란4 조아란5 CSS /* 와이드 pc */ header{ height:60px; background:#F90; padding-top:20px} header .menuOpen{position:absolute; right:20px; top:20px; display:none} header .mainMenu{width: 450px; margin:0 auto; background:#FC3;} header .mainMenu ul{overflow:hidden;} header .mainMenu li{ float:left; margin-right:15px} header .mainMenu li a{display:blo..

2022.01.11

반응형 네비게이션 1

jQuery 반응형 네비게이션 1 해상도 별 다르게 표현되는 네비게이션 menu01 menu02 menu03 menu04 menu05 CSS /* CSS Document */ html,body{height: 100%;} *{margin:0; padding:0} a{ color:#333; text-decoration:none} ul{ list-style:none} #wrap{position:relative; width:1200px; height:100%; margin:0 auto; border:1px solid #ccc; overflow:hidden;} header{width:300px; height:100%; background:#ccc} .btn{ font-size:1.2rem; color:#333; ..

2022.01.11

해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

CSS 속성 해제 방법

반응형 웹 구축 시 지정된 CSS 속성을 해재해야 하는 상황이 발생한다. 이때 해당 속성에 맞는 해재 방법으로 스타일을 주면 된다. 고정->유동 .auto{width: auto;} float .float{ float : none } position .position{ position:static; left:0; top:0; } .position{ position:relative; left:0; top:0; /* 권장 */ } border .border{ border:0 none; } background .background{ background:none; } font .font{ font-style:normal; font-weight:normal;} margin/padding .mp{margin:0; p..

2022.01.05