프론트엔드 공부 7일차 CSS 실습예제

waymo·2022년 5월 2일

패캠 FE 공부

목록 보기

7/28

7일차

CSS 실습예제

Overwatch 캐릭터 선택예제

<!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</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="https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png" alt="Overwatch">
    </div>
  </div>

</body>

</html>

body {
  height: 100vh;
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.container {
  padding: 50px 0;
}

.container .heroes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
}

.container .heroes .hero {
  width: 80px;
  height: 84px;
  margin: 4px;
  border: 3px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #555;
  overflow: hidden;
  transform: skewX(-14deg);
  transition: 
    transform .1s, 
    background-color .6s;
}
.container .heroes .hero:hover {
  background-color: #ff9c00;
  transform: skewX(-14deg) scale(1.3) ;
  z-index: 1;
}
.container .heroes .hero .image {
  width: 140%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90px;
  transform: skewX(14deg) translateX(-16px);
}
.container .heroes .hero:nth-child(1) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png"); }
.container .heroes .hero:nth-child(2) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero2.png"); }
.container .heroes .hero:nth-child(3) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero3.png"); }
.container .heroes .hero:nth-child(4) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero4.png"); }
.container .heroes .hero:nth-child(5) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero5.png"); }
.container .heroes .hero:nth-child(6) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero6.png"); }
.container .heroes .hero:nth-child(7) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero7.png"); }
.container .heroes .hero:nth-child(8) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero8.png"); }
.container .heroes .hero:nth-child(9) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero9.png"); }
.container .heroes .hero:nth-child(10) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero10.png"); }

.container .heroes .hero:nth-child(11) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero11.png"); }
.container .heroes .hero:nth-child(12) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero12.png"); }
.container .heroes .hero:nth-child(13) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero13.png"); }
.container .heroes .hero:nth-child(14) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero14.png"); }
.container .heroes .hero:nth-child(15) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero15.png"); }
.container .heroes .hero:nth-child(16) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero16.png"); }
.container .heroes .hero:nth-child(17) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero17.png"); }
.container .heroes .hero:nth-child(18) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero18.png"); }
.container .heroes .hero:nth-child(19) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero19.png"); }
.container .heroes .hero:nth-child(20) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero20.png"); }

.container .heroes .hero:nth-child(21) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero21.png"); }
.container .heroes .hero:nth-child(22) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero22.png"); }
.container .heroes .hero:nth-child(23) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero23.png"); }
.container .heroes .hero:nth-child(24) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero24.png"); }
.container .heroes .hero:nth-child(25) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero25.png"); }
.container .heroes .hero:nth-child(26) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero26.png"); }
.container .heroes .hero:nth-child(27) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero27.png"); }
.container .heroes .hero:nth-child(28) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero28.png"); }
.container .heroes .hero:nth-child(29) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero29.png"); }
.container .heroes .hero:nth-child(30) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero30.png"); }

.container .heroes .hero:nth-child(31) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero31.png"); }
.container .heroes .hero:nth-child(32) .image {background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero32.png"); }


.container .logo {
  max-width: 300px;
  margin: 0 auto;
  padding: 0 20px;
}
.container .logo img {
  width: 100%;
}

vanilla -> HTML과 css만 이용한것 , 프레임이나 라이브러리 같은 모듈 사용X

.hero*32>.image 한번에 32개 div 코드 작성

hero요소들을 수평정렬 하기위해 display: flex;
hero요소 수평정렬 되지만 구분이 안되서 margin: 4px;
한줄에만 표현되기 때문에 flex-wrap: wrap; 을 사용해 줄바꿈해 표현
justify-content: center; 를 이용해 hero 가운데 정렬
백그라운드 오렌지 설정하여 영역 확인 하고 코딩
max-width: 700px; 700이하에서는 자유롭게 정리됨 (가로 창 줄였을때)
margin: 0 auto; 이용하여 컨테이너 전체 가운데 정렬
블럭요소에 가로사이즈가 있는 상태에서 마진값 좌우가 auto라면 요소는 가운데정렬

transform: skewX(-14deg); 를 사용해 기울임
box-sizing: border-box; 보더가 들어간만큼 커지지 않기위해 사용

hover
transform: scale(1.3); -> 마우스 올리니까 커지지만 기울임이 사라짐
그러므로 skewX(-14deg) 추가
요소가 커질때 일부 요소들에게 가려짐 (쌓임순서에 밀리기 때문)
-> z-index: 1; 가장앞으로 확대되며 보여짐

transition: transform .1s; 확대되는것에만 적용됨
background-color .6s; 배경색은 별개로 0.6초

이미지요소
width: 140%; height: 100%; 부모요소에 자동으로 맞춰질수 있도로 % 사용
40% 넘침으로 이미지가 넘어감 이걸 해결하기위해 hero요소에 overflow: hidden; 추가
background-position: center; 이미지를 정 가운데 위치
background-size 속성을 통해 가로너비 줄임
반복이미지가 보여 background-repeat: no-repeat;를 사용해 하나의 이미지
transform: skewX(14deg); 부모요소 반대로 기울여서 이미지가 찌그러지지 않고 정상출력
translateX(-16px); 오른쪽으로 치우쳐 있어서 왼쪽으로 16픽셀 땡겨옴

컨테이너 padding: 50px 0; 추가하여 조금 내려오게 출력

body
height: 100vh; 뷰포트100% 화면에 보이는 전체영역이 body의 영역 설정
background-image: url 로 이미지 삽입
background-size: cover; 더 넓은 너비에 맞게 출력
스크롤 하면 반복되어 출력
background-repeat: no-repeat; 반복 x
background-attachment: fixed; 스크롤 해도 배경이미지 고정

로고
최대 가로너비 300px
margin: 0 auto; 중앙정렬

로고 이미지
width: 100%

waymo

FE 개발자(진)가 되고 싶습니다

이전 포스트

프론트엔드 공부 6일차 CSS 속성

다음 포스트

프론트엔드 공부 7일차 CSS 실습예제

패캠 FE 공부

7일차

CSS 실습예제

Overwatch 캐릭터 선택예제

프론트엔드 공부 6일차 CSS 속성

프론트엔드 8일차 f1드라이버

0개의 댓글