bb1714 님의 블로그

React_2

bb1714 — Tue, 22 Apr 2025 17:18:06 +0900

지난 글에 이어서 실습 문제 위주로 해볼게요~~

오늘 첫 번째 실습 문제는 저번 TodoList에 기능을 추가하는 것부터 시작해보겠습니다!!

실습 문제 4. Todo 항목 삭제 기능 추가하기

- 추가하는 함수 아래 삭제하는 함수 추가하기

<li> 태그 안에 삭제 버튼 추가하기

↓

** 코드 설명 **

- filter()함수로 삭제할 항목을 제외한 나머지만 유지

- idx !== index : 현재 반복 중인 항목의 번호와 삭제하려는 번호가 다르면 유지

- setTodos(newTodos)로 목록을 업데이트

- hsndleDelete(idx) : 해당 항목의 idx값을 넘겨서 삭제 함수 호출

결과 화면

실습 문제 5. 할 일 완료 체크 기능 추가

- 추가하는 함수 초기 상태 지정하기

- 토글을 체크하면 줄이 그어지게 만들기

- <ul> 기본 스타일 글머리기호 삭제

결과 화면

실습 문제 5. Enter키로 할 일 추가하기

★실무에서도 필수적으로 사용되기 때문에 알아두기!! ★

- <input>태그 안에 추가하기

마지막으로 저번 실습과 이번 실습을 통해 사용한 함수를 최종 정리해보겠습니다~

React에서 제공하는 함수

함수명	설명
useState()	상태를 생성하는 React의 기본 함수
setInput()	useState가 자동으로 만들어주는 상태 변경 함수
setTodos()	useState가 자동으로 만들어주는 상태 변경 함수 -> todos 상태를 바꾸는 함수

JavaScript 내장 함수

함수명	설명
map()	배열을 반복해서 원하는 형식으로 바꿔주는 함수
filter()	조건을 만족하는 항목만 골라 새로운 배열을 만드는 함수
trim()	문자열 앞뒤 공백 제거

일반 함수

함수명	설명	문법
handleAdd	할 일 추가 : 입렵값을 배열에 추가하고 입력창 초기화	const handleAdd = () => {...}
handleDelete	특정 인덱스의 할 일 삭제	const handleDelete = (index) => {...}
toggleDone	체크박스 클릭 시 done 상태를	const toggleDone = (index) => {...}
(e) => {...}	이벤트 핸들러	on이벤트이름={(e) => 실행할 코드}

React_1

bb1714 — Sun, 20 Apr 2025 12:58:05 +0900

한동안 이것 저것 하면서 정보처리기사 준비하느라 글을 못 올렸어요ㅠㅠ
이번주부터 다시 틈틈히 올려보도록 하겠습니다!!

학습 내용은 인프런 강의와 온라인에 올라와있는 기초 문제를 토대로 하였습니다.

React 소개

1. React란?

-> 사용자 인터페이스를 만들기 위한 JavaScript의 라이브러리 (프레임원크가 아니다)

* 프레임워크 : 개발을 위한 기본 틀, 뼈대

* 라이브러리 : 개발에 필요한 도구 또는 그 집합

=> 비슷하지만 라이브러리가 좀 더 큰 범위

장점 : 1) 화면을 여러 단위로 쪼개고, 재사용하는 식으로 코드 관리가 용이함

2) SPA

3) 현업에서도 많이 사용되고 있음

특히, 기존 웹 서비스는 모든 페이지에 대한 네트워크 요청으로 코드가 늘어나는데 반복적으로 다운되는 리소스가 많아지는데 이런 전통적인 웹 서비스의 문제점을 해결하고자 SPA(Single Page Application) 방식 등장

* 대표적인 SPA방식 : React, Vue, Angular 등

2. React의 특징

1) 컴포넌트 기반 설계 : 스스로 상태를 관리하는 캡슐화된 코드 조각

- 의미단위로 컴포넌트 구성

- 재사용성과 유지보수성 증가

- 부모, 자식 관계를 가짐

2) Vitual Dom (가상돔) : 실제 DOM의 복사본으로 SPA에서의 동적인 변화를 효율적으로 관리하기 위해 사용됨

- DOM을 직접 변경하면서 생기는 비효율을 해

3) CSR(Client Side Rendering) : JS를 통해 서버가 아닌 클라이언트 브라우저에서 랜더링한다는 의미

JSX

1. JSX란?

JSX = HTML + JavaScript

-> Java Script를 확장한 문법으로 JavaScript XML이라는 의미

= 모양은 HTML에 가깝지만 JSX임 React는 이 JSX를 이용하여 화면을 그림 (컴포넌트)

특징

1) JSX에서 사용되는 태그의 속성 이름이 HTML과 조금 다름

- class -> className

- for -> htmlFor

- onclick -> onClick ... 등

2) 태그를 명시적으로 닫아줘야 함

3) 하나의 태그로 감싸져 있어야 함

실습 문제

실습1. React의 기본 사용법 익히기

화면에 글을 띄워보자

결과 화면

** App.js **

만든 컴포넌트들을 여기에서 불러와서 배치하는 곳

(HTML로 치면 <body> 태그를 생각하면 쉬움)

브라우저로 랜더링 됨

** React는 컴포넌트도 태그처럼 쓰기 때문에 닫는 태그가 필요없는 경우에는 /를 붙여서 짧게 쓴다.

< Hello /> 의 /는 Hello에 자식 요소가 없어서 /를 붙여서 닫는다.

< Hello /> <Hello> </Hello> 둘 다 똑같이 작동

실습2. 버튼 클릭 시 숫자 증가시키기

결과 화면

** useState란?

React에서 기본적으로 제공하는 상태관리

- React 안에 내장된 Count 라이브러리처럼 변하는 데이터를 저장하고, 그 값이 바뀌면 UI를 자동으로 다시 랜더링해주는 역할

특징

항목	설명
소속	React 내장 함수
형태	const [값, 값을 바꾸는 함수]= useState(초기값);
목적	컴포넌트 내부에서 바뀌는 값을 기억하고 화면에 반영
장점	상태가 바뀔 때 자도으로 컴포넌트가 다시 랜더링됨
비교	일반 JS 변수는 화면에 반영되지 않지만, useState는 자동 반영됨

+ Hello.js랑 Counter.js를 한 화면에서 보고 싶다면?

결과 화면

실습3. 간단한 "Todo List" 만들기

결과 화면

코드 분석

1) 할 일 목록을 컴포넌트 안에서 기억할 수 있도록 useState 함수 불러오기

2) 상태 변수 선언

문법 : const [값, 값을 바꾸는 함수]= useState(초기값);

- input : 사용자가 입력하는 텍스트 상태 (초기값: 빈 문자열)

- todos : 할 일 목록 배열 (초기값: 빈 배열)

- setInupt, setTodos : 값을 바꾸는 함수들

3) 할 일 추가 함수

- input.trim() === ' ': 입력값이 공백이면 추가 안 함

* "===" -> 값과 타입이 모두 같은지 확인하는 연산자로 React에서 대부분 '==='를 씀

- [...todos, input] : 기존 배열을 복사하고 새 할 일 추가

* "..." -> 스프레드 연산자

React는 원본을 직접 수정하지 않고, 복사본을 만들어서 갱신하는 방식(불변성)을 지키기 위함

