-
초보자를 위한 반응형 기초(화면크기별로 width설정 하기)Study/JavaScript 2023. 1. 7. 11:04반응형
web으로 되어있는 페이지를 mobile버젼으로 만들어 달라는 업무지시를 받았고
현재 만들기 위해 시행 착오중에 발견한 지식에 대해서 공유하고자 포스팅한다.
내가 반응형 웹을 만들라고 했을때 옆에 동료가 width가 px로 고정으로 되어 있으니 %로 설정해야
디바이스 크기에 따라 줄어들고 늘어날수 있다고 알려 줬었다.
그래서 %적용하니 되긴 되는데,,,도대체 %를 설정 했을때 기준점을 모르겠다는것...
그래서 이것저것 실험을 해보니
"%를 설정하고자 하는 선택자의 상위부모선택자를 px로 고정값을 주고 그걸 기준으로 %로 변경"
이 되는거 같다!
아래 코드를 보고 설명하겠다.
(1)html코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ASP모바일버젼</title> <link rel="stylesheet" href="ASP_Mobaile.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="ASP_Mobile.js"></script> </head> <body> <header> <div class="top"> <h3>ASP 모바일 상담 서비스</h3> <button>setting</button> </div> <div class="nav"> <div>영상걸기</div> <div>영상통화</div> <div>채팅</div> <div>캡쳐보기</div> </div> </header> <section> <div>영상걸기화면1</div> <div>영상통화화면2</div> <div>채팅화면3</div> <div>캡쳐보기화면4</div> </section> </body> </html>(2)css코드
body{ width: 412px; background-color: aqua; margin: 0; padding: 0; border: 0; } header{ width: 100%; background-color: antiquewhite; } .top>h3{ display: inline-block; } .top>button{ display: inline-block; } .nav>div{ display: inline-block; }먼저 조절할려는 부분은 header태그의 width를 조절하고 싶었고, 그러기위해 header태그의 부모 태그인 body태그를 고정값을 설정해 주었고 고정값기준으로 하위자식태그인 header태그의 width가 조절이 되었다.
그렇다면 각 디바이스별로 width가 다른데 이걸 일일히 변경을 해줘야 하나?
이때 필요한건 자바스크립트!!!
먼저 코드를 보겠다.
(3)javascript코드
$( document ).ready( function(){ mobileSize(); function mobileSize(){ var realSize = window.innerWidth; $("body").css("width",realSize); console.log("디바이스 실사이즈:"+realSize); console.log("모바일 실사이즈:"+$("body").css("width")); } });window.innerWidth는 현재 디바이스의 크기를 알려주는 함수이고, 그걸 realSize변수에 담는다.
body태그의 css의 width를 realSize변수에 담긴 값으로 바꿔준다.
그럼 끝!
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기) (0) 2023.02.12 초보자를 위한 캔버스(Canvas)로 그림 그리기 방법 (0) 2023.02.07 초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기) (1) 2023.01.18 자바스크립트로 탭 구현하기(신입버젼) (0) 2023.01.06 모바일과 pc 디바이스 자바스크립트로 구분하는 쉬운방법 (0) 2023.01.06