반응형웹 - 미디어쿼리

반응형 웹 디자인 다양해지는 사용자 브라우저 환경에 따라 웹사이트를 제작하는 데는 한계가 있다. 미디어쿼리를 사용하여 화면 크기에 맞게 화면 요소들을 재배치하고 각 요소의 표시 방법만 다르게 해서 사이트를 구현할 수 있다. 미디어쿼리 미디어쿼리란 웹을 접속하는 기기의 화면 해상도에 따라 각각 다른 CSS를 적용해주는 기능을 한다. media 속성에는 all, screen, print 등의 값을 지정하고 웹이 표시되는 대상별로 디자인을 달리 지정해 줄 수 있다. 미디어쿼리는 같은 screen이라도 기기의 해상도에 따라 CSS를 다르게 지정할 수 있다. ＊ 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 함 ＊ 뷰포트(View Port) 너비 같은 여러 장치들의 조건에 맞춰 특정한 CSS 스..

2022.01.05

.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

스크롤바 숨기기

스크롤바 숨기기 ul { scrollbar-width: none; -ms-overflow-style: none; } ul::-webkit-scrollbar { display: none; }

2022.01.04

div 팝업 시 body scroll 비활성화

div 팝업 시 body scroll 비활성화 $("html, body").css({"overflow":"hidden"}); // body scroll 비활성화 $("html, body").css({"overflow":""}); // body scroll 활성화

2022.01.03

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

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

2021.12.31

jQuery Swiper

jQuery Swiper PC, Mobile 2가지 환경에서 사용하기 위해 2가지 이벤트를 한번에 줘야 한다. 초기 Y값과 마지막(드래그 후) Y값을 비교하여 어떤 방향으로 swipe 되었는지 if문을 사용해 걸러낸다. 이벤트 주기 $('선택자').on(touchstart mousedown) $('선택자').on(touchend mouseup) 페이지 Y좌표 구하기 startY = e.pageY; // pc(마우스) e.originalEvent.touches[0].pageY; // touchstart Y좌표 모바일(터치) e.originalEvent.changedTouches[0].pageY; // touchend Y좌표 모바일(터치) start, down 과 end, up Y좌표 비교하기 if( sta..

2021.12.27