CSS로 스포츠 배당률 디스플레이어를 구축하는 방법

14063 단어 tutorialhtmlwebdevcss

최종 결과 보기



오늘 3:00 EST, 2020 UEFA 챔피언스 리그 결승전이 파리 생제르맹과 FC 바이에른 뮌헨 사이에서 치러집니다. 배당률 표시기를 구축하는 것보다 이 상징적인 게임에 경의를 표하는 더 좋은 방법이 있을까요? 오늘은 Champions League 결승전을 예로 들어 CSS와 HTML로 스포츠 배당률 표시기를 구축하는 방법을 보여드리겠습니다.

따라서 우리가 만들 것은 정보 섹션, 배당률 막대, 팀과 승률을 표시하는 레이블이 있는 중앙에 잘 배치된 흰색 컨테이너입니다. HTML과 CSS(Javascript 없음)만으로 이를 달성할 것입니다. 그런데 막대는 다음과 같을 것입니다. 내부에 두 개의 미니 막대가 각 팀의 백분율을 표시합니다.



1단계: HTML



따라서 우리의 HTML은 다음과 같이 보일 것입니다.
  • A<div> 용기
  • A<div> 바
  • 팀당 1개<div>
  • 승리 통계, 이름 및 로고를 보여주는 각 팀의 웹페이지 링크<a> 1개
  • 그리고 보기 좋게 만드는 일부 이미지

    • 따라서 형식화된<body> 코드는 다음과 같이 끝납니다.

    <div class="container">
  <h1>
    Champions League
    <br />
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fa48de1c2-9caa-4ee4-8f4c-8baf480ecdf4.image.png"
      alt="O"
    />
    Final Odds
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fa48de1c2-9caa-4ee4-8f4c-8baf480ecdf4.image.png"
      alt="O"
    />
  </h1>
  <div class="bar">
    <div class="psg" title="33%"></div>
    <div class="bayern" title="67%"></div>
  </div>
  <a href="https://en.psg.fr/">
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fefb2974a-573d-4d0a-925e-2ac2ef4a644b.image.png"
      alt="O"
    />
    PSG ??%
  </a>
  <a href="https://fcbayern.com/en">
    ??% Bayern
    <img
      src="https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Ff3c60ab9-4953-4e56-85c7-e5100a77ddc2.image.png"
      alt="O"
    />
  </a>
</div>

    그건 그렇고, 이것은 CSS가 없는 모습입니다(전체를 볼 수 있도록 축소했습니다).


    파트 2: CSS



    이제 가장 먼저 해야 할 일은 백분율을 찾는 것입니다. 빠른 Google 검색 후 결과는 바이에른의 승률이 67%인 반면 PSG의 승률은 33%에 불과한 것으로 나타났습니다. 따라서 이러한 통계를 :root 선택기 내부의 변수로 선언해 보겠습니다.

    :root {
  --psg: 33%;
  --bayern: 67%;
}

    이제 html/body 에 대해 멋진 챔피언스 리그 스타일의 배경 이미지를 만들고 글꼴, 텍스트 색상을 선언하고 페이지 오버플로를 숨깁니다. 코드는 다음과 같습니다.

    html,
body {
  overflow: hidden;
  height: 100%;
  font-family: Verdana, Geneva, sans-serif;
  background-image: url("https://cdn.glitch.com/f1c0ac63-4e11-4f2d-a733-f7f2737c36c8%2Fe404eda1-d2df-4b91-a5f4-0704a21a01d1.image.png");
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
}

    배경 이미지는 다음과 같습니다.



    이제 둥근 모서리와 검은색 막대(또한 모서리가 둥근)가 있는 흰색 컨테이너(작은 장치에서 화면이 넘치지 않도록 max-width가 100%인) 스타일을 지정해 보겠습니다.

    .container {
  border-radius: 15px;
  max-width: 100%;
  padding: 50px;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bar {
  background-color: black;
  border-radius: 5px;
  margin: 50px 0px;
  width: 100%;
  overflow: auto;
  border: 1px solid black;
}

    유일한 문제는 막대에 아무 것도 없기 때문에 한 줄에 불과하다는 것입니다.



    "Champions League Final Odds"라는 정보 섹션을 추가해 보겠습니다. 이것은 이미지가 있는 <h1> 태그이며 다음과 같이 스타일이 지정됩니다.

    img {
  vertical-align: -15%;
}

h1 {
  margin: 0px;
  text-align: center;
  font-size: 50px;
}

h1 img {
  height: 50px;
}

    링크 스타일을 지정할 시간입니다! 이들은 각각 왼쪽과 오른쪽으로 플로팅되며 옆에 이미지가 있습니다. :first-of-type 및 :last-of-type 선택자는 다음과 같이 도움이 됩니다.

    a img {
  height: 15px;
}

a {
  font-size: 15px;
  text-decoration: none;
  color: inherit;
}

a:first-of-type {
  float: left;
}

a:last-of-type {
  float: right;
}

    이제 미니바에 색상과 애니메이션을 추가할 차례입니다. Team Color Codes에서 팀 색상을 가져왔습니다. 어쨌든 스타일 코드는 다음과 같습니다.

    .psg,
.bayern {
  font-size: 15px;
  padding: 1em 0px;
  animation-delay: 2s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.psg {
  background-color: #004170;
  float: left;
  animation-name: psg;
}

.bayern {
  background-color: #DC052D;
  float: right;
  animation-name: bayern;
}

    그리고 @keyframe 애니메이션 코드는 마지막으로 백분율 변수를 사용하여 각 팀의 미니바를 각 측면에서 확대합니다.

    @keyframes psg {
  from {
    width: 0px;
  }
  to {
    width: var(--psg);
  }
}

@keyframes bayern {
  from {
    width: 0px;
  }
  to {
    width: var(--bayern);
  }
}

    그리고 그게 다야! 다음 단락에서 전체 HTML 및 CSS 코드를 보여 드리겠습니다.

    읽어 주셔서 감사합니다!



    웹사이트는 here이고 코드는 Glitch에서 호스팅됩니다.




    도움이 되셨길 바랍니다! 암튼 경기 보러 가야지...



    안녕히 계세요! - DerDer56 (게임 종료 바이에른 1-0 PSG)

    ansible 설치 배포 TiDB 클러스터
    UICollectionView 템플릿 메모

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage