[패스트캠퍼스] React 강의 4주차

요즘 할게 많아서 강의를 조금 미뤘더니 너무 쌓여서 css 부분 끝까지 후딱 들어버렸다!

나름 css는 좀 할 수 있다고 생각했는데 많이 써보지 않은 속성까지 배울 수 있어서 좋은 기회였던 것 같다.

css 강의가 끝나고 마지막에 예제를 만들어보는 수업을 했다.

 

오직 HTML과 CSS로만 이루어진 예제라서 약간의 노가다(?)가 필요했다.

오버워치 예제를 만들었는데 원래 이미지를 그냥 자바스크립트로 반복되게 굴려주면 쉬울 것 같은데

자바스크립트를 사용하지 않아서 배경이미지를 32개나 일일이 다 넣어주었다.....

그래도 따라하기 쉬운 예제라서 재미있었던 것 같다. (머리에 휴식을 주는 예제였음)

 

또 transform 속성을 많이 사용하긴 했는데 skew나 이런 속성은 자주 사용하지 않았어서 더 유용했던 것 같다.

그리고 강의를 들으면서 perspective 속성을 배울 수 있어서 좋았다.

perspective 속성과 backface-visibility 속성은 잘 사용해보지 못했는데 이번 기회로 기억에 남기고 갈 수 있을 것 같다.

 

아무튼 예제로  돌아와서 

.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 0.1s, background-color 0.6s;
}

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

.hero .image {
  width: 140%;
  height: 100%;
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;
  transform: skewX(14deg) translateX(-16px);
  cursor: pointer;
}

이런식으로 사용해줬는데 transition을 속성마다 따로 부여할 수 있었다는 점을 다시 상기시킬 수 있었다.

그리고 skewX로 인해 기울어진 상자때문에 이미지도 찌그러지게 나오는데 그것을 다시 이미지에 직접 skew로 반대되는 값을 넣으면 원상복구된다는 것을 알 수 있었다. 

그리고 나는 추가적으로 커서 모양을 바꿔줬다.

웹접근성을 지키면서 코드를 짜 버릇 하다보니 캐릭터가 선택될 때 사용자에게 선택되었다는 것을 알려주기 위해서 커서를 포인터 모양으로 바꾸는게 적합하다고 생각했다.

마지막으로 max-width에 대해 개념을 다시 잡을 수 있었다!! 이게 항상 헷갈렸는데 이번 예제로 잘 잡고 갈 수 있던 것 같다.

 

되게 조그맣고 쉬운 프로젝트였지만 힐링할 수 있는 시간이었다...

간만에 html과 css로만 다뤄봐서 더 재미있었던 것 같다.

 

이건 완성작!

 

커서가 배경 밖으로 나가면 기본값이고 캐릭터를 선택할때 포인터 모양인 것을 볼 수 있다. 😊

 

조그맣지만 깃허브 레포에도 올려놨다ㅋㅋㅋㅋㅋㅋㅋ 힐링할 수 있었던 예제~~🌱 내일배움카드 쏠쏠하게 쓰고 있어서 좋은 것 같다!

https://github.com/hayeonn2/Overwatch

GitHub - hayeonn2/Overwatch: 🔫 HTML5와 CSS3로 오버워치 캐릭터 선택창 만들기