Web
네이버 뉴스 크롤링
네이버 뉴스 크롤링
2022.09.18네이버 검색창에 컴퓨터를 검색하고 카테고리를 뉴스로 설정했다. 크롤링 할 때는 첫 번째 기사처럼 네이버뉴스 버튼이 있는 기사를 가져오고 싶다. (웹 페이지의 구조를 동일하게 맞추기 위해) html을 분석해보니 네이버뉴스 버튼이 있는 기사들은 info 태그를 두 개씩 가지고 있다. 이 부분에 집중해 코드를 작성하자. import requests from bs4 import BeautifulSoup import time response = requests.get("https://search.naver.com/search.naver?where=news&sm=tab_jum&query=%EC%BB%B4%ED%93%A8%ED%84%B0") html = response.text soup = BeautifulSoup(..
[HTML] HTML 정리 (3)
[HTML] HTML 정리 (3)
2022.09.14HTML의 모든 표현은 대소문자를 구분하지 않지만 소문자로 표현하는걸 권장함. : 사용자에게 보여지지 않는 부분. 브라우저가 HTML문서를 처리할 때 필요한 정보들이 포함된다. (메타) : 사용자에게 보여주는 부분. : 문서가 뭘로 쓰였는지 알려준다. 은 html로 쓰였다는걸 의미. : 제목. 숫자 작을수록 중요도 높음 1 ~ 6 : 한 단락. 화면은 알아서 조정되고 공백과 개행문자도 적절히 처리됨. block : block : in-line : 공백과 개행문자를 그대로 해석함. 태그와 함께 사용해서 소스코드를 명시할 수 있음. : 행 바꾸기 (줄바꿈) p 태그랑 함께 사용해서 단락을 구성할 수 있다. : 줄 긋기. 주제 전환 시 사용. , : 굵게 , : 이탤릭체 : 주석 : 특정 영역을 만들고 해당 ..
HTTP 통신과 라이브러리
HTTP 통신과 라이브러리
2022.04.05HTTP통신으로 get과 post등 여러 가지 요청을 보낼 수 있다. get은 웹사이트에서 정보를 얻어올 때 사용하고, post는 웹사이트에게 정보를 제공하고 제공한 정보에 따라 응답을 확인하는 과정이다. (회원가입과 유사하다) 파이썬으로 웹 크롤링을 진행할 때 위의 HTTP통신을 수행하기 위해 외장 라이브러리인 Requests를 사용한다. import requests response = requests.get('http://www.naver.com') html = response.text print(html) requests.get메서드로 특정 URL을 입력하면, 입력한 URL의 HTML코드를 Python객체로 받아온다. 가져온 정보를 분석하고 사용하기 편한 형태로 가공하기 위해 BeautifulSou..
[CSS] CSS 정리 (4)
[CSS] CSS 정리 (4)
2022.02.06지금까지 CSS를 사용해 웹 페이지를 아름답게 꾸미고 시각적으로 보기 좋은 웹 페이지를 만드는 방법에 대해 배웠다. 이제 웹 페이지간의 상호작용에 집중해 애니메이션 동작을 구현해보자. transform 물체의 크기 형태 위치를 바꾸는 것을 변형이라고 한다. CSS 변형을 이용해 좀 더 동적 웹 페이지를 만들어보자. 변형을 적용하기 위해 transform 속성과 속성에 해당하는 다양한 함수를 사용한다. 1. translate() 함수 상자에 커서를 가져가면 translate함수에 맞춰서 상자를 이동시킨다, x y 좌표를 사용해 2차원 간의 이동을 설정할 수 있고, z좌표까지 사용하면 이동을 3차원으로 확장할 수 있다. 2. scale() 함수 요소를 지정한 크기만큼 확대하거나 축소할 수 있다. 2차원과 3..
[CSS] CSS 정리 (3)
[CSS] CSS 정리 (3)
2022.01.21특정 부분이나 글자 등 여러 요소들에 대해 배경을 넣어서 아름다운 웹 페이지를 만들 수 있다. 웹의 바탕을 꾸며 주는 배경 스타일에 대해 알아보자. background 1. background-color 배경색을 지정할 때 사용한다. 색의 지정은 텍스트의 색상을 설정하는 방법과 동일하다. (16진수, RGB, HSL) 또한 background-color 속성은 스타일 상속에서 배재된다. 2. background-clip 배경색의 적용 범위를 조절하는 역할을 한다. border-box : 테두리까지 적용한다. padding-box : 패딩 범위까지 적용한다. content-box : 콘텐츠 부분에만 적용한다. 박스 모델에서 어떤 요소까지 배경색을 적용할 지를 결정한다. 3. background-image ..
[CSS] CSS 정리 (2)
[CSS] CSS 정리 (2)
2022.01.20웹 문서에서 내용을 배치할 때 각각의 요소들을 박스 형태로 구성한다. margin padding border 등 여러 가지 박스 요소들을 사용해 문서를 적절하게 배치하고 꾸밀 수 있다. 이제 CSS의 박스 모델에 대해 알아보자. 박스 모델 1. 블록 레벨 요소 블록 레벨 요소는 태그를 사용했을 때 혼자 한 줄을 차지하는 것을 말한다. 위에서는 , , 태그가 블록 레벨 요소이다. 2. 인라인 레벨 요소 인라인 레벨 요소는 한 줄을 차지하지 않고, 콘텐츠만큼의 영역을 차지한다. 위에서는 태그가 인라인 레벨 요소이다. 블록 레벨 요소와 인라인 레벨 요소를 비교 확실하게 이해하자. 이제 박스 모델을 사용해서 화면을 구성할 때 필요한 개념에 대해 알아보자. 패딩 / 테두리 / 마진은 상하좌우로 나뉘어 있어 네 방..
[CSS] CSS 정리 (1)
[CSS] CSS 정리 (1)
2022.01.19HTML (Hyper Text Markup Language)는 웹 사이트의 내용을 담당하고, CSS (Cascading Style Sheets)는 웹 사이트의 디자인을 담당한다. CSS는 웹 문서의 스타일이다. (Cascading : 위에서 아래의. 계단식의 정도로 해석하면 된다.) 웹 페이지를 항상 컴퓨터에서만 열람할 수는 없다. 모바일, 태블릿 등 여러 가지 환경에서 웹 페이지를 열어볼 수 있는데 여기서 HTML만을 사용해서 웹 페이지를 구성하게 되면 다양한 환경에 대한 화면을 따로따로 만들어야 하지만, CSS를 도입하면 하나의 웹 페이지의 뼈대에 CSS만 다르게 적용하는 것으로 효율적으로 다양한 환경의 화면을 구상할 수 있다. (이를 반응형 웹 디자인 이라고 한다) 위를 통해 알 수 있듯 CSS는 ..
[HTML] HTML 정리 (2)
[HTML] HTML 정리 (2)
2022.01.19: 사용자가 웹사이트로 정보를 보낼 수 있는 요소를 폼이라고 부른다. 보낸 정보는 서버에서 처리한다. 여러 가지 폼 요소 form에 사용할 수 있는 속성을 알아보자. 1. method : 내용을 서버 쪽으로 어떻게 넘겨줄 것인지 지정한다. - post : 속성값으로 post를 가질 수 있다. 주소 표시줄에 사용자가 입력한 내용이 드러나고, 데이터에 제한이 있다. - get : 속성값으로 get을 가질 수 있다. 데이터에 제한이 없고 입력한 내용도 드러나지 않는다. 2. name : 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다. 3. action : form 태그 안의 내용을 처리할 서버 프로그램을 지정한다. - autocomplete : 자동완성 기능을 제공하고, 기본값은 on 이다. 4...
[HTML] HTML 정리 (1)
[HTML] HTML 정리 (1)
2022.01.18HTML : 제목 본문 이미지 표 등 웹 요소를 알려주는 역할을 함. (Hyper Text Markup Language) 현재의 HTML은 HTML5 라고 할 수 있다. Hyper : 하이퍼링크 Markup : 태그 브라우저는 HTML 태그들을 해석해서 화면을 만들어낸다. CSS : HTML로 만든 내용을 꾸미거나 배치하는 역할을 한다. (태블릿 PC 모바일 호환에 사용) JavaScript : 동적 효과를 줄 때 사용한다. (라이브러리/프레임워크를 사용하지 않고 JavaScript만 쓰면 Vanila JavaScript) 프레임워크를 사용할 때는 개발의 주도권이 프레임워크에 있다. 라이브러리를 사용할 때는 라이브러리에서 필요한 기능만 사용해도 되기 때문에 주도권이 개발자에게 있다. 프레임워크와 라이브러..