[HTML/ CSS] input, label 사용해서 이미지 슬라이드 만들기

-최종 결과

최종 결과

 

 

-HTML

1. 전체 영역 및 버튼 구조 잡기

<div id="img_content">
  <input type="radio" name="img_select" id="select_box1" checked>
  <label for="select_box1"></label>
  <input type="radio" name="img_select" id="select_box2">
  <label for="select_box2"></label>
  <input type="radio" name="img_select" id="select_box3">
  <label for="select_box3"></label>
  <input type="radio" name="img_select" id="select_box4">
  <label for="select_box4"></label>
</div>

<div id="img_content">

div로 이미지 슬라이드 전체 영역을 잡는다.

 

<input type="radio" name="img_select" id="select_box1" checked>

input의 타입 중 radio를 선택하고 모든 input의 name값을 같게 하여 체크 시 한 개만 선택되게 한다. 

checked는 처음 체크될 태그를 설정할 수 있다.

 

<label for="select_box1">

input의 id 값이랑 label의 for값이랑 같게 하여 label을 클릭해도 input도 활성화된다.

 

2. img영역 구조 잡기

<div id="img_content">
  <input type="radio" name="img_select" id="select_box1" checked>
  <label for="select_box1"></label>
  <input type="radio" name="img_select" id="select_box2">
  <label for="select_box2"></label>
  <input type="radio" name="img_select" id="select_box3">
  <label for="select_box3"></label>
  <input type="radio" name="img_select" id="select_box4">
  <label for="select_box4"></label>
  
  <!-- img 영역 -->
  <div id="imgbox">
    <div class="select_img select1">
      <img src="eximg1.jpg" alt="">
    </div>
    <div class="select_img select2">
      <img src="eximg2.jpg" alt="">
    </div>
    <div class="select_img select3">
      <img src="eximg3.jpg" alt="">
    </div>
    <div class="select_img select4">
      <img src="eximg4.jpg" alt="">
    </div>
  </div>
</div>

<div id="imgbox">

js를 사용하지 않고 버튼 클릭 시 이미지가 바뀌게 하려면 img영역을 input 태그와 형제관계로 만들어야 한다. CSS에서 인접 선택자(형제 선택자)를 사용하기 위해서다.

 

<div class="select_img select1">

class값을 두 개로 설정하여 CSS에서 공통 스타일은 .select_img에 스타일을 넣는다.

 

3. 브라우저 확인

브라우저 확인

사진 4개가 세로로 나열되어 있다.

 

 

-CSS

1. 전체 영역 원하는 위치 설정

#img_content{
  background: lightgray;
  width: 350px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0 0 100px gray;
}

#img_content{

width : 350px;

}

이미지 슬라이드 전체 영역 크기 잡기. 높이값은 주지 않아도 자식 요소의 크기만큼 커진다.

 

#img_content{

width : 350px;

margin: 20px auto;

}

이미지 슬라이드 전체 영역의 위치를 잡는다.

 

2. 버튼 영역 꾸미기

/* btn영역 */
input[type='radio']{
  display: none;
}

label{
  background: dodgerblue;
  display: block;
  width: 30px;
  height: 10px;
  margin-bottom: 10px;
  transition: 1s;
  cursor: pointer;
}

1. 각각의 label과 input은 서로 연동되어 있으므로 input을 display:none으로 화면에서 지운다.
2.label 꾸미기 버튼으로 사용할 label을 꾸민다.
display: block = label은 inline구조이다. 세로 정렬을 위해 block구조로 바꾼다.
 transition: 1s = label을 클릭할 때 스르륵 변화하기 위해서 이다.
cursor: pointer = label위치에 마우스가 올라가면 커서가 클릭 손 모양으로 바뀐다.

 

3. label클릭 시 변화하기

/* btn영역 */
input[type='radio']{
  display: none;
}

input[type='radio']:checked + label{
  background: crimson;
  width: 40px;
}

label{
  background: dodgerblue;
  display: block;
  width: 30px;
  height: 10px;
  margin-bottom: 10px;
  transition: 1s;
  cursor: pointer;
}

input[type='radio']:checked + label{}

인접 선택자(형제 선택자)를 사용하여 input이 checked 되었을 때 바로 label이 변화한다.
CSS에서는 click이벤트가 없기 때문에 input의 checked가상 요소를 이용한다.

 

4. 브라우저 확인

브라우저 확인

 

5. img영역 꾸미기

/* img영역 */
#img_content #imgbox{
  width: 300px;
  height: 380px;
  float: right;
}

#img_content #imgbox{

float : right

}

img영역을 오른쪽으로 배치한다.

 

6. 브라우저 확인

\브라우저 확인

label을 block요소로 바꿨기 때문에 이미지가 label 바로 오른쪽 옆으로 이동하지 못한다.

또한 img영역에 float 속성으로 부모 요소(#img_content)가 img영역의 높이값을 인식하지 못한다. 

 

7. 부모 요소가 자식 요소 높이 값 인식하기

#img_content{
  background: lightgray;
  width: 350px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0 0 100px gray;
  overflow: hidden;
}

#img_content{

overflow : hidden

}

부모 영역이 img영역의 높이값을 인식하게 한다.

 

8.브라우저 확인

브라우저 확인

 

부모 요소에 overflow : hidden 적용 후

 

9. img영역 label 우측으로 이동하기

