<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEDICAL CARE</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
background:#f5f7fa;
color:#222;
}
a{
text-decoration:none;
color:#222;
}
/* 애니메이션 */
.fade_up{
opacity:0;
transform:translateY(60px);
animation:fadeUp 1s forwards;
}
.delay1{
animation-delay:0.2s;
}
.delay2{
animation-delay:0.4s;
}
.delay3{
animation-delay:0.6s;
}
@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(60px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
/* 헤더 */
.header{
width:100%;
height:80px;
background:#fff;
border-bottom:1px solid #ddd;
position:fixed;
top:0;
left:0;
z-index:100;
}
.header_wrap{
width:1400px;
height:80px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo a{
font-size:28px;
font-weight:bold;
color:#0b5ed7;
}
.menu{
display:flex;
gap:50px;
}
.menu a{
font-size:15px;
font-weight:bold;
}
/* 햄버거 */
.ham{
display:none;
width:32px;
cursor:pointer;
}
.ham span{
display:block;
width:100%;
height:3px;
background:#222;
margin:7px 0;
}
/* 메인 */
.main_wrap{
width:1400px;
margin:0 auto;
padding:160px 0 100px;
display:flex;
gap:40px;
align-items:flex-start;
}
.visual{
width:50%;
background:#fff;
border-radius:30px;
padding:80px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
position:sticky;
top:120px;
}
.visual h2{
font-size:78px;
line-height:1.05;
margin-bottom:35px;
}
.visual p{
font-size:18px;
line-height:1.9;
color:#666;
}
.total{
width:50%;
}
.section_title{
font-size:40px;
margin-bottom:40px;
}
.card_wrap{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:30px;
}
.card{
background:#fff;
border-radius:25px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}
.img_box{
width:100%;
height:220px;
overflow:hidden;
}
.img_box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s;
}
.card:hover img{
transform:scale(1.08);
}
.card_text{
padding:25px;
}
.card_text h3{
font-size:24px;
margin-bottom:12px;
}
.card_text p{
font-size:15px;
line-height:1.8;
color:#666;
}
/* 추가 섹션 */
.info_section,
.banner_section,
.special_section{
width:100%;
padding:120px 20px;
}
.info_section{
background:#fff;
}
.banner_section{
background:#0d1b2a;
color:#fff;
}
.special_section{
background:#eaf3ff;
}
.info_wrap,
.banner_wrap,
.special_wrap{
width:1400px;
margin:0 auto;
display:flex;
gap:60px;
align-items:center;
}
.info_text,
.banner_text,
.special_text{
width:50%;
}
.info_text h2,
.banner_text h2,
.special_text h2{
font-size:52px;
line-height:1.15;
margin-bottom:25px;
}
.info_text p,
.banner_text p,
.special_text p{
font-size:18px;
line-height:1.9;
color:#666;
}
.banner_text p{
color:#d0d7e2;
}
.info_img,
.banner_img,
.special_img{
width:50%;
height:420px;
border-radius:30px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}
.info_img img,
.banner_img img,
.special_img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s;
}
.info_img:hover img,
.banner_img:hover img,
.special_img:hover img{
transform:scale(1.08);
}
/* 새로 추가한 진료 안내 카드 */
.special_list{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
margin-top:35px;
}
.special_item{
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;
}
.special_item:hover{
transform:translateY(-8px);
}
.special_item h3{
font-size:20px;
margin-bottom:10px;
color:#0b5ed7;
}
.special_item p{
font-size:14px;
line-height:1.7;
}
/* 푸터 */
.footer{
background:#111;
color:#aaa;
text-align:center;
padding:50px 20px;
font-size:14px;
line-height:1.8;
}
/* 반응형 */
@media screen and (max-width:1400px){
.header_wrap,
.main_wrap,
.info_wrap,
.banner_wrap,
.special_wrap{
width:92%;
}
}
@media screen and (max-width:1100px){
.main_wrap,
.info_wrap,
.banner_wrap,
.special_wrap{
flex-direction:column;
}
.visual,
.total,
.info_text,
.banner_text,
.special_text,
.info_img,
.banner_img,
.special_img{
width:100%;
}
.visual{
position:static;
margin-bottom:60px;
}
}
@media screen and (max-width:768px){
.menu{
position:absolute;
top:80px;
left:0;
width:100%;
background:#fff;
display:none;
flex-direction:column;
border-bottom:1px solid #ddd;
}
.menu.active{
display:flex;
}
.menu a{
padding:20px;
border-top:1px solid #eee;
}
.ham{
display:block;
}
.visual{
padding:50px;
}
.visual h2{
font-size:55px;
}
.card_wrap,
.special_list{
grid-template-columns:1fr;
}
.info_text h2,
.banner_text h2,
.special_text h2{
font-size:38px;
}
.info_img,
.banner_img,
.special_img{
height:300px;
}
}
@media screen and (max-width:480px){
.visual{
padding:35px;
}
.visual h2{
font-size:42px;
}
.info_section,
.banner_section,
.special_section{
padding:80px 20px;
}
.info_img,
.banner_img,
.special_img{
height:240px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header_wrap">
<h1 class="logo">
<a href="#">MEDICAL CARE</a>
</h1>
<nav class="menu" id="menu">
<a href="#">ABOUT</a>
<a href="#">DOCTOR</a>
<a href="#">SERVICE</a>
<a href="#">CONTACT</a>
</nav>
<div class="ham" id="ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main class="main_wrap">
<section class="visual fade_up">
<h2>
MODERN<br>
HEALTH CARE
</h2>
<p>
환자의 건강과 안전을 최우선으로 생각하는
전문 의료 서비스를 제공합니다.<br><br>
정확한 진단과 체계적인 치료 시스템,
그리고 편안한 진료 환경을 통해
믿을 수 있는 의료 경험을 제공합니다.
</p>
</section>
<section class="total fade_up delay1">
<h2 class="section_title">
Medical Services
</h2>
<div class="card_wrap">
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1584515933487-779824d29309?auto=format&fit=crop&w=1000&q=80" alt="건강검진">
</div>
<div class="card_text">
<h3>HEALTH CHECKUP</h3>
<p>정기적인 건강검진을 통해 질환을 조기에 발견하고 예방합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1000&q=80" alt="의료 상담">
</div>
<div class="card_text">
<h3>MEDICAL CONSULTING</h3>
<p>전문의 상담을 통해 환자 맞춤형 진료 서비스를 제공합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1516549655169-df83a0774514?auto=format&fit=crop&w=1000&q=80" alt="응급 진료">
</div>
<div class="card_text">
<h3>EMERGENCY CARE</h3>
<p>응급 상황에서도 빠르고 정확한 의료 서비스를 제공합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1580281657527-47f249e8f4df?auto=format&fit=crop&w=1000&q=80" alt="검사실">
</div>
<div class="card_text">
<h3>LABORATORY</h3>
<p>첨단 장비를 활용한 정확한 검사와 분석 시스템을 운영합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?auto=format&fit=crop&w=1000&q=80" alt="수술 센터">
</div>
<div class="card_text">
<h3>SURGERY CENTER</h3>
<p>체계적인 수술 시스템과 안전 관리로 최상의 치료를 제공합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=1000&q=80" alt="환자 케어">
</div>
<div class="card_text">
<h3>PATIENT CARE</h3>
<p>환자 중심의 진료 환경과 편안한 의료 서비스를 제공합니다.</p>
</div>
</article>
</div>
</section>
</main>
<section class="info_section fade_up delay1">
<div class="info_wrap">
<div class="info_text">
<h2>
Advanced<br>
Medical System
</h2>
<p>
최신 의료 장비와 전문 의료진을 통해
보다 정확하고 신뢰할 수 있는 진료 서비스를 제공합니다.<br><br>
환자의 건강 상태를 체계적으로 분석하여
맞춤형 치료 계획을 진행합니다.
</p>
</div>
<div class="info_img">
<img src="https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1200&q=80" alt="의료 장비">
</div>
</div>
</section>
<section class="banner_section fade_up delay2">
<div class="banner_wrap">
<div class="banner_img">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1200&q=80" alt="의료진">
</div>
<div class="banner_text">
<h2>
Professional<br>
Medical Team
</h2>
<p>
다양한 분야의 전문 의료진이 협력하여
환자에게 최적의 진료 환경을 제공합니다.<br><br>
신뢰와 책임감을 바탕으로
건강한 삶을 위한 의료 서비스를 제공합니다.
</p>
</div>
</div>
</section>
<!-- 새로 추가한 섹션 -->
<section class="special_section fade_up delay3">
<div class="special_wrap">
<div class="special_text">
<h2>
Patient<br>
Guide Service
</h2>
<p>
처음 방문하는 환자도 쉽게 이용할 수 있도록
진료 예약부터 검사, 상담, 사후 관리까지
단계별 안내 서비스를 제공합니다.
</p>
<div class="special_list">
<div class="special_item">
<h3>01 예약</h3>
<p>온라인 또는 전화로 간편하게 진료 예약을 진행합니다.</p>
</div>
<div class="special_item">
<h3>02 진료</h3>
<p>전문의 상담을 통해 환자 상태에 맞는 진료를 제공합니다.</p>
</div>
<div class="special_item">
<h3>03 관리</h3>
<p>진료 후에도 지속적인 건강 관리와 안내를 제공합니다.</p>
</div>
</div>
</div>
<div class="special_img">
<img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?auto=format&fit=crop&w=1200&q=80" alt="환자 안내 서비스">
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. MEDICAL CARE.<br>
ALL RIGHTS RESERVED.
</footer>
<script>
const ham = document.getElementById('ham');
const menu = document.getElementById('menu');
ham.addEventListener('click', function(){
menu.classList.toggle('active');
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEDICAL CARE</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
background:#f5f7fa;
color:#222;
}
a{
text-decoration:none;
color:#222;
}
/* 애니메이션 */
.fade_up{
opacity:0;
transform:translateY(60px);
animation:fadeUp 1s forwards;
}
.delay1{
animation-delay:0.2s;
}
.delay2{
animation-delay:0.4s;
}
.delay3{
animation-delay:0.6s;
}
@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(60px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
/* 헤더 */
.header{
width:100%;
height:80px;
background:#fff;
border-bottom:1px solid #ddd;
position:fixed;
top:0;
left:0;
z-index:100;
}
.header_wrap{
width:1400px;
height:80px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo a{
font-size:28px;
font-weight:bold;
color:#0b5ed7;
}
.menu{
display:flex;
gap:50px;
}
.menu a{
font-size:15px;
font-weight:bold;
}
/* 햄버거 */
.ham{
display:none;
width:32px;
cursor:pointer;
}
.ham span{
display:block;
width:100%;
height:3px;
background:#222;
margin:7px 0;
}
/* 메인 */
.main_wrap{
width:1400px;
margin:0 auto;
padding:160px 0 100px;
display:flex;
gap:40px;
align-items:flex-start;
}
.visual{
width:50%;
background:#fff;
border-radius:30px;
padding:80px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
position:sticky;
top:120px;
}
.visual h2{
font-size:78px;
line-height:1.05;
margin-bottom:35px;
}
.visual p{
font-size:18px;
line-height:1.9;
color:#666;
}
.total{
width:50%;
}
.section_title{
font-size:40px;
margin-bottom:40px;
}
.card_wrap{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:30px;
}
.card{
background:#fff;
border-radius:25px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}
.img_box{
width:100%;
height:220px;
overflow:hidden;
}
.img_box img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s;
}
.card:hover img{
transform:scale(1.08);
}
.card_text{
padding:25px;
}
.card_text h3{
font-size:24px;
margin-bottom:12px;
}
.card_text p{
font-size:15px;
line-height:1.8;
color:#666;
}
/* 추가 섹션 */
.info_section,
.banner_section,
.special_section{
width:100%;
padding:120px 20px;
}
.info_section{
background:#fff;
}
.banner_section{
background:#0d1b2a;
color:#fff;
}
.special_section{
background:#eaf3ff;
}
.info_wrap,
.banner_wrap,
.special_wrap{
width:1400px;
margin:0 auto;
display:flex;
gap:60px;
align-items:center;
}
.info_text,
.banner_text,
.special_text{
width:50%;
}
.info_text h2,
.banner_text h2,
.special_text h2{
font-size:52px;
line-height:1.15;
margin-bottom:25px;
}
.info_text p,
.banner_text p,
.special_text p{
font-size:18px;
line-height:1.9;
color:#666;
}
.banner_text p{
color:#d0d7e2;
}
.info_img,
.banner_img,
.special_img{
width:50%;
height:420px;
border-radius:30px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}
.info_img img,
.banner_img img,
.special_img img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.5s;
}
.info_img:hover img,
.banner_img:hover img,
.special_img:hover img{
transform:scale(1.08);
}
/* 새로 추가한 진료 안내 카드 */
.special_list{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
margin-top:35px;
}
.special_item{
background:#fff;
padding:25px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:0.4s;
}
.special_item:hover{
transform:translateY(-8px);
}
.special_item h3{
font-size:20px;
margin-bottom:10px;
color:#0b5ed7;
}
.special_item p{
font-size:14px;
line-height:1.7;
}
/* 푸터 */
.footer{
background:#111;
color:#aaa;
text-align:center;
padding:50px 20px;
font-size:14px;
line-height:1.8;
}
/* 반응형 */
@media screen and (max-width:1400px){
.header_wrap,
.main_wrap,
.info_wrap,
.banner_wrap,
.special_wrap{
width:92%;
}
}
@media screen and (max-width:1100px){
.main_wrap,
.info_wrap,
.banner_wrap,
.special_wrap{
flex-direction:column;
}
.visual,
.total,
.info_text,
.banner_text,
.special_text,
.info_img,
.banner_img,
.special_img{
width:100%;
}
.visual{
position:static;
margin-bottom:60px;
}
}
@media screen and (max-width:768px){
.menu{
position:absolute;
top:80px;
left:0;
width:100%;
background:#fff;
display:none;
flex-direction:column;
border-bottom:1px solid #ddd;
}
.menu.active{
display:flex;
}
.menu a{
padding:20px;
border-top:1px solid #eee;
}
.ham{
display:block;
}
.visual{
padding:50px;
}
.visual h2{
font-size:55px;
}
.card_wrap,
.special_list{
grid-template-columns:1fr;
}
.info_text h2,
.banner_text h2,
.special_text h2{
font-size:38px;
}
.info_img,
.banner_img,
.special_img{
height:300px;
}
}
@media screen and (max-width:480px){
.visual{
padding:35px;
}
.visual h2{
font-size:42px;
}
.info_section,
.banner_section,
.special_section{
padding:80px 20px;
}
.info_img,
.banner_img,
.special_img{
height:240px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header_wrap">
<h1 class="logo">
<a href="#">MEDICAL CARE</a>
</h1>
<nav class="menu" id="menu">
<a href="#">ABOUT</a>
<a href="#">DOCTOR</a>
<a href="#">SERVICE</a>
<a href="#">CONTACT</a>
</nav>
<div class="ham" id="ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main class="main_wrap">
<section class="visual fade_up">
<h2>
MODERN<br>
HEALTH CARE
</h2>
<p>
환자의 건강과 안전을 최우선으로 생각하는
전문 의료 서비스를 제공합니다.<br><br>
정확한 진단과 체계적인 치료 시스템,
그리고 편안한 진료 환경을 통해
믿을 수 있는 의료 경험을 제공합니다.
</p>
</section>
<section class="total fade_up delay1">
<h2 class="section_title">
Medical Services
</h2>
<div class="card_wrap">
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1584515933487-779824d29309?auto=format&fit=crop&w=1000&q=80" alt="건강검진">
</div>
<div class="card_text">
<h3>HEALTH CHECKUP</h3>
<p>정기적인 건강검진을 통해 질환을 조기에 발견하고 예방합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&w=1000&q=80" alt="의료 상담">
</div>
<div class="card_text">
<h3>MEDICAL CONSULTING</h3>
<p>전문의 상담을 통해 환자 맞춤형 진료 서비스를 제공합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1516549655169-df83a0774514?auto=format&fit=crop&w=1000&q=80" alt="응급 진료">
</div>
<div class="card_text">
<h3>EMERGENCY CARE</h3>
<p>응급 상황에서도 빠르고 정확한 의료 서비스를 제공합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1580281657527-47f249e8f4df?auto=format&fit=crop&w=1000&q=80" alt="검사실">
</div>
<div class="card_text">
<h3>LABORATORY</h3>
<p>첨단 장비를 활용한 정확한 검사와 분석 시스템을 운영합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1581595219315-a187dd40c322?auto=format&fit=crop&w=1000&q=80" alt="수술 센터">
</div>
<div class="card_text">
<h3>SURGERY CENTER</h3>
<p>체계적인 수술 시스템과 안전 관리로 최상의 치료를 제공합니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=1000&q=80" alt="환자 케어">
</div>
<div class="card_text">
<h3>PATIENT CARE</h3>
<p>환자 중심의 진료 환경과 편안한 의료 서비스를 제공합니다.</p>
</div>
</article>
</div>
</section>
</main>
<section class="info_section fade_up delay1">
<div class="info_wrap">
<div class="info_text">
<h2>
Advanced<br>
Medical System
</h2>
<p>
최신 의료 장비와 전문 의료진을 통해
보다 정확하고 신뢰할 수 있는 진료 서비스를 제공합니다.<br><br>
환자의 건강 상태를 체계적으로 분석하여
맞춤형 치료 계획을 진행합니다.
</p>
</div>
<div class="info_img">
<img src="https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=1200&q=80" alt="의료 장비">
</div>
</div>
</section>
<section class="banner_section fade_up delay2">
<div class="banner_wrap">
<div class="banner_img">
<img src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1200&q=80" alt="의료진">
</div>
<div class="banner_text">
<h2>
Professional<br>
Medical Team
</h2>
<p>
다양한 분야의 전문 의료진이 협력하여
환자에게 최적의 진료 환경을 제공합니다.<br><br>
신뢰와 책임감을 바탕으로
건강한 삶을 위한 의료 서비스를 제공합니다.
</p>
</div>
</div>
</section>
<!-- 새로 추가한 섹션 -->
<section class="special_section fade_up delay3">
<div class="special_wrap">
<div class="special_text">
<h2>
Patient<br>
Guide Service
</h2>
<p>
처음 방문하는 환자도 쉽게 이용할 수 있도록
진료 예약부터 검사, 상담, 사후 관리까지
단계별 안내 서비스를 제공합니다.
</p>
<div class="special_list">
<div class="special_item">
<h3>01 예약</h3>
<p>온라인 또는 전화로 간편하게 진료 예약을 진행합니다.</p>
</div>
<div class="special_item">
<h3>02 진료</h3>
<p>전문의 상담을 통해 환자 상태에 맞는 진료를 제공합니다.</p>
</div>
<div class="special_item">
<h3>03 관리</h3>
<p>진료 후에도 지속적인 건강 관리와 안내를 제공합니다.</p>
</div>
</div>
</div>
<div class="special_img">
<img src="https://images.unsplash.com/photo-1581056771107-24ca5f033842?auto=format&fit=crop&w=1200&q=80" alt="환자 안내 서비스">
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. MEDICAL CARE.<br>
ALL RIGHTS RESERVED.
</footer>
<script>
const ham = document.getElementById('ham');
const menu = document.getElementById('menu');
ham.addEventListener('click', function(){
menu.classList.toggle('active');
});
</script>
</body>
</html>
#반응형 스타일시트 연습3(병원)