HTML/ [HTML] input을 활용한 메뉴 탭 만들기
2023-03-07 16:14:22

input 활용

input 태그는 값을 입력받기 위한 태그로 주로 form과 짝을 지어 쓰는 경우가 많지만 input과 label을 활용하여 탭처럼 활용할 수도 있다.

 

 

checked 속성을 활용한 내용 변환

radio의 특징은 여러개 중 1개 밖에 선택 할 수 없는 것이고 이것을 활용하여 checked 되어 있는 태그만 활성화하고 나머지는 숨겨 두는 방식으로 실습을 진행해 본다.

 

소스 코드

 

  • 아래 같은 방법을 사용하기 위해선 같은 부모 태그에 있어야 한다.
  • input name을 똑같이 하지 않으면 checked가 중첩이된다.

 

html - inputlabel.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>inputlabel</title>
    <link rel="stylesheet" href="./inputlabel.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="main">
        <!-- input을 radio 타입으로 사용 -->
        <!-- name을 같이 줘야 checked가 원하는대로 동작 -->
        <!-- id와 label의 for을 똑같이 해서 연결 시켜줌 -->
        <input type="radio" class="tab01" id="tab1" name="tabtab" checked />
        <label for="tab1">1번 상자</label>
        <input type="radio" class="tab02" id="tab2" name="tabtab" />
        <label for="tab2">2번 상자</label>
        <input type="radio" class="tab03" id="tab3" name="tabtab" />
        <label for="tab3">3번 상자</label>

        <div class="testbox1">1번 활성화</div>
        <div class="testbox2">2번 활성화</div>
        <div class="testbox3">3번 활성화</div>
      </div>
    </div>
  </body>
</html>

 

css - inputlabel.css

.wrap {
  width: 100%;
  height: auto;
}

.main {
  width: 500px;
  height: 500px;
}

.main input {
  display: none;
}

.main > input + label {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid;
  cursor: pointer;
  margin-bottom: 10px;
}

.main div {
  color: white;
}

.testbox1 {
  width: 100px;
  height: 100px;
  background-color: red;
  display: none;
}
.testbox2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: none;
}
.testbox3 {
  width: 100px;
  height: 100px;
  background-color: green;
  display: none;
}

input[class="tab01"]:checked ~ .testbox1 {
  display: block;
}
input[class="tab02"]:checked ~ .testbox2 {
  display: block;
}
input[class="tab03"]:checked ~ .testbox3 {
  display: block;
}

 

결과

 

상자를 누르면 페이지가 변하지 않고 &nbsp;번호에 맞는 상자가 나온다.

 

메뉴탭 처럼 만들기

동작 방식은 위와 같은 방법이며 약간의 스타일을 입혀 메뉴 같아 보이게 디자인해보자.

 

소스코드

 

