정승우 / YaguMoa

Go to a project
Toggle navigation Toggle navigation pinning
SW0000J
116f68f8 1 parent 970559f0

크롤링 html 표시 완료, css 성공(팀 별로 구분 해야함)

Inline Side-by-side
Showing 9 changed files with 443 additions and 61 deletions
var express = require('express'); // web server 사용
var fs = require('fs'); // file load
var app = express();
var port = 80;
app.listen(port, function(){
console.log('Server Start');
})
app.get('/', function(req, res){
fs.readFile('WebTest.html', function(error, data){
if(error){
console.log(error);
}else{
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(data);
}
})
})
\ No newline at end of file
/* =============== ##공통 (common) ======================== */
html,body{height:auto;}
body{font-weight:normal;font-family:'맑은 고딕','Malgun Gothic',AppleSDGothicNeo-Regular,Arial,Helvetica,sans-serif;letter-spacing:-1px;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-family:'맑은 고딕','Malgun Gothic',AppleSDGothicNeo-Regular,Arial,Helvetica,sans-serif;}
p,li,dt,dd,span,strong,em,b,input,button,select,textarea,label,a{font-weight:normal;font-family:'맑은 고딕','Malgun Gothic',AppleSDGothicNeo-Regular,Arial,Helvetica,sans-serif;}
a{display:inline-block;vertical-align:top;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font:inherit;font-weight:bold;}
img{display:inline-block;border:0 none;vertical-align:top;}
cite,code,dfn,del,em,ins,label,q,span,strong,b,i,time,mark,font,kbd,q,s,samp,small,strike,sub,sup,tt,var,u,center{display:inline-block;margin:0;padding:0;vertical-align:top;font:inherit;}
address,cite,em,dfn{font:inherit;}
b,i,strong,optgroup{font:inherit;font-weight:bold;}
div,article,aside,main,menu,details,figure,figcaption,hgroup,footer,header,nav,section,object,summary,iframe{display:block;margin:0;padding:0;font:inherit;}
/* =============== ##레이아웃 (layout) ======================== */
body:not(.body-popup-win){min-width:1130px;}
body.page-main,
body.body-wide1300{min-width:1320px;}
html,body{width:100%;height:100%;margin:0;padding:0;}
body{font-weight:normal;font-size:1em;line-height:1.5em;font-family:sans-serif;color:#000;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
/* list */
dl,dd,ol,ul,li{margin:0;padding:0;}
li{list-style-type:none;}
/* link */
a{font:inherit;color:inherit;text-decoration:none;cursor:pointer;}
a{background-color:transparent;}
a:link,
a:visited,
a:active,
a:focus{color:inherit;}
/* 공통 */
[class*='title-type']{position:relative;display:inline-block;box-sizing:border-box;vertical-align:bottom;} /* height:36px; */
[class*='title-type'] [class*='tit'],
[class*='title-type'] [class*='txt']{vertical-align:bottom;}
[class*='title-type'] [class*='tit']{position:relative;box-sizing:border-box;}
[class*='title-type'] .tit{font-size:18px;line-height:22px;}
[class*='title-type'].bold .tit{font-weight:bold;}
[class*='title-type'] .txt{margin-left:6px;color:#666;font-size:10px;line-height:12px;letter-spacing:0;}
[class*='title-type'] .tit+.txt{margin-left:6px;}
/* =============== List type ======================== */
[class*='list-type']{font-size:0;line-height:1;}
[class*='list-type'] [class*='item']{position:relative;}
[class*='list-type'] [class*='item']:after{content:'';display:block;clear:both;}
[class*='list-type'] .img-con .img{overflow:hidden;position:relative;} /* background-color:#ccc; */
[class*='list-type'] .img-con .img img{width:100%;height:auto;}
[class*='list-type'] .img-con .label-box01{position:absolute;bottom:0;right:0;min-width:50px;height:35px;box-sizing:border-box;padding:8px 8px 7px;background-color:#fff;text-align:center;vertical-align:middle;}
/* basic */
.hidden-obj{position:absolute;visibility:hidden;top:-9999px;left:-9999px;}
.blind{overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;padding:0;font-size:0;line-height:0;}
.display-none{display:none;}
/* title-type04 */
.title-type04[class*='arr'] .tit{padding-right:17px;}
.title-type04 .tit{font-size:20px;line-height:22px;}
.img-cover{overflow:hidden;}
/* list-type038 */
.list-type038 .list{border-top:1px solid #e5e5e5;}
.list-type038 [class*='item-box']{}
.list-type038 .item-box01{display:table;width:100%;border-bottom:1px solid #e5e5e5;}
.list-type038 .item-box01>.img-con,
.list-type038 .item-box01>.news-con,
.list-type038 .item-box01>[class*='info-box']{display:table-cell;padding:30px 0;vertical-align:top;}
.list-type038 .img-con{width:180px;}
.list-type038 .img-con .img{width:170px;height:110px;}
.list-type038 .news-con{max-height:110px;}
.list-type038 .tit-news{font-weight:bold;font-size:18px;line-height:24px;}
.list-type038 .tit-wrap:hover .tit-news{text-decoration:underline;}
.list-type038 .lead{overflow:hidden;max-height:48px;margin-top:12px;color:#666;font-size:14px;line-height:24px;}
.list-type038 .lead:empty{display:none;}
.list-type038 .info-box01{width:110px;}
.list-type038 .info-box01 .txt-time{padding-top:4px;color:#666;font-size:12px;line-height:14px;letter-spacing:0;}
.list-type038 .item-box01 .info-box02{width:156px;padding:0 20px 0 0;vertical-align:middle;text-align:right;}
\ No newline at end of file
......@@ -2,16 +2,24 @@ var express = require('express');
var router = express.Router();
const getXports = require('../test1.js');
const Zum = require('../test2.js');
const Chosun = require('../test3.js');
const zum = Zum.zum;
const chosun = Chosun.chosun;
const getZum = require('../test2.js');
const getChosun = require('../test3.js');
const getYna = require('../test4.js')
let xports;
let zum;
let chosun;
let yna;
(async function() {
try {
xports = await getXports();
console.log(xports);
xports = await getXports();
zum = await getZum();
chosun = await getChosun();
yna = await getYna();
console.log(xports);
console.log(zum);
console.log(chosun);
console.log(yna);
} catch (e) {
return console.log(e);
}
......@@ -23,13 +31,9 @@ router.get('/', function(req, res, next){
xports : xports,
zum : zum,
chosun : chosun,
// yna : yna
yna : yna
});
});
console.log("aaaa\n");
for(var i in xports){
console.log("aaaa\n");
console.log(i.datetime);
}
console.log("started\n");
module.exports = router;
......
const axios = require("axios"); // 웹 서버 요청 모듈
const cheerio = require("cheerio"); // Load한 것을 jQuery처럼 사용
//const Iconv = require('iconv').Iconv; // 한글 깨짐 방지
//const iconv = new Iconv('EUC-KR', 'UTF-8//IGNORE');
const url = "http://www.xportsnews.com/?ac=article_list&cate_indexno=12"
......@@ -26,7 +24,7 @@ const getXports = async () => {
$bodyList.each(function(i, elem) {
ulList[i] = {
url: 'xportsnews.com' + $(this).find('div.thumb > a').attr('href'),
url: 'http://www.xportsnews.com' + $(this).find('div.thumb > a').attr('href'),
image_url: $(this).find('div.thumb > a > img').attr('src'),
title: $(this).find('dl.dlist > dt > a').text(),
summary: $(this).find('dd').text().slice(1, -2),
......
......@@ -11,24 +11,35 @@ const getHtml = async () => {
}
};
getHtml()
.then(html => {
let ulList = [];
const $ = cheerio.load(html.data);
const $bodyList = $("div.major_news > ul").children("ul.no_reply > li.large");
const getXports = async () => {
return new Promise((resolve, reject) => {
getHtml()
.then(html => {
let ulList = [];
//console.log(html.data);
const $ = cheerio.load(html.data);
const $bodyList = $("div.major_news > ul").children("ul.no_reply > li.large");
$bodyList.each(function(i, elem) {
ulList[i] = {
url: 'news.zum.com' + $(this).find('div.img > a').attr('href'),
url: '//news.zum.com' + $(this).find('div.img > a').attr('href'),
image_url: $(this).find('div.img > a > img').attr('src'),
title: $(this).find('div.txt > div.title > a').text(),
summary: $(this).find('div.txt > div.content > a').text(),//.slice(0, -29)
datetime: $(this).find('div.txt > div.content > span.etc').text()
};
//console.log(ulList[i]) // list object checking code
});
//console.log(ulList[i]) // list object checking code
});
const data = ulList.filter(n => n.title);
return data;
//return ulList;
}).then(data => {
resolve(data);
});
});
};
const data = ulList.filter(n => n.title);
return data;
//return ulList;
});
module.exports = getXports;
......
......@@ -11,11 +11,16 @@ const getHtml = async () => {
}
};
getHtml()
.then(html => {
let ulList = [];
const getXports = async () => {
return new Promise((resolve, reject) => {
getHtml()
.then(html => {
let ulList = [];
//console.log(html.data);
const $ = cheerio.load(html.data);
const $bodyList = $("div.list_body > div.list_content").children("dl.list_item");
const $bodyList = $("div.list_body > div.list_content").children("dl.list_item");
$bodyList.each(function(i, elem) {
ulList[i] = {
......@@ -28,7 +33,13 @@ getHtml()
//console.log(ulList[i]) // list object checking code
});
const data = ulList.filter(n => n.title);
return data;
//return ulList;
});
const data = ulList.filter(n => n.title);
return data;
//return ulList;
}).then(data => {
resolve(data);
});
});
};
module.exports = getXports;
......
const axios = require("axios");
const cheerio = require("cheerio");
const url = "https://www.yna.co.kr/sports/baseball"
const getHtml = async () => {
try {
return await axios.get(url);
} catch (error) {
console.error(error);
}
};
const getXports = async () => {
return new Promise((resolve, reject) => {
getHtml()
.then(html => {
let ulList = [];
//console.log(html.data);
const $ = cheerio.load(html.data);
const $bodyList = $("div.list-type038 ul.list li").children("div.item-box01");
$bodyList.each(function(i, elem) {
ulList[i] = {
datetime: $(this).find('span.txt-time').text(),
image_url: $(this).find('figure.img-con a img').attr('src'),
url: $(this).find('div.news-con a').attr('href'),
title: $(this).find('div.news-con strong').text(),
summary: $(this).find('div.news-con p').text()
};
//console.log(ulList[i]) // list object checking code
});
const data = ulList.filter(n => n.title);
return data;
//return ulList;
}).then(data => {
resolve(data);
});
});
};
module.exports = getXports;
@charset "utf-8";
/*************************************************
프로젝트명 : 연합뉴스 국문 모바일 홈페이지 (2019)
commnet : default
original : /global/guide/v01/css/default_v.0.2.css
version : 0.2
modify : 2019-04-01
*************************************************/
html,body{width:100%;height:100%;margin:0;padding:0;}
body{font-weight:normal;font-size:1em;line-height:1.5em;font-family:sans-serif;color:#000;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font:inherit;font-weight:bold;}
img{display:inline-block;border:0 none;vertical-align:top;}
cite,code,dfn,del,em,ins,label,q,span,strong,b,i,time,mark,font,kbd,q,s,samp,small,strike,sub,sup,tt,var,u,center{display:inline-block;margin:0;padding:0;vertical-align:top;font:inherit;}
address,cite,em,dfn{font:inherit;}
b,i,strong,optgroup{font:inherit;font-weight:bold;}
blockquote,p{margin:0;padding:0;font:inherit;}
pre{overflow:auto;margin:0;padding:0;font:inherit;}
mark{background:#fff;font:inherit;/* color:#000; */} /* IE 8/9 */
sub,sup{position:relative;font-size:0.75em;vertical-align:baseline;font:inherit;}
abbr[title]{border-bottom:1px dotted;font:inherit;}
hr{display:none;}
div,article,aside,main,menu,details,figure,figcaption,hgroup,footer,header,nav,section,object,summary,iframe{display:block;margin:0;padding:0;font:inherit;}
iframe{overflow:hidden;border:none;}
audio,canvas,progress,video{display:inline-block;margin:0;padding:0;vertical-align:baseline;}
audio:not([controls]){display:none;height:0;}
[hidden],template{display:none;}
svg:not(:root){overflow:hidden;} /* IE 9~11 */
/* table */
table{border-collapse:collapse;border-spacing:0;}
caption{overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999px;}
th,td{margin:0;padding:0;font:inherit;text-align:left;vertical-align:middle;}
/* list */
dl,dd,ol,ul,li{margin:0;padding:0;}
li{list-style-type:none;}
/* form */
form{margin:0;padding:0;}
fieldset{margin:0;padding:0;border:0 none;}
legend{overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;}
input,button,select,textarea{margin:0;padding:0;font:inherit;vertical-align:top;}
input.text{padding:4px 7px 4px;border:1px solid #ccc;font-size:12px;line-height:1;color:#000;}
input.readonly{background-color:#eee;}
input.check,input.radio{width:13px;height:13px;margin:2px 7px 0 0;padding:0;}
input[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{height:auto;}
input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{margin:0;padding:0;border:1px solid #ccc;font-size:12px;color:#000;resize:none;}
select{height:20px;margin:0;border:1px solid #ccc;outline:none;background-color:#fff;font-size:12px;color:#000;vertical-align:top;text-transform:none;}
button{overflow:visible;text-transform:none;cursor:pointer;}
button::-moz-focus-inner,
input::-moz-focus-inner{padding:0;border:0;}
button[disabled],html input[disabled]{cursor:default;}
/* link */
a{font:inherit;color:inherit;text-decoration:none;cursor:pointer;}
a{background-color:transparent;} /* IE10 active transparent remove */
a:link,
a:visited,
a:active,
a:focus{color:inherit;}
/* selection */
/* PC 국문 개편에서는 설정 안 함 */
/* ::selection{opacity:0.1;background:#fff2a8;}
::-moz-selection{background:#fff2a8;} */
/* skip navigation */
#skipNav{position:relative;z-index:800;}
#skipNav a{overflow:hidden;position:absolute;width:1px;height:1px;margin-bottom:-1px;}
#skipNav a:focus,#skipNav a:active{overflow:auto;display:block;position:absolute;width:100%;height:30px;margin:0;background-color:#fff000;font-weight:bold;font-size:14px;line-height:30px;color:#000;text-align:center;z-index:100;}
/* clear */
.clear:after{content:".";visibility:hidden;display:block;clear:both;height:0;font-size:0;line-height:0;}
.clear{display:inline-block;}
*html .clear{height:0;}
.clear{display:block;}
.clear-both{clear:both;}
/* basic */
.hidden-obj{position:absolute;visibility:hidden;top:-9999px;left:-9999px;}
.blind{overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:0;height:0;padding:0;font-size:0;line-height:0;}
.display-none{display:none;}
.for-mobile{display:none}
.visible-hidden{visibility:hidden;}
.word-break{word-break:break-all !important;}
.text-indent{overflow:hidden;display:block;text-indent:-9999px;}
.text-c{text-align:center !important;}
.text-l{text-align:left !important;}
.text-r{text-align:right !important;}
.vt-t{vertical-align:top !important;}
.vt-m{vertical-align:middle !important;}
.vt-b{vertical-align:bottom !important;}
.fw-b{font-weight:bold !important;}
.fw-n{font-weight:normal !important;}
.fl-l{float:left;}
.fl-r{float:right;}
.fn{float:none !important;}
.bg-none{background:none !important;}
.bd-n{border:none !important;}
.bd-t{border-top:none !important;}
.bd-r{border-right:none !important;}
.bd-b{border-bottom:none !important;}
.bd-l{border-left:none !important;}
.of-a{overflow:auto;}
.of-h{overflow:hidden;}
.scroll-x{overflow-x:scroll;}
.scroll-y{overflow-y:scroll;}
.mg-none{margin:0 !important;}
\ No newline at end of file
......@@ -3,35 +3,128 @@
<head>
<meta charset="utf-8">
<title>ossswoo.tk</title>
<link rel="stylesheet" href="/stylesheets/style.css" />
<title>YaguMoa[ossswoo.tk]</title>
</head>
<body>
<div class = 'main'>
<div class = 'center'>
<div>
<% for(var i of xports) { %>
<li>
<div class='item'>
<div class='info'>
<span class='time'><%= i.datetime %></span>
</div>
<div class='img'>
<a>
<img src = <%= i.image_url %>>
</a>
</div>
<div class='news'>
<a href = <%= i.url %>>
<strong><%= i.title %></strong>
</a>
<p>
<%= i.summary %>
</p>
</div>
<body class = "body-news-list page-sports body-static" data-nav="sports">
<div id = "container" class = "wrap-container">
<div class = "container">
<div class = 'content03 width1100 line01'>
<div class = "section01">
<div class = 'title-page02'>
<h1 class = "title-type04 bold">
<span class = "tit">야구 모아</span>
</h1>
</div>
</li>
<% } %>
<section class = 'box-type box-latest01'>
<strong class="hidden-obj">야구 기사 목록</strong>
<div class = "list-type038">
<ul class = "list">
<% for(var i of xports) { %>
<li>
<div class='item-box01'>
<div class='info-box01'>
<span class="blind">송고시간</span>
<span class='txt-time'><%= i.datetime %></span>
</div>
<% if (i.image_url != undefined) { %>
<figure class='img-con'>
<a class = "img img-cover imgLiquid_bgSize imgLiquid_ready" style = "background-size: cover; background-position: center top; background-repeat: no-repeat;" href = <%= i.url %> >
<img src = <%= i.image_url %>>
</a>
</figure>
<% } %>
<div class='news-con'>
<a class = 'tit-wrap' href = <%= i.url %>>
<strong class = 'tit-news'><%= i.title %></strong>
</a>
<p class = "lead">
<%= i.summary %>
</p>
</div>
</div>
</li>
<% } %>
<% for(var i of zum) { %>
<li>
<div class='item-box01'>
<div class='info-box01'>
<span class="blind">송고시간</span>
<span class='txt-time'><%= i.datetime %></span>
</div>
<% if (i.image_url != undefined) { %>
<figure class='img-con'>
<a class = "img img-cover imgLiquid_bgSize imgLiquid_ready" style = "background-size: cover; background-position: center top; background-repeat: no-repeat;" href = <%= i.url %> >
<img src = <%= i.image_url %>>
</a>
</figure>
<% } %>
<div class='news-con'>
<a class = 'tit-wrap' href = <%= i.url %>>
<strong class = 'tit-news'><%= i.title %></strong>
</a>
<p class = "lead">
<%= i.summary %>
</p>
</div>
</div>
</li>
<% } %>
<% for(var i of chosun) { %>
<li>
<div class='item-box01'>
<div class='info-box01'>
<span class="blind">송고시간</span>
<span class='txt-time'><%= i.datetime %></span>
</div>
<% if (i.image_url != undefined) { %>
<figure class='img-con'>
<a class = "img img-cover imgLiquid_bgSize imgLiquid_ready" style = "background-size: cover; background-position: center top; background-repeat: no-repeat;" href = <%= i.url %> >
<img src = <%= i.image_url %>>
</a>
</figure>
<% } %>
<div class='news-con'>
<a class = 'tit-wrap' href = <%= i.url %>>
<strong class = 'tit-news'><%= i.title %></strong>
</a>
<p class = "lead">
<%= i.summary %>
</p>
</div>
</div>
</li>
<% } %>
<% for(var i of yna) { %>
<li>
<div class='item-box01'>
<div class='info-box01'>
<span class="blind">송고시간</span>
<span class='txt-time'><%= i.datetime %></span>
</div>
<% if (i.image_url != undefined) { %>
<figure class='img-con'>
<a class = "img img-cover imgLiquid_bgSize imgLiquid_ready" style = "background-size: cover; background-position: center top; background-repeat: no-repeat;" href = <%= i.url %> >
<img src = <%= i.image_url %>>
</a>
</figure>
<% } %>
<div class='news-con'>
<a class = 'tit-wrap' href = <%= i.url %>>
<strong class = 'tit-news'><%= i.title %></strong>
</a>
<p class = "lead">
<%= i.summary %>
</p>
</div>
</div>
</li>
<% } %>
</ul>
</div>
</section>
</div>
</div>
</div>
</div>
......