HTML 탭 만들기 - HTML taeb mandeulgi

Question

안녕하세요.

목차 Show

1. 탭 메뉴 HTML 코드
2. 탭 메뉴 CSS 코드
3. 실제 적용

오늘은 Tab menu를 한번 구현해 볼 것입니다.

Tab menu를 구현하는 방법에는 여러가지가 있지만, 이번에는 JavaScript의 도움없이, HTML과 CSS만으로 구현하는 방법을 소개하겠습니다.

스틱코드를 사용하면, 여기서 작성된 코드를 손쉽게 사용할 수 있으니 참고해주세요~~

https://stickode.com/detail.html?no=2557

스틱코드

stickode.com

일단 파일구조는 다음과 같습니다.

[연습용 웹페이지] 라는 폴더 안에 index.html 파일과 page.css라는 파일이 같이 들어있습니다.

여기서 [연습용 웹페이지]라는 폴더 명칭은 그리 중요한건 아닙니다. 중요한 부분은 같은 폴더 안에 위의 두 파일이 존재하고 있다는 것입니다.

각 폴더의 내용은 다음과 같습니다.

index.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <title>탭메뉴</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- css 추가 하는 위치 -->
    <link href="page.css" rel="stylesheet">
</head>

<body>
    <p></p>
    <p></p>
    <p></p>
    <div class="tab-area">
        <input type="radio" name="tabs" id="tab1" checked>
        <label for="tab1">빨강</label>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">파랑</label>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">노랑</label>
        <input type="radio" name="tabs" id="tab4">
        <label for="tab4">초록</label>

        <div id="content1" class="tab-content red">
            <!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
        </div>
        <div id="content2" class="tab-content blue">
            <!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
        </div>
        <div id="content3" class="tab-content yellow">
            <!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
        </div>
        <div id="content4" class="tab-content green">
            <!-- 이부분에 넣고 싶은 내용을 넣으면 된다 -->
        </div>
    </div>

</body>

</html>

page.css

html,
body {
  height: 100%;
  padding: 0%;
  margin: 0%;
}


/* 1. tab 영역 css 설정 */
.tab-area {
  width: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


/* 2. tab 메뉴 부분 디자인 */
.tab-area input {
  display: none;
}  

.tab-area label {
  margin-left: auto;
  margin-right: auto;
}
  
/* label에 마우스 올렸을 때 */
.tab-area label:hover {
  cursor: pointer; /*마우스 모양 변경*/
}
  
/* tab-area 안에 존재하는 input 태그가 체크되었을 때, 
체크된 input 태그 다음에 등장하는 label의 css 값 */
.tab-area input:checked + label {
  /* 해당 메뉴가 선택된 상태인지 아닌지를 사용자에게 알려줄 수 있음 */
  font-weight: bold;
  color: red;
}
  

/* 3. tab 내용 부분 디자인 */
.tab-content {
  width: 100%; /*부모 div width와 같은 width를 가진다.*/
  height: 500px;
  display: none; /*기본 값일땐 화면에 표시하지 않음. 체크 상태일 때, 화면에 표시되어야 함 */
  border-top: 2px solid rgba(200, 200, 200, 0.534);/*탭 메뉴와 내용구분선*/
}
  

/* input 태그가 체크 상태일떼, 이에 대응하는 content?를 display에 표시하도록 설정 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: flex;
}


/* 구분을 위해 추가 */
.red {
  background: red;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

input 태그를 라디오버튼으로 설정하여, 4개중 하나만 선택할 수 있도록 하고,

input 태그의 선택여부에 따라 content라는 클래스를 가진 div를 화면에 보여주고 안보여주고를 제어하는 것이 해당코드의 핵심입니다.

간단하게 시연을 보고 마무리 하도록 하겠습니다.

웹사이트나 블로그를 돌아다니다 보면 탭으로 구분된 메뉴를 종종 볼 수 있다. 탭으로 메뉴를 구성하면 가로나 세로로 나열된 정보를 작은 공간에 표시할 수 있다는 장점이 있다. /'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 작성을 모두 마쳤다.