분류 전체보기
-
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..
-
[내돈내산 맛집] 흑석동 맛집 - 더큐어링Yeol/맛집 2023. 4. 2. 23:37
캐치테이블로 예약하고 크리스이브날 방문하였다. 예약 놓칠까봐 노심초사 하면서 예약오픈런을 했다! 간신히 세이브! 더큐어링 - 잠봉, 과카몰리, 빵 (웰컴 푸드) - 프라임등급의 채끝 스테이크 - 빠데 드 카나흐 - 화이트라구 뇨끼 - 블랙케첩 가지그라탕 - 훈연한 광어 까르파쵸 - 베이컨 - 브래드엔버터 1병 - 하우스와인 1병 - 스파클링와인 2잔 크리스마스라고 선물까지 준비해주는 더큐어링 섬세합니다. 선물은 루돌프 머리띠와 산타모자였다! 이런 이벤트 너무 좋은것 같다! 역시 흑석동 맛집 주문을 마치고 잠봉과 블랙올리브 타페나드와 빵이 제공되었따. 잠봉, 블랙올리브 타페나드, 빵은 웰컴푸드 기본제공 된다! 인심 무엇! 타페나드 담백하니 정말 맛있다! 잠봉도 촉촉하니 서울에 있는 사퀴테리집 중 잠봉 제일..
-
[내돈내산 맛집] 합정맛집 - 카밀로 라자네리아Yeol/맛집 2023. 4. 2. 22:52
오랜만에 스승님 뵈러 합정으로 출동! 캐치테이블로 12시 예약을하고 카밀로 라자네리아 2호점에 방문하였다! 카밀로 라자네리아 - 생면 봉골레 21,000원 - 새우 까넬로니 20,000원 - 또르뗄리니 만원대.. - 와인은 지아노 마샤렐리(몬테폴치아노) 65,000원? 아마도.. 카밀로 라자네리아는 메뉴주문을 하면 스프와 샐러드를 기본으로 제공해주는 것 같다. 샐러드 촵촵 스승님찬스! 서비스라고 주셨는데 설명을 잘못들었다. 약간 생선향도 나고 멘보샤 같기도하고 ㅎㅎ.. 주문한 봉골레와 까넬로니! 라자냐도 먹어보고 싶었는데 다음 방문때 먹어봐야징 봄이라 그런가 바지락이 아주 크고 실했다. 파스타와 곁들어 마시기 위해 무겁지 않은 몬테폴치아노로 결정! 몬테폴치아노 치고 바디감도 있었고 맛있었다! 왕왕 맛있는..
-
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..
-
JS / 바닐라로 video play(), pause() 구현하기Web dev/JavaScript 2023. 2. 26. 16:18
커서를 올리면 동영상을 재생하도록 구현해보았다. 제이쿼리를 사용했으면 get(0) 을 사용해 간단하게 구현 했었겠지만 바닐라로만 작업하기로 했었다. 비디오는 promise를 반환하기 때문에 비동기 처리를 하여 구현하면 된다. 처음 랜딩 된 후 바로 커서를 올리면 아직 로드되지 않았다는 에러가 뜨고 영상재생이 되지않았다. 동영상 크기가 크거나 리스트가 많아서 그런 이슈가 생긴줄 알았는데 video태그에 muted(음소거) 속성을 추가하면 에러없이 잘동작했다. 동영상이 다운로드되는 시점을 체크하려고 삽질했지만 그게 아니였던것이다..ㅋㅋ videoEvt:function(){ let item = document.querySelectorAll("#video_list .item"); for(i = 0; i < it..
-
JS / 바닐라로 아코디언 메뉴 만들기카테고리 없음 2023. 2. 26. 16:00
이번 퍼블건에서는 제이쿼리를 사용하지 않고 바닐라로 해보기로 하였다. 제이쿼리를 사용했으면 간단한 구현이였지만 바닐라로 하려니 꾀나 복잡해졌다. max-height:0, transition, oaveflow:hidden CSS처리를 해줘야한다 Langage 한국어 한국어 ENGLISH 中文简体 中文繁體 로그인 공지사항 공지사항 FAQ 매거진 사용 가이드 GOOD & BAD 이벤트 업로드 업로드 가이드 다운로드 가이드 공지사항 가이드 FAQ 가이드 #header .gnb_mo .depth{max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out;} function gnbEvt(){ let category = document.querySel..