[Kor]
JSP 코딩시 기본사용 요소들을 정리한 파워포인트 입니다.
JSP 지시어, 스크립트 요소 들에 대해서 간략하게 정리했습니다.
[EN]
This PowerPoint is Summary of JSP
Summary of JSP Directive and JSP Scripting Elements
조동현(L0GIC)
2014-08-09 일 제작한 한국 디지털 미디어 고등학교 DETS 발표용 자료입니다.
웹 프론트엔드 (HTML/CSS) 에 관한 개념과 아주 기초적인 실전, 무료 웹 호스팅에 대해 작성되어 있습니다.
blog.rozix.net
portfolio.rozix.net
커빙의 Django, Celery, Azure Cloud, SNS 연동, 컨텐츠 수집 기술을 한눈에 볼 수 있도록 소개한 자료 입니다.
커빙을 처음 개발하면서 많은 어려움이 있었고,
또 많은 분들의 도움으로 좋은 결과를 얻을 수 있었습니다.
조금 더 깊은 내용을 다뤘으면 하는 아쉬움이 있지만,
다른 분들에게 조금이나마 도움이 되었으면 좋겠네요!
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
[Kor]
JSP 코딩시 기본사용 요소들을 정리한 파워포인트 입니다.
JSP 지시어, 스크립트 요소 들에 대해서 간략하게 정리했습니다.
[EN]
This PowerPoint is Summary of JSP
Summary of JSP Directive and JSP Scripting Elements
조동현(L0GIC)
2014-08-09 일 제작한 한국 디지털 미디어 고등학교 DETS 발표용 자료입니다.
웹 프론트엔드 (HTML/CSS) 에 관한 개념과 아주 기초적인 실전, 무료 웹 호스팅에 대해 작성되어 있습니다.
blog.rozix.net
portfolio.rozix.net
커빙의 Django, Celery, Azure Cloud, SNS 연동, 컨텐츠 수집 기술을 한눈에 볼 수 있도록 소개한 자료 입니다.
커빙을 처음 개발하면서 많은 어려움이 있었고,
또 많은 분들의 도움으로 좋은 결과를 얻을 수 있었습니다.
조금 더 깊은 내용을 다뤘으면 하는 아쉬움이 있지만,
다른 분들에게 조금이나마 도움이 되었으면 좋겠네요!
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
12. 주요 파이썬 모듈
모듈 설명 설치
webbrowser 브라우저에서 특정 페이지 조회. 표준 라이브러리
requests 웹페이지와 파일을 요청 pip install requests
BeautifulSoup HTML 문서에서 정보 추출 pip install beautifulsoup4
18. 웹문서 = HTML x CSS
HTML 소스
<html>
<body>
<h1>웹 스크래핑</h1>
<p>인터넷 데이터</p>
</body>
</html>
웹브라우저 출력
19. <html>
</html>
HTML 페이지 구조
• body
• 브라우저에서 출력
• head
• 웹페이지의 제목 등
• body 내용 출력에 필요한 설정
<head>
</head>
<body>
</body>
20. HTML 문법 기본
HTML 태그 구조
<태그명>내용</태그명>
<태그명 속성=값, …>내용</태그명>
<태그 속성=값, …>
예시
<h1>제목1</h1>
<p>본문</p>
<img src=‘image.png’>
태그
• 태그는 대부분 쌍으로 이루어진
다.
• 태그 종류
• 시작: <태그명>
• 종료: </태그명>
• 태그는 속성을 가질 수 있다.
21. HTML 텍스트 파일 열기
• HTML 텍스트 파일을 바로 웹
브라우저에서 볼 수 있다.
• 웹서버가 없어도 된다.
• 외부에서는 조회 불가능
• URL
• 프로토콜: file://
• 경로: 파일시스템
22. 브라우저에서 소스 보기
• 웹브라우저 메뉴의 개발자 도
구 활용
• 브라우저마다 메뉴가 다르다.
• 특정 요소의 HTML 태그 확인
가능
23. 웹문서 “스냅샷” 파일 저장
http://www.naver.com file:///…/naver_com.html
26. CSS 선택자 조합
CSS
p { … }
.content p { … }
#footer p { … }
HTML
<div class="content">
<h1>웹문서</h1>
<p>HTML과 CSS</p>
</div>
<div id="footer">
<p>이성주</p>
</div>
27. CSS 선택자 조합 예시
CSS 선택자 예시 선택되는 요소
h1 모든 <h1>
#content id=“content” 속성을 갖는 모든 요소
.result class=“result” 속성을 갖는 모든 요소
div h1 <div> 내 모든 <h1>
div > h1 <div>에 직접 속한 <h1>
input[name] <input> 요소 중 name 속성을 갖는 것
input[type=“email”] <input> 요소 중 type=”email” 속성을 갖는 것
참조: http://www.w3schools.com/cssref/css_selectors.asp
44. 정리
• webdriver
• 파이썬 코드와 브라우저 상호 작용에 필요
• 크롬, 파이어폭스 지원
• 대상 웹브라우저 설치 필요
• 웹브라우저 버전에 맞는 드라이버 파일 필요
• 요소 선택
• browser.find_element_by_css_selector(CSS선택자)
45. 주요내용
• 뉴스 웹사이트 기사 추출
• 관심 뉴스 웹사이트 전체에서 기사 추출
• 자동 로그인 수행
48. 관심 뉴스 웹사이트
제목 웹사이트 CSS선택자*
JTBC http://news.jtbc.joins.com/ #jtbcBody a[href^="http://news.jtbc.joins.com/html"]
KBS http://news.kbs.co.kr/common/main.html #container a[href^="/news/view.do?ncd"]
MBC http://imnews.imbc.com/ #middle a[href^="http://imnews.imbc.com/news"]
SBS http://news.sbs.co.kr/news/newsMain.do .w_inner a[href^="/news/endPage.do?news_id"]
*2017-01-17 기준
49. 정리
• 뉴스 웹사이트 기사 추출
• 특정 형식의 URL 선택
• CSS 속성 선택 활용
• 관심 뉴스 웹사이트 전체에서 기사 추출
• 각 웹사이트별 CSS 선택자 분석 필요
• 텍스트 또는 엑셀 파일 활용
• 자동 로그인 수행
• 계정 정보 입력 상자 요소 선택
• 입력 상자 요소 값 채우기: WebElement.send_keys()