Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex) 본문

CSS

[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex)

by jade 2024. 1. 13. 13:15

css 종합 실습 backgrund & flex를 활용하여 오버워치 캐릭터창 만들기

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>종합실습 - 캐릭터창 만들기(background&flex)</title>
    <link rel="stylesheet" href="./css_test17.css" />
</head>
<body>
    <!-- 전체를 감싸는 콘테이너 -->
    <div class="container">
        <!-- heroes는 캐릭터 선택창 전체를 감싸게 됨 -->
        <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="./img/overwatch/logo_overwatch.png" alt="overwatch logo" />
        </div>
    </div>  
</body>
</html>

 

body {
    background-image: url('./img/overwatch/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  
  .container {
    display: flex;
    position: relative;
    /*flex-direction: row;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .container .heroes {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-around;*/
    justify-content: center; 
    align-items: center;
    /*width:800px;*/
    width:700px;
    margin-bottom: 10px;
  }
  
  .container .heroes .hero {
    width: 80px; 
    height: 80px;
    border: 2px solid white;
    border-radius: 12px; 
    transform: skew(-10deg);
    margin: 8px;
  }
  
  .container .heroes .hero:hover {
    background-color: #FFA500;
    transition-duration: 1s;
    transform: scale(1.2) skew(-10deg);
    z-index: 1;
  }
  
  .container .heroes .hero .image {
    width: 100%; 
    height: 100%; 
    border-radius: 12px;
    background-size: cover;
  }
  
  .container .logo {
    max-width: 300px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .container .logo img {
    width: 100%;
  }
  
  .container .heroes .hero:nth-child(1) .image {
    background-image: url('./img/overwatch/hero1.png');
  }
  
  .container .heroes .hero:nth-child(2) .image {
    background-image: url('./img/overwatch/hero2.png');
  }
  
  .container .heroes .hero:nth-child(3) .image {
    background-image: url('./img/overwatch/hero3.png');
  }
  
  .container .heroes .hero:nth-child(4) .image {
    background-image: url('./img/overwatch/hero4.png');
  }
  
  .container .heroes .hero:nth-child(5) .image {
    background-image: url('./img/overwatch/hero5.png');
  }
  
  .container .heroes .hero:nth-child(6) .image {
    background-image: url('./img/overwatch/hero6.png');
  }
  
  .container .heroes .hero:nth-child(7) .image {
    background-image: url('./img/overwatch/hero7.png');
  }
  
  .container .heroes .hero:nth-child(8) .image {
    background-image: url('./img/overwatch/hero8.png');
  }
  
  .container .heroes .hero:nth-child(9) .image {
    background-image: url('./img/overwatch/hero9.png');
  }
  
  .container .heroes .hero:nth-child(10) .image {
    background-image: url('./img/overwatch/hero10.png');
  }
  
  .container .heroes .hero:nth-child(11) .image {
    background-image: url('./img/overwatch/hero11.png');
  }
  
  .container .heroes .hero:nth-child(12) .image {
    background-image: url('./img/overwatch/hero12.png');
  }
  
  .container .heroes .hero:nth-child(13) .image {
    background-image: url('./img/overwatch/hero13.png');
  }
  
  .container .heroes .hero:nth-child(14) .image {
    background-image: url('./img/overwatch/hero14.png');
  }
  
  .container .heroes .hero:nth-child(15) .image {
    background-image: url('./img/overwatch/hero15.png');
  }
  
  .container .heroes .hero:nth-child(16) .image {
    background-image: url('./img/overwatch/hero16.png');
  }
  
  .container .heroes .hero:nth-child(17) .image {
    background-image: url('./img/overwatch/hero17.png');
  }
  
  .container .heroes .hero:nth-child(18) .image {
    background-image: url('./img/overwatch/hero18.png');
  }
  
  .container .heroes .hero:nth-child(19) .image {
    background-image: url('./img/overwatch/hero19.png');
  }
  
  .container .heroes .hero:nth-child(20) .image {
    background-image: url('./img/overwatch/hero20.png');
  }
  
  .container .heroes .hero:nth-child(21) .image {
    background-image: url('./img/overwatch/hero21.png');
  }
  
  .container .heroes .hero:nth-child(22) .image {
    background-image: url('./img/overwatch/hero22.png');
  }
  
  .container .heroes .hero:nth-child(23) .image {
    background-image: url('./img/overwatch/hero23.png');
  }
  
  .container .heroes .hero:nth-child(24) .image {
    background-image: url('./img/overwatch/hero24.png');
  }
  
  .container .heroes .hero:nth-child(25) .image {
    background-image: url('./img/overwatch/hero25.png');
  }
  
  .container .heroes .hero:nth-child(26) .image {
    background-image: url('./img/overwatch/hero26.png');
  }
  
  .container .heroes .hero:nth-child(27) .image {
    background-image: url('./img/overwatch/hero27.png');
  }
  
  .container .heroes .hero:nth-child(28) .image {
    background-image: url('./img/overwatch/hero28.png');
  }
  
  .container .heroes .hero:nth-child(29) .image {
    background-image: url('./img/overwatch/hero29.png');
  }
  
  .container .heroes .hero:nth-child(30) .image {
    background-image: url('./img/overwatch/hero30.png');
  }
  
  .container .heroes .hero:nth-child(31) .image {
    background-image: url('./img/overwatch/hero31.png');
  }
  
  .container .heroes .hero:nth-child(32) .image {
    background-image: url('./img/overwatch/hero32.png');
  }

ver1 css 코드

 

ver1 코드 실행 시 결과창

 

body {
    background-image: url('./img/overwatch/bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  

  .container .heroes {
    display: flex;
    max-width: 700px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 20px;
    margin: 0 auto;
  }
  
  .container .heroes .hero {
    width: 80px;
    height: 84px;
    margin: 4px;
    border: 3px solid white;
    transform: skewX(-14deg);
    background-color: gray;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    transition: 1s;
    cursor: pointer;
  }
  
  .container .heroes .hero:hover {
    background-color: orange;
    /* border-color: orange; */
    transform: skewX(-14deg) scale(1.3);
    z-index: 1;
  }
  
  .container .heroes .hero .image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: skewX(14deg);
  }
  
  .container .logo {
    max-width: 300px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .container .logo img {
    width: 100%;
  }
  
  .container .heroes .hero:nth-child(1) .image {
    background-image: url('./img/overwatch/hero1.png');
  }
  
  .container .heroes .hero:nth-child(2) .image {
    background-image: url('./img/overwatch/hero2.png');
  }
  
  .container .heroes .hero:nth-child(3) .image {
    background-image: url('./img/overwatch/hero3.png');
  }
  
  .container .heroes .hero:nth-child(4) .image {
    background-image: url('./img/overwatch/hero4.png');
  }
  
  .container .heroes .hero:nth-child(5) .image {
    background-image: url('./img/overwatch/hero5.png');
  }
  
  .container .heroes .hero:nth-child(6) .image {
    background-image: url('./img/overwatch/hero6.png');
  }
  
  .container .heroes .hero:nth-child(7) .image {
    background-image: url('./img/overwatch/hero7.png');
  }
  
  .container .heroes .hero:nth-child(8) .image {
    background-image: url('./img/overwatch/hero8.png');
  }
  
  .container .heroes .hero:nth-child(9) .image {
    background-image: url('./img/overwatch/hero9.png');
  }
  
  .container .heroes .hero:nth-child(10) .image {
    background-image: url('./img/overwatch/hero10.png');
  }
  
  .container .heroes .hero:nth-child(11) .image {
    background-image: url('./img/overwatch/hero11.png');
  }
  
  .container .heroes .hero:nth-child(12) .image {
    background-image: url('./img/overwatch/hero12.png');
  }
  
  .container .heroes .hero:nth-child(13) .image {
    background-image: url('./img/overwatch/hero13.png');
  }
  
  .container .heroes .hero:nth-child(14) .image {
    background-image: url('./img/overwatch/hero14.png');
  }
  
  .container .heroes .hero:nth-child(15) .image {
    background-image: url('./img/overwatch/hero15.png');
  }
  
  .container .heroes .hero:nth-child(16) .image {
    background-image: url('./img/overwatch/hero16.png');
  }
  
  .container .heroes .hero:nth-child(17) .image {
    background-image: url('./img/overwatch/hero17.png');
  }
  
  .container .heroes .hero:nth-child(18) .image {
    background-image: url('./img/overwatch/hero18.png');
  }
  
  .container .heroes .hero:nth-child(19) .image {
    background-image: url('./img/overwatch/hero19.png');
  }
  
  .container .heroes .hero:nth-child(20) .image {
    background-image: url('./img/overwatch/hero20.png');
  }
  
  .container .heroes .hero:nth-child(21) .image {
    background-image: url('./img/overwatch/hero21.png');
  }
  
  .container .heroes .hero:nth-child(22) .image {
    background-image: url('./img/overwatch/hero22.png');
  }
  
  .container .heroes .hero:nth-child(23) .image {
    background-image: url('./img/overwatch/hero23.png');
  }
  
  .container .heroes .hero:nth-child(24) .image {
    background-image: url('./img/overwatch/hero24.png');
  }
  
  .container .heroes .hero:nth-child(25) .image {
    background-image: url('./img/overwatch/hero25.png');
  }
  
  .container .heroes .hero:nth-child(26) .image {
    background-image: url('./img/overwatch/hero26.png');
  }
  
  .container .heroes .hero:nth-child(27) .image {
    background-image: url('./img/overwatch/hero27.png');
  }
  
  .container .heroes .hero:nth-child(28) .image {
    background-image: url('./img/overwatch/hero28.png');
  }
  
  .container .heroes .hero:nth-child(29) .image {
    background-image: url('./img/overwatch/hero29.png');
  }
  
  .container .heroes .hero:nth-child(30) .image {
    background-image: url('./img/overwatch/hero30.png');
  }
  
  .container .heroes .hero:nth-child(31) .image {
    background-image: url('./img/overwatch/hero31.png');
  }
  
  .container .heroes .hero:nth-child(32) .image {
    background-image: url('./img/overwatch/hero32.png');
  }

ver2. css 코드

 

ver2 코드 실행 시 결과창

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] animation 실습 - 공 움직이기  (1) 2024.01.13
[css] transition & transform 실습 - 이미지 연달아 나열하기  (1) 2024.01.13
[css] background 실습 - 프로필 만들기  (1) 2024.01.13
[css] Flexbox 실습 - header 만들기  (0) 2024.01.13
[css] position 실습 - 애벌레 만들기  (0) 2024.01.13
'CSS' Related Articles more