실습 - FOOD

Grid

✔️ width: 33.33333%

.l_row {
	display: flex;
    flex-wrap: wrap;
}
.l_col {
	width: 33.3333%
}

• 내부에 있는 컨텐츠가 flex-container을 키우면 안돼서
• min-width, flex-grow(?)

레이아웃과 카드를 나누면 레이아웃은 레이아웃만 신경쓰고 카드는 카드만 신경 쓰면 된다.

➡️ 레이아웃이 완성되면 카드는 레이아웃을 신경안쓰고 카드만 완성하면 된다.

gap

• row-gap
• column-gap
  ➡️ column-gap이 들어가면 width: 33%가 안되고 더 줄어드므로 row-gap만 줌
  

그리드 시스템

미리 정해놓은 값을 사용하여 내가 원하는 width를 쉽게 줄 수 있다.

.l_col_12_12 { width: 100%; }
.l_col_11_12 { width: 91.66666667%; }
.l_col_10_12 { width: 83.33333333%; }
.l_col_9_12  { width: 75%; }
.l_col_8_12  { width: 66.66666667%; }
.l_col_7_12  { width: 58.33333333%; }
.l_col_6_12  { width: 50%; }
.l_col_5_12  { width: 41.66666667%; }
.l_col_4_12  { width: 33.33333333%; }
.l_col_3_12  { width: 25%; }
.l_col_2_12  { width: 16.66666667%; }
.l_col_1_12  { width: 8.33333333%; }

ex)
.l_col_12_12 12칸으로 나눈 것 중 12칸 --> 100%
.l_col_6_12 12칸으로 나눈 것 중 6칸 --> 50%
.l_col_1_12 12칸으로 나눈 것 중 1칸 --> 8.33%

height: 100%

.card {
	height: 100%
}

카드가 레이아웃에 꽉 들어맞도록 height: 100%를 적용해야 카드의 컨텐츠에 따라 높이가 바뀌지 않고 카드의 높이가 고정이 된다.

예를 들면 위의 사진과 같이 카드 안에 컨텐츠의 높이가 다를 때 만약 카드에 height 설정이 안되어있다면 컨텐츠 높이에 따라 카드의 높이가 다 다를 것이다.

이를 사진과 같이 같은 높이로 만들고자 height: 100%을 적용하여 카드의 높이를 레이아웃 높이에 고정시키는 것이다.

각 아이템에 색 지정

👀 어려웠던 점
하나의 카드 당 색이 다른데 color랑 background-color 가 같은 색이라 스타일을 통일 시킬 수 없음

1. 변수 사용
   ✔️ before

.hotdog {
  color: #ff6600;
}
.burger {
  color: #17a651;
}
.pizza {
  color: #0075ff;
}

.card-tag.hotdog {
  background-color: #ff6600;
}
.card-tag.burger {
  background-color: #17a651;
}
.card-tag.pizza {
  background-color: #0075ff;
}

✔️ after

:root {
	--point-color: #f60;
}

color: var(--point-color);

전역적으로 사용하는 변수
➡️ 각각 색 지정하는 게 아니라 변수에 색을 한번만 지정하고 변수를 가져다 씀

2. 클래스로 묶기

✔️ html
<section class="card type_orange">


✔️ css

:root {
	--point-color: #f60;
}

.card.type_orange {
	--point-color: orange; // 변수를 오렌지 색으로
}
.card h1 {
	color: var(--point-color); // 오렌지색 h1
}

.card.type_green {
	--point-color: green; // 변수를 초록색으로
}
.card h1 {
	color: var(--point-color); // 초록색 h1
}

.card.type_blue {
	--point-color: blue; // 변수를 파란색으로
}
.card h1 {
	color: var(--point-color); // 파란색 h1
}

⭐️⭐️ 각 아이템마다 통일된 색 적용하는 법 (지역 변수) ⭐️⭐️

• 클래스로 같은 색이 필요한 곳을 묶음
• 각 클래스마다 변수를 재정의
• 각 색을 지역 변수 개념으로 사용