[토이프로젝트] 쇼핑리스트: CSS 작성

[영수증 레이아웃 만들기]

이제 만들어진 html을 바탕으로 스타일링을 하려고 한다.

먼저 main클래스의 배경화면을 영수증처럼 해줘야하는데 어떻게 해야할지 고민이다.

background-image를 쓸까? 아니면 대충 그렇게 보이는 것을 만들까?

라고 생각해서 mdn에서 background-image를 찾았는데 새로운걸 배웠다.

Even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a background-color.If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.

즉, 네트워크가 없어지거나할 때 이미지가 로드되지 않는 경우를 대비해서 보이지 않더라도 백그라운드 컬러를 설정해둬야한다는 것이다. 그러면 로드되지 않은 이미지를 대신해 백그라운드 컬러가 들어갈 것이다.

 

근데 굳이 background-img를 쓸 필요가 없을 것 같아서 그냥 위, 아래 부분만 svg파일로 만들어서 저장하고 html에 포함했다.

 

style.css

/* Global */
:root {
  /* Color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;

  /* Font size */
  --font-large: 48px;
  --font-medium: 28px;
  --font-regular: 18px;
  --font-small: 16px;
  --font-micro: 14px;

  /* Font weight */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;

  /* Size */
  --size-border-radius: 4px;

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

/*Global Tag*/
body {
  font-family: 'Yeon Sung', cursive;
  margin: 0;
  background-color: var(--color-light-white);
  font-size: var(--font-regular);
}

/* Main */

.receipt_top {
  display: block;
  margin: auto;
  width: 500px;
}

.main {
  margin: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 500px;
}

/* Title */
.title {
  font-size: var(--font-large);
  padding: 10px;
}

/* Add Items */
.add_button {
  width: 90%;
  font-size: var(--font-medium);
  text-align: right;
  margin-bottom: 3px;
}

.add {
  width: 90%;
  font-size: var(--font-regular);
  margin-bottom: 5px;
}

.add_input {
  height: 30px;
  width: 47%;
  border-top: none;
  border-right: none;
  border-bottom: 2px solid black;
  border-left: none;
  font-size: var(--font-regular);
}

/* Item List */
.item-list {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-top: 5px;
}

.item-list button {
  width: fit-content;
  border: 2px solid black;
  border-radius: var(--size-border-radius);
  background-color: transparent;
  font-size: var(--font-regular);
  margin-bottom: 5px;
}

.item {
  display: flex;
  justify-content: space-between;
}

.item_checkbox {
  margin-right: 10px;
}

.item_name {
  width: 70%;
}

.item_price {
  width: 20%;
  text-align: right;
  margin-right: 10px;
}

/* Summary */
.horizontal-line {
  width: 90%;
  height: 2px;
  margin: 10px 0;
  background-color: black;
}

.sum {
  display: flex;
  flex-direction: column;
  width: 90%;
}

.sum_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

/* Receipt Layout */
.receipt_bottom {
  display: block;
  margin: auto;
  transform: rotate(180deg);
  width: 500px;
}