인프런 커뮤니티 질문&답변
작성한 질문수
안녕하세요.! 세로로 한번 해보고 싶어서 해봤는데 이렇게 하면 될까요?
해결된 질문
작성
·
139
1
먼저, 강의 잘 보고 있는 수강생입니다.! 감사합니다.!
처음 질문 남겨보는데,
1) 가로로 만들어보고 세로로 한 번 만들어보고 싶어서 해봤는데 이렇게 하면 될까요?
2) 그리고, 가로와 마찬가지로 세로에서 ①height: 100vh; width: 300%; / height: 100vh; width: 33.3333%; 도
②height: 300%; width: 100vw; / height: 33.3333%; width: 100vw; 로 줘도 되는데 세로로 만들 경우 형식적으로는 ②으로 해줘야 하는 건가요?
-> 둘 다, .tabs { height: 100vh; } 를 넣어주기만 하면 되더라구요.!
.tab-inner {
/* border: 1px solid red; */
}
input[name=tabmenu] {
display: none;
}
.tabs {
position: relative;
height: 100vh;
overflow: hidden;
}
.items {
height: 100vh;
width: 300%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.items div {
height: 100vh;
width: 33.3333%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.items div:nth-child(1) {
background-color: dodgerblue;
}
.items div:nth-child(2) {
background-color: purple;
}
.items div:nth-child(3) {
background-color: rgb(255, 131, 30);
}
.items div h1 {
font-size: 60px;
color: #fff;
}
.btn {
position: absolute;
top: 50%;
left: 20px;
transform: translate(50%,-50%)
}
.btn label {
display: block;
width: 5px;
height: 50px;
background-color: #fff;
margin-bottom: 10px;
cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
top: 0;
}
input[id=tab2]:checked ~ .tabs .items {
top: -100%;
}
input[id=tab3]:checked ~ .tabs .items {
top: -200%;
}
그럼, 선생님께 질문을 살포시...남겨두고 다음 강의 계속 들으러 갈게요:) 화이팅!
답변 2
1
0
yoonk
질문자
앗! 죄송합니다.!
<body>
<div class="tab-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tabs">
<div class="items">
<div><h1>Slide Content 01</h1></div>
<div><h1>Slide Content 02</h1></div>
<div><h1>Slide Content 03</h1></div>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</body>
아, 그리고 CSS에 .btn 세로 버튼 가운데 위치 시키는 게 한 거 맞..맞게 했나요..?ㅠㅠ
감사합니다.! 오늘도 화이팅하겠습니다:) 히히