[패스트캠퍼스] 국비지원 14일차 오버워치 캐릭터 선정 페이지

web/html css

[패스트캠퍼스] 국비지원 14일차 오버워치 캐릭터 선정 페이지

xudegloss 2023. 5. 19. 00:25

오버워치 캐릭터 선정 페이지 제작하기

구현해야 되는 부분
1. flex 정렬과 줄 바꿈 이용하여 바둑판 형태 제작하기.
2. 바둑판 형태 원하는 모양으로 제작하기.
3. 마우스를 올렸을 때, 변환과 전환을 넣어주기.
4. 최대 크기 이용하여 뷰포트 너비가 줄어도 사이즈 줄어들지 않게 만들어주기.

강사님은 일단 이미지를 넣지 않고, 배경색을 이용하여 배치 먼저 진행하였다. 또한, img 태그를 사용하지 않고 div 태그에 nth-child + background-image를 넣는 방법을 이용하였다.

상위 요소부터 하위 요소로 차근차근 정리해놓고, css 진행하는 것이 꼬이지 않고 적용 가능하다.

1. 줄 바꿈 처리하기

flex-wrap을 이용하고, 미리 이미지가 담긴 div 태그의 너비와 높이를 지정하여 뭉개지지 않게 조절한다. 한 줄에 7개씩 이미지가 들어가야 하기 때문에, 너비는 700px 정도로 맞춰준다.

2. div 태그에 이미지 넣기

이미지를 넣기 전에 이미지의 배치와 모양 등을 설정한다. 그런 다음에 제대로 css가 적용된 뒤에 nth-child를 이용하여 하나 하나 이미지를 넣어준다. 이미지가 넘치는 경우에는 overflow를 hidden으로 설정하여 넘치는 부분은 안 보이게 지정하면 된다.

3. transifion 각각의 요소 따로 지정하기

background-color 변화와 scale 변화 속도를 다르게 지정하기 위하여 콤마를 이용하여 따로 지정하였다.

4. 최종 코드

<!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>오버워치 히어로</title>
    <link rel="stylesheet" href="./style/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="heros">
        <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__container">
        <img
          class="logo"
          src="./images/logo_overwatch.png"
          alt="오버워치 로고"
        />
      </div>
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

/* 상위 요소부터 하위 요소로 차근차근 정리하기. */

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../images/bg.jpg");

  /* 브라우저 키워서 보면 반복되기 때문에 설정하기. */
  background-repeat: no-repeat;
  background-size: cover;
}

.container .heros {
  /* min-width와 flex-wrap 이용하여 줄 바꿈을 원하는 형태로 만들 수 있다. */
  /* background-color 이용하여 이미지 넣기 전에 조절 가능하다. */

  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 700px;
  padding: 40px 20px;
}

.container .heros .hero {
  width: 80px;
  height: 84px;
  margin: 4px;
  background-color: #555;

  /* 경계랑 사진 모양 만들어주기. */
  border: 3px solid #ffffff;
  transform: skewX(-14deg);
  border-radius: 10px;

  /* 넘치는 부분 잘라내기. */
  overflow: hidden;
}

/* hover 시에 변환과 전환 효과 적용하기. */

.container .heros .hero:hover {
  background-color: #ff9c00;

  /* transform 덮어지기 때문에, 다시 작성해야 한다. */
  transform: skewX(-14deg) scale(1.3);

  /* 따로 따로 적용할 수 있다. */
  transition: transform 0.1s ease-in-out, background-color 0.6s ease-in-out;

  /* 이미지 순서 변경하기 위하여 z-index 이용하기. */
  z-index: 1;
}

/* html에서 이미지를 넣지 않고, 가상 클래스 선택자를 이용하여 넣을 수 있다. */
/* 주의할 점은 image는 너비와 높이가 없기 때문에, 설정해야 한다. */

.container .heros .hero .image {
  width: 140%;
  height: 100%;
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;

  /* 이미지가 찌그러지지 않게 다시 skew 지정하기. */
  /* 오른쪽으로 쏠려있는 모양이라 translateX 이용하여 다시 지정하기. */
  transform: skewX(14deg) translateX(-16px);
}

