추가 내용e.preventDefault()와 e.stopPropagation()의 차이e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.(출처 : https://pa-pic

let img = document.querySelector(‘.선택자‘);let hei = img.style.height;출처https://newline.tistory.com/134

!codepenpowerwmj/embed/MWQjxop?default-tab=html%2Cresult

input[type=checkbox] {accent-color: red;} input[type=radio] {accent-color: green;} input[type=range] {accent-color: rgb(0,0,255);} progress {accent-

출처 : https://pxd-fed-blog.web.app/a11y-swiper-slide/앞서 swiper option 정리하면서 a11y 의 사용법을 잘 모르겠어서 검색해서 찾은 내용나는 단순하게 이전/다음 슬라이드 정도의 내용을 넣는 정도만 생각했는데

direction: "vertical", // 슬라이드 방향slidesPerView: 3, // 한 화면에 보일 슬라이드 수slidesPerView: "auto", // 한 화면에 보일 슬라이드를 자동으로 계산spaceBetween: 30, // 슬라이드 사이 간격c

!codepenpowerwmj/embed/dyjvWZK?default-tab=html%2Cresult

$('.main-s').slick('slickGoTo', idx);slickGoTo : 위에서 지정한 dots를 클릭했을때 해당 순서의 main-s의 슬라이드로 이동

arrow : //화살표 넘기기 여부 (default: false), dots : //네비게이션버튼 (default: false), slidesToShow : //한번에 보여줄 사진의 수, slidesToScroll : //한번에 넘길 사진의 수, autoplay :

let today = new Date(); // today 변수에 새로운 날짜 지정let dayStr = '일','월','화','수','목','금','토' // dayStr 요일 변수 지정$('.date div').html(\`${today} // tod

!codepenrecordboy/embed/JBmvpp?default-tab=html%2Cresult

!codepenhi-im-si/embed/nBeYqr?default-tab=html%2Cresult

선택자.classList.add(); //추가선택자.classList.toggle(); //클래스 없으면 넣어주고 있다면 삭제한다.선택자.classList.remove(); //클래스 삭제선택자.classList.cotains(); //클래스의 존재 유무에 따라 tru

Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다. Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않습니다. 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메

forEach 문을 활용한 탭메뉴 예시idx를 통해 클래스 삭제 / key 값을 통해 클래스 추가

!codepen[powerwmj/embed/WNXBxpb?default-tab=html%2Cresult] 인터넷 서핑 중 이쁜 배경 효과를 발견 해당 소스를 정리해 보았다. 출처 - https://www.autoinside.co.kr/main.do

CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.!codepenpowerwmj/embed/ExbdEMy?default-t

See the Pen 카드 뒤집기 by powerwmj (@powerwmj) on CodePen. <script async src="

인풋은 숨겨놓고 라벨 디자인으로 ON/OFF 모양 그려줌

css를 활용한 text animationh2를 translateY 100% 에서 translateY 0으로 이동0% {transform: translateY(100%);}100% {transform: translateY(0);}h2를 감싼 div는 overflow: