프로젝트를 진행하는데 내가 만든 메인 페이지가 비율이 깨져서 수정작업을 하기로 했다. 몰랐는데 화면 비율고정을 할 수가 있더라고요..? 그래서 한번 해보기로 했다.

"반응형 화면비율고정"이라고 치면 HTML, CSS, JS로 해결할 수 있는 방법이 나오는데, 내가 선택한건 CSS. 제일 간단했고, 보통 CSS로 많이 한다고 해서 CSS로 찾아봤다.

- 반응형 화면 비율 고정 방법

1. display: flex;
   div 태그들을 수평정렬 해 준다.
2. align-items: center;
   나란히정렬된 3개의 div 태그들이 웹페이지의 지정된 위치를 무시하고, 가장 윗단으로 붙은 뒤 가운데 정렬된다.
3. justify-content: center;
   나란히 정렬된 3개의 div 태그들이 웹 페이지에서 위치한 자리에서, 가운데정렬된다.

나는 위의 3개의 코드를 이용해서 비율을 고정하는데는 성공했다. 하지만 이번엔 윈도우 화면 크기도 고정해보고 싶어졌다. 그래서 다시 공부시작. "브라우저 창크기 고정"이라고 쳐서 공부했음.

> $(window).resize(function () {window.resizeTo(size[0], size[1]);});

위의 코드처럼 js -> window.resizeTo를 이용해 고정하라 해서 해봤지만 적용이 되지 않음. 그래서 이유를 찾아보니 크롬 브라우저에서는 안된다고 함. 그래서 어떡해야 하나 보니, 크롬브라우저가 아니거나, 혹은 팝업창일 경우엔 고정이 가능하다고 함. (하지만 내가 적용하고 싶은 건 팝업창도 아니고 크롭이 아닌 다른 브라우저도 아니여서, 우선 방법만 찾고 공부하기로 결정했음)

- 팝업창 화면 비율 고정 방법

popupWindow = window.open('about:blank', 'windowName', 'resizeable');
popupWindow.resizeTo(500, 500);

팝업창 화면 비율을 고정하는 방법은 간단했음. (window.open 함수로 연 창은 크기 조절이 가능) 대신 resizeable 속성을 주어야 함(default는 resizeable=no)