반응형 사이트에서
javascript/jQuery를 이용한
가운데 정렬입니다.
반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은
보기에는 쉬워보이지만 의외로 html, css 만으로는 구현하기 쉽지 않습니다.
현재 구글링 정보를 통하여 그때그때 적용할 순 있어도,
사용자의 기기에 따라 다르게 반응하는 반응형 웹에서 자바스크립트 사용없이 쓰기에는 무리가 있습니다.
그래서 반응형 웹에서 사용할 수 있는
자바스크립트, 제이쿼리를 이용한 반응형 웹에서 이미지 수직 수평 가운데 정렬을 구현하겠습니다.
반응형 이미지 수직 수평 가운데 정렬 방법
반응형웹 적용을 위한 필수 요소 viewport 삽입
<head></head>사이에 아래 메타태그를 추가하세요.
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
html (css는 inline스타일로 적용)
<div class="imgWrap" style="position: relative;">
<img src="img/mintlogo.jpg" alt="" style="position: absolute;">
</div>
javascript /jQuery
jQuery(function(){
var winW=winH=imgW=imgH=imgT=imgL=0;
resizeFn(); //아래 반응형 함수 호출
setTimeout(resizeFn, 100)//setTimeout은 일정 시간 간격 이후에 함수가 한번 실행(open하자마자 실행)
function resizeFn(){ //반응형 함수
winW=$(window).innerWidth();
winH=$(window).innerHeight();
imgH=$(".imgWrap > img").innerHeight();
imgW=$(".imgWrap > img").innerWidth();
imgT=(winH-imgH)/2 //창크기에 맞추어 이미지 위아래 가운데 위치
imgL=(winW-imgW)/2 //창크기에 맞추어 이미지 좌우 가운데 위치
$(".imgWrap > img").css({ top: imgT});
$(".imgWrap > img").css({ left: imgL});
}
$(window).resize(function(){//창크기 변경될 때 마다 반복 실행
resizeFn();
});
});
화면 보기 (Result 클릭)
javascript 사용없이 css만을 이용한 가운데 정렬 방법은 아래 포스트로 이동하세요.
https://goddino.tistory.com/11
[css] css로 이미지 가운데 정렬
이미지 가운데 정렬 2탄으로 간단하게 html, css만으로 가운데 정렬하는 방법을 소개하려고 합니다. 반응형 웹이 아닌 일반 pc또는 mobile용 웹을 만들때 javascript를 사용할 없어 편하고, 간단합니다.
goddino.tistory.com
반응형
'💻CODING' 카테고리의 다른 글
| [js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) (1) | 2020.06.09 |
|---|---|
| [js/jQuery] 반응형 캐러셀(carousel) 슬라이드 구현하기 (0) | 2020.05.28 |
| [css] css 이미지, 컨텐츠 가운데 정렬 2가지 방법 (2) | 2020.05.17 |
| [js/jQuery] 탭메뉴 구현하기 (0) | 2020.05.11 |
| 웹디자인 기능사 자격증 합격후기(ft. 합격꿀팁! 실기시험 문제 소스 구현) (3) | 2020.05.02 |
댓글