오버워치 영웅 선택 페이지 만들어보기

728x90

별도의 프레임워크나 라이브러리 같은

웹개발을 도와주는 모듈을 사용하지 않고

순수한 HTML과 CSS만 사용하여

오버워치 영웅 선택 페이지를 만드는 실습을 진행해보았다.

평소에 안그래도 오버워치를 좋아해서
만들고 나니 괜히 짜릿했다 ㅎㅎ
내 최애 캐릭터는 루시우 이지롱 🐸♥

출처: https://github.com/ParkYoungWoong/overwatch-hero-selector-vanilla

GitHub - ParkYoungWoong/overwatch-hero-selector-vanilla

Contribute to ParkYoungWoong/overwatch-hero-selector-vanilla development by creating an account on GitHub.

github.com

index.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>Overwatch Heroes</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
  <link rel="stylesheet" href="./main.css" />
</head>
<body>
  
  <div class="container">
    <div class="heroes">
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
      <div class="hero">
        <div class="image"></div>
      </div>
    </div>
    <div class="logo">
      <img src="./images/logo_overwatch.png" alt="Overwatch">
    </div>
  </div>

</body>
</html>

main.css 코드

body {
  height: 100vh; /* 뷰포트의 높이 100%로 설정 */
  background-image: url(./images/bg.jpg);
  background-size: cover; /* 더 넓은 너비에 맞게 배경 이미지 출력 */
  background-repeat: no-repeat; /* 배경 이미지 반복 해제 */
  background-attachment: fixed; /* 배경 이미지는 스크롤되지 않도록 뷰포트에 고정 */
}
.container {
  padding: 50px 0;  /* container 위아래 내부 여백 설정 */
}
.container .heroes {
  display: flex; /* heroes 요소들 수평 정렬 */
  flex-wrap: wrap; /* 줄바꿈 */
  justify-content: center; /* hero들 가운데 정렬 */
  max-width: 700px; /* 최대 너비 설정, 그 이하는 자동 정렬 */
  margin: 0 auto; /* 좌우 여백 자동 설정(가운데 정렬됨) */
  padding: 40px 20px; /* heroes 요소 내부 여백 설정 */
}
.container .heroes .hero {
  width: 80px;
  height: 84px;
  margin: 4px; /* 좌우상하 여백 4px로 설정 */
  border: 3px solid #fff; /* hero 흰색 테두리 선 */
  border-radius: 10px; /* 모서리 둥글게 */
  box-sizing: border-box; /* border 설정으로 인해 커진 요소 줄여주기 */
  background-color: #555;
  overflow: hidden; /* hero image 넘치는 영역 잘라내기 */
  transform: skewX(-14deg); /* -14도만큼 기울임 */
  transition: /* 속성별로 전환 duration 따로 설정 */
    transform .1s, /* 커지는 효과 */
    background-color .6s; /* 배경색 전환 효과 좀 더 느리게 */
}
.container .heroes .hero:hover { /* hero에 마우스 올리면 */
  background-color: orange; /* 배경 색상 orange로 바뀜 */
  transform: skewX(-14deg) scale(1.3); /* 요소 -14도 기울여진채로 1.3배 커짐 */
  z-index: 1; /* 요소 쌓임 순서 조정 */
}
.container .heroes .hero .image {
  width: 140%; /* 부모 요소인 hero 너비와의 상대 크기(%) */
  height: 100%;
  background-position: center; /* 이미지 가운데 배치 */
  background-repeat: no-repeat; /* 이미지 반복 해제 */
  background-size: 90px; /* 가로 너비 */
  transform: skewX(14deg) translateX(-16px); /* 14도 기울여준 만큼 거꾸로 기울이기, x축 방향으로 -16px 만큼 이동 */
}
/* 총 32명의 hero 이미지 가져오기 */
.container .heroes .hero:nth-child(1) .image {  background-image: url(./images/hero1.png);}
.container .heroes .hero:nth-child(2) .image {  background-image: url(./images/hero2.png);}
.container .heroes .hero:nth-child(3) .image {  background-image: url(./images/hero3.png);}
.container .heroes .hero:nth-child(4) .image {  background-image: url(./images/hero4.png);}
.container .heroes .hero:nth-child(5) .image {  background-image: url(./images/hero5.png);}
.container .heroes .hero:nth-child(6) .image {  background-image: url(./images/hero6.png);}
.container .heroes .hero:nth-child(7) .image {  background-image: url(./images/hero7.png);}
.container .heroes .hero:nth-child(8) .image {  background-image: url(./images/hero8.png);}
.container .heroes .hero:nth-child(9) .image {  background-image: url(./images/hero9.png);}
.container .heroes .hero:nth-child(10) .image {  background-image: url(./images/hero10.png);}

