겁나 빠른 웹 레시피

자바스크립트 없이 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. jeisyoon
    2021.06.28 Tree without JavaScript - OK
  2. 늦은나이가아님
    2020.12.15 감사합니다
  3. Lsalute
    파일목록을 자바스크립트로 불러오는 것도 수업 추가해주시면 전 기꺼이 듣겠습니다!!
  4. before 대신 after를 사용하시면 됩니다.
    대화보기
    • Crocus24
      안녕하세요 이고잉님
      올리시는 강의들 참고하면서 감사하게 대학 과제 진행중에 있습니다.
      질문이 생겼는데요,
      만약 제가 저 아이콘들을 목록 뒤에다가 나타나게 하려면 어떻게해야할까요?
      가령 ▼ 아이콘을 쓴다고 했을때
      ▼Root 가 아니라 Root▼ 이렇게 나타내고 싶습니다
    • 루카찡
      마크업 의미적으로 문제 없을까요!?

      input 테그의 의미상도 그렇고요.
    • 보고 배우는 아재
      display:none 방식은 스크린 리더에서 읽어 주지 못합니다.

      그러므로 사용중엔 반드시 "웹브라우저 접근성"을 지키기 위해

      잘 판단하고 써주길 바랍니다 ㅠㅠ
    • 코딩잘하고싶어요 ㅎ
      좋은 강의 감사합니다.

      이 내용과 관련된 내용을 블로그에 올리고 제 나름대로 설명을 덧붙여 보았는데 그 과정에서 제가 CSS에 대해 얼마나 알고 있고 잘 아는 부분은 어디이며, 어느 부분이 취약한가에 대해서 알 수 있게 되었습니다. 사용자와 상호작용 할 수 있는 '컨텐츠'를 자바스크립트 없이도 구현할 수 있구나, 선택자라는 것이 이렇게 대단하구나라는 것을 느끼고 갑니다.
    • 김효진
      기초적인 질문을 하게 되는데요.
      <input type="checkbox" id="root">
      <label for="root">ROOT</label>
      <input type="checkbox" id="node3">
      <label for="node3">node3</label>
      을 입력했는데 체크박스 표시가 안보여서요.
      input이나 id에 css none 걸린것도 없는데 안보이네요.
    • 스for2
      고맙습니다.~ 늘 새로운 세계를 보여줘서 올 때마다 즐겁습니다.~
    • ContentPlaceHolder
      혹시 픽셀 수정하실때 늘렸다 줄였다 하시는 것 같은데 단축키가 어떻게 되나요?
      아니면 확장기능인가요?
    • 김신실
      chrome 이랑 Internet Explorer 로 할 때 둘다 사진이 로드가 되지 않네요... 이거 어떻게 하나요?
    • 강병찬
      생활코딩 정말 너무 많이 유익합니다ㅠㅠ
      감사합니다!!
    • 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@gmail.com
                현재 버전
                선택 버전
                graphittie 자세히 보기