코딩하는 둥둥

웹 페이지 내에서 원하는 elements에 접근하는 방법 getElementById 요소에 id값이 있을 경우 사용 가능 id : unique값 스크립트가 간단할때는 괜찮지만 이름이 충돌할 가능성이 있기때문에 추천하는 방식이 아님 코드만 보고 변수의 출처를 알기 힘듬 querySelectorAll 요소의 자식 요소 중 주어진 css 선택자에 대응하는 모든 요소를 반환 :hover나 :active와 같은 가상 클래스에도 사용이 가능 document.querySelectorAll(':hover') : 마우스 포인터가 위에 있는(hover 상태) 요소 모두를 담은 컬렉션이 반환 querySelector 주어진 css 선택자에 대응하는 요소 중 첫 번째 요소를 반환 해당하는 요소를 찾으면 검색을 멈춤 eleme..

className 과 classList className class 문자열 전체를 변경할 수 있다. element.className = 'class명' : class 문자열 전체가 class명으로 변경됨 classList 클래스 하나만 추가하거나 제거하고 싶을때 사용한다. element.classList.add('class명') : 기존 class 속성을 유지한 채로 새로운 class를 추가 element.classList.add/remove('class명') : 기존의 class 속성은 유지되며, 인자로 사용된 class 값만 삭제 element.classList.toggle('class명') : 특정 동작에 따라 class값이 추가/삭제. class값이 있을 경우 해당 class값을 삭제하고 fals..

요구사항 슬라이드의 오른쪽에 그라데이션/페이딩 효과 주기 해결 방법 https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel mask속성에서 linear-gradient사용하기 .swiper-container { mask-image: linear-gradient(to right, white 90%, transparent 97%); } References. https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel

🔗 https://sir.kr/qa/479420 처음에는 중앙정렬로 잘 노출되다가 슬라이드를 하나 넘기면 위치가 이상해진다. swiper 슬라이드 가운데 정렬 > SIR 이런 슬라이드 형태를 구현하고자 하는데요 [code] var edtSldCnt = new Swiper(".edtSldCnt", { slidesPerView : 'auto', slideToC sir.kr 위 링크와 같은 형태의 슬라이드를 구현하려고 했고, 같은 형태의 오류가 발생했다. 링크에서는 slideChange로 슬라이드 이동 시 active 슬라이드의 이미지 크기를 다시 원래대로 돌려주는 방법을 사용해보라는 답변이 달렸지만, 나의 경우 이미 slideChange를 통해 acitve 여부에 따라 이미지의 크기를 변경하고 있는 상태였다..

watchOverflow: true와 loop:true를 함께 사용하기 요구사항 슬라이드가 한 개일때 페이지네이션과 버튼 보이지 않도록 구현 → watchOverflow: true 슬라이드가 여러개 있을 때 마지막 슬라이드에서 스와이프 시 첫 슬라이드로 이동 → loop:true Swiper Options watchOverflow: true : 슬라이드가 1개일때 pager와 button 숨김 loop:true : 슬라이드 반복 여부. 위 요구사항을 구현하기 위해 watchOverflow: true와 loop:true를 같이 사용하려고 했는데 watchOverflow: true와 loop:true는 같이 사용할 수 없었다. 두 옵션을 같이 사용할 경우에는 watchOverFlow가 동작을 멈추는 문제가 ..

Swiper 속성 loop : 슬라이드 반복 여부. true/false freeMode : 슬라이드 넘길때 위치 고정 여부. true/false autoplay: 자동슬라이드. true/false slidesPerView: 한 번에 보여지는 슬라이드의 수. 기본값 auto spaceBetween : 슬라이드 사이 여백 centeredSlides : active한 슬라이드를 중앙에 배치(센터모드). true/false pagination: 페이징 설정 navigation: 네비게이션 설정 breakPoints : 화면 크기에 따라 보여지는 모습이 바뀜(반응형 설정). width값으로 조정. roundLengths: 일반 해상도 화면에서 텍스트가 흐려지는 것을 방지하기 위해 슬라이드 너비와 높이 값을 반올림..

console.log() 입력 시 undefined가 결과값으로 뜨는 이유는? undefiend는 반환할 결과값이 없을때 나오는 것으로, console.log()명령어는 어떤 값이 보이도록 출력하는 역할만 할 뿐 그 자체의 결과값은 없다. undefined와 null의 차이 undefined 반환할 결과값이 없다. 반환할 결과값이 없기때문에 자료형 또한 알 수 없다. null null이라는 값이 담긴것 자료형은 object이다. undefined와 null값은 빈 값이라는 공통점이 있기때문에 ==연산자를 사용하면 true 결과값이 나온다. 하지만 엄연히 다른 값이기 때문에 ===연산자를 사용했을 경우에는 false 결과값이 나온다. 정리 변수 존재 값 할당 자료형 undefined O X undefine..

location.href 전체 URL을 포함하는 문자열을 반환하고 href를 업데이트할 수 있도록 한다. 새로운 페이지로 이동한다. 속성의 형태 location history가 기록되어 사용자가 뒤로가기 버튼으로 이전 페이지로 돌아갈 수 있다. location.replace location의 현재 리소스를 제공된 URL의 리소스로 바꾼다. 기존 페이지를 새로운 페이지로 변경시킨다. 메서드의 형태 현재 페이지를 사용한 후에는 location history(session)에 저장되지 않아 사용자는 뒤로가기 버튼을 사용해 이전 페이지로 돌아갈 수 없다. References. https://developer.mozilla.org/en-US/docs/Web/API/Location/href location.href..

Archiver 🔗 Link archiver a streaming interface for archive generation. Latest version: 5.3.1, last published: 10 months ago. Start using archiver in your project by running `npm i archiver`. There are 4110 other projects in the npm registry using archiver. www.npmjs.com 아카이브 생성을 위한 스트리밍 인터페이스 TAR 및 ZIP 아카이브를 즉시 지원 registerFormat에 추가 형식 등록 가능 isRegisteredFormat에 새 형식을 등록하기 전에 형식이 이미 존재하는지 확인 가능 ※..

URL.createObjectURL() 특정 file이나 blob🔗 객체를 url로 만들때 사용하는 메서드 주어진 객체를 가리키는 url을 DOMString으로 변환한다. 해당 url은 window창이 사라지면 함께 사라지기 때문에 다른 window에서 재활용이 불가능하며 수명이 한정되어 있다. 객체의 url 사용을 마쳤을 경우, window.URL.revokeObjectURL(objectURL);을 사용해 메모리에서 해제하는것이 좋다. References. https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL https://ohgyun.com/446 https://kyounghwan01.github.io/JS/JSbasic/Blob-..