[Basic] HTML 작성

고보·2024년 2월 13일

Crawling 기초 강의 정리

목록 보기

2/12

1 HTML 기초 개념

HyperText Markup Language: 웹 페이지 모습 표현하기 위한 마크업 언어.
마크업 언어: 태그를 사용해 문서나 데이터 구조를 표현.
즉, HTML 페이지도 태그와 실제 데이터로 구성되어 있는 문서.
HTML은 모든 내용을 태그를 사용해서 표현. 콘텐츠 구조, 문단, 제목, 표, 이미지, 동영상 등 모든 구성 요소를 해당되는 태그로 정의. => 웹 브라우저는 HTML 태그를 해석하고 관련 정보를 시각화해서 보여주는 역할.
=> 따라서 HTML 문서 구조와 자주 사용하는 태그를 알아야 웹 크롤링 할 수 있음

2 태그

태그 작성 규칙
- 시작하는 태그와 끝나는 태그 쌍으로 꼭 작성. <head>로 시작 지점 표시, </head>로 끝 지점 표시.
- 태그에 속성을 사용 가능. <p>의 경우, <p align= "left">처럼 p에 align 속성이 left라는 값이라고 지정하는 것. => 문단 왼쪽 정렬.
기본 구조
<HTML>...<head>...</head>...<body>...</body>...</HTML> 구조. 즉, HTML 안에 head와 body가 있음.
head는 문서 구조, 속성 정의하는 영역. 웹 브라우저로 볼 수 없다.
body는 다양한 태그로 구성. 웹 브라우저에 보여짐.
주요 HTML 태그
- <title>: 이 페이지의 tab에 뜨는 이름
- <h1>~<h6>: 제목(headline) 서체. h2로 숫자가 커질수록 글씨 하위 제목.
  <h1>파이썬<h1>
- <p>: 문단 나눔
  <p>파이썬은</p><p>쉬워요</p>
- <a href="">: 링크 연결.
  <a href="http://www.naver.com">네이버<a> => 글자 네이버 클릭하면 저 링크로 가도록.
- <a>:
- <img>: 이미지 삽입
  <img src="http://www.naver.com/main.jpg">
- <table>: 테이블 작성
  <table> ... </table>
- <ul>: 순서 없는 목록표 작성
  <ol>: 순서 있는 목록표 작성. 숫자로 나옴.
  <li>: 리스트 항목(list item)
```
<ul><li>다음</li>
	<li>네이버</li>
</ul>

<ol><li>다음</li>
	<li>네이버</li>
</ol>
```
- span: 문장 또는 문단 내 구역 지정.
  <span style="color:red">구역</span>
- <button>: 버튼 생성
  <button>확인</button>
- <input>: 사용자 입력 가능한 텍스트 상자
  <input type="text">
- <br>: 줄 바꿈
  파이썬 <br> 좋아요
- <b>: 글자 모양 굵게 변경
  저는 <b>파이썬</b> 좋아요
- : 주석(설명) 작성
  
- <div>: 블록 레벨 요소. 별 의미를 가지지 않고, 구획을 나누는 요소. 그 구획에 따라 스타일 적용하거나 레이아웃 구성하기 위해서.
```
#1 레이아웃 구성: 헤더, 사이드바, 본문, 푸터 등으로 나누기
<div id="header">

</div>
```
#2 스타일링: 이 경우 배경, 테두리, 여백을 다른 색깔 적용

#3 그룹화: 관련된 콘텐츠 묶기 위해 div 사용

제품명