/* img영역 */
#img_content #imgbox{
  width: 300px;
  height: 380px;
  float: right;
  margin-top: -100px;
}

#img_contetn #imgbox{

margin - top : -100px

}

margin속성을 이용하여 img영역을 label 바로 우측 옆으로 이동시킨다.

 

10. 브라우저 확인

브라우저 확인

 

11.이미지 한 곳에 모으기

/* img영역 */
#img_content #imgbox{
  width: 300px;
  height: 380px;
  float: right;
  margin-top: -100px;
  position: relative;
}

#img_content{
  background: lightgray;
  width: 350px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0 0 100px gray;
  overflow: hidden;
}

.select_img img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 1.5s;
}

.select_img img{

position : absolute;

left: 0;

top: 0;

}

이미지를 left , top : 0 좌표로 한 곳에 모은다.

 

#img_content #imgbox{

position: relative;

}

id = <div id="imgbox">에 기준으로 이미지들이 모인다.

 

.select_img img{

position : absolute;

left: 0;

top: 0;

opacity: 0;

width : 100%;

}

이미지가 나올 때 transition효과를 나타내려면 opacity로 투명도를 없앤다.

display : none 할 경우 transition효과를 나타낼 수 없다.

이미지가 서로 크기가 달라서 모든 이미지 크기를 부모 width값과 같게 한다.

 

12. 브라우저 확인

브라우저 확인

opacity: 0으로 이미지는 보이지 않는다.

 

13. label클릭 시 이미지 나타나기

/* label 클릭시 이미지 나타내기 */
input[id="select_box1"]:checked ~ #imgbox .select1 img{
  opacity: 1;
}
input[id="select_box2"]:checked ~ #imgbox .select2 img{
  opacity: 1;
}
input[id="select_box3"]:checked ~ #imgbox .select3 img{
  opacity: 1;
}
input[id="select_box4"]:checked ~ #imgbox .select4 img{
  opacity: 1;
}

input [id="select_box1"]:checked~ #imgbox .select1 img {}

input:checked 되었을 때 #imgbox의 자식(. select1)의 자식(img) 태그를 선택한다.

이때 input의 속성 태그에 id값을 각각 지정해야 한다. 

만약,  input[type="radio"]:checked ~ #img_content .select1 img()하면 적용이 안된다.

~(물결 표시)는 인접 선택자(형제 선택자)이다.  +(플러스)의 형제 선택자와 차이점은 +(플러스)는 바로 밑에 있는 태그만 선택할 수 있지만 ~(물결 표시)는 멀리 있는 형제 태그도 선택이 가능하다.

 

14. 브라우저 확인

브라우저 확인

 

15. 첫 번째 label위치 이동

#img_content label:nth-child(1){
  margin-top: 20px;
}

#img_content label:nth-of-type(1){

margin-top: 20px;

}

첫 번째 label에만 margin속성을 주기 위해 :nth-of-type()을 사용하여 특정 label을 선택한다. 만약, :nth-child(1)을 사용하여 label:nth-child(1)으로 선택하면 태그의 타입 요소를 고려하지 않고 부모 요소 바로 첫 번째 자식을 선택하게 된다. 여기서는 첫 번째 input을 선택하게 된다.

 

 

-전체코드

1. html

<div id="img_content">
  <input type="radio" name="img_select" id="select_box1" checked>
  <label for="select_box1"></label>
  <input type="radio" name="img_select" id="select_box2">
  <label for="select_box2"></label>
  <input type="radio" name="img_select" id="select_box3">
  <label for="select_box3"></label>
  <input type="radio" name="img_select" id="select_box4">
  <label for="select_box4"></label>
  
  <!-- img 영역 -->
  <div id="imgbox">
    <div class="select_img select1">
      <img src="eximg1.jpg" alt="">
    </div>
    <div class="select_img select2">
      <img src="eximg2.jpg" alt="">
    </div>
    <div class="select_img select3">
      <img src="eximg3.jpg" alt="">
    </div>
    <div class="select_img select4">
      <img src="eximg4.jpg" alt="">
    </div>
  </div>
</div>

 

-CSS

#img_content{
  background: lightgray;
  width: 350px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0 0 100px gray;
}

/* btn영역 */
input[type='radio']{
  display: none;
}
input[type='radio']:checked + label{
  background: crimson;
  width: 40px;
}
label{
  background: dodgerblue;
  display: block;
  width: 30px;
  height: 10px;
  margin-bottom: 10px;
  transition: 1s;
  cursor: pointer;
}

/* img영역 */
#img_content #imgbox{
  width: 300px;
  height: 380px;
  float: right;
  margin-top: -100px;
  position: relative;
}

#img_content{
  background: lightgray;
  width: 350px;
  margin: 20px auto;
  border-radius: 5px;
  box-shadow: 0 0 100px gray;
  overflow: hidden;
}

.select_img img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 1.5s;
}

/* label 클릭시 이미지 나타내기 */
input[id="select_box1"]:checked ~ #imgbox .select1 img{
  opacity: 1;
}
input[id="select_box2"]:checked ~ #imgbox .select2 img{
  opacity: 1;
}
input[id="select_box3"]:checked ~ #imgbox .select3 img{
  opacity: 1;
}
input[id="select_box4"]:checked ~ #imgbox .select4 img{
  opacity: 1;
}

#img_content label:nth-child(1){
  margin-top: 20px;
}