겁나 빠른 웹 레시피

자바스크립트 없이 tree 만들기

소개

Tree view는 디렉토리 구조와 같은 정보를 보여주기 위한 UI입니다. 일반적으로 Tree view를 만들기 위해서는 자바스크립트와 같은 기술이 필요한 것으로 알려져있지만 html, css 만으로도 꽤 많은 기능을 구현할 수 있습니다. 여기서는 그 방법을 알아봅니다. 

미리보기

 

사용기술

관련기술

수업 

 
 
 

예제 - tree.html

<!doctype html>
<html>

<head>
 <link rel="stylesheet" href="tree_fontello/css/fontello.css">
  <style>
    .tree{
      color:#393939;
    }
    .tree, .tree ul{
      list-style: none;
      padding-left:17px;
    }
    .tree *:before{
      width:17px;
      height:17px;
      display:inline-block;
    }
    .tree label{
      cursor: pointer;
    }
    .tree label:before{
      content:'\f256';
      font-family: fontello;
    }
    .tree a{
      text-decoration: none;
      color:#393939;
    }
    .tree a:before{
      content:'\e800';
      font-family: fontello;
    }
    .tree input[type="checkbox"] {
      display: none;
    }
    .tree input[type="checkbox"]:checked~ul {
      display: none;
    }
    .tree input[type="checkbox"]:checked+label:before{
      content:'\f255';
      font-family: fontello;
    }
  </style>
</head>

<body>
  <ul class="tree">
    <li>
      <input type="checkbox" id="root">
      <label for="root">ROOT</label>
      <ul>
        <li><a href="https://opentutorials.org">node1</a></li>
        <li><a href="https://opentutorials.org">node2</a></li>
        <li>
          <input type="checkbox" id="node3">
          <label for="node3">node3</label>
          <ul>
            <li><a href="https://opentutorials.org">node31</a></li>
            <li><a href="https://opentutorials.org">node32</a></li>
            <li><a href="https://opentutorials.org">node33</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

</body>

</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. 강병찬
    생활코딩 정말 너무 많이 유익합니다ㅠㅠ
    감사합니다!!
  2. 고맙습니다.
  3. sailor
    감사합니다.^^

    저는 css 태그인줄 알고 한참 헤맸네요.....ㅋㅋ

    <input type="checkbox" id="hello" checked="checked">라고 입력하니까, 자동으로 닫힌 상태로 표현되네요...
    대화보기
    • egoing
      태그에 checked 속성을 넣어주시면 되지 않을까요?
      대화보기
      • sailor
        감사히 잘 봤습니다. 몇 번을 봤네요..^^

        근데, 질문이 있습니다.
        tree 구조에서 초기에 모든 sub item이 close된, 즉 checked~ul{display:none;} 상태로 시작하게 할 수 있을까요?
        아니면 하위 폴더(예를 들어 node3)들은 닫힌 상태로 표시되게 css에서 변경할 수 있는지요?
      • Nudger
        2016.10.04 봤어요!
      • 베리스트롱
        감동받았어요 ...
      • 목선웅
        자동완성 역시 live view라는 브라켓 기능 중 하나입니다.
        대화보기
        • 1. 아마 bracket일거에요. 자동완성은 확장기능 같네요
          2. 자동새로고침은 웹팩이란것을 알아보시면 될거 같네여
          대화보기
          • 지나가다
            의미론적로도 어떤 엘리먼트가 선택되었는지에 대한 의미를 줄 수 있기 때문에 문제없지 않을까요?
            대화보기
            • 목선웅
              질문이 있습니다.
              체크박스나 라디오 박스의 checked css 선택자를 사용하면 탭같은 기능도 구성할 수 있는데, 그렇게 사용해도 html 의미적으로 괜찮은 것인가요?
              기존에는 그런 방식으로 사용했었는데 의미적으로 체크박스가 그래도 되는지에 대한 회의감때문에 요즘에는 다 스크립트로 처리하고 있거든요. 아시는 분 답변좀 부탁드립니다.
            • 멋져용
              체크박스 클릭!
            • egoing
              대화보기
              • 룡호
                참 재밋고 유익합니다. 이고잉님께 깊이 감사드려요.
                질문이 있어서 그런데...

                1.
                탭을 누르면 자동으로 척척 나머지 부분이 써지는 에디터는 뭐죠?

                2.
                그리고 에디터에 코딩한 게 웹브라우저에 바로 반영되도록 하는 방법은 무엇인가요? ^^
              • 잉자
                헐소름..................
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기