[브라우저101] 당근 게임 만들기

HTML

– 태그와 클래스를 함께 생성하는 숏코드를 사용하자 div.className

– 섹션 태그 공부 -> 나중에 나오는 팝업창과 게임 화면을 섹션을 먼저 분리

– 컨트롤 부분은 헤더에 있습니다.

– 게임 트레이가 본체에 있음

CSS


– 이렇게 큰 틀을 먼저 쓰기 시작했습니다.


배경의 위치와 크기를 설정할 수 있습니다.

– 기본 버튼 속성: 없음, 커서: 포인터

– 버튼이 부드럽게 반응하도록 전환



– 색상과 불투명도를 함께 사용할 수도 있습니다!
(좋아요!
)

– game__field height: 100% 부분을 줬고, 게임 이미지 부분을 넘었는데 왜 display: flex, flex-direction: column 으로 솔루션을 푸는 걸까요?

::100%라고 하면 부모의 전체 키의 크기로 측정되죠? 그리고 앞에 다른 형제가 있기 때문에 부모를 통과하게 됩니다.

플렉스의 크기는 박스에 할당된 영역 내에서 측정하기 때문에 초과하지 않습니다 🙂

– 팝업창 위치 조정 : 위치를 절대값으로 설정하여 지정했습니다.


transform: translateY(-150px) 로 이렇게 위치를 쉽게 조정할 수 있는 방법이 있었습니다!
!

자바스크립트