오버워치 캐릭터 선택화면

재미로 만든 연습용 오버워치 캐릭터 선택화면

기본화면

영웅 - 리퍼 선택

주요 기능

.heros - class heros인 div가 생성됨
.hero*32>.image - class hero인 이미지 32개 생성

max-width: 700px; - 700px보다 커지게 되면 정렬이 멈춤
margin: auto; - 가로사이즈가 있는 상태라면, 전체 블록이 가운데 정렬이 됨

z-index: 1; - 쌓임순서 위로

transition:
    transform .1s,
    background-color .6s; - 전환은 1초, 배경색은 0.6초

overflow: hidden; - 나머지 잘라내기

background-position: center;- 이미지 정가운데로

background-size: 90px; - 가로넓이 줄이기

background-repeat: no-repeat; - 이미지 반복 없애기

height: 100vh; - 뷰포트 높이의 100%

background-size: cover; - 더 넓은 너비에 맞게 출력

background-attachment: fixed; - 배경의 스크롤 특성