1. HTML
- 웹 브라우저의 주요 기능은 HTML 문서를 표시하는 것이다.
- HTML 문서는 .html or .htm으로 끝나는 파일이다.
- text file과 마찬가지로 HTML file은 보통 ASCII로 인코딩된다.
- HTML의 예시는 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>This is Ex</h1>
<p>So simple Example</p>
<a href="https://www.google.com">구글로 이동</a>
</body>
</html>
- 조금 자세히 들어가보자.
- <로 시작하고 >로 끝나는 각 문자열을 태그라고 한다.
- 자세히보면, <html> </html> 이렇게 시작 태그와 종료 태그가 정의되어 있다는게 감각적으로 알 수 있을 것이다.
- 즉, 시작 태그와 끝 태그는 위와 같이 정의가 되고, 그 사이에 태그의 콘텐츠가 들어가게 된다.
2. CSS
- CSS는 웹 페이지에서 HTML 요소의 모양을 정의한다.
- CSS는 레이아웃, 색상, 위치, 크기 및 기타 속성등을 정의하여 HTML 페이지를 좀 매력적으로 만들어 준다.
- 위의 HTML예시를 다시 들고와보자.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>This is Ex</h1>
<p>So simple Example</p>
<a href="https://www.google.com">구글로 이동</a>
</body>
</html>
- 여기서 CSS는 다음과 같이 작성이 가능하다.
h1 {
font-size: 20px;
color: green;
}- 해당 CSS에서 h1부분을 CSS selector라고 정의한다.
- CSS selector는 중괄호 안의 CSS가 모든 h1 tag의 콘텐츠에 적용됨을 나타낸다.
- 특정 클래스 또는 ID 속성이 있는 요소에만 적용되도록 CSS 선택기를 작성할 수 도 있다.
- 예를 들어 HTML이 다음과 같이 주어져 있다고 생각해보자.
<h1 id="main-title">Some Title</h1>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>- CSS가 다음과 같이 주어져 있다고 보자.
h1#main-title {
font-size: 20px;
}
div.content {
color: green;
}- #은 id atrribute 값을 나타내고,
- .은 class atrribute 값을 나타낸다.
- 만일, tag의 값이 상관이 없는 경우, tag 이름을 완전히 생략가능하다.
- 다음 CSS는 클래스 콘텐츠가 있는 모든 요소의 콘텐츠를 녹색으로 바꿔준다.
.content {
color: green;
}
- CSS는 웹 스크래핑을 할 때 깊이있게 공부할 필요는 없지만, 어느정도 간략한 규칙정도는 숙지하고 있으면 편하다.
'DS Study > Web Scraping' 카테고리의 다른 글
| [Web Scraping] [3.2] Regular Expressions (0) | 2025.03.26 |
|---|---|
| [Web Scraping] [3.1] BeautifulSoup (HTML Parsing) (0) | 2025.03.26 |
| [Web Scraping] [2.2] Introduction to BeautifulSoup (0) | 2025.03.25 |
| [Web Scraping] [2.1] urllib (파이썬 라이브러리) (0) | 2025.03.25 |
| [Web Scraping] [1.1] OSI 7 Layer (1) | 2025.03.24 |