예 ) const todos = ['밥먹기'];
const input = '공부하기';

const newTodos = [...todos, input];
// 결과: ['밥먹기', '공부하기']

- setInupt(' '): 입력창 초기화

4) 입력창

- value={input} : 입력창에 보여지는 값은 상태값(input)을 따라감

* value -> 입력창의 현재 값 (상태와 연결)

이 input 태그의 값은 input 상태 값과 연결되어 있다는 뜻
즉, 상태 값이 바뀌면 입력창에도 반영되고, 반대로 입력창이 바뀌면 상태도 바뀜

- onChange={...} : 입력이 바뀌면 setInput()을 통해 상태 업데이트

* onChange{...} -> 입력 내용이 바뀔 때마다 실행되는 함수

(e) => setInput(e.target.value)

- e: 이벤트 객체 (event)

- e.target.value: 사용자가 입력한 실제 값

- setInput(...): 그 값을 input 상태로 저장

결과적으로, 입력창에 글자를 쓰면 input 상태가 실시간으로 바뀜

5) 할 일 목록 랜더링

- todos 배열을 map()으로 돌려서 <li>로 하나씩 출력

* map()이란?
- 배열을 반복하면서, 각 요소를 새로운 형식으로 바꿔주는 함수

즉, 배열을 반복하면서 JSX 요소로 바꾸기

- key={idx}는 React가 요소를 효율적으로 다루기 위해 필요함

*key란?
- React가 항목을 고유하게 구분할 수 있게 해주는 값

오늘은 React의 기본적인 개념과 간단한 실습을 통해 사용법을 알아봤습니다~~

크롤링_5

bb1714 — Thu, 17 Oct 2024 08:35:20 +0900

오늘이 크롤링 마지막입니다..

오늘은 조금 난이도가 있는 실습을 통해 기능을 알아보도록 할게요~!

<실습1. 네이버지도를 활용해서 맛집 정보 수집 >

0. 필요한 도구 가져오기

from selenium import webdriver as wb
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
import time

1. 브라우저 진행

driver = wb.Chrome()
driver.get("https://map.naver.com/p/")

2. 검색창에 "동명동 맛집" 검색

※ 문제 :여기서 바로 선택자(검색할 부분)를 복사해서 가져오고 창을 끈 후 재실행하려하면 실행이 되지 않는다.

원인 : 복사해오면 뒷부분이 난수인데 이건 아이디가 매번 바뀐다는 소리이다. 그러면 아이디 사용 X

해결 : 다른 선택자를 사용하기 → class 또는 계층 활용

→ 이러면 재실행이 안되므로 아래 코드 양식에 따라 적어주시면 됩니다~

search = driver.find_element(By.CSS_SELECTOR, "input.input_search")
search.send_keys("동명동 맛집")
search.send_keys(Keys.ENTER)

3. 가게를 클릭해서 상세 정보 조회

→ 오류가 뜰 것이다.

- 오류 이름 : list index out of range → 인덱스 0번이 없다. 즉 데이터가 수집이 안된다

- 원인 : iframe 태그의 정보가 존재해서

- 해결책 : iframe태그의 데이터로 전환

* 가끔 가게 이름이 짧으면 수집이 안된다. (2글자이상)

title = driver.find_elements(By.CSS_SELECTOR, "#_pcmap_list_scroll_container > ul > li > div.CHC5F > a > div > div > span.place_bluelink.TYaxT")
title[1].click()

4. 원하는 iframe으로 화면을 전환

driver.switch_to.frame("searchIframe")

5. 디테일 정보에서 가게 이름 수집

- 또 오류가 뜰 것이다.

- 원인 : 디테일 정보는 새로운 iframe에 데이터가 존재해서

- 해결책 : iframe → 원본 → iframe

detail = driver.find_element(By.CSS_SELECTOR, "#_title > div > span.GHAhO")
detail.text

6. 새로운 iframe으로 전환

driver.switch_to.frame("entryIframe")

7. iframe에서 원본으로 이동하는 방법

driver.switch_to.default_content()

위 내용을 한 번 더 정리해보겠습니다!

1) 선택자가 변하는 경우가 존재 - 다른 선택자를 활용하면 된다.
2) 데이터를 수집할 때, 선택자가 문제가 없는데 올바르게 수집이 안되면 무저건 iframe을 의심해라
3) selenium에서 ifame을 조작하기 위해서는 화면 전환이 필요하다.
- 원본에서 ifame으로 이동 -> switch_to.frame ("프레임 아이디")
- iframe에서 다른 iframe으로 이동 -> switch_to.default.content() -> 원본을 이용해야한다.

코드의 순서는 아래와 같이 됩니다!!

driver = wb.Chrome()
driver.get("https://map.naver.com/p/")

search = driver.find_element(By.CSS_SELECTOR, "input.input_search")
search.send_keys("동명동 맛집")
search.send_keys(Keys.ENTER)

driver.switch_to.frame("searchIframe")

title = driver.find_elements(By.CSS_SELECTOR, "#_pcmap_list_scroll_container > ul > li > div.CHC5F > a > div > div > span.place_bluelink.TYaxT")
title[1].click()

driver.switch_to.default_content()

driver.switch_to.frame("entryIframe")

detail = driver.find_element(By.CSS_SELECTOR, "#_title > div > span.GHAhO")
detail.text

driver.switch_to.default_content()

<실습2. 이미지 수집 >

0. 필요한 도구 가져오기

from selenium import webdriver as wb
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
import time
# 파일시스템을 위한 라이브러리 (폴더, 파일을 생성, 삭제, 수정)
import os
# 이미지의 경로를 실제 파일로 저장하는 라이브러리 
from urllib.request import urlretrieve

1. 바탕화면에 폴더 생성

- 코드 해석 : 바탕화면에 이미지라는 폴더가 없다면, 바탕화면에 이미지라는 폴더를 만들어줘

if not os.path.isdir("C:/Users/smhrd/OneDrive/바탕 화면/이미지") :
    os.mkdir("C:/Users/smhrd/OneDrive/바탕 화면/이미지")

2. 브러우저 접근

driver = wb.Chrome()\
driver.get("https://search.naver.com/search.naver?ssc=tab.image.all&where=image&sm=tab_jum&query=%EC%9D%B4%EC%8A%B9%EC%9A%B0#imgId=kvs_aqs%3Aweb_5ffe4904df0e983fe797de4bebc69f3f")

3. 데이터 로딩을 위한 스크롤 작업 → while문으로 끝까지 수집

body = driver.find_element(By.CSS_SELECTOR, "body")
while True :
    # 컴퓨터가 가지고 있는 정보를 변수에 저장
    first = driver.page_source
    body.send_keys(Keys.END)
    time.sleep(0.5)
    # 스크롤 후 변한 데이터를 변수에 저장
    next = driver.page_source
    if first == next :
        break;
    else :
        pass

4. 이미지 태그 수집

img = driver.find_elements(By.CSS_SELECTOR,"#main_pack > section > div.api_subject_bx._fe_image_tab_grid_root.ani_fadein > div > div > div.image_tile._fe_image_tab_grid > div > div > div > div > img")
img

5. src 조회

→ img태그는 컨텐츠가 없고 src "속성"을 조회해야한다.

