[멀티캠퍼스 부트캠프 5주차(1)] 데이터 분석 기본

데이터 분석 기본_웹 통신 개념

웹 통신 개념

1. 웹 크롤링이란

-웹 크롤링(Web Crawling): 웹 페이지를 돌아다니며 데이터를 수집하는 것

-웹 크롤링 활용 사례:

네이버 지도 레스토랑 정보 수집
이커머스 상품 데이터 수집
유튜브 컨텐츠 및 댓글 수집

2. 웹 서버, 웹 브라우저의 요청과 응답

-HTTP 통신: 웹 브라우저와 웹 서버 사이 데이터를 주고 받는 통신

-요청(request): 브라우저가 특정 페이지 보여달라고 요청

-응답(response): 서버가 브라우저에게 해당 페이지 정보인 HTML 전달

웹 페이지 개발의 3요소

-HTML: 구조

-CSS: 디자인

-JavaScript: 동작

1. HTML_웹 페이지 구조

1) HTML 구조 파악

-HTML(Htper Text Markup Language): 웹 페이지의 구조를 표시하기 위한 언어

-F12 → 개발자모드에서 HTML 구조 파악 가능

-HTML은 코드로 열리는 것이 아니라 웹 페이지로 열림

→ 요소 검사기 클릭 후 창의 원하는 부분에 가져대대면 해당 부분의 html 선택 可

<태그 이름 속성 = '속성값'>내용

2) 태그(Tag)

-HTML 문서의 구조를 정의하고, 브라우저에게 해당 내용이 어떤 종류의 요소인지 알려줌

-<>로 감싸져 있으며, 시작 태그와 종류 태그로 구성

3) 속성(attribute)

-태그의 추가적인 정보

-여러 속성 부여 가능(없을 수도 있음)

3) 내용

-시작 태그와 종료 태그 사이에 위치하여 사용자가 실제로 보게 되는 부분

-텍스트 또는 태그가 올 수 있음

-내용은 없을 수도 있음

4) 부모 태그와 자식 태그

-요소 간의 계층 구조를 나타냄

-부모 태그: 하나 이상의 자식 태그를 포함하는 태그(자식 태그의 바로 상위에 위치)

-자식 태그: 부모 태그의 하위 요소로, 부모 태그에 직접적으로 속해 있음

5) 주석(comment)

-코드의 내용을 설명하는 메모 기능

-

※다른 언어의 주석

CSS /*주석 내용*/

Javascript //주석 내용

Python # 주석 내용

2. HTML 태그_HTML 문법

1) 기본 구조 태그

-<head> 태그: 브라우저 화면에 직접 나타나지는 않지만, 문서 제목이나 메타데이터와 같은 웹 페이지 관련 정보를 담음

-<body> 태그: 실제 웹 브라우저 화면에 표시되는 모든 콘텐츠가 들어감(이곳에서 크롤링 이루어짐)

2) 텍스트 및 구조 관련 태그

-<h1>~<h2> 태그(h 태그): 제목 표시(숫자가 작을수록 글씨가 크고 중요도 高)

-<div> 태그(division 태그): 특정 구역을 나누는 박스 역할

-<p> 태그(paragraph 태그): 하나의 문단 지정할 때 사용

-<span> 태그: 텍스트만 일부분만 강조(꾸미기 위한 용도)

-<strong> 태그: 중요한 텍스트를 강조하기 위해 글씨 굵게

-<u> 태그: 텍스트 아래 밑줄 긋기

-<br>: 강제로 줄바꿈 할 때 사용(닫는 태그 x)

-<table> 태그: 표 전체를 감싸는 가장 큰 틀

-<tr>: table의 자식으로, 가로 줄 생성

-<td>: tr의 자식으로, 그 줄 안의 칸 생성

3) 링크와 이미지 태그

-<a> 태그(하이퍼링크): 클릭 시 다른 페이지로 이동

※href(hypertext + reference) 속성: 이동할 주소(URL) 받는 필수 속성

# 넣으면 임시로 주소 비워둠

-<img> 태그: 이미지 삽입

※scr 속성: 이미지 파일 경로 설정

4) 사용자 입력 및 목록 태그

-<input> 태그: 사용자가 텍스트 입력할 수 있는 창 생성

※type = "text": 일반적인 텍스트를 입력받겠다는 설정

placeholder: 입력창 안에 기본적으로 깔려 있는 안내 문구

-<button> 태그: 클릭 가능한 버튼 생성

-<ul> 태그(unordered list): 점으로 나열되는 순서 없는 목록

-<ol> 태그(ordered list): 숫자로 번호가 매겨지는 순서 있는 목록

-<li> 태그(list item): 목록 내부의 리스트 생성(<ul>이나 <ol> 안에서만 쓰임)

3. CSS와 selector

-CSS(Cascading Style Sheets): 웹 페이지의 디자인과 스타일을 담당하는 언어

-선택자{속성 : 속성값;}

-선택자(selector): 웹 페이지에서 원하는 태그를 선택하는 문법

※html 파일에서 css 적용하려면 <head> 태그 안의 <style> 태그에 선택자로 지정

