[프로그래머스] 데브코스 데이터엔지니어링 TIL Day 6

주재민·2023년 10월 23일

KDT TIL python 데브코스 데이터 엔지니어 데이터 엔지니어링 웹 크롤링 크롤링 파이썬 프로그래머스

[데브코스] 데이터 엔지니어링

목록 보기

7/73

📖 학습주제

파이썬으로 웹데이터 크롤하고 분석하기 (1)

HTML(Hypertext Markup Language)
-> 웹 브라우저가 이해하고 보여줄 수 있는 웹 문서를 만드는 언어

CSS
-> 문서의 외형을 꾸미는 언어

Java Script
-> 문서에 기능을 만들어주는 언어

HTML 기본 문법

속성과 값

<tag attribute = value> content <tag/>
e.g.) <div title = '제목'> content <div/>

속성은 태그가 가지는 고유한 값과 모든 태그에 사용가능한 전역속성이 있다.

부모/자식 요소

html
├─ head
│ └─ title
└─ body

head의 부모 = html, html의 자식 = head

HTML 기본 문서

<!DOCTYPE html>   --------------> 문서 버전
<html lang = 'ko'>  ------------> HTML 문서 시작 선언 및 문서 기본 언어 설정
    <head>   -------------------> 문서에 필요한 정보가 기입되는 곳(head)
        <title>문서 제목</title> -> 문서의 제목
    </head>

    <body>   -------------------> 실제 사용자가 눈으로 볼 수 있는 문서의 내용이 입력되는 곳
        문서의 내용
    </body>
</html>

Head

사람 눈에는 보이지 않는 문서의 정보가 담기는 영역

Head가 가질 수 있는 정보의 종류

타이틀
메타데이터
- 인코딩 정보(charset : 문서에서 허용하는 문자의 집합)
- 문서 설명
- 문서 작성자
CSS, Script

Style

head 안에서 문서를 스타일링

<!-- 문서 글자색을 파란색으로 -->
        <style>
            body {
                color:blue;
            }
        </style>

길이가 길어질 경우 link로 대체해 사용할 수 있다.

Link

rel : 지금 링크된 파일
href : 링크할 파일 경로

style.css

body {
    color:blue;
}

        <link rel = 'stylesheet' href = 'style.css' />

-> 실행결과는 위의 style과 같다.

Script

콘텐츠를 가지기도 하고 가지지 않기도 함

<script>
    const hello = 'world';
    console.log(hello)
</script>

<script src = "script.js"></script>

Body

실제 사용자가 볼 수 있느 ㄴ콘텐츠가 담기는 영역

Block(블록레벨 요소)

블록의 크기, 내/외부에 여백을 지정할 수 있고 일반적으로 페이지의 구조적 요소를 나타냄
인라인 요소를 포함할 수 있으나 인라인의 요소에 포함될 수 없다.
div, article, section

Inline(인라인레벨 요소)

블록 내에 포함되어 있는 요소
주로 문장, 단어같은 작은 부분에 제공되며 한 줄에 나열된다.
좌/우에 여백을 넣는 것만을 허용
span, a, strong

Inline-block

글자처럼 취급되나 block 태그의 성질을 가지는 요소
block과 마찬가지로 크기, 내/외부 여백을 지정가능하다.
CSS로 성질을 바꾼 것이라 의미상 인라인레벨 요소에 해당한다.

Layout

div

콘텐츠 분할 요소
단순히 구역을 나누기 위한 태그

header

글의 제목, 작성일 등의 주요정보를 담는 태그

footer

페이지의 바닥쪽에 사용되며 저작권 정보, 연락처 등 부차적인 정보를 담는 태그

main

페이지의 가장 큰 부분으로 주요 콘텐츠를 담는 태그
한 페이지에 한번만 나온다.

section

콘텐츠의 구역을 나누는 태그

article

구역 안에서 작성된 독립적인 정보를 전달하는 태그

aside