- get_attrivute("속성이름") → img태그 or a태그에서 활용

img[0].get_attribute("src")

6. 비어있는 리스트에 src값만 저장

src = []
for i in range(len(img)) :
    src.append(img[i].get_attribute("src"))

src

7. 이미지 url을 실제 파일로 변환

for i in range(len(src)) :
    urlretrieve(src[i],"C:/Users/smhrd/Desktop/이미지/"+str(i)+".jpg")
    
driver.save_screenshot("스크린샷.jpg")

위 내용은 스마트인재개발원 수업 내용을 정리한 내용입니다!

크롤링_4

bb1714 — Tue, 15 Oct 2024 17:16:04 +0900

오늘은 실습 위주로 내용을 정리해보겠습니다~

<실습1. 뉴스타이틀자동화>

(프로세스를 따라서 지난 시간 수업 복습 겸해서 코드 같이 봐볼게요~)

0. 필요한 도구 가져오기

from selenium import webdriver as wb
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
import time

1. 크롬브라우저 실행 -> 네이버 이동

(Chrome의 첫 글자 대문자!!)

driver = wb.Chrome()
driver.get("http://www.naver.com")

2. 검색창에 "뉴스" 검색 -> 엔터를 쳐서 검색 진행

search = driver.find_element(By.CSS_SELECTOR, "#query")
search.send_keys("뉴스")
search.send_keys(Keys.ENTER)

3. 화면 상단에 뉴스탭을 클릭

btn = driver.find_element(By.CSS_SELECTOR, "#lnb > div.lnb_group > div > div.lnb_nav_area._nav_area_root > div > div.api_flicking_wrap._conveyer_root > div:nth-child(1) > a > i")
btn.click()

4. 화면 스크롤을 총 10번 해주기 - time 활용

body = driver.find_element(By.CSS_SELECTOR, "body")
body.send_keys(Keys.END)

try :
    for i in range(10) :
        body = driver.find_element(By.CSS_SELECTOR, "body")
        body.send_keys(Keys.END)
        time.sleep(1)
except:
    print("더보기를 완료했습니다")

5. 뉴스 타이틀 요소 수집

title = driver.find_elements(By.CSS_SELECTOR, "div.news_wrap.api_ani_send > div > div.news_contents > a.news_tit")
title[0].text

6. 요소 데이터에서 컨텐츠 데이터만 수집

title_list = []
for i in title :
    title_list.append(i.text)

title_list

<실습2. G마켓 수집>

(난이도를 좀 올려서 프로세스를 따라 작성해볼게요~)

0. 필요한 도구 가져오기

from selenium import webdriver as wb
from selenium.webdriver.common.by import By
import time

1. 크롬브라우저 실행 -> "지마켓"에 접근

(Chrome의 첫 글자 대문자!!)

driver = wb.Chrome()
driver.get("https://www.gmarket.co.kr/n/best")

2. undetected_chromedrive 활용

→ wb으로 접근하면 접근이 안됨 그러므로 사람이 쓰는 브라우저 인척 감지가 안되는 브라우저 설치하고 실행!!

# 설치가 필요하므로 설치 (컴퓨터마다 좀 다를 수도 있음)
!pip install undetected-chromedriver

# 불러오고 
import undetected_chromedriver as uc

# wb이 아닌 uc로 접급
driver = uc.Chrome()
driver.get("https://www.gmarket.co.kr/n/best")

3. 베스트 화면에 있는 첫 번째 상품 클릭

- 지마켓은 우클릭이 안되므로 개발자도구를 활용해서 볼 것!

item = driver.find_elements(By.CSS_SELECTOR, "#container > div.box__best-list > ul > li > a")
item[0].click()

- 화면 -

4. 상품과 가격 요소 수집

title = driver.find_element(By.CSS_SELECTOR, "#itemcase_basic > div.box__item-title > div.box__item-info")
price = driver.find_element(By.CSS_SELECTOR, "#itemcase_basic > div.box__item-title > div.box__price.price > span.price_innerwrap.price_innerwrap-coupon > strong")

5. 페이지 뒤로가기

driver.back()

※ 파이썬 반복 진행을 체크하는 라이브러리 -> for문만 가능 while문은 불가능 (이유 : while은 끝을 모를 때 사용해서)

- 사용 법 : for문 range 앞에 소괄호로 감싸서 range를 매개변수로

예) for i in tqdm(range(20))

from tqdm import tqdm

6. 삼품, 가격 정보 20개 수집

- 주의할 점 : 우리가 처음에 모집한 가격은 쿠폰 적용가임으로 쿠폰가가 없는 상품은 정상가로 수집

# 크롤링 반복문 작성할 때 반드시 반복할 코드를 먼저 만들고 for로 감싸주기
# time을 적절히 넣어주기
title_list = []
price_list = []
for i in tqdm(range(20)) :
    # 상품리스트를 매번 수집해야하는 이유는 -> 페이지가 변하면 데이터가 초기화되기 때문에
    # 데이터 접근
    item = driver.find_elements(By.CSS_SELECTOR,"#container > div.box__best-list > ul > li > a")
    item[i].click()
    time.sleep(1)

    # 데이터 수집
    title = driver.find_element(By.CSS_SELECTOR,"#itemcase_basic > div.box__item-title > div.box__item-info > h1") 
     # 예외처리 
    # 쿠폰가격을 수집하다가 없으면 정상 가격을 수집
    try : 
        price = driver.find_element(By.CSS_SELECTOR,"#itemcase_basic > div.box__item-title > div.box__price.price > span.price_innerwrap.price_innerwrap-coupon > strong")
    except :
        price = driver.find_element(By.CSS_SELECTOR,"#itemcase_basic > div.box__item-title > div.box__price.price > span:nth-child(3) > strong")

    #데이터 가공
    title_list.append(title.text)
    price_list.append(price.text)

    # 화면전환
    driver.back()
    time.sleep(1)

7. 데이터 프레임 제작

dic = {"상품명" : title_list, "가격 정보" : price_list}
gm = pd.DataFrame(dic)
gm.to_html("G마켓상품정보.html")
gm

이렇게 실습 문제를 풀어봤구요!

마지막으로 이번 시릇ㅂ을 통해 배운 점 정리하고 마무리하겠습니다!

1) time의 적절한 위치 -> 클라이언트가 서버에게 요청 할 때마자 넣어준다
- 화면의 전환이 일어날 때마다
- 데이터를 받아올 때 로딩이 필요하기 때문에
- 반복이 진행할 때, 코드에 문제가 없는데 중간에 멈추는 경우 -> 시간을 늘려가면서 조절하자
2) 반복문을 작성할 때, 반드시 for문을 먼저 쓰지말고, 완벽한 코드를 작성한 다음에 묶어주자
3) 데이트를 수집할 때, 데이터의 종류가 변하는 경우 try, except문을 활용하자
- try : 에러가 날 수 있는 코드 작성 (쿠폰 가격)
- except : 에러가 났을 때 (일반 가격)
4) 실습, 코드를 작성할 때 결과위주로 완성을 시킨 후 , 코드를 블록화 시키기 -> 가독성, 유지보수성에 좋음
5) 많은 양의 데이터를 수집할 때는, tqdm 잘 활용하기~!
6) 데이터 (태그)를 접근할 때 화면이 바뀌면, 모든 데이터가 초기화 -> 다시 찾는 코드가 반드시 필수!

