학습목표

웹페이지에서 주로 볼 수 있는 menu tree를 checkbox를 이용해 만들어 본다. 가상 선택자 :checked를 이용하여 요소를 숨기거나 나타나게하는 원리를 이해하고 checkbox와 label의 관계를 학습한다.

checkbox를 이용한 menu tree 만들어보자!

HTML

   <div class="menu_tree_management">
     <div class="title">메뉴 관리</div>
     <div class="table_ctn">
       <div class="menu_tree">
        <ul>
          <li>
            <input type="checkbox" id="ch1">
            <label for="ch1">기준경보 관리</label>
            <ul class="sub_menu">
              <li>프로젝트 현황</li>
              <li>프로젝트 정보관리</li>
              <li>설치정보 등록</li>
            </ul>
          </li>
        </ul>
       </div>
     </div>
   </div>

• 하나의 주제의 메뉴트리가 될 li 안에 checkbox와 checkbox를 제어할 label을 만들었다.

• 메뉴트리의 하위 메뉴는 다시 ul > li 형태로 li안에 넣어주었다.

CSS

/*메뉴트리 영역설정*/
.menu_tree_management {
  border: 1px solid #f1f1f1;
  display: inline-block;
  box-sizing: border-box;
  padding: 30px;
  background: #f9f9f9;
}

/*타이틀 스타일링 */
.menu_tree_management .title {
  height: 18px;
  line-height: 18px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
}


 /* 메뉴트리 영역*/

/* 1. 체크박스 숨기기*/
.menu_tree_management input[type=checkbox]{
  display: none;
}

/* 2. 라벨 스타일링*/
.menu_tree_management input[type=checkbox]+label{
  position: relative;
  display: inline-block;
  padding-left: 30px;
  height: 19px;
  line-height: 19px;
  font-size: 16px;
  color: #333;
}


/* 3. 라벨 앞의 아이콘 넣기*/
.menu_tree_management input[type=checkbox]+label::before {
  content: '';
  position: absolute;
  width: 19px;
  height: 19px;
  left: 0;
  top: 0;
  background: url('../img/menu_tree_icon_plus.png');
}


/* 4. 체크 되었을때 아이콘 변경*/
.menu_tree_management input[type=checkbox]:checked+label::before  {
  background: url('../img/menu_tree_icon_minus.png');
}

 /* 서브메뉴 노출 */

/* 5. ul.sub_menu 숨기기*/
.menu_tree_management input[type=checkbox] + label ~ * {
  display: none; 
}

/* 6. 체크시 ul.sub_menu 나타나기*/
.menu_tree_management input[type=checkbox]:checked + label ~ * {
  display: block;
}

.menu_tree_management input[type=checkbox] + label {
  color: #1a73c4;
}

/* 7. 라벨 스타일링*/
.menu_tree_management .table_ctn .menu_tree > ul > li {
  margin-bottom: 30px;
}

.menu_tree_management .table_ctn .menu_tree > ul > li:last-child {
  margin-bottom: 0px;
}

/* 서브메뉴 스타일링 */
.menu_tree_management .table_ctn .menu_tree .sub_menu {
  margin-top: 25px;
  text-indent: 30px;
}

.menu_tree_management .table_ctn .menu_tree .sub_menu > li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #666666;
}

/* 7. 서브메뉴 앞 기호넣기 */
.menu_tree_management .table_ctn .menu_tree .sub_menu > li:before {
  content: 'L';
  position: absolute;
  left: 0;
  top: 0;
}

2.label styling 에서 padding 주는 이유는 :before을 이용해 넣는 아이콘을 위한 공간을 만들기 위해서이다.

3.position ablsoulte 속성은 relative 속성을 가진 부모 기준으로 움직이기 때문에 첫 위치가 부모와 겹쳐 있다. (여기서는 label) 그래서 아이콘을 부모와 겹치지 않고 앞으로 보내기 위해 left,top 0을 줘 위치를 잡는다.

5 , 6. 가상 선택자 :checked를 이용해, checkbox가 체크가 없는 상태에선 기본적으로 display:none으로 숨겨두고, 체크가 되었을 때만 display:block을 이용하여 요소가 나타나게한다.

결과

• 체크박스 선택 전

  

• 체크박스 선택 후
  

CSS코드의 재사용

이렇게 만들어진 CSS코드는 재정의해서 재사용하는 것이 가능하다. 위의 코드를
menutree.css의 파일을 만들어 저장하면, 웹페이지를 제작할 때 HTML의 코드만 가져와 웹페이지에 맞는 스타일링을 다시 정의해 사용할 수 있다.

<link rel="stylesheet" href="./css/menutree.css">
 <link rel="stylesheet" href="./css/style.css">

주의!
파일을 link 시킬 때 menutree를 먼저 불러오고 style에서 재정의해야한다. 그렇지 않으면 스타일링된 요소들이 원래 정의된 menutree에 의해 덮어 씌어진다.

위가 실제로 적용시켜본 예시이다.
코드를 재정의해서 쓰면 효과적이고 경제적이게 웹사이트를 만들 수 있다!