데이터 분석/웹 스크래핑

[Web Scrapping] Web 구성 요소 - 3

eunnys 2023. 10. 30. 14:00

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 

 

JavaScript | MDN

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼

developer.mozilla.org