[2] 파이썬 웹 스크래핑 - HTML/CSS
1. HTML 구조
내가 원하는 부분을 긁어서 가져오려면 HTML 구조를 다는 아니더라도 기본적으로는 알아야 한다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web.
We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html><head> 태그가 뭔지 <body> 태그가 뭔지 <li> ? <ul> ? ..
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML 기본 - Web 개발 학습하기 | MDN
HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수
developer.mozilla.org
교과서인데 HTML 기본과 CSS 기본 정도만 알고 있자
2. CSS 구조
딱딱한 html에 예쁘게 스타일을 입히는건데 만약 밑 사진에서
타이틀 문구인 Mozilla is cool 저 문장은 html 에서 <h1> 로 감싸져 있는데
원래는 <h1 style="color:파란색; font-size, ....."> 등등 태그 안에 속성을 다 넣어야하지만
css 파일로 따로 빼놓고 거기에 태그 속성을 정의하고
<link href="styles/style.css" rel="stylesheet" type="text/css"> 로 불러들였다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Mozilla is cool</h1>
<img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">
<p>At Mozilla, we’re a global community of</p>
<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>html {
font-size: 10px;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
html {
background-color: #00539F;
}
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
img {
display: block;
margin: 0 auto;
}
3. CSS 선택자
1. 태그로 선택
box { }
2. ID로 선택
#unique { }
3. 클래스로 선택
.hello {}
4. 속성으로 선택
[href="https://www.naver.com"]
5. 여러 선택자 OR 선택 ( h2 또는 p 태그 )
h2, p
6. 여러 선택자 AND 선택 ( class 이름이 abc 인 b 태그 )
b.abc
7. 중첩된 요소 ( li 태그 안에 i 태그 )
li i
8. 자식 ( li 태그 자식인 i 태그 )
li > i
9. 모든 태그 ( li 태그 안에 있는 모든 태그 )
li *
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/HTML_basics
HTML 기본 - Web 개발 학습하기 | MDN
HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 콘텐츠는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수
developer.mozilla.org