여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript 없이 탭 메뉴 만들기
Javascript 없이 탭 메뉴 만들기
2년전 작성
2년전 수정

탭 메뉴

Javascript 없이 탭 메뉴 만드는 방법을 알아보자.

codepen(https://codepen.io/aaronchuo/pen/rNQrja)에서 발견한 코드가 있다.

이 코드 뜯어보며 공부하자.

틀 만들기

div 태그 이용하여 HTML로 틀을 먼저 만든다.

HTML
  • 눈 감아도 왜 이리 어지러울까 하루도 맘 편히 살 수가 없네 내게도 기적이 오길 기도해 매일 꿈에서 보았던 거꾸로 돌려 모든 걸 위아래로 upside down 온 세상을 뒤집어놔 I'm living in the upside down 멋대로 내 멋대로 모든 걸 Turn it till the lights go out 온 세상을 뒤집어놔 I'm living in the upside down 멋대로 내 멋대로 모든 걸.
  • Tell me why you hatin' 도대체 넌 뭐가 그렇게 거슬릴까 씹다 뱉은 pieces 담지 못할 말 이제 와 멈추지 마 난 널 모르지만 그래야만 네 맘이 풀린다면 속아줄게 다 어디 해 봐 이젠 익숙해 Cause you're addict to hating Me i'm just chillin 네 맘대로 떠들어봐 두 눈을 감고 비워내 귀를 막은 채 이것만은 물어볼게 Cuz i just wanna say Why you so mad 너만의 세상에 갇혀 Why you so mad 이렇게 또 악에 받쳐 똑같은 말만 Over and over 적당히 좀 해 If you hate me 너만 괴로워 So don't be so mad 쉴 틈 없는 website fake the profile 부풀린 말을 아무리 뿌려봤자 I can see through ya 뻔히 보여 다 더 크게 떠들어대 네 입만 아파.
  • No one's perfect 애써 웃음 짓지 마 내게는 솔직해도 돼 oh 니 곁에서 힘내라는 위로 대신 말없이 그냥 있을게 oh 아무 말도 aye, aye 먼저 묻지 않을게 내 곁에선 잠시라도 웃을 수 있게 불이 꺼진 밤 작은 뒤척임 없이 잠들 수 있길, 기나긴 터널 끝 나의 모든 시간 Ride for you, ride for you 너를 놓지 않아 Die for you, die for you 널 보면 oh, oh Baby 내가 보여 'Cause all I wanna do is Ride for you, die for you You are perfect 누구보다 널 알기에 무너진대도 괜찮아 oh, yeah 계절이 바뀌어도 항상 같은 자리 next to you I'll be standing next to you
사용된 코드 설명
<input type=”radio” name=”tab” id=”tab1″ checked><label for=”tab1″>Upside Down</label>
:
input 태그와 label 태그를 이용하여 탭을 만든다.
<div class=”section”> … </div>
:
section 이름을 가진 class를 만들고 그 안에 탭 메뉴의 컨텐츠를 넣는다.

탭메뉴 꾸미기

CSS로 탭 메뉴를 꾸며보자.

CSS
.tab-wrapper {
    list-style: none;
    position: relative;
    width: 600px;
    padding: 0;
    font-size: 1em;
    color: #ff3e8b;
}

li {
    display: inline-block;
}
li input[type="radio"] {
    opacity: 0;
    position: absolute;
    outline: none;
}
li input[type="radio"]:checked ~ label {
    background: #ff3e8b;
    color: #FFFFFF;
    height: 50px;
    font-size: 1.2em;
    cursor: default;
    box-shadow: 0 0 10px #ff56c4;
}
li input[type="radio"]:checked ~ .section {
    opacity: 1;
    width: 500px;
    padding: 50px;
    border: 1px solid #ff3e8b;
    color: #ff56c4;
    letter-spacing: 0.1em;
    text-indent: 1em;
    z-index: 1;
}
li label {
    display: block;
    width: 120px;
    height: 40px;
    border: 1px solid rgba(255, 62, 139, 0.7);
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    color: rgba(255, 62, 139, 0.7);
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: all 200ms ease-in-out;
}
li label:hover {
    height: 49px;
    border-color: #ff3e8b;
    color: #ff3e8b;
}
li .section {
    opacity: 0;
    position: absolute;
    top: 51px;
    left: 0;
    width: 1000px;
    padding: 50px;
    border: 1px solid #ff3e8b;
    background: rgba(255, 62, 139, 0.1);
    color: white;
    letter-spacing: -1em;
    text-indent: 1em;
    transition: all 200ms ease-in-out;
}
사용된 코드 설명
li input[type=”radio”] { opacity: 0; }
:
radio 버튼을 보이지 않게 한다.
li input[type=”radio”]:checked ~ label { box-shadow: 0 0 10px #ff56c4; }
:
라디오 버튼이 선택되었을 때 라벨의 박스 그림자를 #ff56c4 색상으로 설정한다.
li input[type=”radio”]:checked ~ .section { opacity: 1; }
:
라디오 버튼이 선택되었을 때 .section class를 보여준다.
기본 예시

Mingg`s Diary
밍구
공부 목적 블로그