<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>우리 조 버킷리스트 아트 월</title>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Nanum Pen Script', cursive;
            background-color: #d4b895;
            background-image: url('https://www.transparenttextures.com/patterns/cork-board.png');
            background-attachment: fixed;
            text-align: center;
            padding-bottom: 100px;
        }
        header {
            margin: 60px auto 40px auto;
            background-color: rgba(255, 255, 255, 0.9);
            display: inline-block;
            padding: 20px 40px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            position: sticky;
            top: 20px;
            z-index: 100;
        }
        h1 { color: #333; font-size: 2.8rem; margin-bottom: 10px; }
        .clearfix::after { content: ""; display: block; clear: both; }
        .gallery-container { width: 90%; max-width: 1200px; margin: 0 auto; }
        
        /* 공통 카드 스타일 */
        .card {
            float: left; width: 31.33%; margin: 1%;
            background: linear-gradient(135deg, #fffcf0 0%, #fff3b0 100%);
            padding: 15px 15px 35px 15px;
            border-radius: 2px 2px 15px 5px;
            box-shadow: 3px 5px 15px rgba(0,0,0,0.15);
            position: relative; /* 자식인 badge의 기준점 */
            transform: rotate(-3deg);
            transition: transform 0.3s ease, z-index 0s;
        }
        .card:hover {
            transform: scale(1.05) rotate(0deg);
            z-index: 10;
        }
        .card img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 15px; }
        .card h2 { color: #2c3e50; font-size: 1.8rem; margin-bottom: 10px; }
        .card p { color: #444; font-size: 1.3rem; text-align: left; line-height: 1.5; }
    </style>
</head>
<body>
    <header>
        <h1>🏖️ 2026 버킷리스트 아트 월 🏖️</h1>
        <p style="font-size: 1.5rem; color: #555;">우리 조의 꿈들을 코르크 보드에 붙였습니다!</p>
    </header>
    <main class="gallery-container clearfix">
        <!-- 팀원들의 코드가 들어갈 자리입니다 -->

    </main>
</body>
</html>

        <!-- 팀원 카드 시작 -->
        <div class="card">
            <!-- 개인별로 배지 추가하기 (absolute 실습) -->
            <!-- <div class="badge" style="position: absolute; ...">Hot🔥</div> -->
            
            <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=500&auto=format&fit=crop&q=60" alt="바다 풍경">
            <h2>✨ 000의 꿈</h2>
            <p>🌊 1. 바다 가서 서핑 배우기</p>
            <p>💻 2. 첫 웹사이트 배포하기</p>
            
            <!-- 개인별로 비밀 메모 추가하기 (visibility 실습) -->
            <!-- <div class="secret-memo" style="visibility: hidden;">🤫 TMI: 수영 못함</div> -->
        </div>
        <!-- 팀원 카드 끝 -->

📦✨

CSS Layout & 팀 협업

5주차: 3차원으로 띄우고, 깃허브로 하나 되기

오늘의 핵심 미션

1. 네모 상자들의 마법, 박스 모델(Box Model) 정복

2. 명령어 없이 클릭만으로 깃허브(GitHub) 협업 성공하기

3. 조원들과 함께 '2026 버킷리스트 아트 월' 완성하기

Step 1. 뇌풀기 Quiz 타임 🧠

지난 플립러닝 영상에서 배운 Layout 개념들을 점검합니다.

QuizN 스피드 퀴즈

박스 모델 & 포지션

margin, padding, border부터
float, position, display까지!
스마트폰을 꺼내고 준비해주세요!

오늘의 시상: 행운의 6등!

박스 모델은 육면체(6면체)죠! 📦
오늘은 1등이 아니라, 끝까지 집중해서
행운의 6등을 차지한 학생에게 특별 간식을 증정합니다! 🍀

Step 2. 지난주 과제 공유 & 우수작 선정

조별 과제 공유 가이드

발표 순서 정하기 음악이라는 테마에 맞게, 가장 최근에 노래를 부른 사람 (샤워 중 흥얼거림, 길거리 포함!)부터 시계 방향으로 돌아갑니다.
무엇을 발표하나요? 자신이 직접 CSS 스타일링을 적용한 '4주차 플레이리스트' 화면을 띄우고, 어떤 테마와 컬러를 적용했는지 조원들에게 자랑합니다.

👑

우리 조 대표 뽑기

각 조에서 하단의 기준 중 하나에 가장 잘 맞는 1명을 선정해 반 전체에 공유합니다!
(발표가 끝날 때마다 큰 박수 필수 👏)

🎨

색감 천재 상

당장 핀터레스트에 올려도 될 만큼, 뽑았던 테마에 찰떡같이 어울리는 색상과 분위기를 완벽하게 뽑아낸 사람

🤯

은은한 광기 상

도대체 테마를 어떻게 해석한 건지 모르겠지만, 알 수 없는 광기(?)와 파격적인 디자인으로 시선을 강탈한 사람

💻

코딩 깎는 노인 상

안 배운 CSS 속성까지 구글링해 오고, 픽셀 단위로 집요하게 코드를 깎아내며 디자인에 진심이었던 사람

Step 3. 실습 전 핵심 개념 장착하기

3-1. 인터랙티브 박스 모델(Box Model)

박스 조종기

Content Width 150px

Padding (안쪽 여백) 20px

Border (테두리 두께) 10px

Margin (바깥 여백) 30px

box-sizing: border-box; 적용하기

실제 화면에서 차지하는 총 너비:
210px

브라우저 화면

Margin

Border

Padding

Content 150 x 150

3-2. 마법의 Position 제어기

속성 변경

static (기본) relative absolute fixed sticky

top20px

left20px

부모 박스에 relative 적용하기

static: 가장 기본적인 상태입니다. top, left 등 좌표를 주어도 꼼짝하지 않습니다.

스크롤 영역 (Scroll down 👇)

일반 문서 흐름 (Normal Flow) 요소 1

부모 박스 (static)

🎯 Target

일반 문서 흐름 (Normal Flow) 요소 2

일반 문서 흐름 (Normal Flow) 요소 3

일반 문서 흐름 (Normal Flow) 요소 4

Step 4. 에러 없는 깃허브 조립식 협업 🧩

"동시에 수정하면 코드가 날아갑니다! 철저한 역할 분담이 핵심!"

팀장의 기초 공사

저장소 생성: bucket-list Repo 생성
팀원 초대: Settings ➡️ Collaborators ➡️ Add people
초대 수락(중요): 이메일/알림 🔔 수락!
뼈대 세우기: index.html (뼈대) 업로드

팀원의 부품 업로드

내 컴퓨터에서 내 카드 코드만 작성
내 이름으로 파일 저장 (ex: minji.html)
팀장 Repo에 Upload files 버튼 클릭
파일과 이미지를 드래그앤드롭!

🚨 주의: 깃허브 웹에서 뼈대 파일(index.html) 동시 수정 절대 금지!

팀장의 조립 & 배포

팀장 혼자 index.html Edit(✏️) 클릭
팀원들이 올린 코드를 복사해서 조립
Commit changes 눌러 1차 저장
Settings ➡️ Pages ➡️ main 브랜치로 최종 배포!

Step 5. 조별 미션: 디지털 아트 월 만들기 🖼️

"우리의 2026년 버킷리스트를 코르크 보드 위에 힙하게 붙여봅시다!"

팀장용 뼈대 코드 (index.html)

팀장은 아래 코드를 복사하여 레포지토리의 기본 틀을 잡습니다.

팀원용 카드 부품 (card.html)

팀원은 본인 컴퓨터에서 아래 부품 코드를 수정하여 업로드합니다.

🎨 CSS 디자인 필수 가이드

카드 나란히 배치: float: left; 와 margin을 이용해 배치합니다.
부모 높이 붕괴 방지: 팀장 코드의 <main> 에 있는 clearfix 가 에러를 막아줍니다.
힙한 포스트잇 느낌: transform: rotate(-3deg); 로 살짝 삐뚤게 붙인 효과를 주었습니다.

브라우저 렌더링 미리보기

🏖️ 2026 버킷리스트 아트 월 🏖️

우리 조의 꿈들을 코르크 보드에 붙였습니다!

Hot🔥

✨ 지민의 꿈

🌊 1. 바다 가서 서핑 배우기

💻 2. 첫 웹사이트 배포하기

🤫 TMI: 사실 수영 아예 못함

D-30 ✈️

✨ 민수의 꿈

🎒 1. 유럽 배낭여행 30일 완주

🏋️ 2. 바디프로필 찍기

🤫 TMI: 헬스장 한달째 기부 중

Pick! 🎯

✨ 지원의 꿈

📸 1. 동기들과 우정 스냅 촬영

🚗 2. 운전면허 실기 합격하기

🤫 TMI: 운전면허 2번 떨어짐

Step 5-1. 예시 코드 CSS 완벽 해부

복사한 뼈대 코드 안에 5주차 핵심 이론이 어떻게 녹아있는지 확인해봅시다!

마법의 배경 고정

body {
background-attachment: fixed;
}

코르크 보드 이미지가 스크롤을 내려도 화면에 못 박힌 듯 고정되어 입체적인 스크롤 효과를 줍니다.

찰싹 붙는 제목

header {
position: sticky;
top: 20px;
}

제목 박스가 화면 상단 20px 위치에 닿는 순간 fixed처럼 끈적하게 따라옵니다.

가로 배치와 방파제

.card { float: left; }
.clearfix::after { clear: both; }

카드를 float으로 가로 나열하고, 부모 높이가 0이 되는 것을 clearfix로 방어합니다.

포스트잇 애니메이션

.card:hover {
transform: scale(1.05) rotate(0deg);
z-index: 10;
}

마우스를 올리면 똑바로 서며 커집니다. z-index를 높여 주변 카드를 가리고 위로 올라옵니다.

🚀 Step 6. 오늘의 개별 과제

기한: 다음 주 수업 전까지 (집에서 각자 진행!)

"내 포스트잇에 입체감과 디테일 더하기"

수업 시간에 조원들과 뼈대를 합치는 실습은 끝났습니다! 이제 조모임 할 필요 없이, 집에서 각자 자신의 카드 코드만 업그레이드하여 제출하는 개인 과제입니다.

2가지 필수 구현

1. 배지
position: absolute로 모서리에 스티커(Hot🔥 등) 띄우기 (부모는 relative!)
2. 메모
카드 맨 아래에 visibility: hidden으로 TMI 메모를 숨기고 hover 시 나타나게 하기

과제 제출 방법

본인이 작성한 카드 1개 분량 코드만 마크다운 복사
스크린샷 2장: 배지 띄운 캡처 + hover 메모 캡처
마크다운 작성 후 PDF로 내보내어 제출!

주의사항

팀장이 취합한 최종 결과물 링크를 과제에 제출해도 좋고, 본인 컴퓨터(VS Code)에서 라이브 서버로 띄워 캡처해도 무방합니다. 중요한 것은 여러분 개인의 코드 구현력입니다. AI(ChatGPT 등)를 활용하여 코드를 짰다면, 반드시 질의응답 내역을 캡처하여 문서 하단에 첨부하세요.

다음 주, 궁극의 배치 무기와 반응형 웹

Flexbox 마스터

Float을 대체하는 마법의 정렬
가로/세로 정렬 1초 컷
Flexbox Froggy 게임 실습!

반응형 웹 디자인

모바일 시대의 필수 기술
미디어 쿼리(Media Query) 사용법
PC, 태블릿, 모바일에 맞게 변신!

프론트엔드의 꽃, 레이아웃의 완성!

다음 주 플립러닝 영상에서 만나요! 고생하셨습니다. 👏