오늘의 학습 목표 (중간고사 전 핵심!)
1. 2차원(행과 열) 레이아웃의 끝판왕, CSS Grid 마스터
2. 유연한 코딩을 위한 스마트한 CSS 변수(var) 활용
3. Transition & Animation으로 웹페이지에 생동감 불어넣기
지난 주에 학습한 Flexbox와 Media Query를 점검해 봅시다.
justify-content와 align-items의 차이!
그리고 모바일 화면 대응 방법까지!
스마트폰을 준비해 주세요.
Flexbox의 뼈대인 flex-direction 속성!
row, column, row-reverse, column-reverse 총 4가지죠.
이에 맞춰 오늘 4등을 차지한 학생에게 달콤한 간식을 증정합니다! 🎯
지난주 각 조에서 완성하여 제출한 티어 리스트로, 실제 티어 게임을 진행해 봅시다!
제출한 우리 조의 티어 리스트를 띄우고, 조원들과 열띤 토론을 거쳐 아이템들의 티어를 직접 배치해 보세요.
조원 전체가 앞으로 나옵니다! 데이터 저장 기능이 없으므로, 돌아가며 마우스를 잡고 자신이 소개하고 싶은 아이템 딱 1개씩만 직접 드래그하여 배치 이유를 설명합니다. (예: 만장일치 S티어, 압도적 꼴찌, 내 최애 등)
다른 조의 재미있는 결과와 Flexbox 레이아웃 구현 방식을 눈여겨보고, 공감의 리액션과 큰 박수를 보내주세요!
2차원 배치를 가능하게 하는 Grid의 열(Column)과 간격(Gap)을 직접 조작해 보세요.
속성을 변경하면 Grid 레이아웃이 실시간으로 변화합니다.
화면에 생동감을 불어넣는 트랜지션과 키프레임 애니메이션을 테스트해 보세요.
1. Transition: A에서 B로 변할 때의 부드러운 다리 역할 (마우스 오버 시 발생)
2. Animation: 내가 원할 때 스스로 움직이는 영화 (무한 반복 자동 실행 가능)
마우스를 별()에 올려 상태를 변화시켜 보세요.
마우스를 올리지 않아도 프레임에 따라 무한 반복됩니다.
"중간고사 전 마지막 실습! 나만의 관심사로 가득 찬 매거진 커버를 만들어 봅니다."
버튼을 눌러 오늘 제작할 내 매거진의 주제를 랜덤으로 결정해 봅시다.
아래 코드를 복사하여 `index.html` 파일을 만들고, 주석(`/* TODO */`)을 따라 빈칸을 채워 완성하세요.
TODO 1 ~ 3을 찾아 CSS Grid 속성을 사용해 레이아웃을 다듬습니다.TODO 4 ~ 6을 찾아 Transition & Animation을 추가하여 페이지에 생동감을 줍니다.TODO 주석을 모두 해결하면, 브라우저에서 아래와 같이 보입니다.
Grid 배치가 맞는지, 애니메이션이 작동하는지 비교해 보세요!
Vol. 1 | 2026. 04. XX | 내가 직접 큐레이션한 소식
기사에 대한 짧은 요약을 적어주세요. 이미지는 unsplash에서 가져왔습니다.
Grid를 사용하면 이렇게 카드들을 쉽게 다단으로 배치할 수 있습니다.
[1단계] 먼저 Grid Garden 게임의 모든 단계를 클리어하며 Grid의 기초 감각을 완벽히 익힙니다.
[2단계] 수업 시간에 배포한 매거진 커버 HTML 파일의 빈칸(TODO)을 채워 나만의 페이지를 완성합니다. 중간고사 전이므로 새로운 페이지를 더 만들 필요 없이 배운 내용이 잘 적용되었는지에 의의를 둡니다.
grid-template-columns를 사용하여 레이아웃이 화면 캡처(미리보기)처럼 다단으로 잘 나뉘어 있는지 확인.@keyframes를 이용해 텍스트가 흘러가고, 뱃지가 깜빡이는 효과가 잘 적용되었는지 확인.지금까지 배운 HTML과 CSS 내용들을 잘 복습하시길 바랍니다.