<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>최애 앨범 소개</title>
    
    <style>
        /* 여기서부터 자유롭게 코딩을 시작하세요! */
        /* (강사님이 주신 필수 색상 2개 잊지 마세요!) */

        * {
            margin: 0;
            padding: 0;
            /* 테두리 두께를 크기에 포함시키는 마법의 속성 (나중에 배웁니다!) */
            box-sizing: border-box; 
        }

        body {
            /* 0. 배경색과 기본 폰트 설정, 전체 여백 */
            padding: 20px;
        }

        /* 1. 타이포그래피 (h1, h2, .artist-name 등) 폰트, 색상, 크기, 정렬 */


        /* 2. 가사 영역 (.lyrics-box) 및 하이라이트 글자(.highlight) 강조 */


        /* 3. 목록(#charm-list) 불릿 기호 지우고 예쁘게 꾸미기 */


        /* 4. 표(#track-table) 한 줄 테두리(border-collapse), 패딩, 짝수줄 배경색(:nth-child) */


        /* 5. 버튼(.listen-btn) 꾸미고 호버(:hover) 효과 넣기 */

    </style>
</head>
<body>
    <header id="album-header">
        <p class="artist-name">아이브 (IVE)</p>
        <h1>EP 1집 'I'VE MINE'</h1>
        <p class="subtitle">다채로운 매력으로 가득 찬 플레이리스트</p>
    </header>

    <section class="lyrics-section">
        <h2>🎵 킬링 파트 가사</h2>
        <div class="lyrics-box">
            <p>숨참고 Love Dive</p>
            <p class="highlight">우리만의 자유로운 nineteen's kitsch</p>
            <p>아주 오묘한 그 빛깔로 날 빼곡히 채워</p>
        </div>
    </section>

    <section class="info-section">
        <h2>✨ 입덕 포인트</h2>
        <ul id="charm-list">
            <li>귀에 쏙쏙 박히는 트렌디한 비트와 멜로디</li>
            <li>당당하고 주체적인 '나'를 외치는 가사</li>
            <li>멤버들의 완벽한 비주얼과 퍼포먼스</li>
        </ul>
    </section>

    <section class="track-section">
        <h2>🎧 추천 플레이리스트</h2>
        <table id="track-table">
            <thead>
                <tr>
                    <th>Track</th>
                    <th>곡명</th>
                    <th>Play Time</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>01</td>
                    <td>Baddie</td>
                    <td>2:34</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Either Way</td>
                    <td>2:46</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Love Dive</td>
                    <td>2:57</td>
                </tr>
                <tr>
                    <td>04</td>
                    <td>Kitsch</td>
                    <td>3:15</td>
                </tr>
                <tr>
                    <td>05</td>
                    <td>I AM</td>
                    <td>3:03</td>
                </tr>
                <tr>
                    <td>06</td>
                    <td>After LIKE</td>
                    <td>2:56</td>
                </tr>
            </tbody>
        </table>
    </section>

    <footer id="album-footer">
        <button class="listen-btn">전곡 스밍하러 가기</button>
    </footer>
</body>
</html>

🎨🚀

CSS 스타일링 & GitHub 배포

4주차: 내 웹사이트에 스킨 입히고 세상에 공개하기

오늘의 핵심 미션

1. HTML Form 스피드 퀴즈 (feat. 럭키 세븐 🍬)

2. 조별 최애 앨범 플레이리스트 CSS 디자인하기

3. GitHub을 이용해 내 코드를 인터넷 세상에 배포하기!

Step 1. 뇌풀기 Quiz 타임 🧠

지난주에 배운 HTML Form 태그들, 얼마나 기억하고 있나요?

QuizN 스피드 퀴즈

HTML Form 퀴즈

input, select, radio, checkbox 등
지난주 실습했던 폼 태그들을 복습합니다. 스마트폰을 꺼내주세요!

오늘의 시상: 럭키 세븐 (7등)

오늘은 1등이 주인공이 아닙니다!
행운의 7등을 한 학생에게 특별 간식(사탕)을 쏩니다!
의도치 않은 등수를 노려보세요! 🍀

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

조별 패스트오더 폼 발표 가이드

발표 순서 정하기 오늘 학교까지 오는데 걸린 시간이 가장 짧은 사람부터 시작해서 시계 방향으로 돌아갑니다. (기숙사생 우대!)
무엇을 발표하나요? 각자 만들어 온 '학교 근처 맛집 패스트오더 폼'을 화면에 띄우고 서로 구경합니다. 어떤 메뉴와 태그들을 썼는지 가볍게 소개해주세요.

👑

우리 조 대표 뽑기

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

🤯

선택 장애 유발 상

옵션이 너무 많아서 고르다 지칠 정도! 체크박스와 라디오 버튼을 가장 집요하게 많이 쓴 폼

