해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

클릭 시 Video 주소 바꾸기

클릭 시 Video 주소 바꾸기 a 태그의 링크값을 이용해 Javascript로 Video 주소 바꿔주기 HTML 비디오1 비디오2 비디오3 JS var video; //전역변수 선언 function changeVideo(linkBtn){ //linkBtn=>클릭한 a태그 video = document.getElementById('changeVideo'); //video태그 video.src = linkBtn.href; // 'movie/video01.mp4' video.load(); //연결된 비디오를 로딩한다. video.type = 'video/mp4'; //해당 코덱을 지정한다 video.play(); //비디오를 재생한다. return false; } //

2021.12.23

링크 시 매개변수(parameter)파라미터 값 넘기기

귤 = 매개변수 링크 시 매개변수(parameter)파라미터 값 넘기기 페이지 이동 시 JavaScript를 이용하여 parameter값을 전달받을 수 있다. 매개변수 1개 일 때 링크된 페이지 매개변수 2개 일 때 링크된 페이지 const obj = { 0: "bFleta: 16.61", 1: "pCHERRY: 8.53", } const newObj = Object.values(obj).reduce((acc, cur_ => { const [key, value] = cur.splite(": "); acc[key] = Number(value); return acc; }, {}); console.log(newObj); // { bFleta: 16.62, pCHERRY: 8.53 }

2021.12.21

Mobile 홈 화면 전체 화면 모드

Mobile 홈 화면 전체 화면 모드 웹 페이지를 홈 화면으로 추가하면 특정 Meta 태그를 통해 웹 브라우저의 상단의 주소 표시줄과 하단의 버튼 Bar를 없앨 수 있습니다. 단 홈 화면에 추가한 후 홈 화면의 아이콘을 통해 접속 했을 경우에만 적용이 됩니다. 네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 아이폰과 안드로이드를 테스트한결과 둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다. 위 사항은 자바스크립트문으로 간단..

2021.12.21

스마트폰 접속시 모바일페이지로 접속

스마트폰 접속시 모바일페이지로 접속 어떻게하면 기존에 웹페이지에서 pc로 접했을때와 스마트폰으로 접했을때 보여지는 페이지를 분류하냐는 겁니다. 이 문제또한 자바스크립트를 통해 스마트폰의 종류를 구별한다음 알맞게 페이지 브라우징 처리를 할수있습니다. var uAgent = navigator.userAgent.toLowerCase(); var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce','nokia','webos','opera mini','sonyericsson','opera mobi','iemobile'); for(var i=0;i

2021.12.21

숫자 천 단위마다 콤마(,) 찍기

숫자 천 단위마다 콤마(,) 찍기 금액단위를 표현할 때 자동으로 콤마(,) 찍기​ 변환할대상.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); ​ var number = 12975000; var money = number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); alert(money);

2021.12.17