<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>교육 플랫폼 실무 샘플</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;background:#fff;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#ff6b00;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.visual{height:560px;}
.swiper-slide{height:560px;background:#fff4ec;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#ff6b00;font-weight:900;}
.visual_text h1{font-size:56px;line-height:1.2;margin:20px 0;}
.visual_text p{font-size:18px;line-height:1.7;color:#555;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#ff6b00;color:#fff;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_box{width:45%;height:360px;background:linear-gradient(135deg,#ff6b00,#ffb36b);border-radius:30px;color:white;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:900;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:45px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.tab_menu{display:flex;justify-content:center;gap:15px;margin-bottom:40px;flex-wrap:wrap;}
.tab_btn{padding:13px 26px;border:1px solid #ff6b00;background:#fff;color:#ff6b00;border-radius:30px;font-weight:900;cursor:pointer;}
.tab_btn.active{background:#ff6b00;color:#fff;}
.lecture_wrap{display:flex;gap:30px;}
.lecture_card{width:calc(100%/3);border:1px solid #eee;border-radius:24px;overflow:hidden;background:#fff;transition:.3s;}
.lecture_card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.lecture_img{height:230px;background:#ddd;}
.lecture_img img{width:100%;height:100%;object-fit:cover;display:block;}
.lecture_text{padding:30px;}
.label{display:inline-block;padding:7px 12px;background:#fff4ec;color:#ff6b00;border-radius:30px;font-size:13px;font-weight:900;margin-bottom:15px;}
.lecture_text h3{font-size:23px;margin-bottom:15px;}
.lecture_text p{font-size:15px;line-height:1.7;color:#666;margin-bottom:20px;}
.price{font-size:22px;font-weight:900;color:#ff6b00;margin-bottom:20px;}
.apply_btn{width:100%;height:48px;border:0;border-radius:8px;background:#111;color:#fff;font-weight:900;cursor:pointer;}
.review{background:#111;color:white;padding:90px 0;}
.review_box{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.review_text{width:45%;}
.review_text span{color:#ffb36b;font-weight:900;}
.review_text h2{font-size:40px;line-height:1.3;margin:20px 0;}
.review_text p{color:#ccc;line-height:1.8;}
.review_cards{width:55%;display:flex;gap:20px;}
.review_card{width:50%;background:#222;border-radius:22px;padding:35px;}
.review_card h3{font-size:22px;color:#ffb36b;margin-bottom:15px;}
.review_card p{color:#ddd;line-height:1.7;font-size:15px;}
.footer{height:100px;background:#f5f5f5;color:#777;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:380px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;margin-bottom:20px;}
.modal input{width:100%;height:48px;margin-bottom:12px;padding:0 15px;border:1px solid #ddd;}
.close_btn{width:100%;height:48px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;margin-top:10px;}
@media(max-width:768px){
.header,.header .wrap{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:white;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}
.visual,.swiper-slide{height:auto;}
.visual .wrap{flex-direction:column;padding:70px 20px;}
.visual_text,.visual_box{width:100%;}
.visual_text h1{font-size:36px;}
.visual_box{height:260px;font-size:32px;}
.lecture_wrap{flex-direction:column;}
.lecture_card{width:100%;}
.review_box{flex-direction:column;}
.review_text,.review_cards{width:100%;}
.review_cards{flex-direction:column;}
.review_card{width:100%;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">LEARN AI</div>
<nav class="menu">
<a href="#">Course</a>
<a href="#">Mentor</a>
<a href="#">Review</a>
<a href="#">Apply</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>ONLINE CLASS PLATFORM</span>
<h1>실무 중심으로 배우는<br>AI & 웹 디자인 강의</h1>
<p>기초부터 프로젝트 제작까지 단계별로 학습하는 실무형 교육 플랫폼입니다.</p>
<a class="btn open_btn">강의 신청하기</a>
</div>
<div class="visual_box">CLASS</div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>PROJECT BASED LEARNING</span>
<h1>보고 끝나는 강의가 아닌<br>직접 만드는 수업</h1>
<p>Figma 디자인부터 HTML/CSS/JavaScript 구현까지 연결해서 배웁니다.</p>
<a class="btn open_btn">상담 신청하기</a>
</div>
<div class="visual_box">PROJECT</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Popular Courses</h2>
<p>지금 가장 많이 듣는 실무형 강의입니다.</p>
</div>
<div class="tab_menu">
<button class="tab_btn active">전체</button>
<button class="tab_btn">Design</button>
<button class="tab_btn">Publishing</button>
<button class="tab_btn">JavaScript</button>
</div>
<div class="lecture_wrap">
<div class="lecture_card" data-category="Design">
<div class="lecture_img">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3" alt="">
</div>
<div class="lecture_text">
<span class="label">Design</span>
<h3>Figma UI 디자인</h3>
<p>화면 구성, 컴포넌트, 스타일가이드를 실무형 방식으로 학습합니다.</p>
<div class="price">₩49,000</div>
<button class="apply_btn open_btn">신청하기</button>
</div>
</div>
<div class="lecture_card" data-category="Publishing">
<div class="lecture_img">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="">
</div>
<div class="lecture_text">
<span class="label">Publishing</span>
<h3>HTML/CSS 퍼블리싱</h3>
<p>웹페이지 구조와 반응형 레이아웃을 직접 구현하며 익힙니다.</p>
<div class="price">₩59,000</div>
<button class="apply_btn open_btn">신청하기</button>
</div>
</div>
<div class="lecture_card" data-category="JavaScript">
<div class="lecture_img">
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c" alt="">
</div>
<div class="lecture_text">
<span class="label">JavaScript</span>
<h3>JS 인터랙션 기초</h3>
<p>클릭 이벤트, classList, value, localStorage를 단계별로 배웁니다.</p>
<div class="price">₩69,000</div>
<button class="apply_btn open_btn">신청하기</button>
</div>
</div>
</div>
</div>
</section>
<section class="review">
<div class="wrap">
<div class="review_box">
<div class="review_text">
<span>STUDENT REVIEW</span>
<h2>배우고 끝나는 강의가 아닌<br>직접 만드는 수업</h2>
<p>실습 중심 커리큘럼으로 디자인부터 퍼블리싱, JavaScript까지 연결해서 학습합니다.</p>
</div>
<div class="review_cards">
<div class="review_card">
<h3>“구조가 보이기 시작했어요.”</h3>
<p>막연했던 HTML/CSS 흐름이 프로젝트를 만들면서 이해됐습니다.</p>
</div>
<div class="review_card">
<h3>“따라 만들기 좋아요.”</h3>
<p>기초부터 실습까지 단계별로 구성되어 처음 배우는 사람도 도전할 수 있습니다.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. LEARN AI. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>강의 신청</h3>
<input type="text" placeholder="이름">
<input type="text" placeholder="연락처">
<input type="text" placeholder="희망 강의">
<button class="close_btn">닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.visual', {
loop:true,
autoplay:{
delay:3000,
disableOnInteraction:false,
},
pagination:{
el:'.swiper-pagination',
clickable:true,
}
});
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const tabBtns = document.querySelectorAll('.tab_btn');
const lectureCards = document.querySelectorAll('.lecture_card');
for(let i = 0; i < tabBtns.length; i++){
tabBtns[i].addEventListener('click', () => {
for(let j = 0; j < tabBtns.length; j++){
tabBtns[j].classList.remove('active');
}
tabBtns[i].classList.add('active');
const category = tabBtns[i].innerText;
for(let k = 0; k < lectureCards.length; k++){
if(category === '전체'){
lectureCards[k].style.display = 'block';
}else if(lectureCards[k].dataset.category === category){
lectureCards[k].style.display = 'block';
}else{
lectureCards[k].style.display = 'none';
}
}
});
}
const openBtns = document.querySelectorAll('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
for(let i = 0; i < openBtns.length; i++){
openBtns[i].addEventListener('click', () => {
modalWrap.classList.add('active');
});
}
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>교육 플랫폼 실무 샘플</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;background:#fff;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#ff6b00;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.visual{height:560px;}
.swiper-slide{height:560px;background:#fff4ec;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#ff6b00;font-weight:900;}
.visual_text h1{font-size:56px;line-height:1.2;margin:20px 0;}
.visual_text p{font-size:18px;line-height:1.7;color:#555;margin-bottom:35px;}
.btn{display:inline-block;padding:16px 34px;background:#ff6b00;color:#fff;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_box{width:45%;height:360px;background:linear-gradient(135deg,#ff6b00,#ffb36b);border-radius:30px;color:white;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:900;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:45px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.tab_menu{display:flex;justify-content:center;gap:15px;margin-bottom:40px;flex-wrap:wrap;}
.tab_btn{padding:13px 26px;border:1px solid #ff6b00;background:#fff;color:#ff6b00;border-radius:30px;font-weight:900;cursor:pointer;}
.tab_btn.active{background:#ff6b00;color:#fff;}
.lecture_wrap{display:flex;gap:30px;}
.lecture_card{width:calc(100%/3);border:1px solid #eee;border-radius:24px;overflow:hidden;background:#fff;transition:.3s;}
.lecture_card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.lecture_img{height:230px;background:#ddd;}
.lecture_img img{width:100%;height:100%;object-fit:cover;display:block;}
.lecture_text{padding:30px;}
.label{display:inline-block;padding:7px 12px;background:#fff4ec;color:#ff6b00;border-radius:30px;font-size:13px;font-weight:900;margin-bottom:15px;}
.lecture_text h3{font-size:23px;margin-bottom:15px;}
.lecture_text p{font-size:15px;line-height:1.7;color:#666;margin-bottom:20px;}
.price{font-size:22px;font-weight:900;color:#ff6b00;margin-bottom:20px;}
.apply_btn{width:100%;height:48px;border:0;border-radius:8px;background:#111;color:#fff;font-weight:900;cursor:pointer;}
.review{background:#111;color:white;padding:90px 0;}
.review_box{display:flex;justify-content:space-between;align-items:center;gap:50px;}
.review_text{width:45%;}
.review_text span{color:#ffb36b;font-weight:900;}
.review_text h2{font-size:40px;line-height:1.3;margin:20px 0;}
.review_text p{color:#ccc;line-height:1.8;}
.review_cards{width:55%;display:flex;gap:20px;}
.review_card{width:50%;background:#222;border-radius:22px;padding:35px;}
.review_card h3{font-size:22px;color:#ffb36b;margin-bottom:15px;}
.review_card p{color:#ddd;line-height:1.7;font-size:15px;}
.footer{height:100px;background:#f5f5f5;color:#777;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:380px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;margin-bottom:20px;}
.modal input{width:100%;height:48px;margin-bottom:12px;padding:0 15px;border:1px solid #ddd;}
.close_btn{width:100%;height:48px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;margin-top:10px;}
@media(max-width:768px){
.header,.header .wrap{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:white;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}
.visual,.swiper-slide{height:auto;}
.visual .wrap{flex-direction:column;padding:70px 20px;}
.visual_text,.visual_box{width:100%;}
.visual_text h1{font-size:36px;}
.visual_box{height:260px;font-size:32px;}
.lecture_wrap{flex-direction:column;}
.lecture_card{width:100%;}
.review_box{flex-direction:column;}
.review_text,.review_cards{width:100%;}
.review_cards{flex-direction:column;}
.review_card{width:100%;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">LEARN AI</div>
<nav class="menu">
<a href="#">Course</a>
<a href="#">Mentor</a>
<a href="#">Review</a>
<a href="#">Apply</a>
</nav>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>ONLINE CLASS PLATFORM</span>
<h1>실무 중심으로 배우는<br>AI & 웹 디자인 강의</h1>
<p>기초부터 프로젝트 제작까지 단계별로 학습하는 실무형 교육 플랫폼입니다.</p>
<a class="btn open_btn">강의 신청하기</a>
</div>
<div class="visual_box">CLASS</div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>PROJECT BASED LEARNING</span>
<h1>보고 끝나는 강의가 아닌<br>직접 만드는 수업</h1>
<p>Figma 디자인부터 HTML/CSS/JavaScript 구현까지 연결해서 배웁니다.</p>
<a class="btn open_btn">상담 신청하기</a>
</div>
<div class="visual_box">PROJECT</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Popular Courses</h2>
<p>지금 가장 많이 듣는 실무형 강의입니다.</p>
</div>
<div class="tab_menu">
<button class="tab_btn active">전체</button>
<button class="tab_btn">Design</button>
<button class="tab_btn">Publishing</button>
<button class="tab_btn">JavaScript</button>
</div>
<div class="lecture_wrap">
<div class="lecture_card" data-category="Design">
<div class="lecture_img">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3" alt="">
</div>
<div class="lecture_text">
<span class="label">Design</span>
<h3>Figma UI 디자인</h3>
<p>화면 구성, 컴포넌트, 스타일가이드를 실무형 방식으로 학습합니다.</p>
<div class="price">₩49,000</div>
<button class="apply_btn open_btn">신청하기</button>
</div>
</div>
<div class="lecture_card" data-category="Publishing">
<div class="lecture_img">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="">
</div>
<div class="lecture_text">
<span class="label">Publishing</span>
<h3>HTML/CSS 퍼블리싱</h3>
<p>웹페이지 구조와 반응형 레이아웃을 직접 구현하며 익힙니다.</p>
<div class="price">₩59,000</div>
<button class="apply_btn open_btn">신청하기</button>
</div>
</div>
<div class="lecture_card" data-category="JavaScript">
<div class="lecture_img">
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c" alt="">
</div>
<div class="lecture_text">
<span class="label">JavaScript</span>
<h3>JS 인터랙션 기초</h3>
<p>클릭 이벤트, classList, value, localStorage를 단계별로 배웁니다.</p>
<div class="price">₩69,000</div>
<button class="apply_btn open_btn">신청하기</button>
</div>
</div>
</div>
</div>
</section>
<section class="review">
<div class="wrap">
<div class="review_box">
<div class="review_text">
<span>STUDENT REVIEW</span>
<h2>배우고 끝나는 강의가 아닌<br>직접 만드는 수업</h2>
<p>실습 중심 커리큘럼으로 디자인부터 퍼블리싱, JavaScript까지 연결해서 학습합니다.</p>
</div>
<div class="review_cards">
<div class="review_card">
<h3>“구조가 보이기 시작했어요.”</h3>
<p>막연했던 HTML/CSS 흐름이 프로젝트를 만들면서 이해됐습니다.</p>
</div>
<div class="review_card">
<h3>“따라 만들기 좋아요.”</h3>
<p>기초부터 실습까지 단계별로 구성되어 처음 배우는 사람도 도전할 수 있습니다.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. LEARN AI. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>강의 신청</h3>
<input type="text" placeholder="이름">
<input type="text" placeholder="연락처">
<input type="text" placeholder="희망 강의">
<button class="close_btn">닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.visual', {
loop:true,
autoplay:{
delay:3000,
disableOnInteraction:false,
},
pagination:{
el:'.swiper-pagination',
clickable:true,
}
});
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const tabBtns = document.querySelectorAll('.tab_btn');
const lectureCards = document.querySelectorAll('.lecture_card');
for(let i = 0; i < tabBtns.length; i++){
tabBtns[i].addEventListener('click', () => {
for(let j = 0; j < tabBtns.length; j++){
tabBtns[j].classList.remove('active');
}
tabBtns[i].classList.add('active');
const category = tabBtns[i].innerText;
for(let k = 0; k < lectureCards.length; k++){
if(category === '전체'){
lectureCards[k].style.display = 'block';
}else if(lectureCards[k].dataset.category === category){
lectureCards[k].style.display = 'block';
}else{
lectureCards[k].style.display = 'none';
}
}
});
}
const openBtns = document.querySelectorAll('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
for(let i = 0; i < openBtns.length; i++){
openBtns[i].addEventListener('click', () => {
modalWrap.classList.add('active');
});
}
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
#실무형 4번 = 교육 / 강의 플랫폼 완성형