문서의 내용의 부가적인 정보를 전달하는 태그

제목태그(h1 ~ h6)

문서 구획 제목을 나타내는 태그
h1태그는 페이지 내 한 번만 사용되어야 하고 구획의 순서는 지켜져야 한다.

문단태그(p)

문서에서 하나의 문단을 나타내는 태그
제목태그와 함께 사용되기도 하고 단독으로 사용되기도 한다.

서식태그

b, strong : 글씨의 두께를 조절

b : 태그의 의미를 가지지 않고 글씨만 굵게 변경
strong : 굵은 글씨로 변경 후 강조의 의미를 부여

i, em : 글씨의 기울기를 조절

i : 기울임과 동시에 텍스트가 문단의 내용과 구분되어야 하는 경우 사용 가능
em : 기울임과 내용의 강조를 나타냄

u

글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있음
단순 밑줄로 사용해선 안됨

s, del : 글씨에 취소선 추가

s : 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내를 하지 않음
del : 문서에서 제거된 텍스트를 나타냄, ins 태그와 함께 사용시 제거된 텍스트 옆에 추가된 텍스트 표현이 가능하다

a

클릭하면 페이지를 이동할 수 있는 링크 요소
href : 이동하고자 하는 파일/URL
target : 이동해야 할 링크(_blank : 새 창, _self : 현재 창)

멀티미디어

img

문서 내 이미지를 넣을 수 있는 태그
src : 이미지의 경로
alt : 이미지 로딩에 문제가 발생했을 때 대체 텍스트를 띄움

figure,figcaption

하나의 독립적인 콘텐츠로 분리하고 그에 대한 설명을 넣을 수 있는 태그
figcaption : 콘텐츠의 설명/범례 추가(중간에 올 수 없고 처음/끝에 와야 함)
보통 이미지를 넣는데 사용되나 인용문, 비디오/오디오처럼 문서의 흐름에 참조는 되지만 독립적으로 분리되어도 되는 내용을 담을 수 있음

video

문서 내에서 영상을 첨부할 수 있는 태그
src : 비디오를 문서 내에 첨부
poster : 비디오가 로드되기 전에 포스터를 보여줌
source : 여러 타입의 비디오 제공 가능

audio

문서 내에서 소리을 첨부할 수 있는 태그
src : 소리를 문서 내에 첨부
source : 여러 타입의 오디오 제공 가능
controls : 재생/정지 버튼 등이 있는 컨트롤러 제공

SVG(Scalable Vector Graphic)

그래픽으로 만들어진 이미지
일반 이미지와 달리 수학 공식을 사용해서 만들어 해상도 영향을 받지 않아 확대/축소가 자유로움
크기를 자주 바꾸어야 하는 작은 아이콘 등에 많이 사용
img처럼 svg파일을 불러오거나 태그를 그대로 사용할 수 있음
코드로 이루어져 있어 스타일 변경, 자바스크립트로 간단한 기능 추가가 가능함

리스트

ul,il

정렬되지 않은 목록 태그
li : 목록을 구성
ul 태그의 자식으로는 li 태그만 가능
하위 리스트를 만들려면 li 태그 안에 ul, ol 태그 사용

ol,il

정렬된 목록 태그
li : 목록을 구성
ol 태그의 자식으로는 li 태그만 가능
하위 리스트를 만들려면 li 태그 안에 ul, ol 태그 사용

dl,dt,dd

설명 목록 태그
dt 태그에 사용된 단어 혹은 내용의 설명을 dd 태그에 작성할 수 있다.
주로 용어사전이나 키-값이 있는 쌍의 목록을 나타낼 때 사용
dt 태그를 여러개 작성하고 하나의 dd 태그를 작성하는 것으로 여러 개의 용어를 설명 가능
반대로 dt 태그 하나에 여러개의 dd 태그를 가질 수 있음

표

table

표를 만드는 태그
tr : 행(row) 구분
td : 열(cell) 생성

