마우스 휠 애니메이션 .scroll_down{position: absolute; bottom: 20px; left: 0; right: 0; margin: 0 auto;}.scroll_down .scroll{width: 28px; height: 48px; border: 2px solid #fff; border-radius: 25px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}.scroll_down .scroll .scroll_dot{width: 5px; height: 5px; border-radius: 50%; background: #fff; display: block; animation: scroll 1.15s linear inf..
아코디언 메뉴 01번이 열려있게 수정한 아코디언 메뉴 01 Investment in SMEs Expanding into the U.S. Market We provide capital and strategic guidance to Korean SMEs entering the North American market, helping them navigate complexities and achieve sustainable growth. ..
input radio 라디오 커스텀 /* 라디오 버튼을 네모로 변경 */input[type="radio"] {-webkit-appearance: none; /* 브라우저 기본 스타일 제거 */-moz-appearance: none;appearance: none;width: 20px;height: 20px;border: 2px solid #d6d6d6;border-radius: 3px; /* 모서리를 살짝 둥글게 */display: inline-block;vertical-align: middle;margin-right: 5px;position: relative; /* 체크 표시 위치를 잡기 위해 position 속성 추가 */}input[type="radio"]:checked {background-color: #157eaa; /* 선택된 상..
input checkbox 체크박스 커스텀 input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 10px;}input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: t..
input date 아이콘 커스텀 input[type="date"]::-webkit-calendar-picker-indicator,input[type="date"]::-webkit-inner-spin-button {    display: none;    appearance: none;}input[type='date'] {  position: relative;  width: 100%;  background: url('../img/day.png') no-repeat right 10px center;  width: 24px;  height: auto;  background-color: #fff;}  input[type='date']::-webkit-calendar-picker-indicator {position: absolute;left: 0..
세로로 무한 흐르기 /client1.png" alt=""> /client2.png" alt=""> /client3.png" alt=""> /client4.png" alt=""> /client5.png" alt=""> /client6.png" alt=""> /client7.png" alt=""> /client8.png" alt=""> /client1.png" alt=""> /client2.png" alt=""> ..
가로로 무한 흐르기 WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE ARE DIFFERENT. WE AR..
video 태그 아이폰에서 전체화면 없이 재생하기
png 이미지에 그림자(drop-shadow)넣기 img{filter: drop-shadow(0px 0px 10px #c3c3c3);}
카운트업 쓰기 30,000
input time 아이콘 커스텀 input[type="time"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-inner-spin-button { display: none; appearance: none; } input[type='time'] { position: relative; width: 100%; background: url('../img/time.png') no-repeat right 10px center; width: 24px; height: auto; background-color: #fff; }
fancy 쓰는법
유튜브 동영상 자동재생 (음소거x) src 주소 안 뒤에 붙여넣기 &loop=1&rel=0&showinfo=1&controls&mute=0&autoplay=1
스크롤(scroll)시 head/상단에 class 추가 100vh 스크롤했을때 클래스 추가
G마켓 산스 웹폰트 https://codepen.io/her2237/pen/VweoZzL 지마켓 전체...codepen.io @font-face { font-family: "GmarketSansLight"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff"); font-weight: normal; font-style: normal;}@font-face { font-family: "GmarketSansMedium"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1...