제이쿼리에서 css 버튼 크기 조절 방법

Question

용도 : 각 디바이스마다 다른 이벤트 동작이 필요한 경우, 반응형웹 구현시 css를 사용하지 않고 스크립트를 사용하는 경우

자바스크립트 윈도우창의 크기 조절

resize 이벤트는 브라우저 크기 변화(document view)에 따라 발생합니다. window.onresize 속성을 사용하거나 window.onresize 속성(어트리뷰트)을 사용하거나,window.addEventListener('resize', ...)를 사용하여, 이벤트 핸들러에 resize 이벤트를 등록할 수 있습니다. onresize 프로퍼티는 window 객체이므로 document 객체와 혼용하지 않도록 합니다. (익스플로러에서만 가능한 방법이기 때문*)

window.addEventListener('resize', function() {
  console.log('Resizing...');
}, true);

window.onresize = function(event) {
  console.log('Resizing...')
};

window.resizeTo(200,200); // 지정한 크기로 변한다.(가로,세로)
window.resizeBy(-100,50); // 현재 크기에서 값만큼 변화를 준다

* 일부 브라우저의 이전 버전에서는...

일부 브라우저의 이전 버전에서는 모든 HTML 요소(엘리먼트)에 resize 이벤트 핸들러를 등록 할 수 있었습니다. 여전히 onresize 속성을 사용하거나, addEventListener()를 사용하여 모든 요소에 핸들러를 설정할 수 있습니다. 그러나 resize 이벤트는 오직 window객체(document.defaultView)에서만 발생합니다(전달합니다). window 객체에 등록된 핸들러만 이벤트를 수신합니다.
모든 요소가 resize 변경을 알림받을 수 있도록 하는 새로운 제안(proposal 2017)이 있습니다. 드래프트문서를 읽으려면 Resize Observer를 참조하고, 진행중인 토론을 읽으려면 Github issues 문서를 참조하세요.

제이쿼리 윈도우창의 크기 조절

resize()는 브라우저 창의 크기가 바뀌게 되면 콜백함수를 호출하여 코드를 실행합니다. 제이쿼리의 resize() 이벤트는 브라우저 크기에 따라 계속해서 구문을 실행하므로 사용이 빈번한 경우 브라우저의 성능을 크게 저하시킬 수 있기에 debounce 등을 사용하여 이벤트 간격을 100ms 단위로 제한하는 방법 등이 고려되면 더욱 좋습니다.

$(window).resize(function (){  
  if (window.outerWidth <= 800) {
    alert('현재 브라우저 크기가 <= 800px');
  }
})

브라우저 크기 확인 명령어

window.innerWidth : 브라우저 화면의 너비
window.innerHeight : 브라우저 화면의 높이
window.outerWidth : 브라우저 전체의 너비
window.outerHeight : 브라우저 전체의 높이

추가 내용

jQuery resizable 첫 번째 요소에서만 작동한다면? 해결은 이렇게

출처
https://webisfree.com/
https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event

html 문서에서 css를 사용하여 특정 요소의 크기를 원하는 크기만큼 조절할 수 있는 방법을 알아봅니다.

엘리먼트의 크기가 너무 크거나 작은 경우 크기를 조절해야합니다. 하지만 동일한 비율로 크기간 간단하게 조절할 수 있다면 편리할텐데요 이 경우 css의 zoom 프로퍼티를 사용합니다.

# CSS zoom Propertycss의 zoom 프로퍼티는 원하는 요소(태그)의 크기를 확대하거나 축소(조절)하게 해줍니다. 사용 방법이 간단하다는 장점이 있는데요 간단하게 원하는 크기를 숫자로 입력하거나 normal 등의 문자 입력만으로 쉽고 빠르게 적용할 수 있죠.

div { zoom: 2; }

간단한 사용방법 및 문법은 위와 같습니다. div 태그를 2배 크기로 설정하였음을 의미하죠. 이처럼 숫자를 사용하는 방법이 가장 알아보기 쉽죠. 그럼 간단한 예제를 만들어보겠습니다.

! css zoom 사용 예제보기만약 엘리먼트의 크기를 현재보다 키우거나 줄이고자합니다. 먼저 텍스트 엘리먼트를 하나 만들겠습니다.

<span class="text">Webisfree.com</span>

위 요소의 text 클래스에 각각 일반크기, 2배 크기 마지막으로 50% 크기로 조정해보겠습니다. 아래와 같이 css를 적용합니다.

.text { zoom: normal; }
.text { zoom: 2; color: red; }
.text { zoom: 0.5; color: blue; }

