21.11.09 작업내용(Javascript, Jquery를 이용한 다중 화면 확장 및 축소)

21.11.09 작업내용(Javascript, Jquery를 이용한 다중 화면 확장 및 축소)

난 SpringBoot를 위주로 개발하는 백엔드 개발자이고 프론트엔드 부분은 학부에서 배운 간단한 html, css, javascript, jquery 정도지만 이번 프로젝트에서 다중 화면을 개발하기 위해 열심히 구글링하면서 화면 확장과 축소 기능을 만들어 보았다. 먼저 동작방식 화면이다.

4분할로 웹사이트를 사용하고 있음.

4분할로 화면을 사용할 때 각 화면의 펼치기 버튼을 누르면 다음 사진과 같이 해당 화면이 전체화면으로 확장된다.

확장된 첫번째 화면.

이때 다시 접기 버튼을 누르면 아까 사용했던 4분할 화면으로 돌아갈 수 있다.

다시 4분할 화면으로 돌아감.

이것을 구현하기 위한 html, css, javascript 코드를 보자

Title .btn{ background:#1AAB8A; color:#fff; border:none; cursor:pointer; transition:800ms ease all; outline:none; } .btn:hover{ background:rgb(240, 240, 255); color:black; } 님 LogOut 펼치기 펼치기 펼치기 펼치기 $(document).ready(function() { let i=0; $("#wide1").click(function() { if (i==0){ $(this).html('접기'); $("#if2,#if3,#if4,#wide2,#wide3,#wide4").css("visibility","hidden"); $("#if2,#if3,#if4").css("display","none"); $("#if1").css("width","99vw"); $("#if1").css("height","91vh"); i=1; } else if(i==1){ $(this).html('펼치기'); $("#if1").css("width","49.5vw"); $("#if1").css("height","45.5vh"); $("#if2,#if3,#if4,#wide2,#wide3,#wide4").css("visibility","visible"); $("#if2,#if3,#if4").css("display","inline-block"); i=0; } }); $("#wide2").click(function() { if (i==0){ $(this).html('접기'); $("#if1,#if3,#if4,#wide1,#wide3,#wide4").css("visibility","hidden"); $("#if1,#if3,#if4").css("display","none"); $("#if2").css("width","99vw"); $("#if2").css("height","91vh"); i=1; } else if(i==1){ $(this).html('펼치기'); $("#if2").css("width","49.5vw"); $("#if2").css("height","45.5vh"); $("#if1,#if3,#if4,#wide1,#wide3,#wide4").css("visibility","visible"); $("#if1,#if3,#if4").css("display","inline-block"); i=0; } }); $("#wide3").click(function() { if (i==0){ $(this).html('접기'); $("#if2,#if1,#if4,#wide2,#wide1,#wide4").css("visibility","hidden"); $("#if2,#if1,#if4").css("display","none"); $("#div1").css("display","none"); $("#if3").css("width","99vw"); $("#if3").css("height","91vh"); i=1; } else if(i==1){ $(this).html('펼치기'); $("#if3").css("width","49.5vw"); $("#if3").css("height","45.5vh"); $("#div1").css("display","block"); $("#if2,#if1,#if4,#wide1,#wide2,#wide4").css("visibility","visible"); $("#if2,#if1,#if4").css("display","inline-block"); i=0; } }); $("#wide4").click(function() { if (i==0){ $(this).html('접기'); $("#if2,#if3,#if1,#wide2,#wide3,#wide1").css("visibility","hidden"); $("#if2,#if3,#if1").css("display","none"); $("#div1").css("display","none"); $("#if4").css("width","99vw"); $("#if4").css("height","91vh"); i=1; } else if(i==1){ $(this).html('펼치기'); $("#if4").css("width","49.5vw"); $("#if4").css("height","45.5vh"); $("#div1").css("display","block"); $("#if2,#if3,#if1,#wide2,#wide3,#wide1").css("visibility","visible"); $("#if2,#if3,#if1").css("display","inline-block"); i=0; } }); });

html태그로 iframe이 div안에 설정되어있고 각 화면의 확장 버튼이 존재한다. 이 버튼을 누르면 해당 버튼의 텍스트를 변경하고 화면을 확장하며 나머지 화면을 안보이게끔 하는 javascript를 작성했다.

애초에 백엔드 위주로 공부하던 터라 프론트엔드 전문가가 보면 굉장히 초짜같은 느낌이 들것이라 좀 아쉽긴 하다. 오늘도 협업의 중요성을 느끼고 간다.

from http://sbed307.tistory.com/13 by ccl(A) rewrite - 2021-11-09 14:01:45