728x90 > IT 노트35 [CSS] 피그마 글자 Stroke 효과 준 거처럼 꾸미기 stroke 효과 hover 하고 같이 사용해서 마우스 올리면 스트로크도 같이 뜨게 함. 해당 CSS .navbar-under a:hover { color: orange; /*찐한효과 */ /* -webkit-text-stroke: 1px rgb(255, 0, 0); */ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000; } 1) -webkit-text-stroke 사용 .link:hover { color: yellow; /* 호버 시 글자 색상 변경 */ -webkit-text-stroke: .. 2024. 3. 26. [JS / CSS] 캐러셀 만들기 (다음 버튼) [JS / CSS] 캐러셀 만들기 (버튼 클릭) (tistory.com) [JS / CSS] 캐러셀 만들기 (버튼 클릭) 캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-box img { width: 100%; height: 300px; } .slide-box { width: 100vw; float: left; } .slide-container { width: 300vw jamongsoda.tistory.com 참고 자료 다음버튼 만들기 1. 다음버튼 누르면 - 다음 버튼을 먼저 찾는다. 2. 지금보이는 사진이 1이면 2번사진 보여주세요 - if 문 활용 3. 지금보이는 사진이 2면 3번사진 보여주세요 지금 보이는 .. 2024. 3. 24. [JS / CSS] 캐러셀 만들기 (숫자 버튼) 캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-box img { width: 100%; height: 300px; } .slide-box { width: 100vw; float: left; } .slide-container { width: 300vw; transition: all 1s; } .slide-box img { width: 100%; } 이미지 사이즈 일정하게 만들기 이미지 브라우저에 꽉 차게 만듦 .slide-box { width: 100vw; float: left; } .slide-container 너비를 300vw로 설정함으로써, 이 컨테이너는 뷰포트의 세 배 너비를 가지게 됩니다. 이는 세 개의 슬.. 2024. 3. 24. [JS] 타이머 설정하기 (몇 초 뒤에 / 몇 초 마다) X초 후에 코드 실행 setTimeout() 1) 첫 번째 파라미터는 무조건 콜백 함수. 2) 두 번째 파라미터는 초 단위 setTimeout(function(){ 실행할코드~ }, 기다릴시간); 5초 후 숨겨달라고 실행하기 hide() = display : none; 활용 setTimeout(function(){ $('.alert').hide(); }, 5000); 5초 후에 코드를 실행 X초마다 코드를 실행 setInterval() setInterval(function(){ 실행할코드~ }, 기다릴시간) 1초마다 5라는 문자를 1씩 감소 5초 이내 구매시 사은품 증정 var count = 5; setInterval(function(){ count -= 1; if (count >= 0){ documen.. 2024. 3. 23. [JS] 다크모드 설정하기 다크 모드 만들기 Dark var count = 0; $('.badge').on('click', function(){ count += 1; if (count % 2 == 1) { $('.badge').html('Light'); } else { $('.badge').html('Dark') } }); 변수(count) 에 클릭 몇 번 했는지 그 숫자를 담아준다. 그리고 숫자를 .badge 라는 클래스를 가진 버튼을 클릭할 때마다 count + 1 해주므로 숫자를 +1 씩 증가시켜준다. if 문 사용 ) 그리고 2로 나눠 떨어지지 않고 1이라는 나머지가 나오면 Light 로 글자 변경 그게 아니면 ( 2로 나눠 떨어지지 않고 1이라는 나머지가 나오지않으면 ) html 을 Dark 로 변경 1 을 2 로 나누면.. 2024. 3. 23. [JS] 아이디, 비번 입력 확인 (공백체크) 아이디 입력 확인 HTML 전송 닫기 JS $("form").on("submit", function (e) { if (document.getElementById("email").value == "") { alert("아이디입력안함."); e.preventDefault(); } }); e.preventDefault(); 사용해서 폼 전송 막기. 아이디와 비번확인 공백체크 JS $("form").on("submit", function (e) { if (document.getElementById("email").value == "") { alert("아이디입력안함."); e.preventDefault(); } if (document.getElementById("pw").value == "") { alert(".. 2024. 3. 22. 이전 1 2 3 4 5 6 다음 728x90
