여리 Repository 여리 Repository

CSS

• JS / checkValidity(), input required 폼태그 e.preventDefault() 이슈

  Web dev/JavaScript 2024. 2. 14. 22:38

  파이어베이스로 백엔드를 만들고 프로필 수정기능을 만들던 중 이슈가 생겼다. input 태그의 속성인 required 속성을 사용하여 폼태그의 유효성 체크를 했는데, 버튼 클릭시 e.preventDefault(); 를 사용하면 required가 동작안하고, e.preventDefault();를 빼면 DB업데이트가 안되었다. 그래서 검색하던중 checkValidity();를 체크해 required 분기 체크를 할 수 있었다. required 체크가 다되면 e.preventDefault() 후에 DB업데이트 코드실행 // required 체크가 다되면 e.preventDefault(); 실행 $('#updateProfile').click(function(e){ const form = document.query..

  Read More
• JS / modal scroll방지시 화면 울렁이는 이슈

  Web dev/JavaScript 2023. 6. 25. 16:22

  모달을 구현하다보면 scroll을 안되게 막아야 할때가 있다. 스크롤을 막으면 기존에 있던 스크롤이 사라지면서 뚱땅거린다. 뚱땅거림을 방지하기 위해 스크립트를 짜보았다. /* 보통 height:100%;로 처리하지만 다르게 처리해보았다 */ .scroll_stop { overflow: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } let posY $('.sku_btn').on('click', () => { posY = $(window).scrollTop(); $('.sku_modal').addClass('on'); $("body").addClass('scroll_stop'); $('.scroll_stop').css('top',-posY..

  Read More
• CSS / typeit 라이브러리로 html 타이핑 효과 주기

  Web dev/HTML&CSS 2023. 4. 23. 22:28

  typeit 으로 간단한 타이핑효과를 구현했다. typeit 공홈에 가면 스크립트까지 짜준다! 개꿀!.. // CDN으로 import CSS는 그냥 하고싶은대로 스타일링 해주면 된다! 개꿀 속도,딜레이,삭제등 원하는대로 타이핑 효과를 표현할 수 있다!. 부가적인 기능은 typeit 공홈을 정독하면 된다! 개꿀 new TypeIt("#introTxt", { speed: 120, }) .type("안녕하세요. :)",{delay: 400}) .delete(2 ,{delay: 700}) .delete(7) .type("프론트엔드 개발자 ") .type("양홍열입",{delay: 500}) .delete(5,{delay: 300}) .type("로 성장중인 ") .type("웹 퍼블리셔 양홍열입니다.") .go..

  Read More
• CSS / 따라다니는 마우스 포인터 커스텀하기

  Web dev/HTML&CSS 2023. 4. 23. 22:15

  포트폴리오 인트로 페이지를 우주느낌으로 하였다. 그리고 커서포인터를 빛으로 표현해보았다. #cursor-custom { height: 30px; width: 30px; pointer-events: none; position: fixed; background: #fff; border-radius: 50%; transform: translate(-10%,-10%); box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff, 0 0 150px #fff; z-index: 10; cursor: none; } @media (max-width:1024px) { #cu..

  Read More
• JS / selectBox custom하기

  Web dev/JavaScript 2022. 10. 30. 12:54

  셀렉트박스를 커스텀해보았다. 처음엔 w3스쿨스에서 긁어다가 적용해보려했는데 개뿔 더 거지같다 알아보기도힘들고 ㅋㅋ 그냥 만들어보기로 결심! select 태그를 쓰지않고 만들어 보았다. 1. value를 담아줄 인풋 생성 2. option을 list태그로 생성 3. 옵션을 선택하면 값을 input에 전달 인풋을 두개 만들어 직접입력 칸까지 만들어 보았다. // email로 예제를 만들어 보았다. // list에 data-select에 value를 넣어준뒤 선택되면 인풋에 값으로 넘겨준다. 직접입력 naver.com google.com daum.com nate.com kkkkkkkkkkkkkkkkkkkkkkkk.com aaa.com aaa.com aaa.com aaa.com aaa.com aaa.com aa..

  Read More
• CSS / Scollbar custom 스크롤바 커스텀하기

  Web dev/HTML&CSS 2022. 10. 30. 12:08

  브라우저 마다 기본으로 제공되는 스크롤 모양이 다르다. 특히 윈도우는 쫌 못생겼다 ㅋㅋ 1. width,border-radius,border-width로 디자인에 맞게 커스텀 해주면된다. /* 스크롤 바 커스텀 */ .scrollbar_custom::-webkit-scrollbar {width: 18px;} .scrollbar_custom::-webkit-scrollbar-track {border-radius: 10px;} .scrollbar_custom::-webkit-scrollbar-thumb {background-color: #bcc5db; border-radius: 10px; border: 7px solid #fff; } 2. 스크롤을 적용시킬 박스에 스크롤바 커스텀 클래스를 주고 overflo..

  Read More
• Error / React getElementByClassName() / Uncaught TypeError: Cannot read properties of undefined (reading 'add') 해결

  Web dev/Error 2022. 3. 30. 18:48

  리엑트로 퍼블리싱중 .. Aside를 구현하는 중 버튼을 누르면 클래스를 주려했다. 처음엔 이렇게 구현을 했다. const handleAide = (e) =>{ const asideWrap = document.getElementsByClassName(aside.aside_wrap); const deemed = document.getElementsByClassName(aside.deemed); console.log(asideWrap) document.body.classList.add(aside.stop) asideWrap.classList.add(aside.aside_actve) deemed.classList.add(aside.on) } 'Uncaught TypeError: Cannot read prope..

  Read More
• React / 아코디언 메뉴 만들기

  Web dev/React 2022. 3. 30. 18:22

  리엑트로 퍼블리싱중 사이드바를 구현하면서 아코디언을 구현해봤다. 제이쿼리를 쓰면 편하겠지만 제이쿼리를 안쓰려고 노력중이다. 처음엔 tab을 만들어본적이 있어서 useState를 사용해 구현해보려햇는데 젠장 다같이 동작해서 망했다 그렇다고 각메뉴에 useState를 사용하면 오히려 더 지저분해질것 같아서 그냥 구현해보았다. w3school를 참조했다. 1. for문을 돌려 각 리스트에 번호를 메긴뒤 그것이 클릭되면 이벤트를 주었다. 제이쿼리에 길들여져 그냥 구현하라 했으면 못했을것같다. 코린이는 웁니다... 여기서 문제는 예제는 this로 셀렉을 하던데 나는 이상하게 못가져오는것이다.. 자바스크립트 this는 어려워.. e.target으로 하니까 잘가져온다. useEffect로 로드 되었을때 한번 동작시켜..

  Read More