CSS로 탭 메뉴 만들기

웹사이트나 블로그를 돌아다니다 보면 탭으로 구분된 메뉴를 종종 볼 수 있다. 탭으로 메뉴를 구성하면 가로나 세로로 나열된 정보를 작은 공간에 표시할 수 있다는 장점이 있다. /'pəlp/ 블로그처럼 본문과 댓글을 구분하는 데 사용할 수도 있고 사이드바의 최근 글, 최근 댓글, 최근 트랙백을 탭으로 묶어서 구성할 수도 있다. 이런 탭 메뉴는 복잡한 JavaScript를 사용하지 않아도 input 요소와 CSS만으로 간단히 만들 수 있다.

한 화면에 두 개 이상의 탭을 배치하면 제대로 동작하지 않으니 한 화면에 한 개만 사용하도록 주의한다.

앞으로 이야기할 탭 메뉴는 input 요소 중 라디오 버튼(input type="radio")에서 label 글자를 클릭하면 대응하는 번호의 버튼이 선택된다는 점을 이용한 것이다. input과 label 요소를 작성한 다음 input 요소를 화면에서 숨기고(display:none) label 요소를 보기 좋게 꾸미면 예쁜 탭 메뉴가 완성된다. 자세한 내용은 예제 코드를 통해 살펴보자.

1. 탭 메뉴 HTML 코드

input 요소

        <!-- 라디오 버튼 -->
        <input id="tab1" type="radio" name="tab" checked="checked" />
        <input id="tab2" type="radio" name="tab" />
        <input id="tab3" type="radio" name="tab" />

먼저 라디오 버튼을 만들어보자. 라디오 버튼을 만들려면 <input type="radio" />처럼 input 요소의 타입을 radio로 지정한다. 그다음 각 버튼을 구분하기 위해 id를 추가해보자. id는 'tab1', 'tab2'처럼 순서대로 번호를 붙이면 구분이 쉽다. <input type="radio" id="tab1" /> 탭 메뉴 개수만큼 input 요소를 만들고 첫 번째에만 checked="checked" 속성을 추가한다. checked 속성은 기본으로 선택할 라디오 버튼을 지정하는 역할이다. <input type="radio" id="tab1" checked="checked" /> 이런 방식으로 라디오 버튼을 원하는 개수만큼 만든다.

label 요소

        <!-- 라벨 : 화면에 표시되는 탭 제목 -->
        <label for="tab1">Tab 1</label>
        <label for="tab2">Tab 2</label>
        <label for="tab3">Tab 3</label>

두 번째로 라벨을 만들어 보자. 라벨은 탭 제목 역할이며 탭을 선택했을 때 그에 해당하는 글 내용을 표시하는 기능을 한다. 조금 전 input 요소에서 사용했던 id를 첫 번째부터 순서에 맞춰서 for 속성값에 사용하여 label 요소를 작성한다. <label for="tab1">Tab1</label> 주의할 점은 input의 id와 label의 for 속성값 순서를 똑같이 맞춰야 한다는 것이다. 첫 번째 input 요소의 id가 'tab1' 이라면 첫 번째 label 요소의 for 역시 'tab1'이 되어야 탭 제목에 맞는 순번의 글 내용이 표시된다.

div 요소

        <!-- 탭 내용 : 탭 제목을 선택했을 때 표시되는 본문 -->
        <div class="tab1_content">
            Tab1 내용<br />
            마음은 무덤 웃으며, 수염을 환자의 누그러졌다. 벌써 설렁탕을 국물이 채이는 이 제시한다. 앉았으면 일찍이 관련이 얼굴을 사람은 먼곳을 자기 낸가. 쏟아져 뭔지가 기생 있는 않았다.
        </div>
        <div class="tab2_content">
            Tab2 내용<br />
            근 인력거꾼의 그 라디오로 한다느니보다 바이며, 왜 2위는 충실하였다. 말라서 듯이 높게 또 가지고 것이다. 궂은 같은 끝나가고 소리가 김첨지는 쳐보았건만, 액수에 후려갈겼다. 그 속에서 하고 과한데.
        </div>
        <div class="tab3_content">
            Tab3 내용<br />
            사십 듯이 만들 황급하였다. 말조차 벌던 방학을 있었다. 그러자, 날리고 젠장맞을 없었다. 보배를 수 조금 남은 없네, 있다. 그는 은전이 원 수 띄었다. 아씨, 하고 천하를 그들의 모든 병자에 뿐이다.
        </div>

