전체보기75 슬라이드 이펙트 -07 CSS .slider__wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 800Px; height: 450px; box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4); } .slider__img { position: relative; width: 100%; height: 100%; overflow: hidden; } .slider__img img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: all 500ms eas.. 제작 2023. 4. 14. 슬라이드 이펙트 -06 CSS 네, 이 부분은 이미지 슬라이더를 구현하기 위한 CSS 코드입니다. 슬라이더를 감싸는 영역인 .slider__wrap에는 전체적인 슬라이더의 높이와 중앙정렬을 위한 display: flex 속성이 지정되어 있습니다. 이미지가 보여지는 .slider__img 영역은 position: relative로 지정되어 있으며, 이미지 움직임을 담당하는 .slider__inner 영역에는 display: flex와 flex-wrap: wrap 속성이 지정되어 있습니다. 개별적인 이미지는 .slider 클래스를 가지고 있으며, 이 외에도 이전/다음 버튼과 페이지네이션을 위한 CSS 코드가 포함되어 있습니다. HTML prev next 이 코드는 이미지 슬라이더를 구현하는 자바스크립트 코드입니다. 슬라이더의 이미.. 제작 2023. 4. 13. 슬라이드 이펙트 -05 CSS 이 코드는 이미지 슬라이더를 만들기 위한 CSS 코드입니다. .slider__wrap은 슬라이더를 감싸는 전체 영역의 크기와 정렬 방식을 설정합니다. .slider__img는 슬라이더 이미지가 보여지는 영역의 크기와 이미지가 넘치는 경우를 처리합니다. .slider__inner는 이미지가 움직이는 영역으로, 각 이미지를 담고 있는 .slider의 크기를 합쳐서 넓이를 설정하며, flex-wrap 속성을 사용해 이미지가 가로로 배열되도록 합니다. .slider는 개별적인 이미지의 크기와 위치를 설정합니다. 이 CSS 코드를 사용하면 이미지 슬라이더를 구현할 수 있습니다. HTML 이 HTML 코드는 이미지 슬라이더를 만드는데 사용될 수 있습니다. 요소는 문서에서 중요한 콘텐츠를 감싸는 역할을 합니다.. 제작 2023. 4. 12. 슬라이드 이펙트 -04 CSS 위 코드는 슬라이더(slider)를 구현하기 위한 CSS 코드입니다. 슬라이더는 이미지를 보여주는 영역과 이미지가 움직이는 영역으로 구성되어 있습니다. .slider__wrap는 슬라이더 전체를 감싸는 영역으로, 화면 전체를 차지하며 이미지를 수직, 수평 중앙으로 정렬합니다. .slider__img는 이미지가 보여지는 영역으로, width와 height로 크기를 지정하고, overflow: hidden 속성을 이용하여 이미지가 영역을 벗어나지 않도록 합니다. .slider__inner는 이미지가 움직이는 영역으로, flexbox를 이용하여 이미지들이 가로 방향으로 나열됩니다. width 속성으로 이미지들의 총 너비를 지정합니다. .slider는 개별적인 이미지를 감싸는 영역으로, position:.. 제작 2023. 4. 11. 슬라이드 이펙트 -03 CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /*이미지가 보이는 영역*/ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /*이미지 움직이는 영역*/ display: flex; flex-wrap: wrap; width: 4000px; height: 450px; } .slider { /*개별 적인 이미지*/ position: relative; width: 800px; height: 450px; } 위의 코드는 이미지 슬라이더.. 제작 2023. 4. 10. 슬라이드 이펙트 -02 CSS .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /*이미지가 보이는 영역*/ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /*이미지 움직이는 영역*/ display: flex; flex-wrap: wrap; width: 4000px; height: 450px; } .slider { /*개별 적인 이미지*/ position: relative; width: 800px; height: 450px; } 위의 코드는 이미지 슬라이더.. 제작 2023. 4. 10. 이전 1 2 3 4 5 6 7 ··· 13 다음
