inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

안녕하세요.! 세로로 한번 해보고 싶어서 해봤는데 이렇게 하면 될까요?

해결된 질문

176

yoonk

작성한 질문수 4

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%;
}

그럼, 선생님께 질문을 살포시...남겨두고 다음 강의 계속 들으러 갈게요:) 화이팅!

HTML/CSS jquery

답변 2

1

코딩웍스(Coding Works)

주신 코드로 테스트 해봤는데 매우 나이쓰하게 잘 되는데요. 잘 만드셨어요~

0

yoonk

감사합니다.! 오늘도 화이팅하겠습니다:) 히히 

0

코딩웍스(Coding Works)

html 코드도 올려주세요~

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 세로 버튼 가운데 위치 시키는 게 한 거 맞..맞게 했나요..?ㅠㅠ 

class 값 한 번에 부여하는법

2

95

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

79

1

div#css-checker-widget의 해결방

1

71

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

94

2

강의듣는법

1

86

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

75

2

input checked 질문합니다.

0

81

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

152

2

Part 1 영상 안나옵니다

1

97

1

제이쿼리 작동이 안됩니다

1

211

3

강의 내용 질문있습니다.

1

128

2

일정 부분만 주석하는 방법

1

223

2

폰트어썸

1

144

2

인접선택자에 대한 질문드립니다!

1

135

2

delay 적용 안됨

1

137

1

rotateY(360deg)가 적용이 안됩니다!

1

190

2

세로이동할때 height값

1

142

2

폰트어썸이 안되요..

1

504

2

화면 정중앙에 오게끔 할수있나요?

1

175

1

어코디언 네비게이션 중

1

127

1

라이브서버 문제

1

241

2

넷플릭스 어코디언 예제 질문

1

107

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

163

1

active 관련 질문

1

150

2