여리 Repository 여리 Repository

html

• 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
• JS / 웹접근성 팝업에서 탭 이동시 벗어나지 않게 하기

  Web dev/JavaScript 2023. 6. 24. 14:17

  작업을 하다보면 팝업창(모달)을 띄어야 할 때가 많다. 웹접근성을 고려했을때 팝업창을 열면, 팝업창으로 포커스 해주고 아웃라인(시각적),탭인덱스0(키보드접근성) 처리를 해줘야 한다. 그래야 팝업을 열고 나서 탭을 눌러이동하면 팝업으로 이어진다. 문제는 팝업을 열고 탭을 계속누르면 포커스가 팝업창 밖으로 이동한다. 그래서 팝업을 닫기 전까지는 팝업창을 빠져 나가지 못하도록 처리해줘야 한다. 1) 모달의 닫기 버튼은 마크업에서 하단에 배치한다. 2) 아래와 같이 스크립트를 짜준다. $(".modal-wrap").off('keydown.modal').on('keydown.modal', function(e) { if ($(".modal-wrap").is(':focus') && e.shiftKey && e.key..

  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
• JavaScript / fetch() 로 html include 하기

  Web dev/JavaScript 2022. 4. 16. 00:35

  이전에 php로 include 하여 html을 불러와 사용해보았다. (무료) 이번에는 깃헙페이지에 배포를 하려하는데 php는 지원을 하지 않는다고 한다. 그래서 헤더와 풋터를 자바스크립트 fetch()로 불러왔다. html을 불러올 스크립트를 따로 빼주었다. //inc.js fetch("./inc/header.html") .then(response => { return response.text() }) .then(data => { document.querySelector("#header").innerHTML = data; }); fetch("./inc/aside.html") .then(response => { return response.text() }) .then(data => { document.qu..

  Read More