오늘은 미니게임이라 하기에는 조금 그렇지만,,
미니 온라인 쇼핑몰 게임을 만들어보면서 추가로 알게된 것들을 정리해보고자 한다.
누구에게는 아무것도 아닌 정보일 수도 있겠지만,
나에게는 이런 작은 속성 하나하나가 엄청난 신세계였기에 ㅇㅅㅇ!!
까먹지않게 따로 정리를 해보기로 했다 ㅎ
1편은 html,css 위주로,
후에 2편에서 자바스크립트 부분만 따로 올려볼 생각이다.
자바스크립트 부분은 스스로 최대한 만들어보려했으나 아직까지 100% 혼자 구현하지를 못해서, 후에 2편으로 추가해서 올려보겠다.
먼저 내가 원했던 그림은, 상단에 있는 버튼을 클릭했을 때
해당하는 요소에 맞춰서 목록들이 뜨게끔 하는 것이였다.
예를 들어 티셔츠를 누르면 티셔츠 목록만, 팬츠는 팬츠만, 스커트는 스커트만, 파란색버튼은 파란색 옷들만 뜨는 형식으로 말이다.
<완성본 😎>
만들면서 새로 알게된 css 속성 정리
1. cursor 속성
요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정
적용한 속성 => cursor: pointer
pointer는 위에 짤처럼 무언가 선택해서 누를 수 있음을 알려주는 커서이다
나는 여태 cursor 기능이 따로 있는줄을 몰라서 일부러 a 태그 같은 커서가 있는 태그를 추가해 불필요하게 pointer 커서를 만들었었다. 그러다보니 커서와 아이템의 공간이 따로 논다거나 분리되는 상황이 많았었다.
포인터 외에도 다른 속성들도 많아 움짤로 가져와봤는데,
평소에 웹 서핑하면서 많이 봐왔던 커서들이다.
추가 참고) MDN
2. transform 속성
요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여하는 속성이다
이 속성을 알기 전에는, 수동적으로 하나하나 크기를 조절했었다.
위에 미니 게임에서는 마우스 호버시 커지는 효과를 주고 싶어서
선택자에서의 px 값과 hover 시의 px 값을 수동적으로 다르게 줬었다. ㅋㅋ..
=> transform: scale(1.1, 1.1) 의 값을 사용하여
마우스 호버 시 커지는 효과를 편리하게 줄 수 있다.
scale의 값은 1이 기본 형태이며, 값은 (가로 값, 세로 값) 으로 준다.
외에도 transform은 밑에와 같은 속성들이 있다.
- matrix
= transform의 값들인 translate, skew, rotate, scale를 matrix(1, 0, 0, 1, 0, 0) 또는 행렬로 표시한 것으로 perspective를 제외하고 모든 요소를 한번에 일괄 적용시켜 편리하지만 사용하기에 어려움이 있음.- scale(확대): 크기를 조절
- translate(이동): 위치를 이동
- rotate(회전): 아이템을 회전시킴
- skew(기울기): 기울어짐을 변형
- perspective: 3d 효과를 위한 원근감 부여
값을 주기 위해 알아야 할 것이 있어 정리해본다
먼저, 3d를 구성하는 가장 기본 축으로는 x,y,z 축이 있다
그림으로 봐보면, 요소를 바라볼 때에 우리는 빨간색 화살표의 방향과 같이 바라보는데 x축은 가로선상을, y축은 세로선상을, z축은 z-index와 같이 겹쳐지는 축을 생각하면 된다.
z-index처럼 -1 값이 가장 아래로, 0 이 -1 값의 위로 덮어지는 것처럼.
다른 요소를 합쳐놓은 값이 matrix이지만, 개념을 습득하기에는 시간이 좀 걸릴 것 같다..
자세한 내용은 링크를 걸어두겠다.
3. transition
정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다.
제공되는 속성 값으로는
- transition: 모든 transition 속성을 이용한 스타일을 한 줄에 설정
- transition-property: 요소에 추가할 전환(transition) 효과를 설정
- transition-duration: 전환 효과가 지속될 시간을 설정
- transition-timing-function: 전환 효과의 시간당 속도를 설정
- transition-delay: 전환 효과가 나타나기 전까지의 지연 시간을 설정
위에서 나는 transform으로 크기에 대한 효과를 주었으므로 이를 transition을 이용하여 로고에 시간 차를 주어 효과를 줬다.
4. overflow
요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다.
=> 목록부분이 너무 많아질 경우 웹페이지 전체를 스크롤 해야하는 불편함이 생겨 overflow-y: scroll 속성을 주어 목록에서의 스크롤을 만들어준다.
transparent(투명) 값
또 나는 배경색을 항상 같게 맞추기 위해 해당 아이템과 배경색을 같은 색으로 설정하는 것처럼 수동적으로 맞췄었는데 그럴 필요없이 투명의 속성 값을 이용하여 쉽게 배경을 투명하게 없앨 수도 있음.
느낀 점 혹은 내게 더 필요한 개선점)
- :root를 더 깨끗하게 활용하는 습관 기르기
- 코드를 짜기에 앞서 생각없이 코드를 짜지 않고, 효율적으로 기획과 구성을 어떻게 나눌지를 먼저 생각하고 코드 짜기
- 이미지태그의 알트 정보나 여러 태그의 추가 정보들, 주석을 통한 섹션의 정보 입력처럼 추가 정보도 잘 입력하기
개선 (1) 21.10.21
전보다 자바스크립트에 대해 조금(?) 더 숙지하게 되어서 전에 만드려다 만들지 못했던 미니게임이 떠올라서 급하게 다시 마무리를 해보았다.
벌써 5개월이 흘렀다니.. 😭
드리코딩에서 나온 코드해석풀이를 보니 지금도 이해하기 힘든 코드라서 노가다로 기본적인 classList와 querySelector ,addEventListener을 통해 만들어보았다. 추후에 자바스크립트를 깊게 다를줄 알게된다면 다시 한번 수정해봐야겠다.
완성본은 밑에 영상과 같다.
코드는 굉장히 부끄럽지만.. 아래와 같다.
변수명은 조금 귀찮아서 간단하게 지어봤다. (코드 지옥에 빠졌다,,)
const bluePant = document.querySelector(".blue-pants");
const blueSkirt = document.querySelector(".blue-skirts");
const blueShirt = document.querySelector(".blue-t");
const pinkPant = document.querySelector(".pink-pants");
const pinkSkirt = document.querySelector(".pink-skirts");
const pinkShirt = document.querySelector(".pink-t");
const yellowPant = document.querySelector(".yellow-pants");
const yellowSkirt = document.querySelector(".yellow-skirts");
const yellowShirt = document.querySelector(".yellow-t");
const shirtsButton = document.querySelector(".shirts-button");
const pantsButton = document.querySelector(".pants-button");
const skirtsButton = document.querySelector(".skirts-button");
const blueButton = document.querySelector(".blue-button");
const yellowButton = document.querySelector(".yellow-button");
const pinkButton = document.querySelector(".pink-button");
shirtsButton.addEventListener("click", function () {
bluePant.classList.add("hide");
blueSkirt.classList.add("hide");
pinkPant.classList.add("hide");
pinkSkirt.classList.add("hide");
yellowPant.classList.add("hide");
yellowSkirt.classList.add("hide");
blueShirt.classList.remove("hide");
pinkShirt.classList.remove("hide");
yellowShirt.classList.remove("hide");
});
pantsButton.addEventListener("click", function () {
blueShirt.classList.add("hide");
blueSkirt.classList.add("hide");
pinkShirt.classList.add("hide");
pinkSkirt.classList.add("hide");
yellowShirt.classList.add("hide");
yellowSkirt.classList.add("hide");
bluePant.classList.remove("hide");
pinkPant.classList.remove("hide");
yellowPant.classList.remove("hide");
});
skirtsButton.addEventListener("click", function () {
blueShirt.classList.add("hide");
bluePant.classList.add("hide");
pinkShirt.classList.add("hide");
pinkPant.classList.add("hide");
yellowShirt.classList.add("hide");
yellowPant.classList.add("hide");
blueSkirt.classList.remove("hide");
pinkSkirt.classList.remove("hide");
yellowSkirt.classList.remove("hide");
});
blueButton.addEventListener("click", function () {
pinkPant.classList.add("hide");
pinkSkirt.classList.add("hide");
pinkShirt.classList.add("hide");
yellowSkirt.classList.add("hide");
yellowShirt.classList.add("hide");
yellowPant.classList.add("hide");
blueSkirt.classList.remove("hide");
blueShirt.classList.remove("hide");
bluePant.classList.remove("hide");
});
yellowButton.addEventListener("click", function () {
pinkPant.classList.add("hide");
pinkSkirt.classList.add("hide");
pinkShirt.classList.add("hide");
blueSkirt.classList.add("hide");
blueShirt.classList.add("hide");
bluePant.classList.add("hide");
yellowSkirt.classList.remove("hide");
yellowShirt.classList.remove("hide");
yellowPant.classList.remove("hide");
});
pinkButton.addEventListener("click", function () {
yellowSkirt.classList.add("hide");
yellowShirt.classList.add("hide");
yellowPant.classList.add("hide");
blueSkirt.classList.add("hide");
blueShirt.classList.add("hide");
bluePant.classList.add("hide");
pinkPant.classList.remove("hide");
pinkSkirt.classList.remove("hide");
pinkShirt.classList.remove("hide");
});추후에는 JSON과 자바스크립트를 좀 더 깊이 이해하여 좀 더 쉽게 수정해봐야겠다.
