본문 바로가기

HTML

[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.. 더보기
[HTML] 범위 주석 ■ 범위 주석 : 원하는 범위에 대한 설명문 범위주석 설명 \n · Enter \t · Tap(웹 브라우저에 따라 실행 안될 경우가 존재한다. \" · 문자 \' · 문자 \\ · 문자 더보기
[HTML] lable 태그를 사용한 radio 박스 선택영역 확장 ■ lable 태그를 사용한 radio 박스 선택영역 확장 radioLable.php 선택영역이 확장되지 않은 경우 나이트 엘프 오크 언데드 휴먼 출력결과 라디오 박스를 사용하면 기본적으로 위 예제와 같이 작은 라디오 박스 부분만 선택영역으로 지정된다. 그렇지만 아래와 같이 lable태그를 사용함으로서 선택영역을 좀더 넓힐 수 있다.텍스트 위와 같은 방식을 예제에 적용하면 결과는 아래와 같이 달라진다. radioLable.php 선택영역이 확장된 경우 나이트 엘프 오크 언데드 휴먼 출력결과 더보기