위와 같이 적용하면 어떻게 나타날까요? 실제로 코드를 적용한 모습은 아래와 같습니다.

Webisfree.com // zoom: normal
Webisfree.com // zoom: 2
Webisfree.com // zoom: 0.5

크기가 바뀐게 보이시나요? 이처럼 css를 사용하는 것만으로 간단하게 크기 조절이 가능합니다.

! zoom 관련하여 알아둘 사항
zoom은 매우 편리하지만 css 표준 속성이 아닙니다. 이런 이유로 zoom을 사용할 경우 다른 브라우저에서 동작하지 않을 수 있는데 바로 Firefox(파이어폭스) 브라우저가 대표적입니다. 그래서 css 프로퍼티를 사용할 때 zoom보다는 transform이 더 선호됩니다. 게다가 transform은 크기 조절 외에도 더 많은 기능들을 가지고 있죠.

좀 더 얘기하자면 예전에는 오히려 transform을 지원하지 않는 브라우저가 많아 사용하지 않았기도 했습니다. 하지만 최근의 브라우저는 transform을 대부분 지원하죠. 다만 transform을 적용했을때와 zoom을 적용했을 때 여백 등의 렌더링 방식이 차이가 나므로 이 둘을 혼합 사용하기 보다는 한 가지를 선택하는 방법이 좋습니다. 아무래도 웹표준을 생각하며 앞으로는 transform을 사용하는 것이 가장 좋을 것입니다.

블로그를 손보다 반응형에 맞추어 동영상 플레이어도 크기를 조절하는 방법을 찾다 생각한 방법입니다.

기존 CSS 방식의 문제점

널리 알려진 CSS만을 이용한 동영상 플레이어를 반응형으로 만들거나 Bootstrap의 Responsive embed를 이용할 때에는 동영상의 원래의 크기와 상관없이 가로길이가 100%에 맞춰지게 됩니다.

이는 본문 크기보다 큰 동영상의 경우는 관계없지만, 본문보다 작은 동영상의 경우 오히려 보기가 불편해집니다.

여기서 소개하는 방법은 동영상보다 본문의 크기가 클 때는 동영상의 사이즈로 크기가 조절되고 동영상보다 본문이 작아지면 본문의 100% 맞춰지는 방법입니다.

그리고 동영상의 비율도 함께 조절됩니다.

이제부터 적용하는 방법에 대하여 설명하겠습니다.

먼저 동영상의 원래 크기부터 알아야겠죠?

유튜브의 경우 유튜브를 조금 플레이하다 일시 정지 후 마우스를 올리고 우측 키를 눌러 동영상 통계를 클릭합니다.

그럼 동영상의 정보가 나오는데 "Dimensions"는 현재 플레이어의 크기를 나타내고 "Resolution"은 실제 동영상의 크기를 나타냅니다.

필요한 것은 "Resolution" 값입니다.

이제 유튜브를 삽입하는 HTML을 작성합니다.

유튜브의 소스코드 복사를 하시면 다음과 같은 iframe으로 구성되어 있습니다.

유튜브의 간단한 옵션

modestbranding=1 : YouTube 로고를 없앤다.

rel=0 : 플레이 완료 후 추천 영상을 출력하지 않는다.

이제 위의 유튜브 소스코드를 다음의 HTML로 감쌉니다.

완성된 소스코드는 다음과 같습니다.

위의 동영상 소스를 HTML 편집기를 이용하여 글에 삽입할 위치에 붙여넣습니다.

다음은 CSS를 편집해야 합니다.

CSS에 다음의 CSS를 추가합니다.

.auto-resizable-iframe {
	margin: 0px auto;
}
.auto-resizable-iframe > div {
	position: relative;
	height: 0px;
}
.auto-resizable-iframe iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

이제 아래의 jQuery를 추가합니다.

(jQuery의 사용방법 및 코드에 대한 설명은 하지 않겠습니다.)

var video_file = $("iframe[src*='//www.youtube.com']");
video_file.each(function() {
	$(this).parent().parent().css('max-width', $(this).attr('width') + 'px');
	$(this).parent().css('padding-bottom', $(this).attr('height')/$(this).attr('width')*100 + '%');
	$(this).removeAttr("width").removeAttr("height");
});

이제 완성되었습니다.

CSS와 jQuery는 한 번만 추가하시면 계속해서 사용할 수 있습니다.

즉 본문만 위의 HTML 작성형식대로 삽입하면 적용이 됩니다.