이번시간에는 이제까지 배운 내용을 바탕으로 간단하게 예제를 만들어보자! 오버워치의 캐릭터 선택 화면을 만들어 볼 예정이다.
먼저 오버워치 폴더를 VSCode에서 열고, index.html 파일과 main.css 파일을 생성한다. 언어는 ko로 변경하고, reset css 코드와 main.css 파일의 경로를 추가해준다.
다음으로 body 태그에 코드를 작성하는데 .container 와 같이 입력하고 Tab 키를 누르면 container 클래스를 가진 div 태그가 자동으로 생성된다. 캐릭터가 32개인데 코드를 32번 붙여넣기 할 필요 없이 .hero*32>.image 와 같이 입력하고 Tab키를 누르면 .image 클래스의 div 태그를 자식으로 가진 .hero 클래스가 32개 생성된다.
그리고 캐릭터 이미지의 바탕이 될 요소들을 만들고 브라우저에 출력해보기!!
줄바꿈이 일어나도록 flex-wrap 값을 설정해주고, 요소들을 가운데(justify-content) 정렬한 후 max-width 를 설정해준다. 여기에 margin: atuo 값을 추가해주면 전체요소가 가운데 정렬이 된다. margin: auto 값을 주려면 block요소여야 하고, 가로 사이즈가 명시되어 있어야 하며 좌우에만 auto 값이 적용된다.
요소들에 테두리를 추가해주는데 #FFFFFF 와 같이 같은 값이 반복 될 때는 #FFF 처럼 3개로 줄여써도 된다. 그리고 요소들에 기울임값(skewX)과 둥근 테두리(border-radius)를 추가해준다.
그러면 이제 마우스를 올렸을 때 설정들을 지정해보자.
먼저 배경색과 크기(scale), 기울임값(skewX)을 추가해준다. 그리고 마우스를 올려 확인해보면 요소의 쌓임 순서에서 밀리므로 일부가 다른 요소에 가려져서 나온다. z-index: 1; 값을 추가해주면 해결! 그런 후 자연스러운 애니메이션 효과를 주기 위해 transition 값도 추가해준다.
이제 이미지를 추가해야한다. 캐릭터가 32개 있으므로 이미지로 32개를 사용해야한다. .nth-child(1) 값을 이용해 32개의 이미지를 추가해줄 것이다.
이 상태로는 가로 세로 크기가 명시되어 있지 않으므로 이미지가 출력되지 않는다. 크기 명시 후 정렬하고, 반복 설정 후 출력해보면! 잘 나온다.
그런데 아까 설정한 skewX 값 때문에 기울어져 나온다. 이번엔 반대로 skewX 값에 양수 값을 넣어주면 원상복귀 된다.
이제 이러한 이미지를 삽입한는 코드를 32번 반복해서 작성해야한다. 그러면 코드가 너무 길어지므로 한 줄에 작성하도록 한다. 이는 나중에 SCSS 라는 CSS 전처리기를 통해서 조금 더 쉽게 관리할 수 있다. 지금은 초보 단계이므로 원시적인 방법으로 해결하도록 하자...
그러면 모든 이미지가 출력됨!!
그런다음 배경 이미지를 추가하고, 제일 하단에 로고를 입력해주면 끝!!!! 쉽지 않다... 반복해서 연습 하..자...
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
패스트캠퍼스 챌린지 22일차 - Part1. Ch9 (0) | 2021.11.22 |
---|---|
Java & SpringBoot로 시작하는 웹프로그래밍 : 자바 인강 - Ch.2 (0) | 2021.11.21 |
패스트캠퍼스 챌린지 20일차 - Part1. Ch8 (0) | 2021.11.20 |
패스트캠퍼스 챌린지 19일차 - Part1. Ch8 (0) | 2021.11.19 |
패스트캠퍼스 챌린지 18일차 - Part1. Ch8 (0) | 2021.11.18 |