위 내용은 스마트인재개발원 수업 내용을 정리한 내용입니다!

크롤링_3

bb1714 — Tue, 15 Oct 2024 01:32:39 +0900

저번 수업 내용에 이어서 진행하겠습니다!

Selenium으로 데이터를 수집할 때 지켜야 하는 프로세스

1) 사이트 요청
2) 데이터 로딩 작업 -> 더보기, 스크롤을 통해서 데이터 로딩
3) 데이터를 수집 (요소)
4) 데이터 가공 (텍스트, 속성)
5) 데이터 활용 (DB,)

위 프로세스를 참고해서 기능과 사용법 주의사항 등을 알아보겠습니다~!

Selenium 라이브러리

# 브라우저를 담당하는 라이브러리 
from selenium import webdriver as wb
# (신버전) 선택자를 구분해주는 라이브러리
from selenium.webdriver.common.by import By
# 컴퓨터용 키보드 라이브러리 -> 엔터, del 기능 호출
from selenium.webdriver.common.keys import Keys

1. 브라우저 실행

driver = wb.Chrome()

2. 특정 사이트 요청

driver.get("http://www.naver.com")

3. 검색창에 "강아지" 검색

- 해석 : driver에게 요소를 찾아와~

- 찾아올 것이 한 개면 element / 복수면 elements

search = driver.find_element(By.CSS_SELECTOR,"#query")

# (구버전) 실행안됨 -> 검색해서 보인다면 신버전으로 바꿔서 실핼해야 함
# driver.find_element-by_css_selector("#query")

4. 검색창에 검색어 입력

- 해석 : 검색창에 강아지라는 데이터 보내줘

search.send_keys("강아지")

5. 키보드의 엔터기능 전송

- 키 값은 다 대문자

search.send_keys(Keys.ENTER)

6. 화면의 맨 밑으로 스크롤 이동

- 해석 : 키보드의 END값을 보내주기

- 스크롤 방법 1) JS를 활용 2) 키보드 활용

body = driver.find_element(By.CSS_SELECTOR,"body")
body.send_keys(Keys.END)

7. 화면 뒤로가기

- 뒤로 가기는 HTML태그가 아니다. 브라우저가 가지고 있는 기능이다.

driver.back()

8. 검색창에 고양이 검색

- 컴퓨터는 화면이 바뀌면 기존의 기억을 다 잊어버린다.

- 화면이 다른 페이지로 전환 후에는 반드시 기존태그를 다시 찾아와야 한다.

search = driver.find_element(By.CSS_SELECTOR,"#query")
search.send_keys("고양이")

9. 특정 태그를 클릭

btn = driver.find_element(By.CSS_SELECTOR,"#sform > fieldset > button")
btn.click()

10. 데이터 수집

- 복수개의 데이터가 필요한 경우에는 elements

- 주의점 : 리턴타입은 무조건 리스트 타입으로 변환

title = driver.find_elements(By.CSS_SELECTOR, "div.news_wrap.api_ani_send > div > div.news_contents > a.news_tit")
title[0].text

11. 수집한 요소에서 컨텐츠 추출

title_list = []
for i in title :
    title_list.append(i.text)
    
title_list

12. 브라우저 종료

# 12. 브라우저 종료
driver.close()
# 또는
driver.quit()

위 실습을 통해 중요한 점!

1) selenium에서 요소를 찾을 때는 find_element(s)로 검색한다.
- element로 복수개를 가지고 온 경우에는 인덱스 0번째 데이터만 반환
- elements로 요청한 경우에는 무조건 리스트 타입이 반환
2) key의 기능(enter, del, end)을 활용할 때는 특정 태그에게 send_keys(keys. 기능(대문자))
3) 뒤로 가기, 종료 → HTML태그가 아니기 때문에 바로 명령을 실행한다
4) 데이터 수집 후 → 반드시 사람이 쓰는 텍스트 데이터로 변환

- 이번에는 한솥도시락 사이클 이용해서 실습을 진행하겠습니다!!

0. 우선 사용할 라이브러리들을 불러오기

from selenium import webdriver as wb
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys

1. 사이트 실행

driver = wb.Chrome()
driver.get("https://www.hsd.co.kr/menu/menu_list")

2. 메뉴이름 수집

title = driver.find_elements(By.CSS_SELECTOR, "div > div.item-text > h4")

3. 가격 수정

price =  driver.find_elements(By.CSS_SELECTOR, "div > div.item-text > div > strong")

price[0].text

4. 데이터 검증하기

len(title)

→ 여기까지면 한 페이지에 있는 메뉴밖에 나오지가 않음

5. 더 많은 결과를 보기 위해서 더 보기 클릭

btn = driver.find_element(By.CSS_SELECTOR, "#btn_more > span > a")

btn.click()

6. 시간 부여해 주기 (코드를 반복해서 빠르게 실행할 때는 반드시 필요!)

import time

7. 예외처리

→ 영역이 2가지 구분
1) 오류가 나기 전까지 시도할 코드
2) 오류가 났을 때 동작할 코드
- try = 시도할 코드 작성
- except = 오류가 났을 때 코드
* 데이터를 수집할 때 고려해야 할 점
- 데이터를 수집하다가 없는 경우가 발생하면 넘어가지 말고 없다의 의미를 넣어주자
- null, 0, "없다", "none"

try :
    # 시도할 코드
    for i in range(10) :
        btn = driver.find_element(By.CSS_SELECTOR, "#btn_more > span > a")
        btn.click()
        time.sleep(1)
except :
    # 에러났을 때 코드
    print("더보기를 완료했습니다.")

8. 데이터 검증하기

len(title)
len(price)
title[0].text
price[0].text

9. 텍스트만 추출한 리스트 제작

title_list = []

for i in title :
    title_list.append(i.text)

print(title_list)

price_list = []

for j in price :
    price_list.append(j.text)

10. 데이터 프레임 제작

- 컬럼과 데이터구조의 형태가 필요하다. → dic

dic = {"메뉴이름": title_list, "가격정보":price_list}
han = pd.DataFrame(dic)
han.to_html("한솥메뉴.html")
han

11. csv파일로 저장 → 인코딩 작업 필수!!

han.to_csv("한솥메뉴.csv", encoding = "utf-8")

위 자료는 스마트인재개발원 수업내용을 정리한 내용입니다.

머신러닝

bb1714 — Tue, 15 Oct 2024 00:52:25 +0900

기초통계

1. 통계학과 인공지능의 관계

- 데이터를 사람이 통계학적으로 분석하는 데서 그치지 않고, 훨씬 방대한 양의 데이터를 기계가 효과적으로 분석하고,

이를 바탕으로 미래를 예측하기 위해 인공지능이 필요함

2. 통계학이란?

- 불확실한 미래를 예측하고 싶어 한다.

- 과거 자료에 근거하여 자연 또는 사회 현상에 대한 과학적인 추론과 불확실한 미래를 대비하기 위해 합리벅인

의사결정을 하고자 하는 학문

3. 모집단과 표본

모집단 : 관심의 대상이 되는 모든 개체의 관측값이나 측정값의 집합
표본 : 모집단에서 추출한 일부 관측값이나 측정값의 집합
전수조사 : 모집단 전체를 조사하는 것
표본조사 : 표본만 가지고 조사하는 것

→ 통계학은 모집단을 대표하는 표본을 어떻게 선정하는지가 중요

양적 자료 : 숫자로 표현할 수 있고 연산할 수 있는 수치형 데이터 ex) 키, 몸무게, 유권자수
질적 자료 : 숫자로 표현할 수 없는 범주형(문자열) 데이터 ex) 성별, 직업
개체, 요인, 변수

ex) 우리가 담당자로 가정

- 개체 : 연구자 또는 관찰자가 관심을 갖는 대상

- 요인 : 개체에 관한 특성 중 연구자가 특별히 관심을 갖는 특성

- 변수 : 요인을 구성하고 있는 요소

독립 변수 (Independent variable) : 다른 변수에 영향을 받지 않고, 종속 변수에 영향을 주는 변수
종속 변수 (Dependent variable) : 종속 또는 의존저인 변수, 독립변수에 영향을 받아서 변화하는 변수

도수 : 데이터 값이 나타나는 빈도수 (개수)
상대도수 : 도수를 전 테 데이터의 숫자로 나눈 것 (비율), 총도수가 다른 두 데이터를 비교할 때 사용

3 사분위(3rd Qurtile) : 75%에 해당하는 값
2 사분위(2rd Qurtile) : 50%에 해당하는 값
1 사분위(1st Qurtile) : 25%에 해당하는 값
사분위수 범위(IQR) : 3 사분위 - 1 사분위 (box의 크기

최솟값(Minimum) : 제일 작은 값 (이상치를 제외한)
최댓값(Maximum) : 제일 큰 값 (이상치를 제외한)
중앙값(Median) : 값들을 순서대로 정렬했을 때 중간에 위치한 값
이상치(Outlier) : 최대, 최소를 벗어난 값

* 평균의 오류 : 평균에서 각 데이터가 얼마만큼 떨어져 있느냐를 측정하는 측도가 필요

편차(Deviation) : 관측값들이 평균으로부터 떨어진 거리
분산(Varience) : 편차 제곱의 평균 → 관측값들이 퍼져 있는 정도
표준편차(Standard deviation) : 분산의 제곱금 → 제곱된 분산의 스케일을 원래대로 변경

정규분포 : 통계에서 많이 사용되는 확률 분포로 좌우가 대칭인 모양 그래프
표준정규분포 : 평균이 0 표준편차가 1인 정규분포 → 평균과 표준편차가 다른 정규분포들을 쉽게 비교하기 위해

4. 상관계수

공분산/ 표준편차 * 표준편차

※ 공분산 : 2개의 변수 간의 선형 관계를 나타내는 수치 값

-1 <= r <= 1

→ 0에 가까울수록 변수의 연관 관계가 없어짐

수치의 절대값이 클 수록 두 변수는 서로 관계가 높음

- 1 or -1 : 절대적인 상관관계가 있음(한 값이 커지면 똑같은 비율로 커지거나 작아지는 경우)
- 0.7이상 or -0.7이하 : 강한 상관관계가 있음
- 0.3이하 or -0.3이상 : 약한 상관관계가 있음
- 0 : 전혀 상관 없음

5. 인공지능과 수학

Q. 왜 우리는 인공지능을 배우기 위해 수락과 미분의 개념을 알아야 할까?

A. 데이터 처리부터 AI모델링 전 과정이 수학적으로 표현되며, AI학습 시 미분이 포함된 최적화 기법을 사용

but 처음부터 이 모든 것을 알아야만 AI를 배울 수 있는 것은 아니다.

- 미분 : 움직이라고 변화하는 대상의 "순간적인 변화"를 설명

즉, 계속해서 변화해 가는 특정한 값을 구하고자 할 때 미분의 실생활 적용이 가능

위 자료는 스마트인재개발원에서 수업한 내용을 정리한 내용입니다!

크롤링_2

bb1714 — Fri, 11 Oct 2024 22:54:52 +0900

우선 실습을 통해 복습을 해볼게요~! (저번 글 참고해 주세요!!)

<실습 : 국내증시정보수집>

import requests as req
from bs4 import BeautifulSoup as bs

res = req.get("https://finance.naver.com/sise/sise_market_sum.naver")

soup = bs(res.text,"lxml")

1) 종목이름을 수집 - 선택자를 가져올 때 복사해서 가져오기!

soup.select("a.tltle")

2) 현대 가격 수집

soup.select("#contentarea > div.box_type_l > table.type_2 > tbody > tr > td:nth-child(3)")

이번 실습에서 배워야 할 내용

1) 선택자를 복사할 때는 우클릭 → copy → copy selector

2) 주의점 : 내가 선택한 태그 하나만 가지고 오는 단수개의 선택자

3) 복수개가 필요한 경우에는 선택자를 수정

- 단수개를 의미하는 선택자를 지우자 (id, nth-dhild)

- 선택자는 뒤에서부터 지운다.

- 테이블태그가 등장하면 무조건 tr태그를 수정해라.

<실습 : 환율정보수집 >

1) 필요한 라이브러리 import 하기

import requests as req
from bs4 import BeautifulSoup as bs

2) 페이지요청하기

res = req.get(https://finance.naver.com/marketindex/)

3) bs로 변환하기

soup = bs(res.text,"lxml")

4) 통화명 수집하기 → copy 기능 활용

soup.select("body > div > table > tbody > tr:nth-child(1) > td.tit > a")

→ 데이터가 수집이 안되고 빈 리스트[]만 뜬다.

원인 : iframe

해결책 : 상대경로를 절대경로로 바꿔주는 작업을 하자!

5) iframe에서 데이터 추출하기()

- 목적 : 화면상에 데이터를 볼 수는 있으나, 원본은 다른 서버에 저장

- 사용법 : 원본데이터의 주소로 요청을 보내야 한다.

1) iframe태그 찾기

- 개발자도구에서 선택한 태그를 위로 올려보면 iframe태그 존재

2) 원본 주소를 찾기

- src데이터를 확인해 보기 (상대경로 vs 절대경로)

- 상대경로를 절대경로로 변경 : 현재사이트의 url을 복사한 후 상대경로와 비교해서 합치기

현재 url : https://finance.naver.com/marketindex/

iframe src : /marketindex/exchangeList.naver

절대경로 : https://finance.naver.com/marketindex/exchangeList.naver

* src가 없는 경우는 slelenium으로 처리해야 한다.

3) 요청할 페이지도 같이 수정해서 재수집하기!

→ 그러면 '미국 USD' 출력됨

res = req.get("https://finance.naver.com/marketindex/exchangeList.naver")
name = soup.select("body > div > table > tbody > tr > td.tit > a")
name[0].text.strip()

selenium 라이브러리

- 파이썬 코드로 실제 브라우저를 조작하는 라이브러리

- 사람처럼 프로그래밍을 해야 한다.

- 설치가 한 번 필요

!pip install selenium

# 브라우저를 담당하는 라이브러리 
from selenium import webdriver as wb
# (신버전) 선택자를 구분해주는 라이브러리
from selenium.webdriver.common.by import By
# 컴퓨터용 키보드 라이브러리 -> 엔터, del 기능 호출
from selenium.webdriver.common.keys import Keys

