Web dev
-
JS / swiper 옵션 정리Web dev/JavaScript 2023. 6. 11. 20:18
swiper 선언 // 일반 swiper 설정 예시 const slide = new Swiper('#test-slide', { slidesPerView : 'auto', spaceBetween : 6, }) // 변수에 담아서 활용 예시 var slideSetting = { slidesPerView : 'auto', spaceBetween : 6, loop : false, } const slide = new Swiper('#test-slide', slideSetting) swiper 옵션 slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수 spaceBetween : 6, // 슬라이드 사이 여백 loop : false, // 슬라이드 반복 여부 loopAdditionalSlides..
-
JS / sort() 매서드로 정렬하기Web dev/JavaScript 2023. 4. 30. 19:53
작품 투표를 하고, 작품의 득표수를 체크해 많은 순서대로 정렬을 해보았다. count는 문자열이라서 parseInt()로 숫자로 변행해주고 sort()하였다. $.each(categoryVal,function(optListKey,optValList){ optValList.sort(function(a, b) { let intA = parseInt(a.count); let intB = parseInt(b.count); if(intA intB) return -1; if(intA === intB) return 0; }); })
-
JS / 객제 지향 프로그래밍 추상화,캡슐화,상속,다형성Web dev/JavaScript 2023. 4. 30. 19:12
1. 추상화(Abstraction) 가상의 존재를 프로그램 내에서 사용할 용도에 맞게 적절하게 설계하는 과정, 프로퍼티와 메소드의 이름을 누구나 이해하기 쉽게 잘 지어주거나 주석을 단다. class User { constructor(email, birthdate) { // 사용자의 이메일 주소 this.email = email; // 사용자의 생일 this.birthdate = birthdate; } // 물건 구매하기 buy(item) { console.log(`${this.email} buys ${item.name}`); } } 2. 캡슐화(Encapsulation) 외부에서 프로퍼티나 메소드에 직접 접근할 수 없도록 함 class User { constructor(email, birthdate) {..
-
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..
-
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..
-
JS / 바닐라로 앵커트메뉴, 메뉴엑티브, 스티키 만들기Web dev/JavaScript 2023. 4. 23. 14:17
이전에 스티키 기능만 넣은 메뉴를 만들었다. 더불어 메뉴를 누르면 앵커드기능과 스크롤위치에 따른 메뉴 엑티브기능을 만들었다. 앵커드 기능 1) 각 컨텐츠의 위치 구하기 offsetTop; 사용, 제이쿼리는 offset().top 사용 2) scrollTo({ top:ContentsBoxPosition, behavior:'smooth'}) 메서드 사용, 스무스옵션을 안쓰면 뚝뚝 끊김. 3) 버튼들에게 이벤트리스너 주기 anchor(){ let tabBtn = document.querySelectorAll(".category_list li"); let contentsBox = document.querySelectorAll(".contents_box"); function addEvent(idx){ // le..
-
JS / 바닐라로 sticky 스티키 메뉴 구현하기Web dev/JavaScript 2023. 4. 16. 23:50
이번에는 바닐라스크립트로 스티키메뉴를 구현해보았다. 스티키메뉴를 구현하려면 스크롤좌표,메뉴의 좌표, 높이등을 구해야 하는데 제이쿼리와 어떻게 다른지 알아보았다. 1. 현재 스크롤 좌표 구하기 scrollTop, scrollTop() 차이 // 바닐라 스크립트 let scrollPosition = document.documentElement.scrollTop; // window.scrollY 익스에서 안됌 // window.pageYOffset 가능 // document.documentElement.scrollTop 가능 // 제이쿼리 let scrollPosition = $(window).scrollTop(); 2. 요소의 상단 위치 구하기 getBoundingClientRect().top, offset..
-
Error / node.js server start errorWeb dev/Error 2023. 3. 10. 16:49
express로 서버를 만들고 server를 돌렸을때 아래와 같은 에러가 발생했다. [0] Error: listen EADDRINUSE: address already in use :::5000 [0] at Server.setupListenHandle [as _listen2] (node:net:1432:16) [0] at listenInCluster (node:net:1480:12) [0] at Server.listen (node:net:1568:7) [0] at Function.listen (/Users/yanghong-yeol/Desktop/Jart-test/Jart/node_modules/express/lib/application.js:635:24) [0] at Object. (/Users/yangh..