head
head 부분에 외부 CSS파일을 링크해준다.
<head>
<meta charset="UTF-8">
<title>이미지 슬라이더</title>
<!--외부 CSS 파일을 포함시킴-->
<link type="text/css" rel="stylesheet" href="slider.css">
</head>body
input 태그 4개와 label 태그 4개를 id와 for을 이용해 연결해준다.
input 태그의 첫 번째를 checked 해주면서 실행 시 첫 번째가 나타나도록 한다.
ul > li는 body상에서 구분을 위해 글씨를 작성해주었지만 CSS를 통해 가린다.
<body>
<div class="image_slider">
<input type="radio" name="pos" id="pos1" checked>
<input type="radio" name="pos" id="pos2">
<input type="radio" name="pos" id="pos3">
<input type="radio" name="pos" id="pos4">
<ul>
<li>첫 번째 화면(이미지)</li>
<li>두 번째 화면(이미지)</li>
<li>세 번째 화면(이미지)</li>
<li>네 번째 화면(이미지)</li>
</ul>
<p class="pos">
<label for="pos1"></label>
<label for="pos2"></label>
<label for="pos3"></label>
<label for="pos4"></label>
</p>
</div>
</body>CSS
편의상 한 줄로 표현한 코드 존재 유의하기!
슬라이더가 들어갈 공간(div)는 상위 공간으로서 position을 relative로 설정해주고 다음과 같이 추가적으로 작성해준다.
슬라이더 변화가 총 4개이므로 width를 400%로 설정해준다. 만약 세로로 움직이는 슬라이더를 만들고 싶다면 width가 아닌 height를 400%로 설정해주면 된다.
display none을 이용해 화면에서 보여졌던 radio button을 숨긴다.
label이 속한 p의 position을 absolute로 해준 뒤 bottom과 left 값을 지정해 하단에 배치해주고 text-align으로 중앙으로 이동시킨다.
각 슬라이더에 대한 설정을 해준다. background-color로 간단하게 지정해주었으나 image를 넣어주는 등 다양하게 꾸며줄 수 있다.
label 모양에 대해 다음과 같이 지정해주고, 각 label을 클릭할 때마다 화면이 이동될 수 있도록 margin-left로 설정한다. 이때 보여지는 화면이 슬라이더 하나에 대한 크기일 뿐, 네 가지 슬라이더는 모두 화면에 둥둥 떠있다고 볼 수 있다. 따라서 한 가지가 보이면 나머지 세 개는 가려져 있다고 해석하면 된다. 또한 transition을 통해 1초 동안 슬라이더가 자연스럽게 이동될 수 있는 모션을 지정해준다.
선택된 label은 background-color를 다르게 해줘 어떤 슬라이더(label)가 선택되었는지 눈으로 확인할 수 있게 해준다.
@charset "UTF-8";
/* 전체 페이지에 적용할 스타일 설정 - 여백 제거 */
* { margin: 0; padding: 0; }
/* 리스트 항목의 스타일 변경 */
.image_slider>ul { list-style: none; }
/* 슬라이더가 들어갈 공간(div)에 대한 설정 */
.image_slider {
position: relative;
overflow: hidden;
width: 600px;
height: 300px;
border: 1px solid;
}
/* 슬라이더 화면의 너비와 높이 설정
슬라이더될 화면의 개수 * 100%로 계산하여 너비를 설정.
화면 4개 -> 400%, 화면 5개 -> 500% */
.image_slider>ul { width: 400%; height: 100%; }
/* 각 항목(li)을 세로에서 가로로 변경하고
한 화면만 보이도록 너비를 설정
화면 4개 -> 25%, 화면 5개 -> 20% */
.image_slider>ul>li {
float: left;
width: 25%;
height: 100%;
}
/* 라디오 버튼 숨기기 - 라디오버튼의 모양을 바꾸기가 어렵기 때문에
label로 모양을 잡고, 라디오버튼은 숨긴다. */
.image_slider input { display: none; }
/* label의 위치 조정. 영역의 중앙 하단으로 설정 */
.image_slider p {
text-align: center;
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
}
/* 각 슬라이더 화면 설정 */
.image_slider li:nth-child(1) {
background-color: aqua;
}
.image_slider li:nth-child(2) {
background-color: pink;
}
.image_slider li:nth-child(3) {
background-color: cadetblue;
}
.image_slider li:nth-child(4) {
background-color: yellow;
}
/* label 모양 설정 */
.image_slider label {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
border: 2px solid rgb(151, 151, 151);
background-color: white;
border-radius: 50%;
transition: 0.3s;
cursor: pointer;/* 마우스의 모양변경 */
}
/* label 선택 시 화면 이동 처리
label 클릭 -> radio 선택(checked) */
#pos1:checked~ul {
margin-left: 0%;
transition: margin-left 1s;
}
#pos2:checked~ul {
margin-left: -100%;
transition: margin-left 1s;
}
#pos3:checked~ul {
margin-left: -200%;
transition: margin-left 1s;
}
#pos4:checked~ul {
margin-left: -300%;
transition: margin-left 1s;
}
/* 화면에 따른 label의 모양 변화 */
#pos1:checked~.pos>label:nth-child(1) {
background-color: #999;
}
#pos2:checked~.pos>label:nth-child(2) {
background-color: #999;
}
#pos3:checked~.pos>label:nth-child(3) {
background-color: #999;
}
#pos4:checked~.pos>label:nth-child(4) {
background-color: #999;
}'CSS' 카테고리의 다른 글
| 7. transform과 transition (0) | 2022.08.24 |
|---|---|
| 6. display의 flex (0) | 2022.08.24 |
| 5. 다양한 요소(element) (0) | 2022.08.24 |
| 4. 요소의 처리와 선택자 (0) | 2022.08.12 |
| 3. 배경 및 텍스트 (0) | 2022.08.12 |
