[온라인쇼핑몰미니게임] css

사실 js 코드보다 css에 시간이 훨씬 많이 들었다.

생각보다 원하는 대로 모양 만드는 게 어려웠다.

position, display, rem, em, % 등의 기본 원리를 배워도 많이 헤맸다. 

 

웹사이트 클론해서 정적인 코드를 짰을 때는 포토샵으로 계속 px을 재면서 만들어봤는데

디자인 시안이 있는 것도 아니고 중앙에 정렬하는 것들이 대부분이라 flex를 많이 활용했다

 

1. flexbox와 grid의 차이

 

2. align-items와 justify-content

https://www.youtube.com/watch?v=B1zuZDA4LOM

https://youtu.be/eprXmC_j9A4

 

실제로 적용한 내용을 간략하게 정리하면 이렇다. 

 

:root {
  /* color */
  --color-background: rgb(75, 80, 100);
  --color-blue: rgb(90, 155, 210);
  --color-yellow: rgb(255, 215, 0);
  --color-pink: rgb(250, 50, 70);
  --color-white: rgb(255, 255, 255);

  /* annimation */
  --animation-duration: 300ms;
}

body {
  background-color: var(--color-background);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contents {
  min-width: 360px;
}

.logo img {
  cursor: pointer;
  transition: transform var(--animation-duration) ease;
}

.buttons {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  width: 100%;
}

.buttons button {
  margin-right: 0.5em;
  cursor: pointer;
  transition: transform var(--animation-duration) ease;
}

.logo img:hover,
.buttons button:hover {
  transform: scale(1.1);
}

.imgBtn {
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
}

.logo {
  display: flex;
  justify-content: center;
}

.logo img,
.buttons img {
  max-width: 100%;
}

.buttons .colorBtn {
  width: 100%;
  border-radius: 3px;
  font-size: 1em;
  color: black;
  padding: 0.5rem;
}

.blue {
  background-color: var(--color-blue);
}
.yellow {
  background-color: var(--color-yellow);
}
.pink {
  background-color: var(--color-pink);
}

.items {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 60vh;
  overflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.items::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.items {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.items .item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 20%;
  background-color: var(--color-white);
  box-sizing: border-box;
  margin-bottom: 0.5em;
  border-radius: 4px;
  padding: 0.5em;
}

.item img {
  height: 90%;
}
.item .description {
  display: inline-block;
  font-size: 1.5em;
  margin-left: 0.5em;
}

github.com/pithesun/minishoppinggame.git

pithesun/minishoppinggame