th

열(cell) 제목 태그, 셀의 제목을 만들 수 있음

thead

제목 그룹 태그
thead 태그 안에 열(cell) 제목의 행을 넣음으로써 그룹을 지을 수 있다.
테이블 내 한 번만 나와야 함

tbody

표 본문 요소 태그
tbody 태그 안에 여러 열(cell)의 행을 넣음으로써 본문 요소를 그룹 지을 수 있다.
테이블 내 한 번만 나와야 함

tfoot

표 바닥글 요소 태그
tfoot 태그 안에 여러 열(cell)의 행을 넣음으로써 표의 바닥글 요소를 넣을 수 있다.
문서버전이 HTML4라면 tfoot은 tbody보다 먼저 작성되어야 하고 HTML5라면 thead, tbody, tfoot 순으로 배치되어야 함

caption

표 설명 태그
caption 태그를 사용하여 표가 가진 데이터에 대한 설명을 넣을 수 있다.

아이프레임(외부 콘텐츠)

iframe

현재 문서 안에 다른 HTML 페이지를 삽입할 수 있는 태그
src : 원하는 HTML 문서 또는 URL을 넣음
외부 페이지를 불러올 수 있기 때문에 불러온 외부 페이지의 영향을 받을 수 있음
name속성을 지정하면, <a>태그의 target 속성을 이용해 iframe에서 문서 또는 URL이 열리게 할 수 있다.

Form

form

정보를 제출하기 위한 태그
정보를 입력하고 선택할 수 있는 input, selectbox, textarea 등을 가질 수 있다.
button : 정보를 제출
action : 정보가 제출되었을 때 페이지를 이동시킬 수 있음
method : 정보가 제출 될 때 처리 방식을 결정

설명과 입력

label

input, selectbox, textarea의 설명을 작성할 수 있는 태그
for : 연결하고자 하는 태그에 id 속성을 지정하면 label을 클릭하면 연결된 태그가 선택됨
label 태그 안에 input을 넣으면 자동으로 for -> id 연결과 같은 처리를 해준다.
id 속성은 값이 절대로 중복되면 안된다.

input

사용자에게 데이터를 입력 받을 수 있는 대화형 태그
type : 받을 수 있는 input의 유형을 결정(default : text)
value : 기본 내용을 입력해 둘 수 있음
name : input의 이름 지정

자주 사용되는 input 타입

checkbox : input을 체크박스 형태로 만든다.
radio : 라디오 버튼으로 만든다.
file : 파일을 첨부할 수 있게 만든다.
button : value 속성에 입력된 값을 이름으로 갖는 버튼을 만든다.
hidden : input을 시각적으로 숨겨준다. 정보 제출 시 value 속성에 입력된 값은 전송된다.

select

옵션 메뉴를 제공하는 태그, 흔히 셀렉트박스라고 부름
option : 옵션을 정의
첫번째 option은 이름이 된다.
value 속성을 선언하지 않은 경우 option 태그의 콘텐츠가 기본값이 된다.
첫번째 옵션이 버튼명이기 때문에 placeholder 속성을 사용할 수 없음

textarea

여러 줄을 입력할 수 있는 대화형 태그
콘텐츠를 넣으면 사용자가 입력하지 않아도 표시되는 기본값이 된다.
cols/rows 속성으로 기본 너비와 높이를 지정할 수 있다. 너비와 높이는 글자 크기 기준으로 정의된다.

알아두면 좋은 속성

readonly : 사용자가 수정할 수 없는 읽기전용으로 만든다.
reqiured : form이 제출될 때 필수 입력 사항으로 만든다.
placeholder : input, textarea에 부가 설명을 입력해 둘 수 있다. (select에서는 불가)
disabled : 요소가 비활성화 되며 정보 제출 시 값이 제출되지 않는다.

주재민

이전 포스트

[프로그래머스] 데브코스 데이터엔지니어링 TIL Day 5

다음 포스트