[TIL] 2022.01.27

오늘 한 일

• 웹 프론트엔드 공부
  Omnifood Project - Setup and Desktop Version

---

배운 것

• 가격 카드 우측 상단에 리본 만들어보기
  ::after overflow: hidden; position: absolute; transform: rotate(45%);

.pricing-plan--complete {
  background-color: #fdf2e9;
  padding: 4.8rem;
  position: relative;

  overflow: hidden;	/* 튀어나간 부분을 보이지 않게 */
}

.pricing-plan--complete::after {
  content: "Best value";
  position: absolute;
  top: 6%;
  right: -18%;

  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  background-color: #ffd43b;
  padding: 0.8rem 8rem;
  transform: rotate(45deg);
}

• :not() 사용하여 grid의 last-child를 제외한 나머지 열에 margin 넣기

.grid {
  display: grid;
  row-gap: 9.6rem;
  column-gap: 6.4rem;
  
  /* margin-bottom: 9.6rem; */
}

/* .grid:last-child {
  margin-bottom: 0;
} */

.grid:not(:last-child) {
  margin-bottom: 9.6rem;
}

실습 결과 캡쳐

---

내일 할 일

• 웹 프론트엔드 공부
  Omnifood Project - Setup and Desktop Version 마무리