WAI-ARIA 란

한참만에 글을 쓰는 듯합니다. 제 블로그는 기본적으로 누군가를 알려준다기보다는 제가 정보를 습득함과 그 정보를 차후에 사용하기 위함의 목적이 더 크게 있는 블로그입니다. 하여 글을 보시기 전에 전문적인 글을 보시길 원하시는 분들께선 다른 블로그를 이용 부탁드립니다. 먼저... 글을 쓰기 전에 WAI-ARIA라는 카테고리를 만들어 글을 쓰는 여러 가지 이유가 있겠지만 직접적인 업무를 보는 사람으로서 접근성을 좀 더 심도 있게 알아보고자 스터디를 진행한다는 생각으로 WAI-ARIA 사이트와 여러 가지 사이트를 살펴보면서 글로 적어두고 차후 프로젝트에서 사용을 하기 위해 게시글을 작성해볼 예정입니다. 완벽하지 못하고 또한 정보가 잘못되었을 수도 있습니다. 부족한 부분이 많고 잘못된 부분이 있을 수 있습니다. ..

• format_list_bulleted WAI-ARIA
• · 2019. 7. 23.
• textsms

jQuery 수 더하기

jQuery 수 더하기 토탈 수 올려주기 예를들면 음식점이나 영화 티켓 예매등 예약시 성인, 청소년, 어린이등의 인원수를 체크하여 토탈 값을 내려준다. 기타 다른용도로 사용을 해야 한다면 타이틀만 변경 하고 사용 해도 된다. 결과 화면은 다음과 같다. 빼기 0 더하기 빼기 0 더하기 빼기 0 더하기 Total = 0 // 인원 체크 토탈 function countBtn(){ var $wrap = $('.totalFn'), $btnMinus = $wrap.find('.minus'), $btnPlus = $wrap.find('.plus'); $cell = $wrap.find('.cell'); $btnMinus.on('click', function(e){ var $this = $(this); var num =..

• format_list_bulleted jQuery
• · 2019. 2. 13.
• textsms

jQuery infinite scroll 무한스크롤

제이쿼리 무한스크롤 infiniteScroll 얼마전 컴퓨터를 포멧 이후 아직 포토샵을 설치 하기 전이라.. 이미지는 대충 웹에서 사용하는 포토샵으로 대처.. 나름 쓸만한듯... https://pixlr.com/editor/ 를 클릭하면 이동 스크롤을 내릴때 마다 객체가 생성되는 제이쿼리 무한스크롤 infinite Scroll 이라고도 하고.. 일단 처음 만들어봤는데 여기저기 돌아다니는 소스도 많고... 크게 어렵거나 한것 같지는 않았는데.. 그냥 내 입맛에 맞게 만들어보았다. * {margin:0; padding:0; list-style: none;} .infiniteScroll {border:1px solid #ccc; width:200px; font-size:0;} .infiniteScroll im..

• format_list_bulleted jQuery
• · 2019. 2. 7.
• textsms

jQuery 이미지 갤러리

jQuery image Gallery jQuery 를 이용한 이미지 갤러리 일단 디자인은 없이 그냥 내키는대로 했다.CSS는 알아서 입히시길 바랍니다.(살짝 디자인을 할것을 그랬나...) 이전 다음 * {margin:0; padding:0; list-style: none;} .slider-wrap {margin:100px auto; width:600px; border:1px solid #ccc;} /* 이미지 */ .img-box {width:400px; margin:20px auto; height:250px; overflow:hidden; font-size:0; border:2px solid orchid;} .img-box img {width:100%; height:100%;} /* 버튼 */ .sma..

• format_list_bulleted jQuery
• · 2018. 12. 20.
• textsms

setInterval 타이머

setInterval를 이용한 카운트 다운 setInterval을 이용한 카운트 다운은행이나 어떤 특정 사이트에 로그인 이후, 혹은 휴대폰 인증을 받을때 사용이 되는 타이머    // 카운트 다운 var num = 60 * 3; // 몇분을 설정할지의 대한 변수 선언 var myVar; function time(){ myVar = setInterval(alertFunc, 1000); } time(); function alertFunc() { var min = num / 60; min = Math.floor(min); var sec = num - (60 * min); console.log(mi..

• format_list_bulleted jQuery
• · 2018. 12. 9.
• textsms

애트리뷰트 팝업 창 띄우기

애트리뷰트 이용해서 레이어 팝업창 띄우기 팝업창 띄우기 소스 팝업1 팝업2 팝업 팝업 닫기 팝업 띄우기 팝업 2 팝업 닫기 팝업 띄우기 2 /* 팝업 */ .pop {height:100%; height:100%; min-height:100%;} .popup-wrap {display:none; width:100%; background:#ccc;} /* 팝업 공통 */ .popup-wrap .popup-area { background:#fff; position:fixed; left:50%; top:50%; z-index:2; transform: translate(-50%, -50%);} .popup-wrap .pop-title {padding:15px 30px 20px; background:#685e52; ..

• format_list_bulleted jQuery
• · 2018. 11. 1.
• textsms