practice - css ) 슬라이드 페이지

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

whatisthis?

practice - css ) 슬라이드 페이지 - CSS only (JS❌) 본문

PRACTICE/SELF

practice - css ) 슬라이드 페이지 - CSS only (JS❌)

thisisyjin 2022. 3. 11. 16:48

Slide Page

- only CSS

- without JS

- 📃 실습하면서 알게된 점 기록

여지껏 js로 복잡하게 하던 방식 대신, js를 하나도 안쓰고
오로지 css와 :checked 선택자 만으로 슬라이드를 구현할 수 있다고 한다.

📌 :checked
- CSS 가상클래스
- 선택했거나 on 상태인 radio, checkbox, option요소를 나타냄

__

📌 CSS sibling element 관련 결합자

~ : 이후 형제요소 다같이~ 선택하는 느낌.
+ : 바로 다음에 위치하는 형제요소만 선택.

>> 바로 다음 형제만 필요하면 + / 그 외가 필요하면 ~ 쓰기.
p ~ span {
 color: red;
}
이건 빨강이 아닙니다.
여기 문단이 있습니다.
<code>그리고 코드도 있습니다.</code>
이제 빨강입니다!
<code>더 많은 코드가 있습니다.</code>
이것도 빨강입니다!
cr: mdn

📌 https://developer.mozilla.org/ko/docs/Web/CSS/General_sibling_combinator

ver 1 - 가로 슬라이드 (기본)

app.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slide Banner</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="slide">
      <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 class="outer">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <p class="bullet">
        <label for="pos1">1</label>
        <label for="pos2">2</label>
        <label for="pos3">3</label>
        <label for="pos4">4</label>
      </p>
    </div>
  </body>
</html>

style.css

/* colors
#fbf8cc
#f1c0e8
#cfbaf0
#a3c4f3
*/

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.slide {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide .outer {
  width: calc(100% * 4);
  display: flex;
  transition: all 1s ease-out;
}

.slide li {
  width: calc(100% / 4);
  height: 300px;
}

.slide li:nth-child(1) {
  background-color: #fbf8cc;
}
.slide li:nth-child(2) {
  background-color: #f1c0e8;
}
.slide li:nth-child(3) {
  background-color: #cfbaf0;
}
.slide li:nth-child(4) {
  background-color: #a3c4f3;
}

.slide input {
  display: none;
}

.slide .bullet {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.slide .bullet label {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #666;
  font-size: 0;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
}

/* radio 체크시 - 마진 적용 */

#pos1:checked ~ .outer {
  margin-left: 0;
}

#pos2:checked ~ .outer {
  margin-left: -100%;
}

#pos3:checked ~ .outer {
  margin-left: -200%;
}

#pos4:checked ~ .outer {
  margin-left: -300%;
}

/* bullet 액티브 표시 */

#pos1:checked ~ .bullet label:nth-child(1),
#pos2:checked ~ .bullet label:nth-child(2),
#pos3:checked ~ .bullet label:nth-child(3),
#pos4:checked ~ .bullet label:nth-child(4) {
  background-color: #666;
}

Slide Banner

1 2 3 4

ver 2 - 가로 페이드 (opacity 이용)

style.css

/* colors
#fbf8cc
#f1c0e8
#cfbaf0
#a3c4f3
*/

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.slide {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide li {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: all 1s ease-out;
}

.slide li:nth-child(1) {
  background-color: #fbf8cc;
}
.slide li:nth-child(2) {
  background-color: #f1c0e8;
}
.slide li:nth-child(3) {
  background-color: #cfbaf0;
}
.slide li:nth-child(4) {
  background-color: #a3c4f3;
}

.slide input {
  display: none;
}

.slide .bullet {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.slide .bullet label {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #666;
  font-size: 0;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
}

/* radio 체크시 - opacity 1로 */

#pos1:checked ~ ul li:nth-child(1),
#pos2:checked ~ ul li:nth-child(2),
#pos3:checked ~ ul li:nth-child(3),
#pos4:checked ~ ul li:nth-child(4) {
  opacity: 1;
}

/* bullet 액티브 표시 */

#pos1:checked ~ .bullet label:nth-child(1),
#pos2:checked ~ .bullet label:nth-child(2),
#pos3:checked ~ .bullet label:nth-child(3),
#pos4:checked ~ .bullet label:nth-child(4) {
  background-color: #666;
}

Slide Banner

1 2 3 4

result

ref >

http://junil-hwang.com

'PRACTICE > SELF' 카테고리의 다른 글

practice) React.js - 틱택토(Tic Tac Toe) 게임 (0)	2022.03.15
practice - css ) BookStore UI (0)	2022.03.12
practice - js ) 슬라이드 페이지 (2) 터치형(드래그) (0)	2022.03.11
practice - js ) 슬라이드 페이지 (1) 버튼형 (0)	2022.03.11
practice - css / js ) Tab Menu (0)	2022.03.11

'PRACTICE/SELF' Related Articles