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를 클릭하면 실제 코드도 확인할 수 있다.

관련글

• [컴퓨터/블로그] - CSS로 블로그 스크롤 바 스타일 지정하기(IE, Safari, Chrome)
• [컴퓨터/블로그] - CSS로 이미지, JavaScript 없는 블로그 메뉴 만들기
• [컴퓨터/블로그] - CSS 롤오버로 각주 만들기
• [컴퓨터/블로그] - CSS 롤오버로 CCL 표시하기 (2)
• [컴퓨터/블로그] - CSS 롤오버로 CCL 표시하기