개인 화면 구성하기
오늘은 하루종일 개인 화면만 구성했다. 디자인에 재능이 없는 건지 코딩에 재능이 없는 건지 모르겠지만 생각보다 너무 기운 빠지는 일이었다 ㅠㅠ
1. 홈 화면
홈 화면 구성은 자기 소개로 이루어진다. 아직 자기 소개를 다 작성하지 못해 빈칸이 숭숭 뚫려 있다. (아직 보기 싫음...) 주요 기능으로는 "SONGFLIX" 클릭 시 새로고침이 된다는 점, 헤더메뉴가 보이는 점, Total 기능이 있는 점이 있다. 새로고침 시에도 Total의 수는 1 증가한다.
2. LoL 전적 화면
헤더 메뉴에서 'LoL 전적'을 클릭하게 되면 스크롤바가 자동으로 이동하며 해당 화면으로 이동한다. 최근 15게임 동안의 전적을 보여준다. 'OP.GG' 라는 사이트에서 챔피언, kda, 승패 여부를 크롤링 해왔다. LoL API를 크롤링해보려 했지만 해외 게임인 만큼 복잡했기에 웹 크롤링을 진행했다. 파이썬으로 크롤링한 결과를 문자열로 예쁘게(?) 변경하여 변수에 저장한 후, Flask를 이용하여 html로 받아와 출력했다. 뭔가 좀 더 예쁘게 출력하고 싶은데 어떻게 하면 좋을지 아직 고민이다.
3. 플레이리스트 화면
헤더메뉴에서 '플레이리스트'를 클릭하게 되면 스크롤바가 자동으로 이동하며 해당 화면으로 이동한다. 내가 유튜브에서 자주 재생하는 플레이리스트 6개를 달아놨다. 유튜브를 html에 노출시키는 것을 매우 간단했기에 금방 구성할 수 있었던 화면 중 하나였다.
4. 추천 애니메이션 화면
헤더메뉴에서 '추천 애니메이션'을 클릭하게 되면 스크롤바가 자동으로 이동하며 해당 화면으로 이동한다. 내가 재미있게 봤던 애니메이션 6개를 별점과 함께 달아놨다. 해당하는 애니메이션의 사진을 클릭하면 어떤 이벤트를 주고 싶은데(관련 유튜브로 이동한다든지, 넷플릭스 결제 페이지로 이동한다든지 등) 무엇이 좋을지는 아직 고민이다.
5. 다른 멤버들 화면
헤더메뉴에서 '다른 멤버들'을 클릭하게 되면 스크롤바가 자동으로 이동하며 해당 화면으로 이동한다. 아직 미완성인 화면이다. 우리 팀 멤버들의 사진과 사진을 누르면 해당하는 멤버의 홈페이지로 이동할 수 있는 이벤트를 걸어놓았다. 하지만 어떻게 정렬하고 구성해야 깔끔하게 보일지 고민이다. 배경이 검정색인 만큼 위의 플레이리스트 화면이나 추천 애니메이션 화면처럼 콘텐츠로 꽉 찬 경우가 예뻐 보이는데 멤버가 3명밖에 없어 디자인을 어떻게 해결하면 좋을지 고민이다.
2022.04.21 오늘의 리틀 TIL
1. 홈페이지에 유튜브 영상 추가하기
<iframe width="560" height="315" src="https://www.youtube.com/embed/ebBtjwENcxw" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>유튜브에서 원하는 영상의 공유 버튼을 누르고 'Embed'를 누르면 위의 코드와 유사한 코드가 뜨는데 해당 코드를 전부 복사한 후 붙여 넣으면 된다.
2. 스크롤바 이동하기
$(document).ready(function(){
$('#버튼ID').click(function(){
$('html').animate({scrollTop : 위치}, 속도);
});
});해당 ID의 버튼을 누르면 해당 속도로 원하는 위치로 이동한다.
3. 크롤링한 후 원하는 값 넘기기
import requests
from bs4 import BeautifulSoup
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('https://www.op.gg/summoners/kr/%EC%98%81%ED%99%94%EB%8A%94%ED%98%BC%EC%98%81%EC%9D%B4%EC%A3%A0',headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
### 승패 ###
#__next > div.css-19ozhet.e1sjz9pt1 > div.css-1sq1kbv.e3mqlfu0 > ul > li:nth-child(1) > div > div.info > div.game-result
#__next > div.css-19ozhet.e1sjz9pt1 > div.css-1sq1kbv.e3mqlfu0 > ul > li:nth-child(3) > div > div.info > div.game-result
### kda ###
#__next > div.css-19ozhet.e1sjz9pt1 > div.css-1sq1kbv.e3mqlfu0 > ul > li:nth-child(1) > div > div.kda > div.k-d-a
### 플레이한 챔피언 ###
#__next > div.css-19ozhet.e1sjz9pt1 > div.css-1sq1kbv.e3mqlfu0 > ul > li:nth-child(1) > div > div.champion > div.name
### 게임을 한 시간 ###
#__next > div.css-19ozhet.e1sjz9pt1 > div.css-1sq1kbv.e3mqlfu0 > ul > li:nth-child(1) > div > div.info > div:nth-child(2) > div
games=soup.select("#__next > div.css-19ozhet.e1sjz9pt1 > div.css-1sq1kbv.e3mqlfu0 > ul > li")
result=[]
for i in range(15):
winOrLose=games[i].select_one("div > div.info > div.game-result")
kda=games[i].select_one("div > div.kda > div.k-d-a")
champion=games[i].select_one("div > div.champion > div.name")
when=games[i].select_one("div > div.info > div:nth-child(2) > div")
#print(winOrLose.text) --> Vicotry 또는 Defeat로 출력
#print(kda.text) --> kill/death/assist 형식으로 출력
#print(champion.text) --> 영어로 출력
result.append([winOrLose.text, kda.text, champion.text, when.text])
champion_dic={"Lux": "럭스", "Janna": "잔나", "Caitlyn": "케이틀린", "Jinx": "징크스",
"Draven": "드레이븐", "Soraka": "소라카"}
# 나중에 더 추가하자.. 일단은 모스트챔만 추가해둠!!
game15_result=[] # 15개의 전적을 예쁘게 출력하기 위함
# 1개의 전적 = 1개의 문자열
# length가 15인 list로 저장될 것임
for r in result:
pretty_result = "" # 1개의 전적을 문자열로 예쁘게 저장하기 위함
pretty_result+=champion_dic[r[2]]
pretty_result+=" "
pretty_result+="챔피언으로 "
temp=list(map(int, r[1].split("/")))
kill=str(temp[0])+"킬 "
death=str(temp[1])+"데스 "
assist=str(temp[2])+"어시"
pretty_result+=kill+death+assist
pretty_result+="로 "
if r[0]=="Victory":
pretty_result+="✌ 캐뤼했습니다 ✌"
else:
pretty_result+="🤬 패배했습니다 🤬"
game15_result.append(pretty_result)위의 코드는 crawling.py로 단순히 크롤링을 진행하는 파일이다.
# crawling.py라는 파일에서 크롤링 진행한 후 result 변수에 값 저장
import crawling
exec("crawling")
@app.route('/songhee')
def songhee_page():
crawling_result=crawling.result
return render_template('songhee.html', result=crawling_result)app.py에서 위와 같이 작성한 후, html에서 crawling_result 값을 쓰고자 하면
{{result}}와 같이 쓰면 된다.
나의 경우에는,
app.py에서
@app.route('/songhee')
def songhee_page():
crawling_result=crawling.game15_result
return render_template('songhee.html',
game1=crawling_result[0], game2=crawling_result[1],
game3=crawling_result[2], game4=crawling_result[3],
game5=crawling_result[4], ...이렇게 15개 작성
)<p>
<CENTER><B>제 최근 15게임의 전적입니다!</CENTER>
</B></p>
</div>
<div class="lolInfo" id="gameInfo">
<p>
<CENTER>{{game1}}</CENTER>
</p>
<p>
<CENTER>{{game2}}</CENTER>
</p>
<p>
<CENTER>{{game3}}</CENTER>
</p>
<p>
<CENTER>{{game4}}</CENTER>
</p>
<p>
<CENTER>{{game5}}</CENTER>
</p>
.... (이렇게 15개 작성)이렇게 작성하여 출력을 완료했다. 약간의 하드코딩이 없지 않아 있는 것 같다. 반복문을 쓰면 되지 않을까 싶은데 변수에 반복문을 어떻게 써야할지 고민이 되었고, 변수도 15개면 많지 않다 싶어 우선은 그냥 사용했다..!