html - inputlabel.html

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>inputlabel</title>
    <link rel="stylesheet" href="./inputlabel.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="main">
        <h1>메뉴탭 만들어보기</h1>
        <!-- input을 radio 타입으로 사용 -->
        <!-- name을 같이 줘야 checked가 원하는대로 동작 -->
        <!-- id와 label의 for을 똑같이 해서 연결 시켜줌 -->
        <input type="radio" class="tab01" id="tab1" name="tabtab" checked />
        <label for="tab1">tab menu 01</label>
        <input type="radio" class="tab02" id="tab2" name="tabtab" />
        <label for="tab2">tab menu 02</label>
        <input type="radio" class="tab03" id="tab3" name="tabtab" />
        <label for="tab3">tab menu 03</label>
        <input type="radio" class="tab04" id="tab4" name="tabtab" />
        <label for="tab4">tab menu 04</label>
        <input type="radio" class="tab05" id="tab5" name="tabtab" />
        <label for="tab5">tab menu 05</label>

        <div class="testbox testbox1">
          <h2>tab menu 01</h2>
          <div class="testbox1_1">
            <div class="card">이미지</div>
            <div class="txt">
              <p>글쓰는 공간</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지</div>
            <div class="txt">
              <p>글쓰는 공간</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지</div>
            <div class="txt">
              <p>글쓰는 공간</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지</div>
            <div class="txt">
              <p>글쓰는 공간</p>
            </div>
          </div>
        </div>
        <div class="testbox testbox2">
          <h2>tab menu 02</h2>
          <div class="testbox1_1">
            <div class="card">이미지2</div>
            <div class="txt">
              <p>글쓰는 공간2</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지2</div>
            <div class="txt">
              <p>글쓰는 공간2</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지2</div>
            <div class="txt">
              <p>글쓰는 공간2</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지2</div>
            <div class="txt">
              <p>글쓰는 공간2</p>
            </div>
          </div>
        </div>
        <div class="testbox testbox3">
          <h2>tab menu 03</h2>
          <div class="testbox1_1">
            <div class="card">이미지3</div>
            <div class="txt">
              <p>글쓰는 공간3</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지3</div>
            <div class="txt">
              <p>글쓰는 공간3</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지3</div>
            <div class="txt">
              <p>글쓰는 공간3</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지3</div>
            <div class="txt">
              <p>글쓰는 공간3</p>
            </div>
          </div>
        </div>
        <div class="testbox testbox4">
          <h2>tab menu 04</h2>
          <div class="testbox1_1">
            <div class="card">이미지4</div>
            <div class="txt">
              <p>글쓰는 공간4</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지4</div>
            <div class="txt">
              <p>글쓰는 공간4</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지4</div>
            <div class="txt">
              <p>글쓰는 공간4</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지4</div>
            <div class="txt">
              <p>글쓰는 공간4</p>
            </div>
          </div>
        </div>
        <div class="testbox testbox5">
          <h2>tab menu 05</h2>
          <div class="testbox1_1">
            <div class="card">이미지5</div>
            <div class="txt">
              <p>글쓰는 공간5</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지5</div>
            <div class="txt">
              <p>글쓰는 공간5</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지5</div>
            <div class="txt">
              <p>글쓰는 공간5</p>
            </div>
          </div>
          <div class="testbox1_1">
            <div class="card">이미지5</div>
            <div class="txt">
              <p>글쓰는 공간5</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

 

css - inputlabel.css

 

* {
  box-sizing: border-box;
}
.wrap {
}

.main {
  margin: 0 auto;
  position: relative;
  width: 1000px;
  height: 700px;
  /* border: 1px solid; */
}

.main input {
  display: none;
}

.main > input + label {
  position: relative;
  float: left;
  width: 20%;
  height: 40px;
  border: 1px solid;
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.main > input:checked + label {
  border: 2px solid red;
}

.main div {
}

.testbox {
  width: 100%;
  height: 550px;
  display: none;
}

.testbox1 {
}
.testbox2 {
}
.testbox3 {
}
.testbox4 {
}
.testbox5 {
}

input[class="tab01"]:checked ~ .testbox1 {
  display: inline-block;
}
input[class="tab02"]:checked ~ .testbox2 {
  display: inline-block;
}
input[class="tab03"]:checked ~ .testbox3 {
  display: inline-block;
}
input[class="tab04"]:checked ~ .testbox4 {
  display: inline-block;
}
input[class="tab05"]:checked ~ .testbox5 {
  display: inline-block;
}

.testbox1_1 {
  display: inline-block;
  width: 200px;
  height: 300px;
  margin-left: 61px;
}

.testbox1 .testbox1_1:nth-child(2) {
  margin-left: 0;
}
.testbox2 .testbox1_1:nth-child(2) {
  margin-left: 0;
}
.testbox3 .testbox1_1:nth-child(2) {
  margin-left: 0;
}
.testbox4 .testbox1_1:nth-child(2) {
  margin-left: 0;
}
.testbox5 .testbox1_1:nth-child(2) {
  margin-left: 0;
}

.testbox1_1 .card {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

.testbox1_1 .txt {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

 

결과

 

메뉴탭을 누를때마다 아래 카드들이 바뀐다.

 

728x90

'HTML' 카테고리의 다른 글

[HTML] TABLE 태그 사용하여 입사지원서 만들기  (1) 2023.02.28
[HTML] A태그와 IMG태그를 활용하여 LIST 실습  (0) 2023.02.28
[HTML] 태그 및 VScode 단축키 정리  (0) 2023.02.27

티스토리툴바