728x90 반응형 > IT 노트/활용9 [SCSS] span 태그로 햄버거 메뉴 만들기 HTML span 으로 햄버거 모양 만들기SCSS.banner-header { display: flex; align-items: center; position: relative; width: 100%; .hamburger_menu { width: 80px;// span태그에 magin을 줘서 높이 맞춰줘서 height를 굳이 쓰지 않음.// width를 부여해서 메뉴 바의 가로 길이 지정 // span 태그에 스타일 적용 span { display: block; //display: block을 사용하면 블록 요소로 변환되어, 각각의 span이 새로운 줄에서 시작 height:.. 2024. 6. 21. [CSS] 마우스 커서 바꾸기 (img) 마우스 커서 바꾸기 (img) body { cursor: url("banner/mcdonaldslogo\ 60.png"), default; } 64x64 이내의 이미지로 설정 바디 태그에 적용. 2024. 3. 29. [CSS] 동글동글 캐러셀 버튼 만들기 단순 원형 캐러셀 버튼 만들기 HTML 짜고 시작 CSS 버튼 동그랗게 적용 /* 캐러셀 버튼 디자인 */ .carousel-button button { width: 10px; /* 버튼의 너비 */ height: 10px; /* 버튼의 높이 */ border-radius: 50%; /* 원형 모양을 만듭니다 */ background-color: rgb(0, 0, 0); /* 버튼의 배경색 */ cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */ margin: 0 1px; /* 버튼 사이의 간격 */ border: none; /* 버튼 테두리 제거 */ opacity: 0.5; /* 버튼 불투명도를 50%로 설정 */ } .carousel-button button:hover { ba.. 2024. 3. 26. [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 다음 728x90 반응형
