2017/04 썸네일형 리스트형 [CSS] CSS 선택자 지정 방법 출처 : 자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉 ■ CSS 선택자 지정 방법 ▼ 선택자 기본 서식 서식 설명 * · 모든 요소 태그명 · 태그명이 일치하는 요소(예) .클래스명 · 클래스 속성 값이 일치하는 요소 #id명 · id 속성의 값이 일치하는 요소 ▼ 선택자끼리의 관계를 지정하는 서식 서식 설명 선택자, 선택자 · 열거된 복수의 선택자 (예) h1, h2 선택자 선택자 · 하위 계층의 후손 요소 (예) div > h1 선택자 > 선택자 · 바로 아래 계층의 자식 요소 (예) div > h1 선택자A + 선택자B · 같은 계층에 선택자A 바로 뒤에 있는 선택자B 한 개 (예) h1 + h2 선택자A ~ 선택자B · 같은 계층에 선택자A 바로 뒤에 있는 선택자B 모두 (예) p ~ .. 더보기 [HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02 참고 : 자바스크립트 없이 tree 만들기 ■ HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02 01. 이전 예제에서 2단 트리 뷰를 만들어 보았다. 이번에는 3단 트리뷰를 만들어 보자. tree.html HTML / CSS를 이용한 트리 트리 카테고리 one1 one2 one3 one3-1 one3-2 one3-3 one3-4 one3-4-1 one3-4-2 one3-4-3 one3-4-4 one3-4-5 one3-4-6 one3-4-7 one3-4-8 one3-4-9 one3-5 one3-6 one3-7 one3-8 two1 two2 two2-1 two2-2 two2-3 two3 출력결과는 아래와 같다. 하지만 기본적인 ul, li 태그의 점, 블릿기호가 삽입된 모습니다... 더보기 [HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #01 참고 : 자바스크립트 없이 tree 만들기 ※ 해당 글은 참고로 올려둔 생활코딩의 내용을 자체적으로 정리한 내용입니다. ■ HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #01 01. 먼저 ul, li 태그와 checkbox를 이용하여 트리 구조를 만들어 보자. 코드는 아래와 같다. tree_01.html HTML / CSS를 이용한 트리 트리 카테고리 one1 one2 one3 one3-1 one3-2 one3-3 two1 two2 two2-1 two2-2 two2-3 two3 위 코드를 그대로 입력하면. 아래와 같은 결과의 트리 구조가 출력되는 것을 확인 할 수 있다. 02. 이제 체크박스를 check함으로서 체크박스의 창을 열고 닫고 하는 기능을 추가하여보자. tree_02.. 더보기 이전 1 다음
