카테고리 구조(트리 구조) HTML파일 만들기, 블로그에 적용 하기

 

아래 sample은 블로그에 적용한 트리입니다.

sample을 누르면 트리가 열리고

링크를 누르면 해당 페이지로 이동합니다.

 

 

• sample
  • 게임
    • 휴대폰에 저장되어 있는 사진으로 숫자 퍼즐 하는 방법(슬라이딩 퍼즐)
      https://zeliard.tistory.com/32?category=809268
  • 부동산
    • 양도가액에 따른 양도소득세 실시간 계산
      https://zeliard.tistory.com/29?category=800220
  • 팁 모음
    • 촬영, 녹음 없이 글만으로 영상 쉽게 만드는 법
      https://zeliard.tistory.com/27?category=796693
    • 웹주소를 입력하여 피싱사이트인지 검사하는 법
      https://zeliard.tistory.com/26?category=796693
    • QR코드 스캔 후 피싱사이트인지 검사하는 방법
      https://zeliard.tistory.com/28?category=796693

 

트리 구조는 정보를 카테고리별로 관리할 때 유용합니다.

간단한 트리는 HTML의 <ul>, <li> 태그를 이용해서 만들 수 있습니다.

그러나 트리의 구조가 복잡하면

코드를 직접 작성해서 만들기가 쉽지 않습니다.

이럴 경우 프로그램을 사용해서

트리의 HTML 코드를 쉽게 만들 수 있습니다.

 

트리의 HTML 코드를 만들 수 있는 프로그램입니다.

 

* 플레이 스토어

play.google.com/store/apps/details?id=com.sinsoft.treememo

트리 구조 메모장(Tree Structure Notepad) - Google Play 앱

* 원스토어

m.onestore.co.kr/mobilepoc/apps/appsDetail.omp?prodId=0000750737

트리 구조 메모장 - 원스토어

 

첫 화면에서 뿌리 추가 버튼을 누릅니다

 

뿌리 이름을 입력하고 저장을 누릅니다

 

항목을 추가합니다

 

항목을 계속 추가하여 트리를 완성시킵니다

 

뒤로 가기 버튼을 누른 후 HTML 트리 생성 메뉴를 선택합니다

 

HTML 트리 만들기 버튼을 누릅니다

 

트리를 블로그에 삽입할 경우 소스 복사 후 블로그 HTML모드에 붙여넣기 합니다

트리를 HTML파일로 만들려면 HTML 파일 생성 버튼을 누릅니다

 

 

HTML 파일로 저장하면 인터넷 브라우저에서 열 수 있습니다

 

 

 

- 끝 -