영역의 크기 메소드

영역의 크기 페이지 내의 모든 사각형 영역의 너비와 높이를 알아내거나 수정할 때 사용한다. 영역의 크기를 가져오거나 설정하는 메소드 메소드 설명 .height() 영역의 높이를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) .width() 영역의 너비를 리턴한다. (바깥 여백, 테두리, 안쪽 여백 X) 메소드 설명 .innerHeight() 영역의 높이에 안쪽 여백을 더한 값을 리턴한다. .innerWidth() 영역의 너비에 안쪽 여백을 더한 값을 리턴한다. .outerHeight() 영역의 높이에 안쪽 여백과 테두리 두께를 더한 값을 리턴한다. .outerWidth() 영역의 너비에 안쪽 여백과 테두리 뚜께를 더한 값을 리턴한다. .outerHeight(true) 영역의 높이에 안쪽 여백과 테두리..

2022.01.11

해상도별 이미지 교체 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

.on(events[,selector][,data],function)

.on(events[,selector][,data],function) .on() 메서드는 .bind() 메서드와 마찬거지로 이벤트 핸들러를 등록하기 위하여 사용되는 메서드이다. on() 메서드는 동적으로 생성될 요소에 대해서도 이벤트 처리가 가능하다. new $(function(){ $('#create').on('click', function(){ $('div').html('ok'); }); $('body').on('click', '#newButton', function(){ console.log('click'); }); }) 참고:) https://xianeml.tistory.com/71 jQuery 제이쿼리 이벤트, Ajax 비동기 처리 🎯 자바스크립트 라이브러리 jQuery 이벤트 처리와 Ajax ..

2022.01.04

Ajax로 불러온 엘리먼트의 이벤트가 작동 하지 않을때

Ajax로 불러온 클래스에 클래스명으로 이벤트를 걸면 해당 이벤트가 작동하지 않는다. click이벤트는 이미 페이지에 있는 요소에 대해서만 작동을 하기 때문에, Ajax를 이용해 동적으로 가져온 요소에 대해서는 작동하지 않기 때문이다. $('.class').click(function(){ }); 이럴때는 위의 소스를 아래와 같이 변경해준다. $('document').on('click', '.class', function(){ }); 동적으로 가져온 요소에 대해서는 이벤트 핸들러 등록을 해야한다. 이벤트 핸들러 등록을 하기 위해 .on()메서드를 사용한다. 참고:) https://xianeml.tistory.com/71 jQuery 제이쿼리 이벤트, Ajax 비동기 처리 🎯 자바스크립트 라이브러리 jQue..

2021.12.31

클릭 시 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

mobile 코딩 시 초기 세팅

mobile 코딩 시 초기 세팅

2021.12.23