.container .heroes .hero:nth-child(11) .image {  background-image: url(./images/hero11.png);}
.container .heroes .hero:nth-child(12) .image {  background-image: url(./images/hero12.png);}
.container .heroes .hero:nth-child(13) .image {  background-image: url(./images/hero13.png);}
.container .heroes .hero:nth-child(14) .image {  background-image: url(./images/hero14.png);}
.container .heroes .hero:nth-child(15) .image {  background-image: url(./images/hero15.png);}
.container .heroes .hero:nth-child(16) .image {  background-image: url(./images/hero16.png);}
.container .heroes .hero:nth-child(17) .image {  background-image: url(./images/hero17.png);}
.container .heroes .hero:nth-child(18) .image {  background-image: url(./images/hero18.png);}
.container .heroes .hero:nth-child(19) .image {  background-image: url(./images/hero19.png);}
.container .heroes .hero:nth-child(20) .image {  background-image: url(./images/hero20.png);}

.container .heroes .hero:nth-child(21) .image {  background-image: url(./images/hero21.png);}
.container .heroes .hero:nth-child(22) .image {  background-image: url(./images/hero22.png);}
.container .heroes .hero:nth-child(23) .image {  background-image: url(./images/hero23.png);}
.container .heroes .hero:nth-child(24) .image {  background-image: url(./images/hero24.png);}
.container .heroes .hero:nth-child(25) .image {  background-image: url(./images/hero25.png);}
.container .heroes .hero:nth-child(26) .image {  background-image: url(./images/hero26.png);}
.container .heroes .hero:nth-child(27) .image {  background-image: url(./images/hero27.png);}
.container .heroes .hero:nth-child(28) .image {  background-image: url(./images/hero28.png);}
.container .heroes .hero:nth-child(29) .image {  background-image: url(./images/hero29.png);}
.container .heroes .hero:nth-child(30) .image {  background-image: url(./images/hero30.png);}

.container .heroes .hero:nth-child(31) .image {  background-image: url(./images/hero31.png);}
.container .heroes .hero:nth-child(32) .image {  background-image: url(./images/hero32.png);}

.container .logo {
  max-width: 300px; /* logo 최대 너비 설정 */
  margin: 0 auto; /* 좌우 여백 auto로 설정(가운데로 정렬됨) */
  padding: 0 20px; /* logo 좌우에만 내부 여백 설정 */
}
.container .logo img {
  width: 100%; /* logo의 300px보다 커질 순 없음 */
}

ෆ 최종 완성된 페이지 ෆ

지금은 vanilla 버전이기에
32개의 이미지를 불러오는 코드를 모두
작성해줘야하는 불편함이 존재했다.

이를 보완하기 위해서는 SCSS라는
CSS 전처리기를 사용한다면
보다 수월하게 코드를 작성할 수 있게 될 것이다.

다음에 SCSS 공부해 와서 적용시켜봐야짓-!!

✧٩(ˊ ωˋ*)و✧

728x90

'"공부" 𝑟𝑒𝑐𝑜𝑟𝑑 > 𝐹𝑟𝑜𝑛𝑡𝑒𝑛𝑑' 카테고리의 다른 글

스파르타코딩클럽 메이킹 챌린지 프로젝트 회고 (2)	2022.03.20
스파르타코딩클럽 웹개발 종합반 + 앱개발 종합반 후기 (2)	2022.02.27
스타벅스 랜딩 페이지 구현에 사용된 유용한 라이브러리 (0)	2022.01.18
스타벅스 랜딩 페이지(홈페이지) 만들어보기 - vanilla ver. (0)	2022.01.18
[코딩] VS Code 사용 시 유용한 확장 프로그램 (0)	2022.01.03

𝒎𝒚_𝒓𝒆𝒄𝒐𝒓𝒅

오버워치 영웅 선택 페이지 만들어보기 - vanilla ver.

'"공부" 𝑟𝑒𝑐𝑜𝑟𝑑 > 𝐹𝑟𝑜𝑛𝑡𝑒𝑛𝑑' 카테고리의 다른 글

댓글

티스토리툴바

오버워치 영웅 선택 페이지 만들어보기 - vanilla ver.

'"공부" 𝑟𝑒𝑐𝑜𝑟𝑑 > 𝐹𝑟𝑜𝑛𝑡𝑒𝑛𝑑' 카테고리의 다른 글

관련글

댓글

티스토리툴바