분류 전체보기
-
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..
-
[내돈내산 맛집] 신사동 가로수길 맛집 - 스페인클럽 가로수본점Yeol/맛집 2023. 4. 23. 15:01
스페인클럽은 정말 오랜만에 가본다. 거의 9년전쯤 갔나..ㅋㅋ 외식트렌드를 거스르는 가로수길 맛집 고인물! 스페인클럽 주문메뉴 - 해산물 빠에야 39,000원 - 양송이 타파스 18,000원 - 바지락 베르데 소스 대구요리 29,000원 - 양젖치즈를 곁들인 구운가지요리 15,500원 - 텍스트북 CS , 콜키지 30,000원 - 크리스티앙 샤블리스, 콜키지 30,000원 테이블 세팅! 와인은 스페인클럽 방문전 와입샵에가서 구입하였다! 와인샵 추천으로 산 샤블리스, 3만원대 구입 그냥 무난했다!.. 마음같아선 더 좋은걸 사고싶었지만.. 가벼운 지갑사정으로.. ㅎㅎ.. 내가 제일 좋아하는 텍스트북! 오크바닐라향이 참 좋은 와인이다. 이것또한 와인샵에서 6만원후반대에 구입, 이제는 너무 유명해져서 모르는 사..
-
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..