정리글 보기 | 강의 정리

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>병원 사이트 샘플</title>

<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 */
.header{
height:80px;
background:#fff;
border-bottom:1px solid #eee;
}

.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:26px;
font-weight:800;
color:#1d7dd8;
}

.menu{
display:flex;
gap:40px;
}

.menu a{
font-size:16px;
font-weight:700;
}

/* Hero */
.hero{
background:#eef7ff;
padding:100px 0;
}

.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}

.hero_text{
width:50%;
}

.hero_text span{
display:inline-block;
margin-bottom:20px;
color:#1d7dd8;
font-weight:800;
}

.hero_text h1{
font-size:52px;
line-height:1.25;
margin-bottom:25px;
}

.hero_text p{
font-size:18px;
line-height:1.7;
color:#555;
margin-bottom:35px;
}

.btn{
display:inline-block;
padding:16px 34px;
background:#1d7dd8;
color:#fff;
border-radius:8px;
font-weight:800;
}

.hero_img{
width:50%;
height:380px;
background:
linear-gradient(rgba(29,125,216,.25), rgba(29,125,216,.25)),
url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d")
no-repeat center / cover;
border-radius:30px;
}

/* Section */
.section{
padding:90px 0;
}

.section_title{
text-align:center;
margin-bottom:50px;
}

.section_title h2{
font-size:38px;
margin-bottom:15px;
}

.section_title p{
color:#666;
font-size:17px;
}

/* Medical Card */
.medical_wrap{
display:flex;
gap:30px;
}

.medical_card{
width:calc(100% / 3);
padding:40px 30px;
border-radius:22px;
background:#fff;
border:1px solid #e5e5e5;
transition:.3s;
}

.medical_card:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,0,0,.1);
}

.icon{
width:70px;
height:70px;
background:#eef7ff;
color:#1d7dd8;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
font-weight:800;
margin-bottom:25px;
}

.medical_card h3{
font-size:24px;
margin-bottom:15px;
}

.medical_card p{
font-size:15px;
color:#666;
line-height:1.7;
}

/* Doctor */
.doctor{
background:#f7fafc;
padding:90px 0;
}

.doctor_box{
display:flex;
gap:50px;
align-items:center;
}

.doctor_img{
width:45%;
height:420px;
background:
url("https://images.unsplash.com/photo-1559839734-2b71ea197ec2")
no-repeat center / cover;
border-radius:28px;
}

.doctor_text{
width:55%;
}

.doctor_text span{
color:#1d7dd8;
font-weight:800;
}

.doctor_text h2{
font-size:40px;
margin:20px 0;
}

.doctor_text p{
font-size:17px;
line-height:1.8;
color:#555;
margin-bottom:30px;
}

.info_list{
display:flex;
gap:20px;
}

.info_item{
width:calc(100% / 3);
padding:25px 15px;
border-radius:18px;
background:white;
text-align:center;
}

.info_item h3{
font-size:28px;
color:#1d7dd8;
margin-bottom:8px;
}

.info_item p{
font-size:14px;
color:#666;
}

/* Footer */
.footer{
height:100px;
background:#111;
color:white;
display:flex;
justify-content:center;
align-items:center;
}

/* Mobile */
@media(max-width:768px){

.header{
height:auto;
padding:20px 0;
}

.header .wrap{
height:auto;
flex-direction:column;
gap:20px;
}

.menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.hero{
padding:70px 0;
}

.hero .wrap{
flex-direction:column;
}

.hero_text,
.hero_img{
width:100%;
}

.hero_text h1{
font-size:36px;
}

.hero_img{
height:280px;
}

.medical_wrap{
flex-direction:column;
}

.medical_card{
width:100%;
}

.doctor_box{
flex-direction:column;
}

.doctor_img,
.doctor_text{
width:100%;
}

.doctor_img{
height:300px;
}

.doctor_text h2{
font-size:32px;
}

.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>

</div>
</header>

<section class="hero">
<div class="wrap">

<div class="hero_text">
<span>SMART HEALTHCARE</span>

<h1>
환자 중심의<br>
전문 의료 서비스
</h1>

<p>
정확한 진단과 체계적인 진료 시스템으로
건강한 일상을 위한 의료 서비스를 제공합니다.
</p>

<a href="#" class="btn">진료 예약하기</a>
</div>

<div class="hero_img"></div>

</div>
</section>

<section class="section">
<div class="wrap">

<div class="section_title">
<h2>Clinic Services</h2>
<p>환자 상태에 맞춘 전문 진료 서비스를 제공합니다.</p>
</div>

<div class="medical_wrap">

<div class="medical_card">
<div class="icon">01</div>
<h3>내과 진료</h3>
<p>
건강검진, 만성질환 관리 등
일상 건강 관리를 위한 진료를 제공합니다.
</p>
</div>

<div class="medical_card">
<div class="icon">02</div>
<h3>영상 검사</h3>
<p>
정확한 진단을 위한 영상 검사와
체계적인 결과 상담을 진행합니다.
</p>
</div>

<div class="medical_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>

</body>
</html>

#샘플3 = 병원 / 헬스케어 사이트형

HTML 구조 설계

첨부 파일

댓글 / 답글