Portfolio

3.1 HTML/CSS/XPATH

3.1.1 HTML이란?

HTML은 Hyper Text Markup Language의 약자로 웹 페이지의 구조와 내용을 표현하기 위해 개발된 마크업 언어입니다.

HTML은 '.html'과 같은 확장자를 가지며, 태그(Tag)와 속성(Attribute), 그리고 태그(Tag)와 속성(Attribute)으로 조합인 요소(Element)로 이루어져 있습니다.

아래 코드는 이번 챕터에서 예시로 사용할 아주 간단한 HTML 코드입니다.

예시.html

2.3KB

요소(Element)

요소는 태그와 속성의 조합으로, 시작 태그와 종료 태그 사이에 있는 내용은 요소의 내용(content)로 여겨집니다.

아래와 같이 태그와 속성들을 통해 요소가 표현됩니다.

태그(Tag)

웹 페이지의 구조를 정의하는 태그는 '<'와 '>' 사이의 키워드로 표현되며, 보통 시작 태그(시작태그)와 종료 태그(종료 태그)로 구성됩니다.

시작 태그는 요소(Element)의 시작을, 종료 태그는 요소(Element)의 끝을 알려줍니다. 하지만 어떤 태그들은 종료 태그가 필요 없는 빈 요소로 사용될 수도 있습니다.(br태그, img태그, input 태그 등)

이미지로 만들어서 넣기(태그의 종류)

head: 웹 페이지의 제목을 정의합니다.

title: 웹 페이지의 제목을 정의합니다.

body: 웹 페이지의 본문을 정의합니다.

header: 웹 페이지의 머리글 정의합니다.

nav: 네비게이션 메뉴를 표현합니다.

main: 웹 페이지의 주요 콘텐츠를 포함한 section을 감싸고 있습니다.

section: 섹션의 제목과 내용을 담습니다.

p: 단락을 나타내며, 각 섹션의 내용을 표시합니다.

footer: 웹 페이지의 바닥글을 정의합니다.

h1: 웹 페이지의 큰 제목을 정의합니다.

h2: 웹 페이지에서 h1 다음으로 큰 제목을 정의합니다.

h3: 웹 페이지에서 h2 다음으로 큰 제목을 정의합니다.

h4: 웹 페이지에서 h3 다음으로 큰 제목을 정의합니다.

h5: 웹 페이지에서 h4 다음으로 큰 제목을 정의합니다.

h6: 웹 페이지에서 h5 다음으로 큰 제목을 정의합니다.

div: 문서를 구획으로 나누는 역할을 합니다.

table: 표를 생성하는 역할을 합니다.

img: 이미지를 정의합니다.

a: href 속성을 추가하여 링크의 url을 지정할 수 있습니다.

속성(Attribute)

요소에 대한 추가 정보를 제공하고 동작을 제어하는 역할을 하는 속성은 시작 태그에 추가되며, 이름과 값으로 구성됩니다.

이미지로 만들어서 넣기(속성 설명)

class: HTML 요소에 대한 CSS 클래스를 지정합니다. 같은 클래스를 가진 요소들을 그룹화하여 스타일을 적용하거나, 선택할 때 사용됩니다.
id: HTML에 고유한 식별자를 지정합니다. 고유한 ID를 사용하여 특정 요소를 선택하거나 CSS에서 스타일을 적용할 수 있습니다.
src: 이미지, 오디오, 비디오 등과 같은 미디어 요소의 소스 파일 경로를 지정합니다.
href: 링크요소(a 태그)에서 링크 대상 URL을 지정합니다.
alt: 이미지 요소(img 태그)에서 대체 텍스트를 지정합니다. 이미지가 로드되지 못할 경우 텍스트로 대체되어 텍스트 기반 브라우저나 스크린 리더가 이를 읽을 수 있게 합니다.
disabled: 입력 요소(input태그, button태그, select태그 등)을 비활성화합니다. 사용자 상호작용이 불가능해지며, 시각적으로도 다른 상태로 표시될 수 있습니다.
style: HTML 요소에 직접 CSS 스타일을 적용합니다. style 속성 값은 CSS 속성과 값의 쌍으로 구성되며, 해당 요소에만 스타일이 적용됩니다.
target: 링크 요소(a 태그)에서 링크를 열 위치를 지정합니다. 예를 들어 _blank로 설정하면 링크가 새 창이나 탭에서 열리게 됩니다.

참고 사이트

https://ko.wikipedia.org/wiki/HTML

https://namu.wiki/w/HTML

3.1.2 CSS란?

아래 코드는 예시 페이지의 CSS 부분만 가져온 것입니다.

CSS는 아래 예시와 같이 style 태그 내에 직접 작성하거나 HTML 문서와 별도로 외부 CSS 파일로 작성하여 사용할 수 있습니다.

