멋사 프론트엔드 스쿨 5기 - HTML & CSS 실습 총정리

📌 이력서

2023.2.27

---

📌 카드 UI

2023.3.6

---

📌 로그인 UI

2023.3.7
https://velog.io/@kurong/%EB%A9%8B%EC%82%AC-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%8A%A4%EC%BF%A8-5%EA%B8%B0-TIL-HTML-CSS-3%EC%9B%94-7%EC%9D%BC

📌 Hello 박스

---

📌 카드 UI - Grid 와 Flex

2023.3.9

그리드와 플렉스로 반응형 레이아웃 구성하기

<style>

.container {
  display: grid;
  /* grid-template-columns: repeat(4, 288px); */
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 32px 24px;
  width: min(1224px, 100% - 60px);
  margin: auto;
}

</style>

---

📌 프로필 화면

2023.3.10

---

📌 동물 Card - 반응형 grid

---

📌 햄버거 menu

2023.3.14

---

📌 두근두근 비밀 일기

2023.3.15

---

📌 미디어 쿼리

2023.3.16

---

📌 영화 목록 레이아웃

2023.3.20

---

📌 Vending machine

2023.3.21

📌 공지사항

📌 input custom