→ 첫 번째 두 번째는 필수 세 번째는 필요에 따라

1. 브라우저 실행

- 구버전은 크롬 드라이버를 설치해서 경로 작성

- 신버전은 알아서 최신버전의 브라우저를 호출

(신버전인데 설치하면 충돌 발생 → 설치한 파일만 삭제하면 문제없음)

driver = wb.Chrome()

2. 특정 사이트 요청

driver.get("http://www.naver.com")

오늘 수업은 여기까지 한 관계로 다음 수업 때 이어서 작성하겠습니다~

위 자료는 스마트인재개발원에서 수업한 내용을 정리한 내용입니다.

오렌지3

bb1714 — Fri, 11 Oct 2024 01:07:29 +0900

< 1일 차 >

오렌지 3란 텍스트 코딩 없이 데이터 과학, 통계, 머신러닝을 학습할 수 있는 서비스이다.

먼저 인공지능에 대해 짧게 알고 넘어가자.

인공지능(AI)이란?

→ 쉽게 정의하면 사람과 같이 생각하거나 행동하는 컴퓨터이다.

2가지 종류가 있다.

1) 강한 인공지능 (모든 면에서 매우 뛰어난 거 아직 발명되지 않았다 ㅎㅎ)

2) 약한 인공지능 (하나만 엄청 잘하는 거 알파고)

그럼 본격적으로 머신러닝에 대해 알아보자!!

1. 머신러닝(기계학습)이란?

1) 데이터를 기반으로 학습을 시켜서 예측하게 만드는 기법

2) 인공지능의 한 분야로 컴퓨터가 학습할 수 있도록 하는 알고리즘 기술을 개발하는 분야

3) 통계학, 데이터마이닝, 컴퓨터 과학이 아울어진 분야

2. 머신러닝의 등장

→ 데이터를 이용하여 스스로 특성과 패턴을 찾아 학습하고 예측을 수행하는 것

여기서 Question 머신러닝이 나오기 전에도 심심이랑 놀았는데요?

A. 심심이는 규칙기반전문가시스템(Rule Based System)

* 규칙기반전문가시스템은 'if'와 'else'로 하드 코딩된 명령을 사용하는 시스템

→ 제작한 로직이 특정 작업에만 국한되어 조금만 변경되어도 전체 시스템을 다시 만들어야 할 가능성이 크고,

많은 상황에 대한 규칙을 모두 만들어 낼 수가 없다.

3. 머신러닝의 종류 : 지도학습(Supervised Lesrning), 비지도학습 (Unupervised Lesrning) ,

강화학습(Reinforcement Learning)

1) 지도학습 : 데이터에 대한 Label(명시적인 답)이 주어진 상태에서 컴퓨터를 학습시키는 방법

종류 : 1) 분류=범주형(Categorical)데이터

→ 숫자로 측정하고 표시하는 것이 불가능함

ex) 혈액형, 등급, 스팸메일 분류...

2) 회귀=연속형=수치형(Classification) 데이터

→ 연속적인 숫자를 예측하는 것 (미묘한 차이가 크게 중요하지 않음)

ex) 연봉, 키, 집값...

2) 비지도학습 : 데이터에 대한 Label(명시적인 답)이 없는 상태에서 컴퓨터를 학습시키는 방법

종류 : 1) 클러스터링(군집화)

2) 차원축소

3) 강화학습 : 지도학습과 비슷하지만 완전한 답을 제공하지는 않음

'보상'을 얻을 수 있는 방향으로 행동을 학습한다.

※ 지도학습 비지도학습의 차이점으로 쉽게 구분하기!

→ 내가 준 데이터에 정답 유무

지도학습 : O

비지도학습 : X (ex: 음악추천 알고리즘)

<2일 차>

머신러닝의 과정을 실습을 통해 알아보겠습니다!

우선 머신러닝의 과정 7단계는 아래와 같다.

그럼 이를 통해 실습을 진행해 보자!

Ex01_ BMI예측

1. 문제정의 : 키와 몸무게(속성, feature)를 통해서 비만도(라벨, label, target)를 예측

2. 데이터 수집 : CSV File

3. 데이터 전처리

1) 결측치(No Missing Value) : 없는 값

2) 이상치 : 이상한 값

> 기술통계 EDA로 확인해 본 결과, 중앙값과 평균값이 유사하므로 이상치가 없을 것으로 예상

학습을 하기 이전에 내가 가지고 있는 데이터를 분리하는 과정이 필요

내가 가진 데이터를 100% 다 주고 학습을 시키면, 이 훈련에서만 점수가 높을 것
우리의 목표는 100점 20점 40점이 나오는 모델이 아니고, 80점 80점 80점이 나오는 모델이 목표

데이터를 Trin 데이터와 Test 데이터를 분리해서 사용
- train 훈련 데이터 (70% ~80%)
- test 테스트 데이터 (20% ~ 30%)

Ex02_ 닮은 꼴 찾기

Ex03_ 텍스트마이닝

위 자료는 스마트인재개발원 수업 내용을 정리한 내용입니다.

크롤링

bb1714 — Fri, 11 Oct 2024 00:19:41 +0900

크롤링이란 사람이 수집할 데이터를 컴퓨터가 대신 수집해 주는 기술을 말한다.

<크롤링의 개념>

1. 크롤링을 하기 위해서는 ?

→ HTML, CSS, Python을 알아야 함 (JAVA 등 다른 언어도 되지만 Python이 가장 쉬움)

(대규모 데이터는 JAVA가 좀 더 적합)

2. 언제 쓰일까?

→ 디지털 환경에서 생성되는 수치, 문자, 이미지, 영상 데이터를 모두 포함하는 대규모 데이터

1) 업무 자동화

2) 부수입 창출...

3. 신경 써야 할 점

1) 사람처럼 프로그래밍을 작성하기

2) 기능을 작성할 때는 외우지 말고 대화한다고 생각하자!

4. 활용예시

1) 쿠팡 가격 변동 추적 사이트

5. 이슈

→ 합법인지 불법인지에 대해 아직 명확하지가 않음

데이터를 그대로 수집해서 수익을 창출하는 경우 불법이 될 수 있음

<데이터 수집 프로세스 >

1. 조회할 사이트 요청 = req.get()
2. text데이터를 html데이터로 변환 = bs라이브러리
3. 변환된 html데이터에서 필요한 요소를 수집 = soup.select("선택자")
- 선택자를 잘 작성하기 (가장 힘든 작업 ㅜㅜ)
4. 수집된 요소에서 (태그 + 컨텐츠) 컨텐츠만 추출 후 저장하는 작업 = 반복문을 통해서 비어있는 리스트 저장
5. 데이터 활용(표, 데이터 학습, 파일제작, 이미지작업...)

그러면 위를 참고해서 실습을 풀어볼게요!!

<실습 1 : 뉴스에서 제목이 김도영이 들어간 텍스트 데이터 추출!>

1. 사이트 조회 == request 이용하기

* request = 요청하기

import requests as req
req.get("url")

→ 실행을 시켜 200이 통신에 성공!!

그러나 400번대 or 500번대가 뜨면 오류가 난 것이다.

그러기에 변수에 넣기 전에 반드시 실행을 시켜 통신이 성공됐는지 확인하고 변수에 넣기!!

