[CSS 응용] 탭 메뉴 만들기

 

안녕하세요 PNcoding입니다 :)

 

오늘은 인풋태그를 활용한 탭메뉴를 만들어 보도록 하겠습니다.

 

인풋과 관련된 내용은 아래의 포스팅을 참고해 주세요 :)

https://pncoding.tistory.com/36

[HTML 기초] form(폼)태그와 input(인풋)태그, label태그

 

 

---

 

 

바디구조 작성 1 (구조 작성)

먼저 바디구조를 작성해 보도록 하겠습니다.

<div class="wrap">

    <input type="radio" name="tab" id="tab_1">
    <input type="radio" name="tab" id="tab_2">

    <div class="menu_wrap">
        <label for="tab_1" class="menu_1">탭1</label>
        <label for="tab_2" class="menu_2">탭2</label>
    </div>

    <div class="box box_1">탭1 내용</div>
    <div class="box box_2">탭2 내용</div>

</div>

 

인풋태그의 종류 중 radio를 사용하여 탭메뉴를 구성해 보도록 하겠습니다.

 

탭의 형태는 인풋과 연동된 label태그로 구성을 해 주었으며,

탭을 클릭하였을 때 각 탭과 관련된 내용이 나오도록 만들어 주었습니다.

 

또한 인풋태그의 라디오는 name이라는 속성을 활용하여 하나만 선택을 할 수 있게 만들어 주었습니다.

 

 

스타일시트 작성 1 (형태 작성)

*{ margin: 0; padding: 0; box-sizing: border-box;}

.wrap {
    width: 400px;
    height: 150px;
    background-color: #dbdbdb;
}

input {
    display: none;
}

.menu_wrap {
    display: flex;
    font-size: 18px;
    padding: 5px 10px;
    height: 40px;
}

.menu_wrap>label {
    margin-right: 20px;
}

.box {
    padding: 10px;
    width: 100%;
    height: 110px
    display: none;
}

.box_1 {
    background-color: lightblue;
}

.box_2 {
    background-color: lightcyan;
}

 

인풋태그와 레이블태그가 연동이 되어있는지를 확인한 다음 인풋태그는 display:none을 걸어주었습니다.

 

또한 각 박스들은 인풋태그가 눌러졌을 때 나오게 하기 위하여 형태를 잡아 둔 다음 display:none 처리를 해주었습니다.

 

 

 

반응형

 

스타일시트 작성 2 (움직임 구현)

#tab_1:checked~.menu_wrap>.menu_1 {
    font-weight: 900;
}

#tab_2:checked~.menu_wrap>.menu_2 {
    font-weight: 900;
}

#tab_1:checked~.box_1 {
    display: block;
}

#tab_2:checked~.box_2 {
    display: block;
}

 

형태를 잡아 준 다음 탭을 구현하기 위해 명령어를 작성해 주었습니다.

 

label태그가 선택자가 아닌 인풋태그가 선택자로 잡힌 것을 확인할 수 있습니다.

실제로 label태그는 연동만 되어있을 뿐 실제로 체크가 되는 태그는 인풋태그이기 때문에 label태그를 선택자로 잡지 않도록 주의해 주시면 되겠습니다.

 

각 인풋태그를 체크하였을 때 label태그의 스타일을 변경시켜 주었습니다.

또한 각 박스들의 보이도록 작업을 해주었습니다.

 

 

 

 

바디구조 작성 2 (브라우저 새로고침시 탭이 보이도록)

잘 구현된 것처럼 보이지만 브라우저를 새로고침 하였을 때 탭의 내용이 아무것도 보이지 않는 것을 볼 수 있습니다.

따라서 브라우저를 새로고침 하였을 때에 탭 1이 선택이 되어 내용이 보이도록 만들어주도록 하겠습니다.

<div class="wrap">

    <input type="radio" name="tab" id="tab_1" checked>
    <input type="radio" name="tab" id="tab_2">

    <div class="menu_wrap">
        <label for="tab_1" class="menu_1">탭1</label>
        <label for="tab_2" class="menu_2">탭2</label>
    </div>

    <div class="box box_1">탭1 내용</div>
    <div class="box box_2">탭2 내용</div>

</div>

 

탭 1이 눌러져 있도록 하기 위해서 인풋태그의 속성에 checked를 추가해 주었습니다.

그러면 브라우저를 새로고침 하더라도 tab_1의 인풋이 체크된 상태로 만들어 줄 수 있습니다.

 

 

결과화면

탭1 탭2

탭1 내용

탭2 내용

 

탭을 눌러보세요!

 

 

---