💸

사장님 마인드 상

메뉴판의 가격이 가장 사악하거나, 상상도 못한 기발하고 재미있는 메뉴를 팔고 있는 폼

🤤

군침이 싹 도는 상

당장 주문 버튼을 누르고 싶을 만큼, 폼의 구성과 텍스트 설명이 가장 먹음직스러운 폼

Step 3. 조별 CSS 플레이리스트 미션

필수 제약 조건

배운 4가지 CSS 속성 중 최소 3개 이상 필수 적용!

단순히 뼈대 코드만 복사해서 제출하면 안 됩니다! 🙅‍♂️
우리 조만의 테마를 정하고, 온라인 수업에서 배운 아래 속성들을 활용해 화려하게 꾸며보세요.

글자색

color

배경 스타일

background

표 & 테두리

table / border

목록 기호

list-style

텍스트 수정 타임어택: 5분!

"오늘 과제의 핵심은 HTML 내용(가수 이름)이 아니라
우리가 뽑은 테마와 색상을 어떻게 CSS로 구현해 내는가 입니다."

🔥
5분 안에 조별 플레이리스트에 들어갈 곡명과 가사를 합의하세요.
⚠️
합의를 못 한 조는 강제적으로 제공된 예시 코드(아이브 등)를 한 글자도 바꾸지 못하고 그대로 CSS 디자인을 시작해야 합니다!

조별 '최애 앨범' 대통합 4가지 솔루션

1. 믹스테잎 (가장 추천! ⭐)

모두의 취향을 하나씩 다 넣어버리세요!

앨범명: 1조 출근길 믹스테잎
트랙: 1번(A최애), 2번(B최애)...
가사: 각자 최애곡 가사 한 줄씩 섞기! (프랑켄슈타인 가사)

2. 밈(Meme) / 애니메이션

음악 취향이 다르면 B급 감성으로 대동단결!

뽀로로 주제가, 마라탕후루, 티라미수 케익 등
나중에 진지한 CSS 테마와 섞이면 엄청난 시너지 효과!

3. "승자 독식" 가위바위보

가장 깔끔하고 빠른 방법입니다.

가위바위보 이긴 사람 최애 가수로 싹 통일.
진 사람은 오늘 하루만큼은 그 가수의 열혈 팬에 빙의해서 디자인 돕기!

4. "디폴트 강제 유지"

5분 타임오버 시 자동 적용됩니다.

기본 뼈대 코드를 한 글자도 바꾸지 못합니다.
오로지 CSS 디자인에만 집중!

Step 3-1. 운명의 제비뽑기 🎲

미션 룰 (조장 등판!)

1
테마 뽑기: 통에서 2개를 뽑고 1개를 선택합니다.
2
컬러 뽑기: 2개를 뽑아 해당 색상(HEX)을 디자인 포인트 컬러로 무조건 사용하세요!

교수님의 조언

"선생님, 빈티지 테마인데 네온 그린(#39FF14)을 뽑았어요 어떡하죠?!" 👉 버튼에 마우스를 올렸을 때(:hover) 그림자(box-shadow)로 살짝 줘보는 건 어떨까요? 클라이언트의 억지(?) 요구사항을 우아하게 풀어내는 게 진짜 실력입니다!

🎟️ 16가지 디자인 테마 리스트 (어떤 테마가 걸릴지 모릅니다!)

🕶 사이버펑크
어두운 배경, 네온 글씨

🫧 Y2K 레트로
픽셀 폰트, 통통 튀는 색

🍏 미니멀리즘
넓은 여백, 극강 깔끔함

☕️ 빈티지 앤틱
낡은 종이, 명조체

🌸 다꾸 (다이어리)
파스텔, 손글씨, 둥근버튼

📰 클래식 매거진
흑백 대비, 굵은 제목

🦇 다크 고딕
칠흑 배경, 핏빛 포인트

🌿 보태니컬
그린/어스 톤, 여유로움

🪩 네온 클럽
강렬한 보색, 빛나는 버튼

👾 8비트 오락실
굵은 테두리, 쨍한 원색

🌌 몽환적인 우주
밤하늘 색, 반짝임 텍스트

💖 하이틴 키치
핫핑크, 장난감 같은 UI

⚪️ 흑백 모노크롬
극단적 대비, 무채색만

🪞 글래스모피즘
반투명 유리, 블러 효과

🕵️‍♂️ 필름 느와르
거친 질감, 어두운 그림자

💻 커맨드 라인
까만 바탕, 터미널 감성

예시: 아이브(IVE) 플레이리스트 변신

CSS 디자인 실습을 위한 뼈대 코드를 복사해서 나만의 스타일을 입혀보세요!

style.css (핑크 테마 예시)