※ 오류 해석

400번대: 요청의 오류 (수정이 가능)

500번대 : 서버의 오류 (수정이 불가능)

406 오류

→ 왜? : 접속한 사이트에서 사용자가 브라우저가 아닌 비정상적인 접근 인지

→ 해결방법 : - head 작업 시도!! (실패할 경우 → 수집이 불가능 or 다른 라이브러리 )

(국내인 경우는 오류가 이렇게 해결될 수 있지만 해외는 대부분 ip를 차단하는 경우가 많아 어려움)

# 요청을 보낼 때 브라우저인척 속여서 데이터를 보낸다.
head = {'user-agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36'}
# head 정보를 동반해서 재요청 (heades라는 키워드는 변경 X)
req.get("https://www.melon.com/chart/index.htm", headers = head)

2. 텍스트 추출하기

→ 위에 사이트를 불러온 코드를 저장한 변수명에. text

res = req.get("https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%EA%B9%80%EB%8F%84%EC%98%81")
res.text

3. BeautifulSoup 라이브러리

라이브러리이기 때문에 기능 꺼내오기

from bs4 import BeautifulSoup as bs

* Beautifulsoup는 bs4에 담겨 있어 바로 import 해서 사용할 수 없어서 bs4에서 꺼내서 사용(==from)

1) bs를 이용해서 text를 html로 변환

→ 이 작업은 왜 하는 걸까? : 명령을 내릴 대상이 컴퓨터이기 때문에

soup = bs(res.text, "lxml")

2) soup에서 특정 태그만 수집

title = soup.select("a.news_tit")

3) 수집된 요소 (태그 + 컨텐츠)에서 컨텐츠만 추출

→ 이 작업은 왜 하는 걸까? : 사람이 데이터를 사용하기 위해서

title[0].text

4) for문을 사용해서 모든 데이터 출력

for i in title :
    print(i.text)

5) 수집된 요소를 텍스트만 추출한 새로운 리스트를 제작

→ 이 작업은 왜 하는걸까? : 우리가 원하고 필요한 데이터는 결국 텍스트 데이터이기 때문에

news_title = []
for i in title :
    news_title.append(i.text)

<실습 2 : 멜론 차트 top100 노래 제목과 가수 텍스트 데이터 추출하기!>

1. req로 멜론차트 사이트 요청 ※브라우저인척 속이는 작업 필!!

head = {'user-agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36'}
res = req.get("https://www.melon.com/chart/index.htm", headers = head)

2. bs를 통해서 html 데이터 제작

soup = bs(res.text, "lxml")
soup

3. ★ 노래제목을 통해서 데이터 수집 ★

(주의해야할 점)

1) 클래스는 여러 개가 부여 가능하다.

2) 태그에 클래스값 중간에 공백이 들어간다면, 클래스를 복수개를 가졌다.

→ 해결책 : 공백을 지우고 "."을 통해서 이어주기!

3) 선택자를 분석할 때, 수집하고자하는 태그의 구분자가 없다면 (id, class) 부모를 검사하자.

→ 정확도가 중요해서 바로 띄어쓰기(자손) 하지 않고 > 를 쓰기!

→ 부모도 구분자가 있을 때까지 작성할 것

song = soup.select("div.ellipsis.rank01 > span > a")

4. 가수 이름 수집

(주의해야할 점)

- 데이터 개수가 중요한 경우레는 반드시 데이터 검증

singer = soup.select("div.ellipsis.rank02 > span.checkEllipsis")
# 데이터 개수 검증
len(song)
len(singer)

# 데이터 중복여부 검증
for i in singer :
    print(i.text)

4-1. 수집된 요소 리스트에서 컨텐츠만 추출 새로운 리스트 제작

# 노래 제목
song_list = []
for i in song :
    song_list.append(i.text)

song_list

# 가수 이름
singer_list = []
for j in singer :
    singer_list.append(j.text)

singer_list

→ 반복문을 효율적으로 해보자!

- 공통점을 찾기 → 100번을 반복한다는 공통점

- for문을 작성할 때는 반복 횟수와 유지보수를 고려하기 → 코드의 효율성과 유지보수성을 올릴 수 있다.

- 그러나 여기에 너무 집중하지 않기! → 결과를 만들고 코드를 튜닝하자(시간이 남으면)

song_list = []
singer_list = []
for i in range(len(singer)) :
    song_list.append(song[i].text)
    singer_list.append(singer[i].text)

song_list
singer_list

5. 수집된 데이터를 활용해서 데이터 프레임 제작

(판다스가 필요하기때문에 맨 위에 import하기)

dic = {"가수이름" : singer_list, "노래제목" : song_list}
melon = pd.DataFrame(dic)

6. 만들어진 데이터 프레임을 활용해서 엑셀, csv, html 파일로 제작

→ csv 파일로 저장할 때는 반드시 인코딩 해주기

utf-8, euc-kr, utf-8-sig

melon.to_html("멜론차트.html", encoding = "utf-8")

위 자료는 스마트인재개발원 수업 내용을 정리한 내용입니다.

CSS_2

bb1714 — Wed, 9 Oct 2024 17:59:31 +0900

1. 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택

:active 마우스로 클릭할 때 선택
:hover 마우스를 올린 태그를 선택

2. 공간 분할 태그 : 경계를 분할하거나 영역을 나눌 때 사용하는 태그 (레이아웃)

<div> : 큰 영역 분할
<p> : 문단분할
<span> : 세부적인 스타일

3. display : 요소가 화면에 보이는 방식 지정

block - 종류: p, div, table..등 기본값은 block

무조건 가로로 한 줄의 영역을 차지하는 속성

width, height 값 설정이 가능

inline - 종류: span, a, strong.. 등 기본값은 inline

내가 담은 컨텐츠까지만 크기로 삼는 속성

width, height 값 설정이 불가능

none - 화면에 보이지 않게 지정

* alt+l+o 실행 후 F12(개발자 창) 에서 확인 가능

4. Box Model : 요소의 부피감을 결정하는 개념 (웹페이지 레이아웃, 디자인 설계 시 )

width : 요소의 너비 지정
height : 요소의 높이 지정
background-color : 박스 모델 색 지정
border : 경계선 스타일 지정
margin : 경계선 바깥 여백 지정

padding : 경계선의 안쪽 여백 지정

Border-style
테두리 속성

(1) border-width : 테두리 두께 지정

(2) border-colpr : 테두리 색상 지정

(3) border-radius : 테두리 모서리를 둥굴게 만드는 속성

* border-radius: 50px; → 원형

Box-sizing : 요소의 크기를 화면에 표시하는 방식

(1) content-box : 내가 설정한 너비 → 컨텐츠의 너비

컨텐츠 영역만을 크기로 삼는 속성

padding, border값이 들어가면 들어간만큼 크기가 커짐

(2) border-box : 내가 설정한 너비 → border 안쪽까지의 너비

content + padding + border = 내가 설정한 너비

padding, border 값이 들어가도 크기가 커지지 않는다.

