HTML jQuery Cookie라는 기능을 이용하여 하루만 혹은 기간을 정하여 모달창을 띄울 수 있다. jQuery기능을 기본적으로 사용하기에 jQuery도 로드해야 한다. 오늘 그만 보기 원하는 모달을 마크업 한다. 구현하고자 하는 기능은 화면이 처음 로딩됐을 때 모달이 뜨며 스크롤이 안돼게 고정시키는 것(클릭 등은 모달의 반투명 배경으로 자연스럽게 막힘) body영역에 스크롤을 막을 함수를 onload를 사용하여 불러와준다. 클릭(a링크)했을 때 상단으로 올라가지 않도록 javascript:; 입력 onload 참고페이지 https://itworldyo.tistory.com/101 href="" 참고 페이지 https://minimal-dev.tistory.com/28 a href="#", void..

1) img에 svg 파일을 넣는다 2) 원하는 색상의 hex값을 아래 컨버터 사이트에 넣고 filter값을 얻는다 https://angel-rs.github.io/css-color-filter-generator/ CSS Color Filter Generator RGB rgb(0, 0, 0) Copy HEX #000 Copy angel-rs.github.io 3) css에 filter값을 입력한다 (hover, color 등) img:hover { filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2680%) hue-rotate(262deg) brightness(87%) contrast(96%); }

HTML (기본 스와이프 마크업) 1 2 3 CSS /* 프로세스바 위치 및 크기 조정 */ #process .pro_pagination2 { position: absolute; top: 695px; width: 100%; height: 2px; } /* progressbar 배경색 (채워지기 전 바탕색) */ .swiper-pagination-progressbar { background: rgba(158, 158, 158, 0.178); } /* progressbar 채워지는 색 */ .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: var(--whoz-purple); } JS var process..

input#birth::-webkit-calendar-picker-indicator { position: absolute; right: 20px; background: url(../image/calendar.png); background-repeat: no-repeat; } background에 원하는 이미지를 삽입해서 변경한다 position으로 원하는 위치에 배치할 수 있다 결과물

HTML 클릭하면 display:none을 block로 변경 display:none/block 처리 될 영역 CSS .hidden { display: none; } .appear { animation: fade-in 1s; animation-fill-mode: forwards; display: block; } .disappear { animation: fade-out 1s; animation-fill-mode: forwards; } @keyframes fade-in { from {opacity: 0;} to {opacity: 1;} } @keyframes fade-out { from {opacity: 1;} to {opacity: 0;} } JS const button = document.querySel..

swiper HTML Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 1) 단색 배경 적용 CSS /* 선택안된 기본 불릿 */ .swiper-pagination-bullet { /* 원하는 이미지의 사이즈 */ width: 50px; height: 50px; opacity: 1; background: transparent; border-radius: 0; } /* 선택된 불릿 */ .swiper-pagination-bullet-active { background: red; background: linear-gradient(315deg,#17a7c6,#1b39ab); /* 적용 안됨 */ } jQuery var swiper = new Swiper(".mySwiper2..