Web
[CSS] Selector
[CSS] Selector
2022.12.081. 띄어쓰기 1 2 3 이 적용된다. 띄어쓰기 a b 는 a 내부에 있는 b 모두를 지정함. 2. + 3 이 지정된다. a + b 는 a 태그 아래 b 한개만 지정함. 3. ~ 3 4 가 지정된다. a ~ b 는 a 태그 아래의 b 모두를 지정함. 3. anchor a : b 는 a 태그를 b 할 때 { ... } 를 작동시킨다. 선택자와 결합해서 사용하는 경우가 많음. a:first-child 는 첫 번째 요소를 가리킴. 4. pseudo-element 왼쪽과 같이 첫 줄만 지정하거나 첫 글자만 지정하는 등 특정 부분을 지정할 때 사용한다. before와 after로 요소를 배치하는것도 가능함. 태그 없이 :: 만 사용해서 요소를 지정하기도 한다. 5. attribute selector 웹 크롤링 시..
[HTML] Media
[HTML] Media
2022.12.02웹 페이지 내부에서 이미지, 음악, 비디오 등 다양한 미디어를 표현할 수 있다. 1. Video 여러 format이 있지만 HTML 에서는 MP4, WebM, Ogg 형식만 지원한다. controls 속성으로 재생 / 정지 등 실행을 제어할 수 있는 장치를 해당 비디오에 추가한다. 브라우저가 첫 번째 source를 재생하지 못하면 다음 source를 재생하는 방식으로 동작한다. 태그 기반으로 동작하기 때문에 자바스크립트의 DOM을 사용해 비디오를 다룰 수 있다. video 태그에 여러 속성을 추가 할 수 있다. autoplay : 브라우저가 로딩됐을 떄 자동으로 재생하도록 설정한다. mute : 음소거 상태로 재생한다. track : 속성은 아니다. source 밑에 추가해 비디오의 자막을 설정한다. 2..
[HTML] Graphics
[HTML] Graphics
2022.12.01HTML의 canvas / svg 태그를 사용하면 웹 페이지 내부에 그림을 그릴 수 있다. canvas 태그를 사용해 지정한 위치에 선을 긋는 간단한 예시이다. canvas 태그를 사용할 때는 자바스크립트를 사용해서 그림을 그린다. 간단하게 선을 긋는 예시 뿐만 아니라 이미지, 원, 색상 등 다양한 그림을 표현할 수 있으니 필요할 때 찾아서 사용하자. svg 태그를 사용해 사각형을 그리는 예시이다. 자바스크립트 대신 HTML 태그를 사용해서 그림을 표현한다. 태그 기반이기 때문에 그림의 일부를 수정할 때 자바스크립트의 DOM으로 접근한다. svg는 태그를 사용해 그림을 표현하는구나 ~ 정도로만 머리에 넣고 이 정보를 인덱스로 필요할 때 찾아서 사용하자. canvas는 픽셀 단위로 그림을 표현해 확대 시 ..
[HTML] API
[HTML] API
2022.11.15HTML이 제공하는 여러 API를 사용해 다양한 기능을 쉽게 구현하자. 사용하기 전 웹 브라우저가 API를 제공하는지 확인해야 한다. 1. Drag and Drop 사용자 인터페이스 중 Drag and Drop 이 있다. 구글 캘린더에서 일정을 등록할 때 사용하기도 하는데, API 를 사용하면 Drag and Drop 을 쉽게 구현할 수 있다. (https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop) 드래그 시작 시 dataTransfer 객체에 Text 형식의 id를 보낸다. 기본적으로 HTML에서는 다른 요소가 드랍되는걸 지원하지 않기 때문에 드랍 대상인 div 박스에서는 preventDefault() 메서드를 실행시킨다. 이미..
[HTML] Layout (1)
[HTML] Layout (1)
2022.10.25기존에는 HTML에서 영역을 나눌 때 div태그에 id값을 지정해 주는 방식을 사용했다. 하지만 여러 개발자들이 각각 다른 id를 사용하게 되고, HTML 코드의 일관성이 떨어져 새로운 방법을 고안했다. 각각의 레이아웃에 대응되는 새로운 태그를 만들어 화면을 구성하는 방법을 사용한다. CSS FlexBox : 컨테이너 내부에 요소를 배치한다. 가로 또는 세로를 기준으로 요소를 배치한다, CSS Grid : 컨테이너 애부에 요소를 배치한다. 2차원 좌표평면을 기준으로 요소를 배치한다. 두 가지 모두 HTML 요소를 배치할 때 유용하게 사용된다. Semantic Element 태그만 봐도 직관적으로 해당 태그가 무슨 역할을 하는지 유추할 수 있는 Element를 의미한다. : 내부에 제목과 내용을 포함한다...
[HTML] Form (1)
[HTML] Form (1)
2022.10.25output oninput : input을 받을 때 마다 x를 갱신한다. range : 막대기로 값 입력 number : validation으로 숫자만 입력하도록 설정함. 이 외에도 여러 가지 input type 속성이 있으니 이런게 있구나~ 정도만 생각해두고 필요할 때 찾아서 사용하자. 속성 값이 직관적이라서 어떤 역할을 하는지 이해하기 쉽다. 속성 값을 사용해 편하게 validation을 수행할 수 있다. 당연히 자바스크립트와 백엔드 언어로도 validation을 수행해야 하고, html은 추가로 사용한다고 생각하자. input 태그에서 min max 속성을 설정해서 입력할 수 있는 최소치와 최대치를 설정할 수 있다. readonly : 커서를 놓을 수는 있지만 값을 변경 할 수는 없음. 대신 sub..
네이버 지도 크롤링
네이버 지도 크롤링
2022.09.25네이버 지도 웹 사이트는 웹 사이트 내부에서 웹 사이트를 보여주는 iframe 태그를 사용하기 기존 작업에서 한 단계 더 처리해줘야 한다. 뭔가 대단한 작업을 해야 되는 건 아니고, iframe 태그 내부로 접근 해 주는 부분만 처리하면 된다. 어차피 이 작업도 파이썬 모듈이 다 해 준다. 적절히 사용하는 방법만 기억하자. from selenium import webdriver from selenium.webdriver.chrome.service import Service from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.keys import Keys from selenium.webdriver.commo..
크롤링에서 POST 요청이 필요한 경우
크롤링에서 POST 요청이 필요한 경우
2022.09.24GET 요청으로 원하는 정보를 모두 가져올 수 있으면 좋겠지만, form 태그를 통해 정보를 입력하고 POST요청을 수행해야 정보를 받아올 수 있는 경우도 있다. 이런 경우 payload에서 form 정보를 가져오고 가져온 정보로 POST요청을 날려 데이터를 받아온 후 처리하자. 예시로, 토요코인호텔 사이트가 있다. from selenium import webdriver from selenium.webdriver.chrome.service import Service from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by..
네이버 금융 크롤링
네이버 금융 크롤링
2022.09.24네이버 금융 사이트는 주식들과 주식들의 정보를 제공한다. 주식 관련 정보를 가져와 적절히 가공해 투자에 사용해보자. 어떤 옵션을 표시할 지 설정해주자. 옵션을 선택하면 주식 명과 선택한 옵션에 대한 정보를 보여준다. 옵션을 선택하고 적용하기 버튼을 누르면 URL이 변경되지 않고 화면만 바뀐다. 이런 경우 개발자 도구에서 네트워크 옵션을 사용하자. 네트워크 옵션이 켜진 상태에서 적용하기 버튼을 누르면 사이트가 서버와 어떤 정보를 주고받았는지 확인할 수 있다. 여기서 제일 위에 위치한 옵션을 살펴보자. 클라이언트가 서버에 요청한 URL을 얻을 수 있다. 요청한 URL은 우리가 선택한 옵션이 반영된 정보를 보여주니, 이 URL을 사용해 크롤링을 진행하면 된다. (페이징 처리도 이쪽 URL을 사용해서 처리하고,..
[CSS] CSS 정리 (5)
[CSS] CSS 정리 (5)
2022.09.21기본 문법은 위와 같이 사용한다. Selector로는 태그 이름 혹은 CSS 선택자를 사용한다. 모든 요소의 이름은 숫자로 시작하면 안 된다. id : #으로 선택. 문서 안에 하나만 사용한다. class : .으로 선택. 문서 안에 여러 개를 사용해도 된다. 그룹화에 사용됨. 띄어쓰기하면 클래스 2개 지정. p.large는 p요소의 large를 의미 * : 모든 요소를 선택함 opacity/transparency : 투명도 background-repeat : 배경 이미지를 반복해서 배경 채움 background-attachment : fixed 설정 시 스크롤해도 이미지 고정 background-position : 배경 이미지 위치 지정 border-radius : 둥글게 margin : auto 설정..
이미지 크롤링
이미지 크롤링
2022.09.21네이버와 구글에서 검색어를 입력하고 검색해서 나온 이미지들을 컴퓨터에 저장해보자. 1. 네이버 from selenium import webdriver from selenium.webdriver.chrome.service import Service from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from webdriver_manager.chrome import ChromeDriverManager import time import pyautogui import os import urllib.requ..
쿠팡 상품 크롤링
쿠팡 상품 크롤링
2022.09.20쿠팡에 검색어를 입력하고 쿠팡 랭킹순으로 상품을 엑셀에 저장해보자. import requests from bs4 import BeautifulSoup import pyautogui import openpyxl keyword = pyautogui.prompt("검색어를 입력하세요.") num = int(pyautogui.prompt("몇 페이지까지 가져올까요?")) wb = openpyxl.Workbook('coupang/coupang.result.xlsx') ws = wb.create_sheet(keyword) ws.append(['순위', '브랜드명', '상품명', '가격', '상세페이지 링크']) rank = 1 for page in range(1, num + 1): # 검색어 print(page, ..