<!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;}
a{text-decoration:none;color: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:#1d7dd8;}
.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:#eef7ff;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#1d7dd8;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:#1d7dd8;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_img{width:45%;height:360px;border-radius:30px;background:url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d") no-repeat center/cover;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.clinic_wrap{display:flex;gap:30px;}
.clinic_card{width:calc(100%/3);padding:40px 30px;border:1px solid #eee;border-radius:24px;background:white;transition:.3s;}
.clinic_card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.icon{width:70px;height:70px;border-radius:20px;background:#eef7ff;color:#1d7dd8;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;margin-bottom:25px;}
.clinic_card h3{font-size:24px;margin-bottom:15px;}
.clinic_card p{color:#666;line-height:1.7;}
.doctor{background:#f7fafc;padding:90px 0;}
.doctor_box{display:flex;gap:50px;align-items:center;}
.doctor_img{width:45%;height:420px;border-radius:28px;background:url("https://images.unsplash.com/photo-1559839734-2b71ea197ec2") no-repeat center/cover;}
.doctor_text{width:55%;}
.doctor_text span{color:#1d7dd8;font-weight:900;}
.doctor_text h2{font-size:40px;line-height:1.3;margin:20px 0;}
.doctor_text p{color:#555;line-height:1.8;margin-bottom:30px;}
.info_list{display:flex;gap:20px;}
.info_item{width:calc(100%/3);padding:25px 15px;background:white;border-radius:18px;text-align:center;}
.info_item h3{font-size:28px;color:#1d7dd8;margin-bottom:8px;}
.info_item p{font-size:14px;color:#666;}
.footer{height:100px;background:#111;color:white;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_img{width:100%;}
.visual_text h1{font-size:36px;}
.visual_img{height:280px;}
.clinic_wrap{flex-direction:column;}
.clinic_card{width:100%;}
.doctor_box{flex-direction:column;}
.doctor_img,.doctor_text{width:100%;}
.doctor_img{height:300px;}
.info_list{flex-direction:column;}
.info_item{width:100%;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">BLUE MEDI</div>
<nav class="menu">
<a href="#">Clinic</a>
<a href="#">Doctor</a>
<a href="#">Reservation</a>
<a href="#">Contact</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>SMART HEALTHCARE</span>
<h1>환자 중심의<br>전문 의료 서비스</h1>
<p>정확한 진단과 체계적인 진료 시스템으로 건강한 일상을 돕습니다.</p>
<a class="btn open_btn">진료 예약하기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>MEDICAL CARE SYSTEM</span>
<h1>믿을 수 있는<br>건강관리 파트너</h1>
<p>전문 의료진과 최신 진료 시스템으로 맞춤형 의료 서비스를 제공합니다.</p>
<a class="btn open_btn">상담 문의하기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Clinic Services</h2>
<p>환자 상태에 맞춘 전문 진료 서비스를 제공합니다.</p>
</div>
<div class="clinic_wrap">
<div class="clinic_card">
<div class="icon">01</div>
<h3>내과 진료</h3>
<p>건강검진, 만성질환 관리 등 일상 건강을 위한 진료를 제공합니다.</p>
</div>
<div class="clinic_card">
<div class="icon">02</div>
<h3>영상 검사</h3>
<p>정확한 진단을 위한 영상 검사와 결과 상담을 진행합니다.</p>
</div>
<div class="clinic_card">
<div class="icon">03</div>
<h3>건강 관리</h3>
<p>개인 상태에 맞춘 지속적인 건강관리 프로그램을 제공합니다.</p>
</div>
</div>
</div>
</section>
<section class="doctor">
<div class="wrap">
<div class="doctor_box">
<div class="doctor_img"></div>
<div class="doctor_text">
<span>MEDICAL TEAM</span>
<h2>믿을 수 있는 의료진과<br>함께합니다</h2>
<p>
풍부한 경험을 가진 의료진이 환자 중심의 진료를 제공합니다.
편안한 상담과 정확한 진단으로 신뢰받는 의료 서비스를 만들어갑니다.
</p>
<div class="info_list">
<div class="info_item">
<h3>20+</h3>
<p>전문 의료진</p>
</div>
<div class="info_item">
<h3>15K</h3>
<p>누적 진료</p>
</div>
<div class="info_item">
<h3>98%</h3>
<p>만족도</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. BLUE MEDI. 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 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;}
a{text-decoration:none;color: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:#1d7dd8;}
.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:#eef7ff;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#1d7dd8;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:#1d7dd8;color:white;border-radius:8px;font-weight:900;cursor:pointer;}
.visual_img{width:45%;height:360px;border-radius:30px;background:url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d") no-repeat center/cover;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.clinic_wrap{display:flex;gap:30px;}
.clinic_card{width:calc(100%/3);padding:40px 30px;border:1px solid #eee;border-radius:24px;background:white;transition:.3s;}
.clinic_card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.icon{width:70px;height:70px;border-radius:20px;background:#eef7ff;color:#1d7dd8;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;margin-bottom:25px;}
.clinic_card h3{font-size:24px;margin-bottom:15px;}
.clinic_card p{color:#666;line-height:1.7;}
.doctor{background:#f7fafc;padding:90px 0;}
.doctor_box{display:flex;gap:50px;align-items:center;}
.doctor_img{width:45%;height:420px;border-radius:28px;background:url("https://images.unsplash.com/photo-1559839734-2b71ea197ec2") no-repeat center/cover;}
.doctor_text{width:55%;}
.doctor_text span{color:#1d7dd8;font-weight:900;}
.doctor_text h2{font-size:40px;line-height:1.3;margin:20px 0;}
.doctor_text p{color:#555;line-height:1.8;margin-bottom:30px;}
.info_list{display:flex;gap:20px;}
.info_item{width:calc(100%/3);padding:25px 15px;background:white;border-radius:18px;text-align:center;}
.info_item h3{font-size:28px;color:#1d7dd8;margin-bottom:8px;}
.info_item p{font-size:14px;color:#666;}
.footer{height:100px;background:#111;color:white;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_img{width:100%;}
.visual_text h1{font-size:36px;}
.visual_img{height:280px;}
.clinic_wrap{flex-direction:column;}
.clinic_card{width:100%;}
.doctor_box{flex-direction:column;}
.doctor_img,.doctor_text{width:100%;}
.doctor_img{height:300px;}
.info_list{flex-direction:column;}
.info_item{width:100%;}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">BLUE MEDI</div>
<nav class="menu">
<a href="#">Clinic</a>
<a href="#">Doctor</a>
<a href="#">Reservation</a>
<a href="#">Contact</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>SMART HEALTHCARE</span>
<h1>환자 중심의<br>전문 의료 서비스</h1>
<p>정확한 진단과 체계적인 진료 시스템으로 건강한 일상을 돕습니다.</p>
<a class="btn open_btn">진료 예약하기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>MEDICAL CARE SYSTEM</span>
<h1>믿을 수 있는<br>건강관리 파트너</h1>
<p>전문 의료진과 최신 진료 시스템으로 맞춤형 의료 서비스를 제공합니다.</p>
<a class="btn open_btn">상담 문의하기</a>
</div>
<div class="visual_img"></div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="title">
<h2>Clinic Services</h2>
<p>환자 상태에 맞춘 전문 진료 서비스를 제공합니다.</p>
</div>
<div class="clinic_wrap">
<div class="clinic_card">
<div class="icon">01</div>
<h3>내과 진료</h3>
<p>건강검진, 만성질환 관리 등 일상 건강을 위한 진료를 제공합니다.</p>
</div>
<div class="clinic_card">
<div class="icon">02</div>
<h3>영상 검사</h3>
<p>정확한 진단을 위한 영상 검사와 결과 상담을 진행합니다.</p>
</div>
<div class="clinic_card">
<div class="icon">03</div>
<h3>건강 관리</h3>
<p>개인 상태에 맞춘 지속적인 건강관리 프로그램을 제공합니다.</p>
</div>
</div>
</div>
</section>
<section class="doctor">
<div class="wrap">
<div class="doctor_box">
<div class="doctor_img"></div>
<div class="doctor_text">
<span>MEDICAL TEAM</span>
<h2>믿을 수 있는 의료진과<br>함께합니다</h2>
<p>
풍부한 경험을 가진 의료진이 환자 중심의 진료를 제공합니다.
편안한 상담과 정확한 진단으로 신뢰받는 의료 서비스를 만들어갑니다.
</p>
<div class="info_list">
<div class="info_item">
<h3>20+</h3>
<p>전문 의료진</p>
</div>
<div class="info_item">
<h3>15K</h3>
<p>누적 진료</p>
</div>
<div class="info_item">
<h3>98%</h3>
<p>만족도</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. BLUE MEDI. 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 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>
#실무형 3번 = 병원 / 헬스케어 사이트 완성형