HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="opgg.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gemunu+Libre&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&display=swap" rel="stylesheet">
</head>
<body>
<div class="logo"><img src="https://cdn.iconscout.com/icon/free/png-256/free-dog-229-450767.png?f=webp&w=256" width="150px" alt="logo"> <p><span style="color: #434343;">DO</span><span style="color: black;">.</span><span style="color: #6A4A4A;">GG</span></p></div>
<div class="head"><label for=""><input type="text" id="user" autocomplete="off" placeholder="소환사명" value="컵라면3분뉴스"></label> <button class="search">SEARCH</button></div>
<div id="container">
<div class="header">
<div class="profile1">
<div class="profile2">
<div class="img"><img src="" style="border-radius: 10px;" width="100px" alt=""></div>
<div class="name">
<h2></h2>
<h2>Level <span class="level"> </span></h2>
</div>
<div class="rank-box">
<div class="tier">
<h2></h2>
<img src="" alt="">
</div>
<div class="per">
<div><p>승률 <span class="Rpercent">_</span>% (<span class="Rwin">_</span>승 <span class="Rlose">_</span>패)</p></div>
</div>
</div>
</div>
</div>
<div class="per20">
<div style="font-size: 10pt; height:20px; background-color:rgb(115, 115, 115)">
최근 20게임
</div>
<div style="border-bottom: 3px solid rgb(54, 54, 54); padding-top:20px; height:150px;">
<span class="percent">_</span> %
<br>
[ <span class="win"> _ </span>승 <span class="lose"> _ </span>패 <span class="win-lose_"> _ </span>무 ]
</div>
<div style="line-height: 40px; padding-top:10px; height:150px;">
<span class="K-D-A">K / D / A</span>
<br>
<span class="K">_</span> / <span class="D">_</span> / <span class="A">_</span>
<br>
KDA : <span class="KDA">_</span>
</div>
</div>
<div>
<div class="played-champ">
<p>최근 플레이한 챔피언</p>
</div>
<div class="position">
<p style="margin-bottom: 10px;">최근 포지션</p>
<div>
<div>
<img src="https://s-lol-web.op.gg/images/icon/icon-position-top.svg?v=1684919904860" width="50px" alt="탑">
<br>
<span class="top-count">_</span>
</div>
<div>
<img src="https://s-lol-web.op.gg/images/icon/icon-position-jungle.svg?v=1684919904860" width="50px" alt="정글">
<br>
<span class="jungle-count">_</span>
</div>
<div>
<img src="https://s-lol-web.op.gg/images/icon/icon-position-mid.svg?v=1684919904860" width="50px" alt="미드">
<br>
<span class="mid-count">_</span>
</div>
<div>
<img src="https://s-lol-web.op.gg/images/icon/icon-position-adc.svg?v=1684919904860" width="50px" alt="원딜">
<br>
<span class="bot-count">_</span>
</div>
<div>
<img src="https://s-lol-web.op.gg/images/icon/icon-position-support.svg?v=1684919904860" width="50px" alt="서폿">
<br>
<span class="sup-count">_</span>
</div>
<div>
<img src="https://s-lol-web.op.gg/assets/images/roles/01-icon-01-lol-icon-position-all.svg?v=1684919904860" width="50px" alt="NONE">
<br>
<span class="else-count">_</span>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="advbar">
<div style="width: 50px;"><p>승 / 패</p></div>
<div style="width: 70px;"><p>게임모드</p></div>
<div style="width: 280px;">
<div><p>챔피언</p></div>
<div><p>멀티킬</p></div>
<div><p>룬</p></div>
</div>
<div style="width: 200px;"><p>K / D / A / CS</p></div>
<div style="width: 310px;"><p>아이템</p></div>
<div style="width: 403px; border:none;"><p>같이 플레이한 유저</p></div>
</div>
<!-- 20개 게임 -->
<div class="games">
</div>
</div>
<!-- script ====================================================================== -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// summoner api로 유저 데이터를 가져오는 부분
const api키 = "RGAPI-640fb4e2-f491-429f-a06d-977dfe87e6cc"
let 검색할유저
let 소환사puuid
let 소환사id
const 인풋태그 = document.querySelector("#user")
const 검색버튼 = document.querySelector("button")
const 티어 = document.querySelector(".tier h2")
const 승률 = document.querySelector(".percent")
const 승 = document.querySelector(".win")
const 패 = document.querySelector(".lose")
const 무 = document.querySelector(".win-lose_")
const 랭승 = document.querySelector(".Rwin")
const 랭패 = document.querySelector(".Rlose")
const 랭승률 = document.querySelector(".Rpercent")
const 티어이미지 = document.querySelector(".tier img")
const 최근챔 = document.querySelector(".played-champ")
const K20 = document.querySelector(".K")
const D20 = document.querySelector(".D")
const A20 = document.querySelector(".A")
const KDA20 = document.querySelector(".KDA")
let 챔프박스 = document.createElement("div")
챔프박스.classList.add("champlist")
let 탑수 = document.querySelector(".top-count")
let 미드수 = document.querySelector(".mid-count")
let 정글수 = document.querySelector(".jungle-count")
let 원딜수 = document.querySelector(".bot-count")
let 서폿수 = document.querySelector(".sup-count")
let 그외수 = document.querySelector(".else-count")
let K = 0
let D = 0
let A = 0
let WIN = 0
let LOSE = 0
let moo = 0
let 탑 = 0
let 정글 = 0
let 미드 = 0
let 원딜 = 0
let 서폿 = 0
let 그외 = 0
let summonerAPI
let leagueAPI
let matchAPI
let gameAPI = []
검색버튼.addEventListener("click", async function() { // 검색버튼 클릭하면 (이벤트 발생)
검색할유저 = 인풋태그.value // input 태그에 들어있는 value를 가져오기
WIN = 0
LOSE = 0
moo = 0
탑 = 0
정글 = 0
미드 = 0
원딜 = 0
서폿 = 0
그외 = 0
K = 0
D = 0
A = 0
KDA = 0
// 초기화
최근챔.innerHTML = "<p>최근 플레이한 챔피언</p>"
탑수.textContent = "_"
미드수.textContent = "_"
정글수.textContent = "_"
원딜수.textContent = "_"
서폿수.textContent = "_"
그외수.textContent = "_"
승률.textContent = "_"
승.textContent = "_"
패.textContent = "_"
무.textContent = "_"
티어.textContent = ""
티어이미지.setAttribute("src", `https://i.gifer.com/origin/34/34338d26023e5515f6cc8969aa027bca_w200.gif`)
랭승률.textContent = "_"
랭승.textContent = "_"
랭패.textContent = "_"
K20.textContent = "_"
D20.textContent = "_"
A20.textContent = "_"
KDA20.textContent = "_"
// summonerAPI 를 호출하는 부분
await 소환사API()
// matchAPI를 호출하는 부분
await 게임20개()
// LEAGUEAPI를 호출하는 부분
await 리그API()
})
async function 소환사API() {
summonerAPI = `https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/${검색할유저}?api_key=${api키}`
let response = await axios.get(summonerAPI)
console.log("소환사API 호출")
console.log(response)
소환사id = response.data.id
소환사puuid = response.data.puuid
// 소환사 이름 변경
const 이름 = document.querySelector(".name h2")
이름.textContent = response.data.name
// 소환사 레벨 변경
const 레벨 = document.querySelector(".name .level")
레벨.textContent = response.data.summonerLevel
// 소환사 프사 변경
const 프사 = document.querySelector(".img img")
프사.setAttribute("src", `https://opgg-static.akamaized.net/meta/images/profile_icons/profileIcon${response.data.profileIconId}.jpg?image=q_auto,f_webp,w_auto&v=1684436046850`)
}
async function 리그API() {
leagueAPI = `https://kr.api.riotgames.com/lol/league/v4/entries/by-summoner/${소환사id}?api_key=${api키}`
let response = await axios.get(leagueAPI)
console.log("리그API 호출")
console.log(response)
승률.textContent = ((WIN / (WIN + LOSE))*100).toFixed(1)
승.textContent = WIN
패.textContent = LOSE
무.textContent = moo
탑수.textContent = 탑
미드수.textContent = 미드
정글수.textContent = 정글
원딜수.textContent = 원딜
서폿수.textContent = 서폿
그외수.textContent = 그외
K20.textContent = K
D20.textContent = D
A20.textContent = A
KDA20.textContent = ((K + A) / D).toFixed(1)
최근챔.appendChild(챔프박스)
티어.textContent = "Unranked"
티어이미지.setAttribute("src", `https://trackercdn.com/cdn/tracker.gg/rocket-league/ranks/s4-0.png`)
랭승률.textContent = "0"
랭승.textContent = "0"
랭패.textContent = "0"
for (let i = 0 ; i < response.data.length ; i = i + 1) {
if (response.data[i].queueType == "RANKED_SOLO_5x5") {
티어.textContent = response.data[i].tier + " " + response.data[i].rank
티어이미지.setAttribute("src", `https://opgg-static.akamaized.net/images/medals_new/${response.data[i].tier}.png?image=q_auto,f_webp,w_144&v=1684436046850`)
랭승률.textContent = ((response.data[i].wins / (response.data[i].wins + response.data[i].losses))*100).toFixed(2)
랭승.textContent = response.data[i].wins
랭패.textContent = response.data[i].losses
}
}
}
async function 게임20개 () {
// 1. puui로 매치id 얻기 - API 호출
matchAPI = `https://asia.api.riotgames.com/lol/match/v5/matches/by-puuid/${소환사puuid}/ids?start=0&count=20&api_key=${api키}`
let 매치20개 = await axios.get(matchAPI)
console.log("매치20개")
console.log(매치20개)
// 2.매치 id로 매치 검색 - API 호출
gameAPI = []
for(let i=0; i < 매치20개.data.length ; i = i + 1) {
gameAPI.push(`https://asia.api.riotgames.com/lol/match/v5/matches/${매치20개.data[i]}?api_key=${api키}`)
}
// 20개 게임의 데이터를 페이지에 집어넣기
const 게임20개넣을곳 = document.querySelector(".games")
게임20개넣을곳.textContent = ""
// 최근 플레이한 챔피언
챔프박스.textContent = ""
for (let k = 0 ; k < 매치20개.data.length ; k = k + 1) {
let 각게임
각게임 = document.createElement("div")
각게임.classList.add("GAME")
let 게임 = await axios.get(gameAPI[k])
console.log("각각의 게임")
console.log(게임)
let 내번호
for (let j = 0 ; j <= 9 ; j = j + 1) {
if (소환사puuid == 게임.data.metadata.participants[j]) {
내번호 = j
console.log(내번호)
break
}
}
// 멀티킬
let 멀티킬
if (게임.data.info.participants[내번호].pentaKills >= 1) {
멀티킬 = "펜타킬"
}
else if (게임.data.info.participants[내번호].quadraKills >= 1) {
멀티킬 = "쿼드라킬"
}
else if (게임.data.info.participants[내번호].tripleKills >= 1) {
멀티킬 = "트리플킬"
}
else if (게임.data.info.participants[내번호].doubleKills >= 1) {
멀티킬 = "더블킬"
}
else {
멀티킬 = ""
}
// 포지션
if (게임.data.info.participants[내번호].individualPosition == "MIDDLE") {
미드 = 미드 + 1
}
else if (게임.data.info.participants[내번호].individualPosition == "BOTTOM") {
원딜 = 원딜 + 1
}
else if (게임.data.info.participants[내번호].individualPosition == "TOP") {
탑 = 탑 + 1
}
else if (게임.data.info.participants[내번호].individualPosition == "JUNGLE") {
정글 = 정글 + 1
}
else if (게임.data.info.participants[내번호].individualPosition == "UTILITY") {
서폿 = 서폿 + 1
}
else {
그외 = 그외 + 1
}
// 승패
let 자식
자식 = document.createElement("div")
자식.classList.add("game")
if (게임.data.info.participants[내번호].win == true ) {
자식.innerHTML = `<div class="win_">승</div>`
WIN = WIN + 1
}
else if (게임.data.info.participants[내번호].win == false && 게임.data.info.participants[내번호].champLevel >= 3) {
자식.innerHTML = `<div class="lose_">패</div>`
LOSE = LOSE + 1
}
else {
자식.innerHTML = `<div class="win-lose">X</div>`
moo = moo + 1
}
// <게임 정보>
// 각 게임의 kda
let kdaScore
kdaScore = (( 게임.data.info.participants[내번호].kills + 게임.data.info.participants[내번호].assists ) / 게임.data.info.participants[내번호].deaths).toFixed(1)
kdaScore = "KDA : " + kdaScore
if (게임.data.info.participants[내번호].deaths == 0 && 게임.data.info.participants[내번호].kills > 0) {
kdaScore = `<span style="color:red;">Perfect</span>`
}
if (게임.data.info.participants[내번호].kills == 0 && 게임.data.info.participants[내번호].assists == 0 && 게임.data.info.participants[내번호].deaths == 0) {
kdaScore = "KDA : 0"
}
// 게임모드
let 모드
if (게임.data.info.gameMode == "CLASSIC") {
모드 = `<span style="color:rgb(39, 206, 83);">협곡</span>`
}
else if (게임.data.info.gameMode == "ARAM") {
모드 = `<span style="color:rgb(32, 177, 255);">칼바람</span>`
}
자식.innerHTML = 자식.innerHTML +
`
<div class="game-type">${모드}</div>
<div class="champinfo"><div class="champion1"><img src="https://opgg-static.akamaized.net/meta/images/lol/champion/${게임.data.info.participants[내번호].championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_96&v=1684731456578" width="48px" alt="챔피언"></div> <div class="champ-level"><span style="font-size:15pt;">Lv . ${게임.data.info.participants[내번호].champLevel}</span> <span class="multi-kill">${멀티킬}</span> <div class="Rune"><span class="rune"> <img src="https://opgg-static.akamaized.net/meta/images/lol/perk/${게임.data.info.participants[내번호].perks.styles[0].selections[0].perk}.png?image=q_auto,f_webp,w_auto&v=1684731456578" width="40px" alt="룬1"> <img src="https://opgg-static.akamaized.net/meta/images/lol/perkStyle/${게임.data.info.participants[내번호].perks.styles[1].style}.png?image=q_auto,f_webp,w_auto&v=1684731456578" width="30px" alt="룬2"></span> </div></div></div>
<div class="kda"><div><span class="game-kill">${게임.data.info.participants[내번호].kills}</span> <span> / </span> <span class="game-death" style="color:red;">${게임.data.info.participants[내번호].deaths}</span> <span> / </span> <span class="game-assist">${게임.data.info.participants[내번호].assists}</span> <br> <span class="cs">CS - ${게임.data.info.participants[내번호].totalMinionsKilled}</span> <br> <span>${kdaScore}</span></div></div>
`
// 아이템
let 아이템칸
아이템칸 = document.createElement("div")
아이템칸.classList.add("ITEM")
if (게임.data.info.participants[내번호].item0 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item0}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
if (게임.data.info.participants[내번호].item1 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item1}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
if (게임.data.info.participants[내번호].item2 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item2}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
if (게임.data.info.participants[내번호].item3 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item3}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
if (게임.data.info.participants[내번호].item4 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item4}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
if (게임.data.info.participants[내번호].item5 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item5}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
if (게임.data.info.participants[내번호].item6 > 0) {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span class="item1"><img src="https://opgg-static.akamaized.net/meta/images/lol/item/${게임.data.info.participants[내번호].item6}.png?image=q_auto,f_webp,w_44&v=1684731456578" width="40px" height="40px" alt="아이템"></span>`
}
else {
아이템칸.innerHTML = 아이템칸.innerHTML + `<span><img class="item2" src="https://t1.daumcdn.net/cfile/tistory/99409A3E5CC0BD8F0B" width="40px" height="40px" alt="아이템"></span>`
}
자식.appendChild(아이템칸)
각게임.appendChild(자식)
// 같이 게임한 유저들
let 자식2
자식2 = document.createElement("div")
자식2.classList.add("game2")
let 유저1
유저1 = document.createElement("div")
유저1.classList.add("USER1")
for (let i = 0 ; i <= 4 ; i = i + 1) {
if (i == 내번호) {
유저1.innerHTML = 유저1.innerHTML + `<div class="user1" style="background-color:rgb(89, 115, 234);"><img src="https://opgg-static.akamaized.net/meta/images/lol/champion/${게임.data.info.participants[i].championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_96&v=1684731456578" width="30px" style="border-radius:50px; margin-left:15px;" alt="챔피언"><div style="width:155px; padding-left:5px;"><span>${게임.data.info.participants[i].summonerName}</span><div></div>`
}
else {
유저1.innerHTML = 유저1.innerHTML + `<div class="user1"><img src="https://opgg-static.akamaized.net/meta/images/lol/champion/${게임.data.info.participants[i].championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_96&v=1684731456578" width="30px" style="border-radius:50px; margin-left:15px;" alt="챔피언"><div style="width:155px; padding-left:5px;"><span>${게임.data.info.participants[i].summonerName}</span><div></div>`
}
}
let 유저2
유저2 = document.createElement("div")
유저2.classList.add("USER2")
for (let i = 5 ; i <= 9 ; i = i + 1) {
if (i == 내번호) {
유저2.innerHTML = 유저2.innerHTML + `<div class="user1" style="background-color:rgb(215, 85, 85);"><img src="https://opgg-static.akamaized.net/meta/images/lol/champion/${게임.data.info.participants[i].championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_96&v=1684731456578" width="30px" style="border-radius:50px; margin-left:15px;" alt="챔피언"><div style="width:155px; padding-left:5px;"><span>${게임.data.info.participants[i].summonerName}</span><div></div>`
}
else {
유저2.innerHTML = 유저2.innerHTML + `<div class="user1"><img src="https://opgg-static.akamaized.net/meta/images/lol/champion/${게임.data.info.participants[i].championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_96&v=1684731456578" width="30px" style="border-radius:50px; margin-left:15px;" alt="챔피언"><div style="width:155px; padding-left:5px;"><span>${게임.data.info.participants[i].summonerName}</span><div></div>`
}
}
자식2.appendChild(유저1)
자식2.appendChild(유저2)
각게임.appendChild(자식2)
게임20개넣을곳.appendChild(각게임)
게임20개넣을곳.innerHTML = 게임20개넣을곳.innerHTML + "<br>"
// 최근 플레이한 챔피언
챔프박스.innerHTML = 챔프박스.innerHTML + `<img src="https://opgg-static.akamaized.net/meta/images/lol/champion/${게임.data.info.participants[내번호].championName}.png?image=c_crop,h_103,w_103,x_9,y_9/q_auto,f_webp,w_96&v=1684731456578" width="35px" style="border-radius:50px;" alt="챔피언">`
if (k == 9) {
챔프박스.innerHTML = 챔프박스.innerHTML + `<br>`
}
// KDA 계산
K = K + 게임.data.info.participants[내번호].kills
D = D + 게임.data.info.participants[내번호].deaths
A = A + 게임.data.info.participants[내번호].assists
}
/*
// 구역1
console.log(게임.data.info.gameMode)
console.log(게임.data.info.participants[내번호].win)
// 구역2
console.log(게임.data.info.participants[내번호].championName) // 챔프
console.log(게임.data.info.participants[내번호].champLevel) // 레벨
console.log(게임.data.info.participants[내번호].doubleKills) // 더블킬
console.log(게임.data.info.participants[내번호].tripleKills) // 트리플킬
console.log(게임.data.info.participants[내번호].quadraKills) // 쿼드라킬
console.log(게임.data.info.participants[내번호].pentaKills) // 펜타킬
console.log(게임.data.info.participants[내번호].perks.styles[0].selections[0]) // 메인룬
console.log(게임.data.info.participants[내번호].perks.styles[1].style) // 보조룬
// 구역3
console.log(게임.data.info.participants[내번호].kills)
console.log(게임.data.info.participants[내번호].deaths)
console.log(게임.data.info.participants[내번호].assists)
//kda는 셀프로 계산
console.log(게임.data.info.participants[내번호].totalDamageDealtToChampions)
console.log(게임.data.info.participants[내번호].totalMinionsKilled)
// 구역4
console.log(게임.data.info.participants[내번호].item0)
console.log(게임.data.info.participants[내번호].item1)
console.log(게임.data.info.participants[내번호].item2)
console.log(게임.data.info.participants[내번호].item3)
console.log(게임.data.info.participants[내번호].item4)
console.log(게임.data.info.participants[내번호].item5)
console.log(게임.data.info.participants[내번호].item6)
*/
// 구역5
}
</script>
</body>
</html>============================================================================================================================
CSS
*{margin: 0; padding: 0; box-sizing: border-box;}
#container {width: 1400px; margin: 0 auto; background-color: #d3b796; padding: 20px; border-radius: 10px;}
*{font-family: 'Gemunu Libre', sans-serif;}
body {background-color: #BA9D7B;}
.header {
display: flex; justify-content: space-between; width: 1320px; margin-left: auto; margin-right: auto;
}
.position {
width: 430px; height: 150px;margin-top: 20px; background-color: azure; border-radius: 5px; text-align: center; padding: 15px; font-weight: bold; color: #523f3f; font-size: 15pt;
}
.played-champ {
width: 430px; height: 150px; background-color: azure; border-radius: 5px; text-align: center; padding-top: 15px; font-weight: bold; font-size: 15pt; color: #523f3f;
}
.position > div {
display: flex; justify-content: space-between;
}
.profile1 {
background-color: azure; width: 700px;height: 320px; padding: 10px;display: flex; justify-content: space-between;
}
.profile2 {
display: flex; justify-content: space-between; align-items: center;
}
.tier {
display: flex; align-items: center; margin: 0 auto; width: 280px; justify-content: end;
}
.tier img {
width: 100px;
}
.tier h2 {
font-size: 30pt; margin-right: 20px;
}
.per {
width: 280px;
}
.per p {
display: flex;justify-content: center; align-items: center; font-size: 15pt; font-weight: bold;
}
.per > div > p > span {
margin-left: 10px; margin-right: 10px;
}
.profile3 {
display: flex; justify-content: space-between;
}
.kda20 {
display: flex;
}
.game {
display: flex;justify-content: start; align-items: center; height: 180px;
}
.game > div {
border-right: 2px solid #BA9D7B; display: flex; align-items: center; height: 180px;
}
.user1 span {
font-size: 10pt;
}
.user1 {
width: 200px; height: 30px; display: flex; justify-content: space-between; align-items: center; margin-top: 5px;
}
.item1 {
margin: 2px;
}
.item1 img {
border-radius: 10px;
}
.item2 {
border: 1px solid rgb(150, 150, 150); margin: 2px; border-radius: 10px;
}
.game2 {
display: flex;
}
.game2 > div {
height: 180px; width: 200px;; margin-left: 2px;
}
.rune {
display: flex; justify-content: space-around; align-items: center; width: 80px;
}
.Rune {
position: absolute; right: 10px;
}
.head {
margin-left: auto; margin-right: auto; margin-top: 15px; margin-bottom: 15px; width: 700px; height: 70px; display: flex; justify-content: space-between; align-items: center; background-color: #D9D9D9; border-radius: 50px; box-shadow: rgb(84, 84, 84) 1px 1px 1px;
}
.name {
width: 250px; padding:10px ;
}
#user {
background-color: #D9D9D9; border-radius: 50px; width: 500px; height: 70px; font-size: 15pt; padding: 20px; border: none;
}
#user:focus {
outline: none;
}
.search {
background-color: #9A7878; width: 120px; height: 60px; border-radius: 50px; border: none; margin-right: 5px; font-size: 20pt; color: white; cursor: pointer; box-shadow: black 1px 1px 1px;
}
.search:hover {
background-color: #7a5a5a;
}
.search:active {
background-color: #523f3f; box-shadow: none;
}
.logo {
width:500px; height: 150px; margin-right: auto; margin-left: auto; display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 10px;
}
.logo p {
margin-left: 30px;
}
.logo p span {
font-size: 100pt; font-family: 'Dokdo', cursive;
}
.advbar {
display: flex; margin-bottom: 10px; border-radius: 10px; height: 30px; justify-content: center;
}
.advbar > div {
background-color: rgb(190, 232, 232); border-right:1px solid rgb(150, 150, 150) ; text-align: center; display:flex; justify-content:space-around; align-items: center; font-size: 10pt;
}
.win-lose, .win_, .lose_ {
width: 50px; height: 100px; display: flex; justify-content: space-around; font-size: 20pt;
}
.win_ {
background-color: rgb(144, 165, 255); color:rgb(100, 123, 226) ;
}
.lose_ {
background-color: rgb(255, 139, 139); color:rgb(226, 102, 102) ;
}
.win-lose {
background-color: #D9D9D9; color: #adabab;
}
.game-type {
width: 70px; display: flex; justify-content: space-around; background-color: rgb(85, 85, 85);
}
.champion1 img {
border-radius:50px ;
}
.champion1 {
border: none; width: 48px;
}
.champinfo {
width: 280px; display: flex; justify-content: space-between; align-items: center; background-color: rgb(195, 195, 195);
}
.champinfo > div {
margin-left: 5px; margin-right: 5px; display: flex; align-items: center;
}
.champ-level {
width:230px; position: relative; height: 40px;
}
.multi-kill {
background-color: rgb(250, 166, 166); border-radius: 5px; margin-left: 10px;
}
.kda {
width: 200px; display: flex;justify-content: center; padding-left:10px; padding-right: 10px; font-size: 20pt; background-color: rgb(195, 195, 195); text-align: center;
}
.GAME {
height: 180px; width: 1320px; display: flex; justify-content: center; margin-left: auto; margin-right: auto;
}
.USER1 {
background-color: rgb(64, 87, 188); color: #D9D9D9;
}
.USER2 {
background-color: rgb(176, 57, 57); color: #D9D9D9
}
.ITEM {
background-color: rgb(195, 195, 195);
}
.per20{
color: white; text-align: center; background-color: rgb(77, 77, 77);width: 200px; height: 320px; margin-right: 10px; margin-bottom: 15px;font-size: 20pt;
}
.champlist img {
margin: 2px;
}
.champlist {
margin-top: 10px;
}
.cs {
font-size: 15pt;
}
.percent {
font-size: 50pt;
}
.win {
color: rgb(82, 120, 255);
}
.lose {
color: rgb(248, 75, 75);
}
.win-lose_ {
color: rgb(181, 181, 181);
}
.rank-box {
width: 280px;padding-bottom: 40px; border-left: 3px solid rgb(212, 244, 244);
}
.img {
margin-left: 18px;
}
.D {
color: red;
}
.K-D-A {
font-size: 13pt;
}
