[JavaScript - 실습] Making a Shopping Mall Mini Game (2)

2. CSS styling

HTML 마크업을 끝내고 디자인을 담당하는 stylesheet 파일로 넘어와서 레이아웃부터 버튼과 아이템 각각의 디자인을 잡아준다.

---

2-1. 사용자 지정 CSS 속성 (변수) 선언

CSS에서 변수를 사용하는 이유는 개발자의 편의성과 디자인의 통일성 때문이다. 의도하던 의도치않던 같은 웹페이지 안의 요소들의 스타일링 값이 일정하지 않으면 미관상 좋은 느낌을 주기 힘들기 때문에 반복적으로 사용되는 CSS값은 변수를 설정해준다.

이번 프로젝트에서는 :root를 통해 변수를 선언하였다.
:root를 통한 변수선언의 문법은 아래와 같다.

:root {
  --main-bg-color: brown;
}

:root 선택자는 문서의 최상위 요소를 가리키는 가상 선택자이며, html 보다 우선순위가 높기 때문에 :root와 html에 대한 스타일을 동시에 선언하는 경우, :root에 대한 스타일이 우선된다.

이제 실제로 코드를 쳐보자!
변수는 크게 color, size 그리고 :hover인 경우 애니메이션을 효과적으로 사용하기 위한 duration의 값이 될 변수도 정의하였다.

:root {
  /* color */
  --color-black: #3f454d;
  --color-white: #ffffff;
  --color-blue: skyblue;
  --color-yellow: #fbbe28;
  --color-pink: #fd7f84;
  --color-light-gray: #dfdfdf;

  /* size */
  --base-space: 8px;
  --size-button: 60px;
  --size-border: 4px;
  --size-thumnail: 50px;
  --font-size: 18px;

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

2-2. Layout잡기

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

반응형 웹을 만들기 위하여 모든 요소가 위치한 body의 높이를 상대단위인 vh를 이용해 화면전체를 사용하는 레이아웃을 잡아주고 flex 속성을 이용해 세로정렬을 해주었다. 그리고 주축과 메인축 모두 center로 지정해 body의 아래 3개의 자식요소를 column 중앙정렬하였다.

• Logo
• Button
• Item list

레이아웃을 잡을 때 초보자가 겪는 잦은 실수중의 하나가 flex를 썼는데 정렬이 되지않아!!!! 이다. 이런 경우는 대부분 전체 높이를 잡아주지 않아 정렬 될 공간이 없어서 생기는 경우가 많으니 당황하지 말고 개발자툴을 열어서 확인해보자!

2-3. logo, button 스타일링

말그대로 디자인을 잡아준다. 버튼을 눌렀을때 유저로 하여금 직관적으로 정보를 전달할 수 있도록 :hover상태에서 cursor를 pointer로 변경하고 scale을 바꾸고, 변수선언한 값을 이용하여 요소들 사이의 여백을 주고 색상을 변경해준다.

그리고 위와 마찬가지로 .btn의 부모태그 buttons에 flex를 주어 가로정렬을 한다. flex-direction의 디폴트 속성은 row이기 때문에 flex-direction은 따로 주지않았다.

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

.btn {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  transition: var(--animation-duration) ease;
  margin-right: var(--base-space);
}

.logo:hover,
.btn:hover {
  transform: scale(1.1);
}

.buttons {
  display: flex;
  align-items: center;
}

.imgBtn {
  width: var(--size-button);
  height: var(--size-button);
}

.colorBtn {
  font-size: var(--font-size);
  padding: calc(var(--base-space) * 2);
  border-radius: var(--size-border);
}

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

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

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

버튼이 hover: 된 상태에서
.btn { transition: 300ms ease; }
.btn:hover { transform: scale(1.1); }
이 두가지 속성을 사용하면 자연스럽게 버튼이 확대되면서,
버튼을 클릭했을 때 event가 일어난다는 느낌을 쉽게 줄 수 있다.
CSS에 아직 익숙하지 않은 초보자가 외워두면 요긴하게 사용할 수 있을 것 같다.

2-4. Items 스타일링

먼저 각각의 item들을 감싸고있는 .items에 높이와 너비를 주었는데 반응형에 대응하기 위하여 각각 60%로 하였다. items 안에 list는 여러개의 데이터를 불러올 예정이니, 그 수가 많아졌을 때 레이아웃을 깨지 않기위해 overflow-y: auto;를 사용하여 스크롤을 만들었다.

item. item__thumbnail에도 여백을 주고 .item__thumbnail와 .item__description도 각각 스타일링 해주었다.

.items {
  width: 60%;
  height: 60%;
  list-style: none;
  padding-left: 0;
  overflow-y: auto;
}

.item {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  padding: var(--base-space);
  margin-bottom: var(--base-space);
}

.item__thumbnail {
  width: var(--size-thumnail);
  height: var(--size-thumnail);
}

.item__description {
  margin-left: var(--base-space);
  font-size: var(--font-size);
}

결과

웹페이지의 디자인이 전부 잡혔다! 이제 item의 데이터를 받아와 html을 동적으로 움직이게 하는 JavaScript으로 쇼핑몰을 완성시킬 수 있다!