cache clear

src/styles/_test.scss

@@ -1,84 +1,84 @@
-.test {
+.test {
-  background-color: #797979;
+  background-color: #797979;
-  font: 30px sans-serif;
+  font: 30px sans-serif;
-  font-style: italic;
+  font-style: italic;
-  color: white;
+  color: white;
-}
+}
-
+
-.grid-container2 {
+.grid-container2 {
-  display: grid;
+  display: grid;
-  grid-template-columns: repeat(2, 1fr); /* 2개의 열 */
+  grid-template-columns: repeat(2, 1fr); /* 2개의 열 */
-  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
+  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
-  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
-  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
-  gap: 5px; /* 그리드 아이템 사이의 간격 */
+  gap: 5px; /* 그리드 아이템 사이의 간격 */
-}
+}
-
+
-.grid-container3 {
+.grid-container3 {
-  display: grid;
+  display: grid;
-  grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
+  grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
-  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
+  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
-  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
-  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
-  gap: 5px; /* 그리드 아이템 사이의 간격 */
+  gap: 5px; /* 그리드 아이템 사이의 간격 */
-}
+}
-
+
-.grid-container4 {
+.grid-container4 {
-  display: grid;
+  display: grid;
-  grid-template-columns: repeat(4, 1fr); /* 4개의 열 */
+  grid-template-columns: repeat(4, 1fr); /* 4개의 열 */
-  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
+  grid-template-rows: repeat(6, 30px); /* 6개의 행 */
-  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
-  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
-  gap: 5px; /* 그리드 아이템 사이의 간격 */
+  gap: 5px; /* 그리드 아이템 사이의 간격 */
-}
+}
-
+
-.grid-container5 {
+.grid-container5 {
-  display: grid;
+  display: grid;
-  grid-template-columns: repeat(5, 1fr); /* 5개의 열 */
+  grid-template-columns: repeat(5, 1fr); /* 5개의 열 */
-  grid-template-rows: repeat(5, 30px); /* 5개의 행 */
+  grid-template-rows: repeat(5, 30px); /* 5개의 행 */
-  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
+  justify-items: center; /* 각 그리드 아이템을 수평 가운데 정렬 */
-  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
+  align-items: center; /* 각 그리드 아이템을 수직 가운데 정렬 */
-  gap: 0px; /* 그리드 아이템 사이의 간격 */
+  gap: 0px; /* 그리드 아이템 사이의 간격 */
-}
+}
-
+
-.grid-item {
+.grid-item {
-  width: 100%;
+  width: 100%;
-  height: 100%;
+  height: 100%;
-  border: 1px solid black; /* 그리드 외각선 */
+  border: 1px solid black; /* 그리드 외각선 */
-  text-align: center; /* 그리드 내 가운데 정렬 */
+  text-align: center; /* 그리드 내 가운데 정렬 */
-}
+}
-
+
-.grid-item2 {
+.grid-item2 {
-  padding: 20px;
+  padding: 20px;
-  text-align: center;
+  text-align: center;
-  cursor: pointer;
+  cursor: pointer;
-  border: 1px solid #000;
+  border: 1px solid #000;
-}
+}
-
+
-.grid-item3 {
+.grid-item3 {
-  padding: 20px;
+  padding: 20px;
-  text-align: center;
+  text-align: center;
-  cursor: pointer;
+  cursor: pointer;
-  border: 1px solid #000;
+  border: 1px solid #000;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease;
-}
+}
-
+
-.grid-item.Y {
+.grid-item.Y {
-  background-color: #d3d0d0;
+  background-color: #d3d0d0;
-  color: black;
+  color: black;
-}
+}
-
+
-.grid-item.N {
+.grid-item.N {
-  background-color: white;
+  background-color: white;
-  color: black;
+  color: black;
-}
+}
-
+
-.grid-item.selected {
+.grid-item.selected {
-  background-color: #d3d0d0;
+  background-color: #d3d0d0;
-  color: black;
+  color: black;
-}
+}
-
+
-.grid-item.unselected {
+.grid-item.unselected {
-  background-color: white;
+  background-color: white;
-  color: black;
+  color: black;
-}
+}