인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토타입)

24.Pure CSS 콘텐츠 슬라이더 프로토타입 01 (풀스크린 탭 콘텐츠 슬라이더 프로토

작성

·

318

2

slide content 3개 까지만 있는데,

3개 이상이면 어떻게 해야되나요??

HTML/CSSjquery

답변 2

1

코딩웍스(Coding Works)님의 프로필 이미지
코딩웍스(Coding Works)
지식공유자

만약 4개라면 input[type=radio] 개수와 label의 개수를 맞춰 주세요.
그리고 width: 33.3333% 를 width: 25%로 해주시면 됩니다.

그리고 2번째 질문은 html, css 모든 코드를 복사해서 올려주세요.
수업 내용은 아니지만 체크해볼게요~

인프런님의 프로필 이미지
인프런

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Content Slider</title>
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body class="preload">
    <div class="tab-inner">
      <input type="radio" id="tab1" name="tabmenu" checked />
      <input type="radio" id="tab2" name="tabmenu" />
      <input type="radio" id="tab3" name="tabmenu" />
      <input type="radio" id="tab4" name="tabmenu" />
      <input type="radio" id="tab5" name="tabmenu" />
      <input type="radio" id="tab6" name="tabmenu" />

      <div class="tabs">
        <div class="items">
          <div>
            <h1>Portfolio Slide #01</h1>
          </div>
          <div>
            <h1>Portfolio Slide #02</h1>
          </div>
          <div>
            <h1>Portfolio Slide #03</h1>
          </div>
          <div>
            <h1>Portfolio Slide #04</h1>
          </div>
          <div>
            <h1>Portfolio Slide #05</h1>
          </div>
          <div>
            <h1>Portfolio Slide #06</h1>
          </div>
        </div>
      </div>
      <div class="btn">
        <label for="tab1">Graphic</label>
        <label for="tab2">Web Publishing</label>
        <label for="tab3">Logo & CI</label>
        <label for="tab4">Graphic</label>
        <label for="tab5">Web Publishing</label>
        <label for="tab6">Logo & CI</label>
      </div>
    </div>

    <script>
      $('body').removeClass('preload');
    </script>
  </body>
</html>
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

.preload * {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition: none;
}

body {
  font-family: 'Raleway', sans-serif;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  color: #222;
}
a {
  text-decoration: none;
  color: #222;
}

.tab-inner {
}
input[name='tabmenu'] {
  display: none;
}
.tabs {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.items {
  height: 100vh;
  width: 300%;
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}
.items div {
  height: 100vh;
  float: left;
  width: 33.33333%;
  box-sizing: border-box;
  position: relative;
}
.items div:nth-child(1) {
  background: url(images/photo-01.jpg) no-repeat center center fixed;
  background-size: cover;
}
.items div:nth-child(2) {
  background: url(images/photo-02.jpg) no-repeat center center fixed;
  background-size: cover;
}
.items div:nth-child(3) {
  background: url(images/photo-03.jpg) no-repeat center center fixed;
  background-size: cover;
}
.items div:nth-child(1):before,
.items div:nth-child(2):before,
.items div:nth-child(3):before,
.items div:nth-child(4):before,
.items div:nth-child(5):before,
.items div:nth-child(6):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}
.items div:nth-child(1):before {
  background: linear-gradient(135deg, gold, transparent);
}
.items div:nth-child(2):before {
  background: linear-gradient(135deg, crimson, transparent);
}
.items div:nth-child(3):before {
  background: linear-gradient(135deg, royalblue, transparent);
}
.items div:nth-child(4):before {
  background: linear-gradient(135deg, gold, transparent);
}
.items div:nth-child(5):before {
  background: linear-gradient(135deg, crimson, transparent);
}
.items div:nth-child(6):before {
  background: linear-gradient(135deg, royalblue, transparent);
}

.items div h1 {
  font-size: 120px;
  font-weight: normal;
  color: #fff;
  position: relative;
  text-align: center;
  transform: translateY(-200px);
  /* opacity: 0; */
  /* transition: 0.5s; */
  /* transition-delay: 0.5s; */
}

.btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
}
.btn label {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  margin: 0 15px;
}

input[id='tab1']:checked ~ .tabs .items {
  left: 0;
}
input[id='tab2']:checked ~ .tabs .items {
  left: -100%;
}
input[id='tab3']:checked ~ .tabs .items {
  left: -200%;
}
input[id='tab4']:checked ~ .tabs .items {
  left: -300%;
}
input[id='tab5']:checked ~ .tabs .items {
  left: -400%;
}
input[id='tab6']:checked ~ .tabs .items {
  left: -500%;
}

input[id='tab1']:checked ~ .btn label[for='tab1'],
input[id='tab2']:checked ~ .btn label[for='tab2'],
input[id='tab3']:checked ~ .btn label[for='tab3'] {
  color: crimson;
}

input[id='tab1']:checked ~ .tabs .items div:nth-child(1) h1,
input[id='tab2']:checked ~ .tabs .items div:nth-child(2) h1,
input[id='tab3']:checked ~ .tabs .items div:nth-child(3) h1 {
  transform: translateY(200px);
  opacity: 1;
}

 

인프런님의 프로필 이미지
인프런

감사합니다 :)

인프런님의 프로필 이미지
인프런

.items {
  height: 100vh;
  width: 300%; // 이부분을 600%으로 하니까 되네요:)
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
}

1

인프런님의 프로필 이미지
인프런

.items div:nth-child(1):before,
.items div:nth-child(2):before,
.items div:nth-child(3):before,
.items div:nth-child(4):before,
.items div:nth-child(5):before,
.items div:nth-child(6):before {
  content: '';
  position: absolute;
  width: 100% !important;
  height: 100% !important;
}

이렇게 했는데 nth-child 4 부터는 보이지가 않고,

nth-child 1 에 slide content 4의 문구가 들어가 있습니다.

작성자 없음

작성자 정보가 삭제된 글입니다.

전체 Q&A
질문하기