meta tag
- meta 태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용
- HTML 문서의
<head>와</head>사이에 입력하는 특수 태그 - 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있는 즉, 문서 그 자체를 설명하는 태그
meta 태그의 속성
-
http-equiv="항목명
웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다 -
content="정보값"
meta 정보의 내용을 지정 -
name="정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 한다
import requests
from bs4 import BeautifulSoup
url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=171539'
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url,headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
# url에서 페이지 정보 가져오기(meta태그 스크래핑)
# meta태그는, <head></head> 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그
title = soup.select_one('meta[property="og:title"]')['content'] # 기사 제목
image = soup.select_one('meta[property="me2:image"]')['content'] # 썸네일 이미지
desc = soup.select_one('meta[property="og:description"]')['content'] # 내용
print(title, image, desc)POST 연습(메모하기)
app.py
@app.route('/memo', methods=['POST'])
def saving():
# 메모를 작성하기 위해 서버가 전달받아야하는 정보 url, comment
url_receive = request.form['url_give']
comment_receive = request.form['comment_give']
# 스크래핑한 meta tag 아래 데이터에 저장(Create)
headers = {
'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(url_receive, headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
title = soup.select_one('meta[property="og:title"]')['content']
image = soup.select_one('meta[property="me2:image"]')['content']
desc = soup.select_one('meta[property="og:description"]')['content']
doc = {
'title':title,
'image':image,
'desc':desc,
'url':url_receive,
'comment':comment_receive
}
# mongoDB에 데이터를 넣기
db.articles.insert_one(doc)
return jsonify({'msg':'저장 완료!'})index.html
function postArticle() {
// 서버에게 주어야하는 정보 url, comment
let url = $('#post-url').val();
let comment = $('#post-comment').val();
$.ajax({
type: "POST",
url: "/memo",
data: {url_give:url, comment_give:comment}, // /memo에 POST 방식으로 메모 생성 요청하기
success: function (response) { // 성공하면
alert(response["msg"]);
window.location.reload() // 새로고침하기
}
})
}GET (보여주기)
app.py
@app.route('/memo', methods=['GET'])
def listing():
# 모든 document 찾기 & _id 값은 출력에서 제외하기
# articles라는 키 값으로 영화정보 내려주기
articles = list(db.articles.find({}, {'_id': False}))
return jsonify({'all_articles':articles})index.html
function showArticles() {
$.ajax({
type: "GET",
url: "/memo",
data: {},
success: function (response) {
let articles = response['all_articles']
for (let i = 0; i < articles.length; i++) {
let title = articles[i]['title']
let image = articles[i]['image']
let desc = articles[i]['desc']
let url = articles[i]['url']
let comment = articles[i]['comment']
let temp_html = `<div class="card">
<img class="card-img-top"
src="${image}"
alt="Card image cap">
<div class="card-body">
<a target="_blank" href="${url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`
$('#cards-box').append(temp_html);
}
}
})
}