/* 각각의 위치에 사진 넣어주기. */

.container .heros .hero:nth-child(1) .image {
  background-image: url("../images/hero1.png");
}

.container .heros .hero:nth-child(2) .image {
  background-image: url("../images/hero2.png");
}

.container .heros .hero:nth-child(3) .image {
  background-image: url("../images/hero3.png");
}

.container .heros .hero:nth-child(4) .image {
  background-image: url("../images/hero4.png");
}

.container .heros .hero:nth-child(5) .image {
  background-image: url("../images/hero5.png");
}

.container .heros .hero:nth-child(6) .image {
  background-image: url("../images/hero6.png");
}

.container .heros .hero:nth-child(7) .image {
  background-image: url("../images/hero7.png");
}

.container .heros .hero:nth-child(8) .image {
  background-image: url("../images/hero8.png");
}

.container .heros .hero:nth-child(9) .image {
  background-image: url("../images/hero9.png");
}

.container .heros .hero:nth-child(10) .image {
  background-image: url("../images/hero10.png");
}

.container .heros .hero:nth-child(11) .image {
  background-image: url("../images/hero11.png");
}

.container .heros .hero:nth-child(12) .image {
  background-image: url("../images/hero12.png");
}

.container .heros .hero:nth-child(13) .image {
  background-image: url("../images/hero13.png");
}

.container .heros .hero:nth-child(14) .image {
  background-image: url("../images/hero14.png");
}

.container .heros .hero:nth-child(15) .image {
  background-image: url("../images/hero15.png");
}

.container .heros .hero:nth-child(16) .image {
  background-image: url("../images/hero16.png");
}

.container .heros .hero:nth-child(17) .image {
  background-image: url("../images/hero17.png");
}

.container .heros .hero:nth-child(18) .image {
  background-image: url("../images/hero18.png");
}

.container .heros .hero:nth-child(19) .image {
  background-image: url("../images/hero19.png");
}

.container .heros .hero:nth-child(20) .image {
  background-image: url("../images/hero20.png");
}

.container .heros .hero:nth-child(21) .image {
  background-image: url("../images/hero21.png");
}

.container .heros .hero:nth-child(22) .image {
  background-image: url("../images/hero22.png");
}

.container .heros .hero:nth-child(23) .image {
  background-image: url("../images/hero23.png");
}

.container .heros .hero:nth-child(24) .image {
  background-image: url("../images/hero24.png");
}

.container .heros .hero:nth-child(25) .image {
  background-image: url("../images/hero25.png");
}

.container .heros .hero:nth-child(26) .image {
  background-image: url("../images/hero26.png");
}

.container .heros .hero:nth-child(27) .image {
  background-image: url("../images/hero27.png");
}

.container .heros .hero:nth-child(28) .image {
  background-image: url("../images/hero28.png");
}

.container .heros .hero:nth-child(29) .image {
  background-image: url("../images/hero29.png");
}

.container .heros .hero:nth-child(30) .image {
  background-image: url("../images/hero30.png");
}

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

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

/* 최대 가로 사이즈 300px 맞게 지정할 수 있다. */

.container .logo__container .logo {
  max-width: 300px;
}

.container .logo__container .logo {
  width: 100%;
  height: 168px;
}

저작자표시

'web > html css' 카테고리의 다른 글

[패스트캠퍼스] 국비지원 flip 만들기 (0)	2023.05.18
[패스트캠퍼스] 국비지원 13일차 학습일지 (0)	2023.05.17
[패스트캠퍼스] 국비지원 6일차 학습일지 (0)	2023.05.10
[패스트캠퍼스] 국비지원 5일차 학습일지 (0)	2023.05.09
[패스트캠퍼스] 국비지원 3일차 학습일지 (0)	2023.05.07

현재글[패스트캠퍼스] 국비지원 14일차 오버워치 캐릭터 선정 페이지

Security Engineer

BOJ, 토이프로젝트, node.js, javascript, 네트워크, 국비지원, codecamp, 네트워크관리사2급, D-day Counter, 인프라, github, Cyworld, 패스트캠퍼스, html, js, Trouble Shooting, CSS, setinterval, 보안관제, flex,

Today :
Yesterday :

TechLabs