1) 태그(tag) 선택자

-태그명

-보통 태그 선택자는 다른 태그 선택자와 결합하여 사용

ex) h1{color : green;}

2) 클래스(class) 선택자

-.클래스명

-태그에 붙은 별명(class)으로 해당 요소 선택(고유하지 x)

ex) .mail{font-size : 20px;}

3) 아이디(id) 선택자

-#아이디명

-태그의 고유한 식별자(id)으로 해당 요소 선택

ex) #description{color : red;}

4) 자식(child) 선택자

-부모태그 > 자식태그

-바로 아래 자식 태그 선택(내가 원하는 태그에 별명이 없을 때 사용)

ex) div > button{color : blue;}

5) 계층과 순서를 이용한 선택자

①자손(descendant)선택자

-부모태그 자식태그

- 자식을 포함한 자손태그 선택

②인접 형제(adjacent sibiling) 선택자

-태그1 + 태그2

-같은 부모를 가진 형제 요소 중 태그1 바로 뒤에 오는 첫 번째 태그2 하나만 선택

③모든 뒷 형제(general sibling) 선택자

-태그1 ~ 태그2

-태그1 뒤에 오는 모든 태그2 형제들 선택

6) n번째 요소 선택자

-:first-child: 태그 중 첫 번째 요소 선택

-:last-child: 태그 중 마지막 요소 선택

-:nth-child(n): n번째 요소 선택

-:nth-last-child(n): 마지막에서 역순으로 n번째 요소 선택

-:first-of-type: 해당 태그 종류 중 첫 번째 요소 선택

- :only-child: 자식 요소 선택(공백 주의)

※공백이 없는 경우(ex. plate:only-child)

-자신이 유일한 자식인 plate 태그를 찾음

-부모 안에 다른 plate나 apple 없이 plate 딱 하나만 있을 때 그 접시 선택

※공백이 있는 경우(ex. plate :only-child)

-plate 태그의 자식 중에서 혼자 있는 요소 찾음

-plate 위에 apple이 딱 하나만 놓여있다면, 그 사과 선택

실습

-<!DOCTYPR html>: 해당 문서가 HTML 문서라고 브라우저에게 알려주는 선언문

<!DOCTYPE html>

<html>
    <head>
        <title>Naver</title>  <!--탭 이름-->
    </head>
    <body>
        <!--화면에 실제로 표시되는 내용-->
        <h1>naver: 검색 포탈</h1>
        <div>
            <h2>어떤 내용이 궁금하세요?</h2>
            <p>지식 포털 Naver</p>
            <a href="https://www.naver.com", target="_blank">네이버로 이동</a>
            <!--링크 속성값을 href에 넣음-->
            <!--target="_blank": 새 탭으로 열기(기본적으로는 원래 탭에서 열림)-->
            <!--속성 여러개 들어갈 수 있음-->
        </div>

        <div>
            <h2 id="search">초록 검색 창</h2> <!--id="search": 식별자 속성값(위치 찾는 데 사용)-->
            <input type="text" placeholder="검색어 입력"> <!--input 태그-->
            <!--placeholder: 아무것도 입력하지 않았을 때 기본적으로 채워진 문구-->
            <button>검색</button>
            <ol>
                <li class="mail">메일</li>
                <li class="cafe">카페</li>
                <li class="bolg">블로그</li>
            </ol>
        </div>
    </body>
</html>

#부트캠프후기 #멀티캠퍼스부트캠프 # 데이터마케팅부트캠프

'부트캠프 > 멀티캠퍼스_퍼포먼스 마케팅과 데이터 분석' 카테고리의 다른 글

[멀티캠퍼스 부트캠프 6주차(1)] 데이터 분석 기본_웹 크롤링(selenium) (0)	2026.02.09
[멀티캠퍼스 부트캠프 5주차(2)] 데이터 분석 기본_웹 크롤링(requests, beautifulsoup) (0)	2026.02.08
[멀티캠퍼스 부트캠프 4주차(2)] 데이터 분석 기본_집계와 시각화 (0)	2026.02.02
[멀티캠퍼스 부트캠프 4주차(1)] 데이터 분석 기본_파이썬 기초(자료구조, 판다스) (0)	2026.01.23
[멀티캠퍼스 부트캠프 3주차] 데이터 분석 기본_파이썬 기초(조건문과 반복문, 함수 기초) (2)	2026.01.20

jyeimnida 님의 블로그

[멀티캠퍼스 부트캠프 5주차(1)] 데이터 분석 기본_웹 통신 개념

데이터 분석 기본_웹 통신 개념

'부트캠프 > 멀티캠퍼스_퍼포먼스 마케팅과 데이터 분석' 카테고리의 다른 글

티스토리툴바

[멀티캠퍼스 부트캠프 5주차(1)] 데이터 분석 기본_웹 통신 개념

데이터 분석 기본_웹 통신 개념

'부트캠프 > 멀티캠퍼스_퍼포먼스 마케팅과 데이터 분석' 카테고리의 다른 글

'부트캠프/멀티캠퍼스_퍼포먼스 마케팅과 데이터 분석' Related Articles

티스토리툴바