.gif)
오늘은 html5 input태그와 css를 이용해서 슬라이드 탭 메뉴를 만들어보겠습니다.
그냥 단지 예전에 만들던게 생각이나서 올리게 됩니다 😉
input radio타입으로 만들어볼건데요. button타입을 사용하셔도 무방합니다.
우선 뼈대가 될 html코드를 먼저 보겠습니다.
<body>
<div class="container">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="tab-inner">
<div class="tabs">
<div class="tab">
<h1>Slide Content - 01</h1>
</div>
<div class="tab">
<h1>Slide Content - 02</h1>
</div>
<div class="tab">
<h1>Slide Content - 03</h1>
</div>
</div>
</div>
<div class="btn">
<label for="tab1">Creative</label>
<label for="tab2">Picture</label>
<label for="tab3">Artist</label>
</div>
</div>
</body>먼저 컨테이너로 감싸주었는데 저의 습관성이므로 여기선 굳이 감싸줄 필요는 없습니다~
크게 세가지로 나누자면
1.input radio 숨길 버튼
2.슬라이더 본문
3. input radio와 연결 될 lable태그 라디오 대신 사용 될 버튼
우선 input 라디오 버튼을 숨기는 이유에 대해서 말씀드리자면~
input같은태그는 디자인하기에 한계가 있기 때문에 보기좋게 디자인 할
수없습니다. 그렇기때문에 lable태그가 존재하는 이유는 input을 도와주
기위해 사용 됩니다. 보기 안좋은 input태그를 display:none으로 하고
lable태그와 연결해서 lable태그를 버튼으로 사용하는 것 입니다.
input의 id명을 label의 for속성값에 연결 시킵니다.
input type="radio" id="AB"
label for="AB"
css는 코드가 길어서 따로 올리진 않고 핵심 코드만 짧게 올리겠습니다👏
<style>
input[name="tabmenu"]{
display:none;
}
.tab-inner{
position: relative;
height:100vh;
overflow: hidden;
}
.tabs{
width: 300%;
height:100vh;
position: absolute;
top:0;
left:0;
display:flex;
transition: 1s;
}
.tab{
width: 33.3333333%;
height:100vh;
}
input[id="tab1"]:checked ~ .tab-inner .tabs{
left:0;
}
input[id="tab2"]:checked ~ .tab-inner .tabs{
left:-100%;
}
input[id="tab3"]:checked ~ .tab-inner .tabs{
left:-200%;
}
</style>필요없는 라디오버튼을 우선 없애주고~
슬라이더 3가지를 만들건데 3가지를 다 감싸주는 탭이너에 100vh를 주었습니다.
꽉찬 100vh화면이 3개가 되어야 하니까 .tabs에 width:300%를 주었습니다.
화면으로는 100%로만 보이겠지만 가로로 화면상에
보이지 않는 200%가 존재합니다. 그렇기때문에 .tab에 width:33.33333%를 주었습니다.
300%라고해서 3분의1씩 나누어 100%로 주실 수 있는데, 자식 입장에서는 .tabs는 부모요소입니다.
자식요소에서 주는 width:100%는 부모의 width크기를 100% 가져온다는 말이니까(즉 300%) 33.33333%를 줘야 합니다.
다 됐다면 이어서,
우선 슬라이드는 가로로 움직입니다. 그런데 하나의 풀스크린이 될 tab은
div이므로 블록요소입니다.
가로로 슬라이드 되어야 하니까 .
tab에 float:left를 주거나 .tabs에 display:flex를주어야 합니다.
저는 flex를 사용하는 습관을 드려야 하기때문에 flex를 주었습니다.
float을 사용하면 왼쪽이나 오른쪽으로 부유시키는 정렬시키는? 레이아웃기법이므로 가로로 슬라이드가 되겠지요
flex는 기본적으로 가로를 주축으로 아이템배치를 하기에 동일합니다.
마지막코드 input[id="tab1"]가 가상선택자checked 되었을때.
Creative라는 라벨 버튼을 눌렀을때
left:0; (.tabs의left0)
tab2를 눌렀을때 두번째 슬라이드
left:-100% (.tabs의 left-100%)
tab3를 눌렀을때 세번째 슬라이드
left:-200%; (.tabs의 left-200%)
이렇게 300%를 3번 분할해서 100%화면을 3개로만들었습니다.
그렇기때문에 .tabs에 position:absolute를 준 이유입니다.
브라우저의 결과는!
.gif)
.tab에 백그라운드사진을 fixed해서 더 느낌있게 슬라이드 됩니다.
그리고 따로 부드럽게 슬라이드 되도록 transition을 적절히 주었습니다.
10mb이하의 크기만 올려지기때문에 화질이 그다지 좋진 않네요~~!^^