CSS(Cascading Style Sheets)는 HTML 요소의 스타일, 레이아웃 등의 디자인을 정의하기 위한 스타일 시트 언어로, 선언부(Declaration), 선택자(Selector), 속성(Properties), 값(Values) 으로 구성되어 있습니다.

선언부(Declaration)

선택자와 속성, 값의 쌍으로 구성됩니다. 특정 요소에 적용되는 스타일을 정의합니다.

선택자와 함께 속성과 해당 속성에 대한 값을 선언하는 것으로 이루어집니다.

예를 들어, 다음과 같은 선언부는 p태그 요소의 글꼴 크기를 16px로 지정합니다.

선택자(Selector)

특정 HTML 요소를 식별하고 선택하기 위해 사용되는 패턴이나 규칙입니다. 태그 이름, 클래스, ID, 속성 등을 기반으로 요소를 선택할 수 있습니다.

정적 크롤링 수행 시 원하는 요소에 접근하기 위해 선택자를 사용합니다.

속성(Properties)

스타일을 정의하기 위해 사용되는 특정 스타일 속성입니다. color, font-size, background-color 등이 있습니다.

값(Values)

특정 스타일 속성들에 할당되는 값을 말합니다. color 속성에 red, #000000, rgb(255, 0, 0)와 같은 값을 할당하여 색상을 정의할 수 있습니다.

클래스(Class)와 ID

선택자(Selector)에서 많이 사용되는 것이 클래스(Class)와 ID입니다. 클래스는 .클래스명으로 선택되고, ID는 #ID명으로 선택됩니다.

클래스는 여러 요소에 동일한 스타일을 적용하기 위해 사용되며, 동일한 클래스 이름을 가진 요소를 선택할 수 있습니다. ID는 고유한 식별자로 하나의 요소에만 적용됩니다.

상속(Inheritance)

CSS에서는 부모 요소로부터 상속되는 스타일 속성이 있습니다. 따라서 부모 요소에 스타일을 적용하면 자식 요소에도 일부 스타일이 상속될 수 있습니다.

우선순위(Cascade)

동일한 요소에 대해 여러 스타일이 적용되는 경우, CSS는 우선순위 규칙을 적용하여 어떤 스타일이 적용될지 결정합니다. 일반적으로 명시도(Specificity), 충돌(Collision) 및 소스 순서(Source Order)에 의해 우선순위가 결정됩니다.

박스 모델(Box Model)

요소가 렌더링될 때, 요소의 내용(content), 안쪽 여백(padding), 테두리(border), 외부 여백(margin)으로 구성된 박스로 간주됩니다. 각각의 영역은 스타일을 통해 크기, 여백 등을 조정할 수 있습니다.

3.1.3 Xpath란?

XML 문서에서 요소를 선택하고 탐색하기 위한 언어인 XPath는 트리 구조로 구성된 문서의 경로를 사용하여 요소, 속성, 텍스트 등을 식별합니다. (XML: Extensible Markup Language)

Xpath를 활용하여 HTML 문서의 특정 요소에 대한 경로를 지정할 수도 있어 Python 동적 크롤링 라이브러리 Selenium에서 사용되기도 합니다.

아래 코드는 전체 html 예시 중 한 section만을 잘라서 가져온 것입니다. Xpath 예시는 이 코드를 통해 살펴보겠습니다.

XPath는 부모-자식, 형제, 조상-자손 등의 노드 관계를 사용하여 경로를 지정할 수 있습니다.

예를 들어, //book 경로는 문서의 모든 book 요소를 선택합니다.

경로 표현식(Path Expression)

XPath는 경로 표현식을 사용하여 XML 문서의 요소나 노드를 찾습니다. 경로 표현식은 문서 구조를 따라 이동하며, 요소, 속성, 텍스트 등을 선택하는 데 사용됩니다.

노드 관계

XPath는 부모-자식, 형제, 조상-자손 등의 노드 관계를 사용하여 경로를 지정할 수 있습니다.

예를 들어, //book 경로는 문서의 모든 경로에 있는 book 요소를 선택합니다.

요소(Element) 선택

XPath를 사용하여 XML 문서에서 특정 요소를 선택할 수 있습니다.

예를 들어, //bookstore/book 경로는 bookstore 요소의 모든 book 요소를 선택합니다.

조건(Condition) 필터링

조건을 사용하여 특정 요소를 필터링 할 수 있습니다.

예를 들어, //bookstore/book[price>10] 경로는 bookstore 요소의 모든 book 요소 중 가격이 10보다 큰 요소를 선택합니다.

속성(Attribute) 선택

XPath는 XML 요소의 특정 속성을 선택할 수도 있습니다.

예를 들어, //bookstore/book/@category 경로는 bookstore 요소의 모든 book 요소의 category 속성을 뜻합니다. 여기에서 //booksotre/book/[@category='fiction']와 같이 조건 필터링을 사용해 category 속성 중 원하는 것을 선택할 수 있습니다.