728x90 반응형 캐러셀4 [JS] 캐러셀 만들기 (4개 사진)* 캐러셀 만들기 (사진4개) - 버튼 클릭으로 이동 HTML CSS /* 캐러셀 */ .container { /* max-width: 1200px; */ width: 100%; /* height: 200px; */ /* padding: 0 20px 0 20px; */ } .slide-container { width: 400vw; overflow: hidden; justify-content: center; } .slide-box { width: 100vw; float: left; /* 왼쪽으로 치우치게 해준다. */ text-align: center; padding: 0 20px; /* border-radius: 5vw; */ } .slide-box img { /* 사진 조금 잘리는 걸 아래의 코드로 해결... 2024. 3. 26. [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. [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. 이전 1 다음 728x90 반응형