div 요소는 실제 글 내용 부분이다. 원하는 방식으로 작성한다. 단, 앞에서처럼 class에 순서를 구분할 수 있는 이름을 사용한다.

위의 세 가지를 합치면 아래와 같다.

전체 HTML 코드

    <div id="css_tabs">
        <!-- 라디오 버튼 -->
        <input id="tab1" type="radio" name="tab" checked="checked" />
        <input id="tab2" type="radio" name="tab" />
        <input id="tab3" type="radio" name="tab" />

        <!-- 라벨 : 화면에 표시되는 탭 제목 -->
        <label for="tab1">Tab 1</label>
        <label for="tab2">Tab 2</label>
        <label for="tab3">Tab 3</label>

        <!-- 탭 내용 : 탭 제목을 선택했을 때 표시되는 본문 -->
        <div class="tab1_content">
            Tab1 내용<br />
            마음은 무덤 웃으며, 수염을 환자의 누그러졌다. 벌써 설렁탕을 국물이 채이는 이 제시한다. 앉았으면 일찍이 관련이 얼굴을 사람은 먼곳을 자기 낸가. 쏟아져 뭔지가 기생 있는 않았다.
        </div>
        <div class="tab2_content">
            Tab2 내용<br />
            근 인력거꾼의 그 라디오로 한다느니보다 바이며, 왜 2위는 충실하였다. 말라서 듯이 높게 또 가지고 것이다. 궂은 같은 끝나가고 소리가 김첨지는 쳐보았건만, 액수에 후려갈겼다. 그 속에서 하고 과한데.
        </div>
        <div class="tab3_content">
            Tab3 내용<br />
            사십 듯이 만들 황급하였다. 말조차 벌던 방학을 있었다. 그러자, 날리고 젠장맞을 없었다. 보배를 수 조금 남은 없네, 있다. 그는 은전이 원 수 띄었다. 아씨, 하고 천하를 그들의 모든 병자에 뿐이다.
        </div>
    </div>

※ <!--    --> 사이 내용은 주석 처리됨

위 예제를 참고해서 원하는 내용의 HTML 작성을 마쳤으면 이제 CSS로 탭 동작 및 스타일을 구성해보자.

2. 탭 메뉴 CSS 코드

탭 동작 설정

/* 탭 선택 시 표시할 요소(div) 정의(1번 탭 선택 시 첫 번째 div 요소 표시) */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3), #css_tabs input:nth-of-type(3) ~ div:nth-of-type(3) {
    display:none
}
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3):checked ~ div:nth-of-type(3) {
    display:block
}

CSS에서 가장 먼저 작성해야 할 내용은 탭 메뉴가 작동하도록 설정하는 부분이다. 탭 메뉴가 작동하려면 첫 번째 탭을 선택했을 때 첫 번째 글(div)만 표시되고 두 번째, 세 번째 글은 화면에 표시되지 않아야 한다. 여기서는 n번째 요소를 가리키는 nth-of-type(n)이라는 선택자와 요소1 다음에 오는 요소2를 가리키는 ~ 선택자를 사용했다. nth-of-type 선택자 사용법은 CSS3 : nth-of-type() 선택자 링크를 참고한다.

위의 CSS를 보면 우선 input 요소 세 가지와 input 요소 다음에 오는 div 요소가 모두 display:none으로 설정되어 화면에 표시되지 않는다. 그다음은 input 요소가 checked 되었을 때 해당 input 요소 다음에 오는 대응하는 div 요소만 화면에 표시한다.

라벨 스타일

/* 라벨 기본 스타일 지정 */
#css_tabs > label {
    display:inline-block;
    font-variant:small-caps;
    font-size:.9em;
    padding:5px;
    text-align:center;
    width:20%;
    line-height:1.8em;
    font-weight:700;
    border-radius:3px 3px 0 0;
    background:#eee;
    color:#777;
    border:1px solid #ccc;
    border-width:1px 1px 0
}
#css_tabs > label:hover {
    cursor:pointer
}
#css_tabs label[for=tab1] {
    margin-left:1.5em
}

/* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover {
    background:tomato;
    color:#fff
}
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover {
    background:gold;
    color:#fff
}
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover {
    background:green;
    color:#fff
}

다음은 라벨 스타일이다. 라벨 스타일은 자유롭게 설정한다. 단, 탭을 가로로 배열하려면 display:inline-block을 추가한다. 위에서는 라벨을 가로로 배열하고 마우스 커서를 올렸을 때와 탭을 선택했을 때 색이 바뀌도록 구성했다.

기타 스타일

#css_tabs {
    font-family:'nanumgothic', '나눔고딕', 'malgun gothic', '맑은 고딕', 'dotum', '돋움', sans-serif
}

/* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content, #css_tabs .tab2_content, #css_tabs .tab3_content {
    padding:2em;
    border:1px solid #ddd;
    width:70%;
    height:100%
}

마지막은 내용을 담은 div 요소 전체의 스타일과 탭 메뉴 전체의 글꼴 스타일 설정 부분이다. 간단한 부분이니 설명은 생략하겠다.

위에서 이야기한 CSS를 모두 합치면 아래와 같다.

전체 CSS 코드

#css_tabs {
    font-family:'nanumgothic', '나눔고딕', 'malgun gothic', '맑은 고딕', 'dotum', '돋움', sans-serif
}

/* 탭 선택 시 표시할 요소(div) 정의(1번 탭 선택 시 첫 번째 div 요소 표시) */
#css_tabs input:nth-of-type(1), #css_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2), #css_tabs input:nth-of-type(2) ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3), #css_tabs input:nth-of-type(3) ~ div:nth-of-type(3) {
    display:none
}
#css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#css_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2),
#css_tabs input:nth-of-type(3):checked ~ div:nth-of-type(3) {
    display:block
}

/* 라벨 기본 스타일 지정 */
#css_tabs > label {
    display:inline-block;
    font-variant:small-caps;
    font-size:.9em;
    padding:5px;
    text-align:center;
    width:20%;
    line-height:1.8em;
    font-weight:700;
    border-radius:3px 3px 0 0;
    background:#eee;
    color:#777;
    border:1px solid #ccc;
    border-width:1px 1px 0
}
#css_tabs > label:hover {
    cursor:pointer
}
#css_tabs label[for=tab1] {
    margin-left:1.5em
}

/* 선택된 라벨, 커서를 올린 라벨 스타일 지정 */
#css_tabs input:nth-of-type(1):checked ~ label:nth-of-type(1), #css_tabs > label[for=tab1]:hover {
    background:tomato;
    color:#fff
}
#css_tabs input:nth-of-type(2):checked ~ label:nth-of-type(2), #css_tabs > label[for=tab2]:hover {
    background:gold;
    color:#fff
}
#css_tabs input:nth-of-type(3):checked ~ label:nth-of-type(3), #css_tabs > label[for=tab3]:hover {
    background:green;
    color:#fff
}

/* 실제 내용이 담긴 div 요소 스타일 지정 */
#css_tabs .tab1_content, #css_tabs .tab2_content, #css_tabs .tab3_content {
    padding:2em;
    border:1px solid #ddd;
    width:70%;
    height:100%
}

HTML에 맞는 CSS 작성을 모두 마쳤다.

3. 실제 적용

앞에서 이야기한 HTML과 CSS를 실제로 적용한 모습이다. Result에서 각 탭을 클릭하면 탭에 따라 내용이 바뀌는 것을 확인할 수 있고 HTML, CSS를 클릭하면 실제 코드도 확인할 수 있다.


신고

