[css] carousel

냐옹·2023년 9월 3일

html

css

배경지식

일반 형제 선택자 : ~

가상선택자

css

목록 보기

4/6

html

<div class="carousel">
  <input type="radio" id="slide1" name="slide" checked>
  <input type="radio" id="slide2" name="slide">
  <input type="radio" id="slide3" name="slide">
  
  <div class="slider">
    <div class="slide" id="slide-content-1">
      <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="slide" id="slide-content-2">
      <img src="image2.jpg" alt="Slide 2">
    </div>
    <div class="slide" id="slide-content-3">
      <img src="image3.jpg" alt="Slide 3">
    </div>
  </div>
  
  <div class="controls">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
  </div>
</div>

css

.carousel {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.3s;
}

.slide {
  min-width: 100%;
  height: 200px;
  transition: opacity 0.3s;
  opacity: 0;
}

/* 표시되어야 할 슬라이드 표시 */
#slide1:checked ~ .slider #slide-content-1,
#slide2:checked ~ .slider #slide-content-2,
#slide3:checked ~ .slider #slide-content-3 {
  opacity: 1;
}

/* 슬라이드 위치 조정 */
#slide1:checked ~ .slider {
  transform: translateX(0%);
}

#slide2:checked ~ .slider {
  transform: translateX(-100%);
}

#slide3:checked ~ .slider {
  transform: translateX(-200%);
}

.controls {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.controls label {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ddd;
  border-radius: 50%;
  cursor: pointer;
}

#slide1:checked ~ .controls label:nth-child(1),
#slide2:checked ~ .controls label:nth-child(2),
#slide3:checked ~ .controls label:nth-child(3) {
  background-color: #555;
}

배경지식

일반 형제 선택자 : ~

A~B와 같은 형태로 사용될 때, A와 같은 부모를 공유하는 B요소들에 스타일을 적용한다. 다만, A요소 뒤에 나오는 B요소만 해당된다.

#slide1:checked ~ .slider #slide-content-1

#slide1:checked
slide1이라는 id를 가진 요소가 체크된 상태를 의미한다.
#slide1:checked ~ .slider
체크된 #slide1과 같은 부모를 공유하는 .slider 클래스를 가진 요소를 선택한다. 그러니까 #slide1 뒤에 나오는 .slider 요소만 해당된다.
#slide1:checked ~ .slider #slide-content-1
위에서 선택된 .slider 요소 내부의 slide-content-1을 id로 가진 요소를 최종적으로 선택한다.

가상선택자

가상선택자는 특정 상태나 조건에 따라 요소를 선택할 때 사용되는 선택자이다. 가상 클래스는 대표적으로 아래와 같은 것들이 있다.

동적 클래스

:hover
요소 위에 마우스를 올려놓았을 때
:active
요소를 마우스로 클릭하고 있을 때
:focus
요소에 포커스가 맞춰져 있을 때

타겟 클래스

:target
URL의 해시(#과 뒤에 오는 부분)와 일치하는 id를 가진 요소를 선택한다

언어클래스

:lang()
특정 언어 속성을 가진 요소를 선택한다.
:lang(en)은 영어로 된 요소를 선택한다.

입력양식 관련

:enabled or :disabled
활성화 및 비활성화된 폼 컨트롤을 선택한다.
:checked
선택된(체크된) 폼 요소를 선택한다.
ex) 라디오 버튼, 체크박스...
:valid or :invalid
유효성 검사에 통과하거나 실패한 폼 요소를 선택한다.
:required or :optional
필수 또는 선택적 입력 필드를 선택한다.
:placeholder-shown
placeholder 텍스트가 보이는 입력 필드를 선택한다.
:read-only or :read-write
읽기 전용 또는 편집 가능한 요소를 선택한다.

트리구조 가상 클래스

:root
문서의 루트 요소를 선택한다.
HTML에서는 <html>요소가 된다.
:nth-child() | :nth-last-child() | :first-child | :last-child | only-child
부모 요소내의 자식 요소의 위치나 순서에 따라 선택한다.
:nth-of-type() | :nth-last-of-type() | :first-of-type | :last-of-type | :only-of-type
동일한 타입의 형제요소 중에서 위치나 순서에 따라 선택한다.
:empty
내용이 없는 요소를 선택한다.
:not()
괄호 안의 선택자와 일치하지 않는 요소를 선택한다.