분류 전체보기18 custom select trigger css로 해결 기본 select style을 못견디는 디자이너를 위해 평소에는 ul과 li로 select의 멋을 지켜왔지만 등록 폼과 같은 엄청난 select의 향연인 페이지에선 부득이하게 기본 select와 option을 사용해야 할 때가 있다. 이럴 경우 select에서라도 최선을 다했음을 어필하기 위해 성별 남 여 .selectInputDiv:after{ content:''; display: inline-block; width: 10px; height: 10px; border-right: 2px solid #CECECE; border-bottom: 2px solid #CECECE; transform: rotate(45deg); position: absolute; top: 13px; right: 17px; } :a.. 2023. 11. 14. background color와 image 같이 쓰기 작업을 하다 보면 가끔 background에 이미지와 color를 같이 넣어야 할 때가 있다. 빈번한 일이 아니다보니 자꾸 까먹어서 기록. .together{ background:url(이미지주소.jpg) no-repeat #colorcode } url 뒤로 컬러코드 붙이면 끝! 도움이 되셨다면 ❤ 한번만 부탁드립니다. 요즘 도통 일에 보람이 없어서요 주륵 누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏 2023. 11. 9. swiper 우측 걸치는 슬라이드 가끔 쓰다보니 맨날 고민하는 우측에 살짝 걸쳐지는 슬라이드 만들기 slidesPerView : 'auto' 로 설정하고 .swiper-slide{width:40%} 도움이 되셨다면 ❤ 한번만 부탁드립니다. 요즘 도통 일에 보람이 없어서요 주륵 누군가에게 도움이 되었다는 것을 확인받고 싶네요 🙏 2022. 4. 18. popup 본문만 스크롤 되게 하고 부모는 스크롤 막기(모바일) popup 작업 시 overflow:hidden 과 overflow:auto 로 연명해 온 지난 날, 그동안 모바일 팝업 본문에서 스크롤 쓸 일이 없었는지 위 코드가 모바일에서 적용이 안되는걸 인지한지 얼마 되지 않았다. 나는 왜 항상 다른 블로거 분들이 해결한 방법이 한번에 먹히지 않는걸까...ㅠ 여러가지를 조합해 본 끝에 내 코드에 먹히는 방법을 찾아냄..ㅠ html, body, #wrapper { height: 100%; overflow: auto; } html{ overflow:hidden !important } .popWrap{ position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.5); width: 100vw; height: 100v.. 2022. 1. 28. class를 활용해 popup 여러개 컨트롤하기 코드를 짜다보면 팝업을 한 페이지 안에서 여러개를 운용해야 하는 경우가 생긴다. 팝업 버튼과 팝업창을 공통 클래스와 팝업별 클래스 2개를 사용해 각각의 버튼과 팝업을 짝지어보자. hellow 팝업을 여는 button bye 팝업을 여는 button $(function(){ var btnClass=""; var popClass=""; $('.popBtn').on('click', function(){ btnClass = $(this).attr('class'); popClass = btnClass.split(/\s+/); $('.popWrap.'+popClass[1]).show(); $('.html, body').css('overflow', 'hidden'); }) $('.popX').on('click', f.. 2022. 1. 27. 이미지 파일 업로드/프리뷰/삭제/드래그로 위치변경 밍구몬님의 코드 활용 ming9mon.tistory.com/94 jQuery 파일 업로드 미리보기(preview) 이 예제에서는 multiple 속성을 이용하였다. multiple 속성은 한번에 파일을 여러개 올릴 수 있도록 해주는 속성이다. multiple 속성은 크롬은 6.0 이상 IE는 10.0 이상부터 지원한다고 한다. ming9mon.tistory.com html + css(filebox는 글 참고) .inputFile, #Preview, #Preview li{ float:left } .inputFile{ margin-bottom: 10px; } .addImgBtn{ width: 80px !important; height: 80px !important; line-height: 71px !impo.. 2021. 5. 12. checkbox 전체선택/해제 체크박스 전체선택/해제 개별 체크박스 선택 시, check all 해제 var chkBox = $('input[name=Member]'); var checked = ''; $('#ChkAll').on('click', function(){ if($(this).prop('checked')){ chkBox.prop('checked', true); }else{ chkBox.prop('checked', false); } }) chkBox.on('change', function(){ checked = $('input[name=Member]:checked').length; if(chkBox.length == checked){ $('#ChkAll').prop('checked', true); }else{ $('#ChkA.. 2021. 5. 11. 하나의 요소에 removeClass와 toggleClass 사용하기 select 모양의 div menu 작업 시 사용 select를 클릭하면 해당 옵션 외 다른 옵션창 닫힘 해당 select 한번 더 클릭하면 해당 옵션도 닫힘 not($(this))로 제어가능 $('.on').on('click, touchstart', function(){ $('.on').not($(this)).removeClass('on'); $(this).toggleClass('on') }) 2020. 12. 3. touchmove로 touchstart 제어하기 스크롤(touchmove)과 클릭(touchstart)의 구분을 할 때 유용한 코드 특히 상세검색 모바일 작업 시 꼭 필요. var touchmove; $('#on').find('li').on({//터치대상 touchend:function(){ if(touchmove != true){ //touch시 액션 } }, touchmove:function(){ touchmove = true }, touchstart:function(){ touchmove = false } }) 2020. 12. 3. 이전 1 2 다음