Comment

  1. Unknown Visitor taedy 2014.04.28 23:16 신고

    익스10 인데 css가 제대로 적용이 되지 않네요

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.04.29 11:05 신고

      헛; 전 잘 되는데 왜 그럴까요?;;

      F12 키를 눌러서 [브라우저 모드]와 [문서 모드]가 제대로 설정되어 있는지 확인해 보시면 될 것 같습니다.
      IE9 이상에서 사용할 수 있는 탭 메뉴입니다~

  2. Unknown Visitor circle 2014.05.07 06:36 신고

    이것때문에 한참을 돌아다니다가 덕분에 해결 했습니다~ 감사합니다~
    한가지 질문이 있는데..
    이 메뉴에선 메뉴의 탭을 눌러야 내용이 바뀌잖아요?
    혹시 hover를 했을때 내용이 바뀌는건 불가능할까요?
    주먹구구로 공부하는 중이라;;; css에 있는 checked를 모두 hover로 바꾸니 바뀌긴 하는데 처음 로딩될 때
    tab1 버튼 밑에 tab1내용은 또 안나오네요..

    처음 나올땐
    tab1 / tab2 / tab3
    tab1내용
    그 뒤로 탭부분에 마우스 올리면 따라서 내용이 바뀌게 하고 싶은데..

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.05.07 23:06 신고

      써클님 안녕하세요~

      일단 이야기하신 내용을 적용하려면 CSS에 아래 스타일을 추가해줍니다.

      #css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(1){display:block}
      #css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(2){display:none}
      #css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(3){display:none}

      #css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(1){display:none}
      #css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(2){display:block}
      #css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(3){display:none}

      #css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(1){display:none}
      #css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(2){display:none}
      #css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(3){display:block}

      그러면 처음에 TAB1 내용이 나오고 탭에 마우스를 올렸을 때도 내용이 표시되고 탭을 클릭했을 때도 내용이 표시됩니다.

      혹시 다른 궁금한 내용 있으시면 다시 댓글 남겨주세요~

    • Unknown Visitor circle 2014.05.08 00:17 신고

      와.. 정말 감사합니다~ 한참을 어떻게 잔머리(?)를 쓰면 될까 궁리했었는데ㅎㅎ
      정말 많이 배워야겠단 생각이 드네요^^;;

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.05.08 23:04 신고

      잘 해결하셨나보네요~
      좋은 하루 되세요!

  3. Unknown Visitor 임성민 2014.06.12 09:48 신고

    익스 7 8에서도 적용할수 있는 방법이 없을까요?

  4. Unknown Visitor 임성민 2014.06.12 09:48 신고

    익스 7 8에서도 적용할수 있는 방법이 없을까요?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.06.16 14:21 신고

      앞에서 얘기한 방법으로는 IE7, 8에 적용이 안됩니다~
      다른 탭을 찾으셔야 할 것 같은데, 보통 IE7, 8에 적용이 되는 탭 메뉴는 JavaScript를 사용한 것들이 많더라구요.
      구글 등에 'CSS Tab' 등의 검색어로 검색하시면 JavaScript와 CSS를 사용해서 구현한 여러 가지 탭 메뉴를 확인하실 수 있을겁니다^^

  5. Unknown Visitor 제이 2014.06.14 22:09 신고

    안녕하세요! 포스트 잘봤습니다! 정말 잘 정리되어 있네요 ^^
    궁금한 점이 있는데요, 왜 css를 적용할 때 id나 class를 쓰지않고 ~, nth-of-type 선택자를 사용해서 하셨나요?? id나 class를 사용해서 하는 것보다 이점이 있나요?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.06.16 14:33 신고

      예전에 서핑 중에 nth-of-type를 사용한 예를 보고 저도 써봐야겠다 했거든요^^
      직접 해보진 않았지만, id나 class를 사용하셔도 적용되실 겁니다.
      제 생각엔 차이는 없을 것 같아요.

      근데 '~' 를 사용하지 않으면 제가 얘기한 방법으로 구현이 어려울 것 같은데 다르게 사용할 수 있는게 어떤게 있을지 잘 떠오르지가 않네요.
      input 뒤에 오는 label의 display 속성을 컨트롤해야 하는데 그 부분만 해결하면 '~'도 사용하지 않아도 될 것 같습니다~

  6. Unknown Visitor 맹승섭 2014.08.02 12:43 신고

    안녕하세요? 덕분에 css tab에 대해서 이해를 조금은 한것 같습니다.
    초보자라 궁금한게 있어서, 염치불구하고 질문드립니다.
    css tab을 이용해서 사이드메뉴바를 만들려고 합니다.
    TAB 1, TAB 2, TAB 3 아래에 있는
    Tab 1 내용, Tab 2 내용, Tab 3 내용에 링크들 리스트를 넣고, 해당 링크를 클릭하면 화면 우측에 링크된 내용을 보여주려고 합니다.
    문제는,
    만일 TAB 2 내용에 있는 링크를 클릭했을 경우 우측에 해당 링크된 내용이 보여지면서, TAB 2가 계속해서 선택되어져 있어야 하는데,
    우측 내용이 로딩 될 때에 전체 화면이 다시 로딩되면서, 왼쪽 TAB도 초기화가 되어서 다시 TAB 1 을 보여집니다.
    마지막 선택한 TAB 을 페이지가 다시 로딩된 후에도 보여지게 하고 싶은데요, 가능한가요?
    가능하다면 현재 css TAB에서 어떤 방법으로 구현이 가능한지요?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.08.13 23:09 신고

      맹승섭님, 안녕하세요. 방문 고맙습니다.

      문의주신 내용은 링크된 페이지가 어떤 것이냐에 따라 차이가 있을것 같습니다.

      일단 iframe 등으로 외부 페이지를 불러오는 상황이라면 말씀하신 부분은 구현이 어려울 것 같습니다.

      반면, 티스토리 내부의 페이지이고 해당 페이지가 게시글이 아닌 '방명록', '태그 페이지', '검색결과' 등등 티스토리에서 제공하는 기본 페이지 중 하나라면 가능할 것 같습니다.

      예를 들어 '방명록'이라면 body 부분의 id가 "tt-body-guestbook"으로 바뀌게 됩니다. 그럴땐 css에서 tab2 내용이 표시되도록 설정할 수 있습니다.

      만약 위에서 이야기한 상황이 아니라면 제가 아는 선에서는 CSS만으로는 구현이 어렵지 않을까 싶습니다.
      혹시 문의주신 상황이 제가 이해한 것과 다르다면 다시 답글 남겨주시면 제가 아는 범위에서 답변 드리겠습니다.
      오늘 하루 마무리 잘 하세요!!

  7. Unknown Visitor 홈피개발자 2014.09.23 21:40 신고

    소스를 응용해보다 문제점에 부딪혀서 여쭤봅니다...

    html 소스부분에
    <div class="tab1_content">
    <div id="piechart_3d" style="width: 100%; height: 500px;"></div>
    </div>
    <div class="tab2_content">
    <div id="table_div"></div>
    </div>
    이 부분을 추가했더니

    <input id="tab1" type="radio" name="tab" checked="checked">에서
    checked="checked" 부분만 정상적인 크기로 나오고

    나머지 tab2, tab3에서는 그래프가 굉장히 조그맣게 나오는데 어느부분에서 잘못된건지 도저히 모르겠어서 그런데

    도움을 주실 수 있을까요?


    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.09.25 09:27 신고

      개발자님 안녕하세요~

      일단 올려주신 소스로는 tab1_content 안에만 높이 500px로 고정된 div 요소 내부에 차트가 들어가는 것 같은데 tab2_content 부분에 table_div 부분에 뭐가 들어갈지 잘 모르겠네요;

      일단 남겨주신 얘기로는 세 가지 tab에 다 차트가 삽입되는 구조인것 같은데 지금 남겨주신 내용으로는 어떤 문제인지 잘 모르겠습니다.

      tab 부분 전체 소스 남겨주시면 다시 확인해보겠습니다.
      좋은 하루 되세요~

  8. Unknown Visitor 왕초보 2014.09.26 13:05 신고

    안녕하세요 탭메뉴 찾아다니다가 발견해서 응용하고 있는 왕초보입니다.
    html이랑 css를 아래처럼 했는데요
    tab이 선택되었을때의 효과가 적용이 안됩니다 ㅠ
    hover일때는 제대로 나오구요...
    제가 뭘 잘못했는지 이것저것 해봤는데도 제대로 안되서 조언을 구하고자
    부끄럽지만 소스 올립니다.

    /*html*/
    <div class="tab_nav">
    <input id="tab1" type="radio" name="tab_nav" checked="checked">
    <input id="tab2" type="radio" name="tab_nav">
    <input id="tab3" type="radio" name="tab_nav">
    <section>
    <label for="tab1" class="tab_nav1"><span></span>Tab 1</label>
    <label for="tab2" class="tab_nav2"><span></span>Tab 2</label>
    <label for="tab3" class="tab_nav3"><span></span>Tab 3</label>
    </section>
    <div class="tab_text">
    <p>1. Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="tab_text">
    <p>2. Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="tab_text">
    <p>3. Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    </div><!-- tab_nav -->

    /*css*/

    input:nth-of-type(1),
    input:nth-of-type(2),
    input:nth-of-type(3),
    input:nth-of-type(1) ~ div:nth-of-type(1),
    input:nth-of-type(2) ~ div:nth-of-type(2),
    input:nth-of-type(3) ~ div:nth-of-type(3){
    display: none;
    }
    input:nth-of-type(1):checked ~ div:nth-of-type(1),
    input:nth-of-type(2):checked ~ div:nth-of-type(2),
    input:nth-of-type(3):checked ~ div:nth-of-type(3){
    display: block;
    }
    .tab_nav{
    width: 370px;
    height: 175px;
    margin-bottom: 63px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    box-shadow: 0px 1px 1px #dcdcdc;
    }

    .tab_nav label{
    float: left;
    display: inline-block;
    width: 79px;
    height: 30px;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    padding-top: 15px;
    text-align: center;
    font-weight: bold;
    background-color: #fbfbfb;
    opacity: 0.5;
    cursor: pointer;
    }
    input:nth-of-type(1):checked ~ label:nth-of-type(1),
    input:nth-of-type(2):checked ~ label:nth-of-type(2),
    input:nth-of-type(3):checked ~ label:nth-of-type(3),
    label:hover{
    background-color: #ffffff;
    border-bottom: none;
    opacity: 1;
    }
    .tab_nav label span{
    display: inline-block;
    width: 15px;
    height: 13px;
    margin-right: 3px;
    background: url(../img/about/glyphicons-mini.png) no-repeat;
    }
    .tab_nav label.tab_nav1 span{background-position: 0 0;}
    .tab_nav label.tab_nav2 span{background-position: -361px -48px;}
    .tab_nav label.tab_nav3 span{background-position: 0 -72px;}
    .tab_nav section:after{content: ''; display: block; clear: both;}
    .tab_nav .tab_text{
    background-color: #ffffff;
    padding: 20px 20px 10px 20px;
    line-height: 1.8em;
    color: #888888;
    }

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.10.02 09:11 신고

      안녕하세요~
      댓글이 좀 늦었는데 벌써 해결하셨나요??

      탭이 선택되었을 때 효과가 적용 안된 부분은 <input>과 <label> 사이에 <section>이라는 요소가 삽입되어서 그렇습니다.

      CSS에서 물결모양( ~ )은 바로 뒤에 이어서 오는 요소에 대한 속성을 지정하는 선택자입니다. 그런데 section 이라는 요소가 추가되니 input과 label이 바로 이어서 오는 부분이 없다고 판단한 거죠~

      CSS에 아래와 같이 section 요소를 추가해 주시면 해결될 겁니다!

      * 원래 CSS 내용

      input:nth-of-type(1):checked ~ label:nth-of-type(1),
      input:nth-of-type(2):checked ~ label:nth-of-type(2),
      input:nth-of-type(3):checked ~ label:nth-of-type(3),
      label:hover{
      background-color: #ffffff;
      border-bottom: none;
      opacity: 1;
      }


      * 변경할 CSS 내용

      input:nth-of-type(1):checked ~ section label:nth-of-type(1), input:nth-of-type(2):checked ~ section label:nth-of-type(2), input:nth-of-type(3):checked ~ section label:nth-of-type(3), label:hover {
      background-color: #ffffff;
      border-bottom: none;
      opacity: 1;
      }

      적용해보시고 혹시 다른 문제 있으면 다시 댓글 주세요~~

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.10.02 09:13 신고

      http://jsfiddle.net/qodtspg4/

      위의 주소로 들어가시면 수정된 결과 확인하실 수 있습니다.
      탭이 깔끔한게 이쁘네요!

  9. Unknown Visitor Favicon of http://www.homzzang.com BlogIcon 홈짱 2014.12.06 19:34 신고

    좋은 정보 고맙습니다. 즐거운 주말 되세요!!

    덕분에 잘 배우고 갑니다.

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2014.12.08 12:54 신고

      방문 고맙습니다~
      주말 잘 보내셨나요?
      이번 한 주도 무사히 잘 보내시길!
      감기 조심하시구요~

  10. Unknown Visitor Favicon of http://nzeozzang.com BlogIcon 엔죠 2016.05.06 02:45 신고

    좋은 팁 감사합니다.

    말씀해주신데로 아래와 같이 하니 마우스를 올려두어도 새로운탭으로 적용이 되는데요.
    #css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(1){display:block}
    #css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(2){display:none}
    #css_tabs label:nth-of-type(1):hover ~ div:nth-of-type(3){display:none}

    #css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(1){display:none}
    #css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(2){display:block}
    #css_tabs label:nth-of-type(2):hover ~ div:nth-of-type(3){display:none}

    #css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(1){display:none}
    #css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(2){display:none}
    #css_tabs label:nth-of-type(3):hover ~ div:nth-of-type(3){display:block}

    그런데, tab1,tab2,tab3이 있고, 각 탭의 본문 내용들이 길다고 가정시,
    tab2에서 긴문장의 내용을 스크롤 해서 볼려니
    tab2에서 마우스가 벗어날때는 다시 tab1 처음 내용으로 돌아가버리네요.
    클릭 없이 tab2에서 마우스가 벗어나더라도 (tab1,tab3메뉴는 클릭하지않구요 ) tab2에 포함된 긴문장의 내용을 그대로 고정해서 볼수
    있게 하는 방법은 없을지요?

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2016.08.17 12:31 신고

      :checked 가 아닌 :hover 를 사용해서는 어려울 것 같습니다. hover 자체가 커서가 해당 영역에 있을때까지만 유지되는 것인데 벗어나면 당연히 처음으로 돌아가야 하는 거라서요^^;;

  11. Unknown Visitor 초보 2016.08.11 15:50 신고

    div 안에 검색기능을 추가하는데 input css때문에
    화면에서 사라집니다.

    방법이있을까요 ㅠ

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2016.08.17 12:26 신고

      어느 위치에 검색기능을 넣으시려는지 모르겠지만, Tab 중 하나의 div에 input을 넣으려면 해당 input 요소를 !important 처리해주시면 될 것 같습니다.
      아래 링크 참고하세요~

      http://jsfiddle.net/9BdZ6/24/

      -HTML-

      <div class="tab1_content">
      <input type="search" value="Search..." />
      </div>

      -CSS-

      #css_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1) input {
      display:inline-block!important
      }

  12. Unknown Visitor ㅠㅠㅠ 2016.10.05 18:06 신고

    님이 만드신 탭 메뉴와 내용 안에서는 input 태그가 작동하질 않습니다 ㅠㅠㅠ 왜죠!?!!!!

    • Unknown Visitor dd 2016.10.06 09:06 신고

      새로운 input태그가 안돼용.... ㅠㅠ

    • Unknown Visitor Favicon of http://circlash.tistory.com BlogIcon circlash 2016.11.10 10:21 신고

      input 태그가 화면에 표시는 되는데 입력 등 기능이 안된다는 이야기신가요??
      혹시 사용하신 소스가 있으면 알려주세요. 이유를 찾아보겠습니다.

      화면에 표시가 아예 안되는 문제라면
      http://jsfiddle.net/9BdZ6/24/
      여기 확인해보시면 될 겁니다~

  13. Unknown Visitor 감사합니당 2017.05.19 21:00 신고

    학원에서 과제중인데 잘 몰라서 찾아보다가 여기까지 왔어요 정말 차근차근 잘 따라할 수 있게 설명해주셔서 완성했습니다 정말 감사해요 ^^ 좋은 글 더 둘러보고 가겠습니당 추천도 했어요~~