제품 설명
구매하기
```
class=와 id=
- class: 여러 요소에 동일한 이름 부여. 하나의 클래스에 동작, 스타일을 적용하면 그 클래스인 모든 항목에 적용. 선택자로 id와 동시에 지정될 경우 id보다 우선순위가 낮다.
- id: 고유해야 한다. 한 페이지 내에 하나만. 그 단 하나의 요소에 동작, 스타일 적용할 때 사용. 선택자로 class와 동시에 사용되면 우선순위가 더 높다.

3 CSS 기초 개념

Cascading System Sheets. HTML로 작성된 문서를 웹 브라우저에 표현할 때 서식 정해주는 언어. 즉, HTML이 뼈대, CSS가 디자인 느낌.
일반적으로 HTML 문서 내 <style> 태그 안에서 HTML 각 요소의 배경색, 폰트 등을 정의
CSS 스타일 지정 방법은 파이썬 딕셔너리 자료형과 유사. 대신 항목 간 구분에 ; 사용.
hi(선택자) {속성:값; 속성:값;}

관심종목<br>
<ul><li>키움증권</li>
	<li>대신증권</li>
    <li>미래에셋대우</li></ul>
<style>
li {width:120px; margin:8px; padding-botton: 4px; \
font-weight: bold; color: olive}
</style>

지정 방법 2가지. 태그 안에 style 코드 삽입 or style 코드 분리

#1 방법1. paragraph1만 blue로 색깔 지정. 
<body>
	<p style="color:blue"> paragraph1 </p>
    <p> paragraph2 </p>
</body>

#2 방법2 <style> 코드 분리
<style>
p:nth-child(1){
	color:blue;}
</style>
<body>
	<p> paragraph1 </p>
    <p> paragraph2 </p>
</body>

여기서 방법2는 pseudo-class선택자인 nth-child로 p 중 첫 번째 자식 요소에 스타일을 적용. style 아래 있는 것 중 첫 번째 p가 아니라, 문서 전체에 있는 모든 p 요소 중 첫 번째에 적용. 2로 바꾸면 2번째.

4 CSS 선택자

선택자(Selector): HTML 태그에 스타일 지정할 대상을 선택하거나 지정하는 방식. => 스타일을 어디에 적용할지 그 대상을 지칭하는 식별자

4-1 요소 선택자(Element Selector)

특정 태그 전체를 선택(p 태그 전체, a 태그 전체)해서 스타일을 적용
HTML 문서에 있는 해당 태그들은 일괄 적용

<style>
p { color:blue;}
</style>
<h3> headline </h3>
<p> paragraph1 </p>
<p> paragraph2 </p>

이 경우 h3는 적용 안되고, p만 적용

4-2 ID 선택자(ID Selector)

ID로 특정 요소에 접근.
#으로 ID인 걸 표현.

<html>
<head>
	<title> ID Selector </title>
    <style>
    	#Kimch { color:blue;}
    </style>
</head>
<body>
	<p class = "korean" id = "bibimbap" 비빔밥 </p>
    <p class = "korean" id = "bulgogi" 불고기 </p>
    <p class = "korean" id = "kimch" 김치 </p>
    <p class = "western" id = "steak" 스테이크 </p>
    <p class = "western" id = "hamburger" 햄버거 </p>
</body>
</html>

위의 경우 아이디가 kimch인 김치만 파란 색으로 스타일 적용

4-3 클래스 선택자(Class Selector)

같은 클래스 이름을 가진 모든 요소에 접근
.으로 클래스인 걸 표현

<html>
<head>
	<title> Class Selector </title>
    <style>
    	.western { color:blue;}
    </style>
</head>
<body>
	<p class = "korean" id = "bibimbap" 비빔밥 </p>
    <p class = "korean" id = "bulgogi" 불고기 </p>
    <p class = "korean" id = "kimch" 김치 </p>
    <p class = "western" id = "steak" 스테이크 </p>
    <p class = "western" id = "hamburger" 햄버거 </p>
</body>
</html>

이 경우 western 클래스인 스테이크, 햄버거만 적용

4-4 CSS 결합자(Combinator)

요소, ID, 클래스 선택자를 조합해서 사용해서, 특정 요소에 접근.
선택자 간의 계층 관계 파악해 ID나 클래스가 없는 요소에 접근할 때, 같은 클래스 이름 중에서도 특정 요소만 선택하고 싶을 떄
결합자 종류
- 자식 결합자: A > B로 B가 A의 자식임을 표시.
- 자손 결합자: A B(공백)으로 B가 A의 자식임을 표시.

#1 >로 표기
<style>
	.korean > li { color:red;}
</style>
<ul class = 'korean'>
	<li> 비빔밥 </li>
    <li> 불고기 </li>
    <ul class = '반찬'>
    	<li> 김치 </li>
        <li> 깍두기 </li>
    </ul>
</ul>
<ul class = 'western'>
	<li> 스테이크 </li>
    <li> 햄버거 </li>
</ul>

# 공백으로 표기
<style>
	.korean li { color:red;}
</style>
<ul class = 'korean'>
	<li> 비빔밥 </li>
    <li> 불고기 </li>
    <ul class = '반찬'>
    	<li> 김치 </li>
        <li> 깍두기 </li>
    </ul>
</ul>
<ul class = 'western'>
	<li> 스테이크 </li>
    <li> 햄버거 </li>
</ul>

위의 두 경우 모두 korean 클래스의 li인 비빔밥, 불고기만 색깔이 빨간색이 된다. 이 경우 클래스 선택자와 ID 선택자를 결합한 것.

고보

일본에서 일하는 게임 기획자. 시시해서 죽어버리지 않게, 재밌고 의미 있는 컨텐츠에 관심 있습니다. 그 도구로 데이터, AI도 찝적댑니다.

[Basic] HTML 작성

Crawling 기초 강의 정리

1 HTML 기초 개념

2 태그

제품명

3 CSS 기초 개념

4 CSS 선택자

4-1 요소 선택자(Element Selector)

4-2 ID 선택자(ID Selector)

4-3 클래스 선택자(Class Selector)

4-4 CSS 결합자(Combinator)

[Basic] 크롤링 기초 개념 + 큰 순서

[Module] requests 모듈

0개의 댓글