고정 헤더 영역
상세 컨텐츠
본문
■ CSS (Cascading Style Sheet)
- HTML 문서에 각종 시각적 요소를 정의하기 위한 스타일 시트 언어
| ※ 계단식(cascading)이라는 단어는 상위 요소에 적용된 스타일이 상위 내의 모든 하위 요소에도 적용된다는 의미이다. 따라서 본문 텍스트의 색상을 "파란색"으로 설정하면 본문 내의 모든 제목, 단락 및 기타 텍스트 요소도 동일한 색상을 갖게 된다(다른 것을 지정하지 않는 한) |
- CSS는 많은 작업을 줄여준다. 여러 웹페이지의 레이아웃을 한 번에 제어할 수 있다.
■ CSS 사용
- CSS는 다음 세 가지 방법으로 HTML 문서에 추가할 수 있다.
- 인라인 - HTML 요소 내부에 style 속성을 사용하는 방법 : 단일 HTML 요소에 고유한 스타일을 적용
- 내부 - <head> 영역 안에 <style> 요소를 사용하는 방법 : 단일 HTML 페이지의 스타일을 정의하는데 사용
- 외부 - <link> 요소를 사용하여 외부 CSS 파일에 연결하는 방법 : 많은 HTML 페이지의 스타일을 정의하는데 사용
■ CSS 구문
- CSS 규칙은 선택기와 선언 블록으로 구성된다.
■ CSS 선택자(selector)
- CSS 선택자는 스타일을 지정하려는 HTML 요소를 가리킨다.
- CSS의 선택자를 이용하면 DOM 요소 선택을 수월하게 하여 스크래핑을 쉽게 할 수 있다.
| 선택자의 종류 | 선택자 사용 | CSS 내에서 선택자의 역할 |
| 요소(태그) 선택자 | 태그 이름 | 지정한 모든 태그를 선택 |
| id 선택자 | #id이름 | HTML 요소의 id 속성을 사용하여 특정 요소를 선택 하나의 HTML 문서 내에 같은 이름을 갖는 id의 값은 하나만 존재하므로 하나의 요소만 선택 |
| class 선택자 | .class이름 태그이름.class이름 |
하나의 HTML 문서 내에 같은 이름을 갖는 여러 개의 클래스 존재하므로 다수의 요소들 선택 특정 HTML 요소만 클래스의 영향을 받도록 지정할 수도 있다. |
■ JavaScript
- 웹 페이지 내에서 동적인 역할을 담당하는 스크립트 언어
- 프로토타입 기반의 동적 다중 패러다임 스크립트 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원
- Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용가능(https://developer.mozilla.org/ko/docs/Web/JavaScript/About)
'데이터 분석 > 웹 스크래핑' 카테고리의 다른 글
| 05. DOM(Document Object Model) (0) | 2023.10.25 |
|---|---|
| 03. Web 구성 요소 - 2 (0) | 2023.10.24 |
| 02. Web 구성 요소 - 1 (0) | 2023.10.24 |
댓글 영역