<실습 문제: padding을 이용해 신호등 만들기>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #black {
            width: 120px;
            height: 360px;
            background-color: black;
            box-sizing: border-box;
            border-radius: 30px;
            padding: 10px;
            /* 경계선 처리 ==> radius */
            /* box-sizing ==> border-box */
            /* 안쪽여백 처리 ==> padding ==> 10px */
        }

        div>div{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            margin-top: 10px;
        }
        /*  각 색상은 경계선을 기준으로 바깥쪽 여백을 가지고 있다. ==> 위쪽
            바깥 여백 ==> margin */

        #red {
            background-color: red;
            
        }
        #yellow {
            background-color: yellow;
         
        }

        #green {
            background-color: green;
        }


    </style>
</head>
<body>
    <div id = "black">
        <div id ="red"></div>
        <div id="yellow"></div>
        <div id = "green"></div>

    </div>

   
</body>
</html>

5. Position : 자유자재로 요소의 위치를 배치하는 속성

static : 태그가 위에서 아래로 순서대로 배치 (기본값)
relative : 초기 위치 상태에서 상하좌우로 위치 이동
absolute : 절대 위치 좌표 설정
fixed : 화면을 기준으로 절대 위치 좌표 설정

1) 위치 속성

position : static;

태그가 순서대로 배치 (기본값)

position : relative;

static의 원래 위치부터 계산함.

top, bottom, left, right로 위치를 설정함.

<실습>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: relative;
            /* relative : 요소의 원래위치 (static)를 기준으로 상대적인 위치를 선정 */
        }

        #orange {
            background-color: orange;
            left: 100px;
            z-index: 3;
            /*  z-index : 화면에 요소가 쌓이는 순서
                          숫자가 클수록 요소가 앞으로 나옴
             */
        }

        #tomato {
            background-color: tomato;
            left: 200px;
            bottom: 100px;
            z-index: 2;
        }

        #green {
            background-color: green;
            left: 100px;
            bottom: 200px;
        }


    </style>
</head>
<body>
    <!-- #orange+#tomato+#green => 이렇게도 div 만들 수 있음 -->
    <div id="orange"></div>
    <div id="tomato"></div>
    <div id="green"></div>
</body>
</html>

z-index

요소의 쌓이는 순서를 지정하는 속성

* 높은 숫자일수록 화면의 앞에 지정

position:absolute;

static속성을 가지고 있지 않은 부모 기준으로 움직임.

부모 중 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위 태그(body)가 기준이 됨.

position:fixed;

브라우저 화면의 상대위치를 서정함.

화면이바뀌어도 고정된 위치를 설정할 수 있고, 상대 요소의 영향을 받지 않는다.

<실습문제 position을 이용해 신호등을 만들어보자>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #black {
            background-color: black;
            width: 120px;
            height: 360px;
            position: absolute;
            border-radius: 30px ;

        }

        div>div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            position: relative;
            left: 10px;
            
        }

        #red {
            background-color: red;
            top: 20px; 
        }

        #yellow{
            background-color: yellow;
            top: 30px; 
        }

        #green {
            background-color: green;
            top: 40px;
        }
/* ver2
        #black {
            background-color: black;
            width: 120px;
            height: 360px;
            position: absolute;
            border-radius: 20px ;
        }

        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            left : 10px;
        }

        #red{
            background-color: red;
            top: 20px;
        }

        #yellow{
            background-color: yellow;
            top: 130px;
        }

        #green{
            background-color: green;
            bottom: 20px;

        } */


    </style>
</head>
<body>
    
    <div id = "black">
         <div id = "red"></div>
         <div id = "yellow"></div>
        <div id = "green"></div>
    </div>

    <!-- <p>ver2</p>
    <div id = "black">
        <div id = "red" class="circle"></div>
        <div id = "yellow" class="circle"></div>
       <div id = "green" class="circle"></div>
   </div> -->


</body>
</html>

6. Flex

1) display:flex :레이아웃을 배치하는 전용 기능

- Flex Container : flex의 영향을 받는 전체 공간

- Flex Item : 속성에 따라 배치되는 것

2) flex-direction : 아이템들이 배치되는 축의 방향을 결정

(1) row : 행 방향(가로) 배치 (기본값)

(2) row-reverse : 역순으로 가로배치

(3) column : 열 방향(세로) 배치

(4) column-reverse : 역순으로 세로배치

3) flex-wrap : 아이템이 컨테이너의 한 줄을 넘어설 때 줄 바꿈 설정

(1) nowrap : 줄 바꿈 하지 않음(기본값)

(2) wrap : 줄 바꿈 진행

(3) wrap-reverse : 아이템 역순 배치 후 줄 바꿈

7. 스타일 선언 방식

(1) 인라인 스타일 방식 : 행 방향(가로) 배치 (기본값)

(2) 내부 스타일 방식 : 역순으로 가로배치

→ style 태그를 사용해서 css 적용(html과 css의 완전한 분리라고는 보기 어려움)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 2. 내부 스타일 방식 : style태그를 사용해서 css 적용 
        완전한 분리로 보기는 어려움*/
        #no2 {
            color: blue;
            background-color: yellowgreen;

        }
    </style>
    </head>
<body>
    <h1 id="no1" style="color: red; background-color: black;">1. 인라인 방식</h1>
    <h1 id="no2">2. 내부 스타일 방식</h1>
    <h1 id="no3">3. 외부 스타일 방식</h1>
    <h1 id="no4">4. import 방식</h1>
</body>
</html>

(3) 외부 스타일 방식 : 열 방향(세로) 배치

→ link태그를 사용해서 외부 css 적용

link태그가 쓰인 순서대로 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
<link rel="stylesheet" href="./Ex20_외부스타일방식.css">
</style>

- 확장자=CSS

#no3 {
    color: tomato;
    background-color: aquamarine;
}

(4) import 방식 : 역순으로 세로배치

→ style태그 내에 @import를 사용해서 css 적용

css적용 순서가 예측 불가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
        @import url('./Ex20_import방식.CSS');
        /* ./ 대신 => ctrl + space도 가능 */
     </style>

#no4 {
    color: orange;
    background-color: violet;
}
@import url('./Ex20_선언방식.CSS');

※ 우선 순위 : 인라인 > 내부, 외부, import

그러기에 인라인을 가장 나중에 선언!

위 자료는 스마트인재개발원 수업 내용을 정리한 내용입니다.

bb1714 님의 블로그

React_2

React_1

React 소개

JSX

실습 문제

실습3. 간단한 "Todo List" 만들기

** 코드 분석 **

크롤링_5

<실습1. 네이버지도를 활용해서 맛집 정보 수집 >

<실습2. 이미지 수집 >

크롤링_4

<실습1. 뉴스타이틀자동화>

<실습2. G마켓 수집>

크롤링_3

Selenium 라이브러리

머신러닝

기초통계

크롤링_2

selenium 라이브러리

오렌지3

크롤링

<크롤링의 개념>

<데이터 수집 프로세스 >

CSS_2

1. 반응 선택자 : 사용자의 반응으로 생성되는 특정한 상태를 선택

2. 공간 분할 태그 : 경계를 분할하거나 영역을 나눌 때 사용하는 태그 (레이아웃)

3. display : 요소가 화면에 보이는 방식 지정

4. Box Model : 요소의 부피감을 결정하는 개념 (웹페이지 레이아웃, 디자인 설계 시 )

5. Position : 자유자재로 요소의 위치를 배치하는 속성

7. 스타일 선언 방식

코드 분석