반응형
안녕하세요 찐망고입니다.
이번에 CSS 레이아웃 수업을 진행하면서
학생들이 개념을 눈으로 직접 보면서 익힐 수 있도록
인터랙티브 강의자료를 만들었습니다.
슬라이더로 값을 바꾸면 레이아웃이 실시간으로 바뀌는 방식이라
"이 값이 바뀌면 어떻게 되지?"를 직접 확인하면서 배울 수 있습니다.
강의자료 바로가기 https://jjinmanggo.github.io/frontend-lecture/
Frontend Lecture
📏 CSS 단위 px, em, rem, %, vw, vh 등 CSS 단위 개념을 확인해요. 퀴즈
jjinmanggo.github.io
수업 구성
CSS Grid (9챕터)
- display: grid / repeat() / fr 단위
- minmax() / auto-fill vs auto-fit
- grid-column, grid-row / grid-template-areas
- grid-auto-flow / gap / 실습 예제 (NH농협, 파트너 로고, hince)
CSS Flex (9챕터)
- display: flex / flex-direction
- justify-content / align-items / gap
- flex-grow, flex-shrink, flex-basis
- align-self / order / flex-wrap / 실습 예제 (SBS골프, 핀텔)
CSS Position (8챕터)
- static / relative / absolute / fixed / sticky
- z-index / 반응형 초기화 / 실습 예제
퀴즈 모음
강의자료 외에 복습용 퀴즈도 같이 올려두었습니다.
- HTML 기초 퀴즈 1, 2
- CSS 텍스트 & 컬러 / 폰트 / 단위 / 박스모델
- CSS 배경 / 결합선택자 / 우선순위
- CSS Grid / Flex / Position 퀴즈
각 강의자료는 슬라이더, 드롭다운, 버튼으로 직접 조작하면서 배울 수 있고
모바일에서도 볼 수 있도록 반응형으로 제작되었습니다.
퀴즈 구조 명세서나 프롬프트가 필요하신 분은 댓글 남겨주세요!
반응형
'클래스 > 수업노트' 카테고리의 다른 글
| AI와 같이 만든 HTML 기본 구조 학습 문제 (0) | 2026.05.18 |
|---|---|
| 기획의 뼈대, IA(정보구조) 완벽 정리 - 강의노트 (0) | 2026.05.04 |
| 피그마 Make AI로 10분 만에 끝내는 이커머스 와이어프레임 만들기 (1) | 2026.05.04 |
| 우리가 만드는 화면에 '그냥'은 없습니다 : 모두를 위한 기획자적 사고 (0) | 2026.05.04 |
| 폼 UI & 컴포넌트 완전 정복 - 강의노트 (0) | 2026.04.29 |