[카테캠 4주차] 오버워치 캐릭터 선택 예제

lang="ko" 의 의미

<!DOCTYPE html>
<html lang="ko">
</html>

https://blog.naver.com/pjh445/220012102876

margin 을 사용한 중앙 정렬

레이아웃 잡을때 max-width 로 잡는게 반응형 대응하기 더 편한 것 같다. width 로 css 를 주면 잘려버리기 때문이다.

width 값이 있는 요소에 margin: 0 auto 를 주게 되면 중앙 정렬이 된다.

.heroes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

  max-width: 700px;

  margin: 0 auto;
}

캐릭터 image

다음처럼 url 함수를 사용하여 캐릭터 이미지를 넣어주었을 때 이미지가 나오지 않는 경우에는 어떻게 해야할까.

.hero:nth-child(1) .image {
  background-image: url("https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/hero1.png");
}

당연히 내가 무언가 빠뜨렸기 때문이다. 이미지 요소의 width 와 height 를 설정하면 된다.

background-image 가 왜 적용이 안되지? 했던 기억때문에 기록한다.

.hero .image {
  width: 140%;
  height: 100%;
}

그리고 width:140% 적용되어 있는데 그러면 얼마만큼의 px 값을 가질까?

.heroes .hero {
  box-sizing: border-box;

  width: 80px;
  height: 80px;

  border: 3px solid #fff;
}

위 코드를 보면 부모가 74px 의 크기를 가진다. (border-box 니까) 따라서 140 % 은 104 px 정도 되려나?

그런데 딱 보기에 이미지가 큰 것 같다. 크기를 줄이고 싶다. 어떻게 해야할까?

background-size 먹이면 해결할 수 있다.

.hero .image {
  background-size: 90px;
}

신기한 z-index

z-index 는 position 과 세트메뉴라고 생각했다.

그런데 아래 css 코드를 보면 position 이 없이 사용되고 있다. hover 가 아닐때 css 에도 position 은 찾아볼 수 없다.

이게 무슨일인가..

.heroes .hero:hover {
  transform: skewX(-14deg) scale(1.35);
  
  background-color: #ff9c00;
  
  z-index: 1;
}

MDN 문서에 따르면 flex 컨테이너의 자식은 z-index 를 사용할 수 있다고 명시되어있다.

또한 transform 을 사용하는 요소도 새로운 쌓임 맥락을 만든다고 한다.

배경 이미지 background-size

왜 이런 배경이미지 차이가 나는걸까.

나란 남자 background-size: cover 주는걸 깜빡해버렸다. cover 는 요소의 긴 너비에 맞추는 속성값이기 때문에 세로로 긴 뷰포트에서 배경이미지가 이쁘게 나오도록 한다.

깃허브 & 배포

배포 https://beamish-beignet-e439b8.netlify.app/

깃허브 https://github.com/ehddud1006/overwatch-hero-selector-vanilla

저작자표시

'카카오 테크 캠퍼스 > HTML CSS JS' 카테고리의 다른 글

[카테캠 6주차] 자바스크립트 기초 (1)	2023.05.21
[카테캠 5주차] 자바스크립트 기초 (0)	2023.05.14
[카테캠 4주차] CSS 속성 (0)	2023.05.06
[카테캠 3주차] CSS 속성 (0)	2023.04.28
[카테캠 3주차] CSS 개요 (2)	2023.04.27