/* 0. 배경색과 전체 폰트 색상 */
body {
  background: linear-gradient(135deg, #ff9a9e, #fecfef);
  color: white;
}
/* 2. 가사 영역 꾸미기 */
.lyrics-box {
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
}
.highlight {
  color: #db2777; /* 핫핑크 */
  background: white;
}
/* 4. 표(table) 꾸미기 */
#track-table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
/* 5. 버튼 꾸미기 */
.listen-btn {
  background: white;
  color: #ec4899;
  border-radius: 50px;
}

브라우저 시뮬레이션

아이브 (IVE)

EP 1집 'I'VE MINE'

다채로운 매력으로 가득 찬 플레이리스트

킬링 파트 가사

숨참고 Love Dive

우리만의 자유로운 nineteen's kitsch

아주 오묘한 그 빛깔로 날 빼곡히 채워

입덕 포인트

귀에 쏙쏙 박히는 트렌디한 비트와 멜로디
당당하고 주체적인 '나'를 외치는 가사
멤버들의 완벽한 비주얼과 퍼포먼스

Track	곡명	Time
01	Baddie	2:34
02	Either Way	2:46
03	Love Dive	2:57

Step 4. 내 코드를 전 세계로 🌍

"카톡으로 HTML 파일을 보낼 순 없잖아요?"

여러분이 영혼을 갈아 넣은 플레이리스트, 지금은 내 컴퓨터(로컬)에서만 볼 수 있습니다.
친구들에게 스마트폰으로 내 웹사이트를 보여주려면 '서버'에 올려야 합니다.

내 PC

GitHub Pages

스마트폰 접속!

GitHub Pages 배포 프로세스 3단계

1. 저장소 생성

GitHub 로그인 후
my-playlist 이름으로
새 Repository를 만듭니다.

2. 파일 업로드

명령어 대신 드래그 앤 드롭!
Add file -> Upload files 로
방금 만든 코드를 올립니다.

3. Pages 활성화

Settings -> Pages 메뉴에서
Source를 main 브랜치로 변경!
1~2분 뒤 URL이 생성됩니다.

"자, 이제 생성된 링크를 단톡방이나 디스코드에 공유해보세요!"

🚀 Step 5. 오늘의 개별 과제

제출 기한: 2026.03.26 ~ 04.02(23:59)

[4주차] 조별 플레이리스트 CSS 스타일링 및 GitHub 배포

수강생 여러분, 이번 주 대면 수업에서 각 조별로 기획한 테마와 곡 리스트(HTML 뼈대)에 각자 CSS 스타일링을 적용하여 화려한 플레이리스트를 완성하는 미션입니다. 또한, 완성된 결과물을 서버(GitHub Pages)에 배포하는 과정까지가 핵심입니다!

진행 가이드라인 및 필수사항

테마 적용: 수업 시간 5분 타임어택으로 합의한 테마, 곡명, 가사 적용 (합의 실패 조는 아이브 예시 코드 유지)
CSS 3개 이상 필수: color, background, table/border, list-style 중 3가지 이상 필수 사용
GitHub 배포: 저장소 생성 후 Pages 기능 활성화하여 URL 확보

제출 방법 (Markdown ➡️ PDF)

마크다운(Markdown) 작성 후 반드시 PDF로 변환하여 파일 제출 (최대 3개)
필수 포함: ① 작성 코드(``` 블록) ② 브라우저 실행 스크린샷 1장 이상 ③ GitHub Pages 결과물 링크
MarkText 기준: ≡ -> File -> Export -> PDF

AI 활용 지침 & 참고 사항

🤖 AI 활용 지침: Gemini, ChatGPT 활용 가능. 단, 디자인 아이디어나 코드 작성에 도움을 받은 경우 문서 하단에 활용 내용 명시 및 대화 내역 전체 캡처 첨부 필수! (출처 미기재/단순 복사 미제출 처리)
🎨 우아한 문제 해결: 빈티지 테마인데 네온 그린(#39FF14)을 뽑았나요? 당황하지 말고 버튼 :hover 시 box-shadow로 포인트를 주는 등 제약 조건을 우아하게 풀어내보세요!
⌨️ 코드 정렬 팁: 들여쓰기(Tab)에 유의하세요. VS Code 단축키 Shift+Alt+F (Mac: Shift+Option+F) 사용을 적극 권장합니다.

다음 주, 레이아웃과 반응형 웹의 세계로!

CSS 레이아웃 마스터

Box Model & Block / Inline 요소
Float, Position, Object-fit
궁극의 배치 무기: Flexbox

반응형 & 협업

미디어 쿼리(Media Query) & 중단점
PC, 태블릿, 모바일 화면 대응하기
GitHub 협업 기초 (함께 코드 짜기!)

본격적인 프론트엔드 실전 돌입!

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