확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 07(Testimonial 탭 슬라이더) 응용해서 하고있습니다.

작성한 질문수 16

0

질문 이어서 하나 더 남깁니다! 완성은 했는데

 <div class="slide">

      <div class="slide-inner">

        <div>

          <img src="images/01.jpg">

          <div class="des">

            <h2>몽블랑<span>Mont Blanc</span></h2>

            <p>

              생긴 모습이 마치 산에 눈 내린 모습 같이 보여서 붙은 이름이다. 

              원래는 흰 생크림을 올린 케이크 였는데 보존 문제로 밤크림을 많이 쓰다가

              지금의 형태가 되었다. 위에 흰 슈가 파우더라도 뿌려서 이름값을 하기는 한다. 

              빵집에서 자주 볼 수 있는 둥글고 가운데가 뾰족하게 올라온 페스트리 빵도 이름이 

              몽블랑인데, 이름의 유래만 똑같고 완전히 다르다.

            </p>

          </div>

        </div>

       (중략)

</div>

</div>

이렇게 있을때

css는

.slide {

  height: inherit;

  width: inherit;

  position: relative;

  margin: 0 auto;

  overflow: hidden;

}

.slide-inner {

  width: 2100px;

  height: inherit;

  position: absolute;

  left: 0;

  transition: 0.5s;

}

.des {

  position: absolute;

  top: 0;

  width: 200px;

  text-align: left;

}

.slide-inner div {

  float: left;

  width: 700px;

  height: 100%;

  color: black;

  box-sizing: border-box;

  padding: 40px;

}

.slide-inner div h2 {

  font-family: 'Jua', sans-serif;

  font-weight: normal;

}

.slide-inner div span {

  display: block;

  font-size: 16px;

}

.slide-inner div p {

  font-family: 'Nanum Myeongjo', serif;

  line-height: 1.5em;

  width: 300px;

}

.slide-inner div img {

  float: right;

  transform: translateY(50%);

  width: 200px;

  height: 200px;

  border-radius: 50%;

  margin: 0 30px 24px 0;

}

이렇게 했거든요 .des 를 새로 추가해서 포지션을 줬는데 .slide-inner div 에서 움직여야 하는거 아닐까요ㅠㅠ

저거는 .slider-inner에서 움직여서 제대로 위치조정이 되더라고요.

.slider-inner div {

position: relative;

}

주면은 이렇게 되더라고요

0

아래 코드 보시면 .slider-inner에 font-size: 0 가 들어가 있으니까 h2, p 태그 폰트가 0라서 안보이는거에요.

font-size: 0를 왜 주셨는지 모르겠는데 이거 지우면 제대로 나와요.

---------------------------------------------------------------

.slide-inner {

  width: 3600px;

  height: 800px;

  position: absolute;

  left: 0;

  transition: 0.5s;

  font-size: 0; 

}

0

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inner {
  width: 1200px;
  height: 900px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.377);
}

input[name=tabmenu] {
  display: none;
}

.slide {
  height: 800px;
  width: 1200px;
  position: relative;
  margin: 0 auto;
  /* overflow: hidden; */
}

.slide-inner {
  width: 3600px;
  height: 800px;
  position: absolute;
  left: 0;
  transition: 0.5s;
  font-size: 0;
}

.slide-inner div {
  display: inline-block;
  width: 1200px;
  /* border: 1px solid red; */
  color: black;
}

.slide-inner div img {
  float: left;
  transform: translateY(50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  margin-left: 40px;
}

/* 글씨가 안보인다 이유를 모르겠음 */

.btn {
  margin-top: 40px;
}

.btn label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: lightgray;
  border-radius: 50%;
  cursor: pointer;
}

input[id=tab1]:checked ~ .slide .slide-inner {
  left: 0;
}
input[id=tab2]:checked ~ .slide .slide-inner {
  left: -1200px;
}
input[id=tab3]:checked ~ .slide .slide-inner {
  left: -2400px;
}

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