slider2 이미지 슬라이더 만들기 적용 순서(상세 이미지) 1. html 파일 작성 후 2. margin, padding 0으로 적용 / list 목록 점 없애기 * { margin: 0; padding: 0; } .slider>ul { list-style: none; } 3. 슬라이더(div)가 들어갈 사이즈(가로, 세로) 지정 overflow: hidden;넘치는 부분은 숨김 처리, border-radius: 20px; 테두리 둥글게 .slider { position: relative; overflow: hidden; width: 600px; height: 400px; border: 1px solid salmon; border-radius: 20px; } 4. 슬라이더 화면 너비와 높이 지정, 슬라이더 화면의 개수 * 100%로 계산 .slider>ul { .. 2023. 2. 27. 이미지 슬라이더 만들기 이미지 슬라이더 만들기 슬라이더를 만드는 방법은 매우 많다. 라디오버튼, 비순서목록, 레이블을 활용하는 방법 기존템플릿 활용하는 방법 bxSlider, boostsrtap 등 CSS 파일 @charset "UTF-8"; /* 전체 페이지에 적용할 스타일- 여백제거 */ * { margin: 0; padding: 0; } /* 리스트 항목의 스타일 변경 */ .image_slider>ul { list-style: none; } /* 슬라이더가 들어갈 공간(div)에 대한 설정*/ .image_slider { position: relative; overflow: hidden; width: 600px; height: 400px; border: 1px solid; } /* 슬라이더 화면의 너비와 높이 설정 슬라.. 2023. 2. 27. 이전 1 다음
