프런트엔드-CSS

CSS 스타일링

강사: 최퍼블리셔 · 작성자: 이종춘 · 작성일: 2026-05-14 12:22:22 · 조회수: 9

반응형 스타일시트 연습5(골프장) 설명
목록으로
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DONGPUSAN Country Club</title>

<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,"Noto Sans KR",sans-serif;
background:#111;
color:#fff;
overflow-x:hidden;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

img{
display:block;
width:100%;
}

.main{
width:100%;
min-height:100vh;
position:relative;
background:
linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.5)),
url("https://images.unsplash.com/photo-1535131749006-b7f58c99034b?auto=format&fit=crop&w=1920&q=80")
center/cover no-repeat;
}

.main_top_line{
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#7da14f;
}

.wrapper{
width:1200px;
margin:0 auto;
position:relative;
}

.top-menu{
height:45px;
display:flex;
justify-content:flex-end;
align-items:center;
gap:20px;
font-size:13px;
}

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

.logo strong{
display:block;
font-size:36px;
letter-spacing:2px;
}

.logo span{
display:block;
margin-top:8px;
font-size:12px;
letter-spacing:5px;
color:#ddd;
}

.gnb > ul{
display:flex;
}

.gnb > ul > li{
position:relative;
}

.gnb > ul > li > a{
display:block;
padding:40px 24px;
font-size:17px;
font-weight:bold;
}

.gnb > ul > li:hover > a{
color:#d7efb0;
}

.dep2{
position:absolute;
top:100px;
left:50%;
transform:translateX(-50%);
width:170px;
background:#fff;
color:#222;
opacity:0;
visibility:hidden;
transition:.3s;
box-shadow:0 12px 30px rgba(0,0,0,0.2);
}

.gnb > ul > li:hover .dep2{
opacity:1;
visibility:visible;
top:90px;
}

.dep2 a{
display:block;
padding:14px;
border-bottom:1px solid #eee;
font-size:14px;
}

.dep2 a:hover{
background:#edf4e5;
color:#4f6c2e;
}

.mobile-btn{
display:none;
width:38px;
height:30px;
background:none;
border:0;
cursor:pointer;
position:relative;
z-index:1000;
}

.mobile-btn span{
display:block;
width:100%;
height:3px;
background:#fff;
margin:6px 0;
transition:.3s;
}

.hero-text{
width:1200px;
margin:0 auto;
padding-top:180px;
}

.hero-text h1{
font-size:76px;
line-height:1.1;
margin-bottom:25px;
}

.hero-text p{
font-size:20px;
line-height:1.8;
color:#eee;
}

.quick{
position:absolute;
right:60px;
bottom:60px;
display:flex;
gap:15px;
}

.quick a{
width:140px;
height:120px;
background:rgba(255,255,255,0.92);
color:#222;
display:flex;
justify-content:center;
align-items:center;
font-weight:bold;
transition:.3s;
}

.quick a:hover{
background:#7da14f;
color:#fff;
transform:translateY(-8px);
}

.section{
padding:110px 20px;
}

.inner{
width:1200px;
margin:0 auto;
}

.section-title{
text-align:center;
margin-bottom:70px;
}

.section-title h2{
font-size:48px;
margin-bottom:18px;
}

.section-title p{
color:#777;
font-size:18px;
}

.experience{
background:#f7f7f7;
color:#222;
}

.grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}

.card{
background:#fff;
overflow:hidden;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
}

.card-img{
height:300px;
}

.card-img img{
height:100%;
object-fit:cover;
}

.card-content{
padding:32px;
}

.card-content h3{
font-size:28px;
margin-bottom:16px;
}

.card-content p{
line-height:1.8;
color:#666;
}

.membership{
background:#1f2c1d;
}

.membership .section-title p{
color:#ddd;
}

.membership-wrap{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.membership-card{
background:rgba(255,255,255,0.06);
padding:50px 35px;
text-align:center;
transition:.3s;
}

.membership-card:hover{
background:#7da14f;
transform:translateY(-10px);
}

.membership-icon{
font-size:55px;
margin-bottom:24px;
}

.membership-card h3{
font-size:26px;
margin-bottom:16px;
}

.membership-card p{
color:#eee;
line-height:1.8;
}

.gallery{
background:#fff;
color:#222;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.gallery-item{
overflow:hidden;
height:300px;
}

.gallery-item img{
height:100%;
object-fit:cover;
transition:.5s;
}

.gallery-item:hover img{
transform:scale(1.1);
}

.banner{
padding:150px 20px;
text-align:center;
background:
linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.55)),
url("https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1600&q=80")
center/cover fixed;
}

.banner h2{
font-size:56px;
margin-bottom:20px;
}

.banner p{
font-size:20px;
color:#eee;
line-height:1.8;
}

.contact{
background:#f3f5f1;
color:#222;
}

.contact-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
}

.contact-info{
padding:40px;
background:#fff;
}

.contact-info h3{
font-size:34px;
margin-bottom:30px;
color:#24351f;
}

.contact-info p{
margin-bottom:20px;
color:#666;
line-height:1.8;
}

.contact-map{
overflow:hidden;
}

.contact-map img{
height:100%;
object-fit:cover;
}

.footer{
background:#111;
color:#aaa;
text-align:center;
padding:50px 20px;
}

.footer strong{
display:block;
color:#fff;
margin-bottom:12px;
font-size:24px;
}

@media(max-width:1200px){
.wrapper,
.inner,
.hero-text{
width:100%;
padding-left:30px;
padding-right:30px;
}
}

@media(max-width:900px){

.mobile-btn{
display:block;
}

.gnb{
position:absolute;
top:100px;
left:0;
width:100%;
background:rgba(0,0,0,0.96);
display:none;
padding:20px 0;
z-index:999;
}

.gnb.active{
display:block;
}

.gnb > ul{
flex-direction:column;
}

.gnb > ul > li{
width:100%;
}

.gnb > ul > li > a{
padding:18px 30px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.dep2{
position:static;
transform:none;
width:100%;
opacity:1;
visibility:visible;
display:block;
background:none;
color:#fff;
box-shadow:none;
}

.dep2 a{
color:#ddd;
border-bottom:1px solid rgba(255,255,255,0.05);
padding:14px 50px;
background:none;
}

.dep2 a:hover{
background:rgba(255,255,255,0.05);
color:#d7efb0;
}

.hero-text h1{
font-size:50px;
}

.grid,
.membership-wrap,
.gallery-grid,
.contact-wrap{
grid-template-columns:1fr;
}

.quick{
position:static;
justify-content:center;
padding:40px 30px;
}
}

@media(max-width:600px){

.top-menu{
justify-content:center;
gap:12px;
font-size:12px;
}

.hero-text{
padding-top:140px;
}

.hero-text h1{
font-size:36px;
}

.hero-text p{
font-size:16px;
}

.section-title h2{
font-size:34px;
}

.banner h2{
font-size:36px;
}

.quick{
flex-direction:column;
}

.quick a{
width:100%;
}
}
</style>
</head>

<body>

<div class="main">

<span class="main_top_line"></span>

<div class="wrapper">

<div class="top-menu">
<a href="#">HOME</a>
<a href="#">LOGIN</a>
<a href="#">MEMBERSHIP</a>
<a href="#">SITEMAP</a>
</div>

<header class="header">

<a href="#" class="logo">
<strong>DONGPUSAN</strong>
<span>COUNTRY CLUB</span>
</a>

<button class="mobile-btn" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</button>

<nav class="gnb">
<ul>
<li>
<a href="#">클럽안내</a>
<ul class="dep2">
<li><a href="#">CEO인사말</a></li>
<li><a href="#">회사소개</a></li>
<li><a href="#">오시는길</a></li>
</ul>
</li>

<li>
<a href="#">코스소개</a>
<ul class="dep2">
<li><a href="#">Hill Course</a></li>
<li><a href="#">Lake Course</a></li>
<li><a href="#">Valley Course</a></li>
</ul>
</li>

<li>
<a href="#">이용안내</a>
<ul class="dep2">
<li><a href="#">예약안내</a></li>
<li><a href="#">요리안내</a></li>
</ul>
</li>

<li>
<a href="#">시설안내</a>
<ul class="dep2">
<li><a href="#">레스토랑</a></li>
<li><a href="#">프로샵</a></li>
</ul>
</li>

<li>
<a href="#">커뮤니티</a>
<ul class="dep2">
<li><a href="#">공지사항</a></li>
<li><a href="#">날씨정보</a></li>
</ul>
</li>
</ul>
</nav>

</header>

</div>

<div class="hero-text">
<h1>
DONGPUSAN<br>
COUNTRY CLUB
</h1>

<p>
자연과 함께하는 프리미엄 골프 라이프<br>
최고의 코스와 품격 있는 서비스를 경험하세요.
</p>
</div>

<div class="quick">
<a href="#">예약하기</a>
<a href="#">코스안내</a>
<a href="#">오시는길</a>
</div>

</div>

<section class="section experience">
<div class="inner">
<div class="section-title">
<h2>Special Experience</h2>
<p>동부산 컨트리클럽만의 특별한 공간</p>
</div>

<div class="grid">
<div class="card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="card-content">
<h3>Premium Golf Course</h3>
<p>자연 지형을 살린 아름다운 코스와 품격 있는 플레이 환경을 제공합니다.</p>
</div>
</div>

<div class="card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="card-content">
<h3>Luxury Club House</h3>
<p>편안한 휴식과 프리미엄 서비스를 제공하는 럭셔리 클럽하우스입니다.</p>
</div>
</div>

<div class="card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="card-content">
<h3>Fine Dining</h3>
<p>계절 재료를 활용한 고급 다이닝과 다양한 셰프 메뉴를 즐길 수 있습니다.</p>
</div>
</div>

<div class="card">
<div class="card-img">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
<div class="card-content">
<h3>Nature & Healing</h3>
<p>부산 자연 풍경과 함께 여유로운 힐링 라운딩을 경험해보세요.</p>
</div>
</div>
</div>
</div>
</section>

<section class="section membership">
<div class="inner">
<div class="section-title">
<h2>Membership Service</h2>
<p>프리미엄 회원 전용 서비스</p>
</div>

<div class="membership-wrap">
<div class="membership-card">
<div class="membership-icon"></div>
<h3>Priority Reservation</h3>
<p>회원 전용 우선 예약 시스템을 제공합니다.</p>
</div>

<div class="membership-card">
<div class="membership-icon"></div>
<h3>Restaurant Benefit</h3>
<p>레스토랑 및 시설 할인 혜택을 제공합니다.</p>
</div>

<div class="membership-card">
<div class="membership-icon"></div>
<h3>Private Lesson</h3>
<p>프로 골퍼와 함께하는 프라이빗 레슨 서비스입니다.</p>
</div>
</div>
</div>
</section>

<section class="section gallery">
<div class="inner">
<div class="section-title">
<h2>Gallery</h2>
<p>동부산 컨트리클럽의 아름다운 풍경</p>
</div>

<div class="gallery-grid">
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1517457373958-b7bdd4587205?auto=format&fit=crop&w=1200&q=80" alt="">
</div>

<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80" alt="">
</div>

<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1200&q=80" alt="">
</div>

<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1592919505780-303950717480?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
</div>
</div>
</section>

<section class="banner">
<h2>Enjoy Your Premium Golf Life</h2>
<p>
최고의 자연환경 속에서<br>
특별한 골프 라이프를 시작하세요.
</p>
</section>

<section class="section contact">
<div class="inner">
<div class="section-title">
<h2>Contact & Location</h2>
<p>동부산 컨트리클럽 위치 안내</p>
</div>

<div class="contact-wrap">
<div class="contact-info">
<h3>DONGPUSAN COUNTRY CLUB</h3>

<p>
부산광역시 기장군 일대<br>
아름다운 자연 속 프리미엄 골프 클럽
</p>

<p>
TEL : 051-000-0000<br>
E-MAIL : golf@dongbusan.com
</p>

<p>
운영시간 : 오전 06:00 ~ 오후 10:00
</p>
</div>

<div class="contact-map">
<img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80" alt="">
</div>
</div>
</div>
</section>

<footer class="footer">
<strong>DONGPUSAN COUNTRY CLUB</strong>
<p>부산광역시 기장군 | TEL : 051-000-0000</p>
<p>Copyright © DONGPUSAN COUNTRY CLUB. All Rights Reserved.</p>
</footer>

<script>
function toggleMenu(){
document.querySelector(".gnb").classList.toggle("active");
}
</script>

</body>
</html>
#반응형 스타일시트 연습5(골프장)

첨부 파일

0개
첨부된 파일이 없습니다.

댓글 / 답글

0개
댓글을 작성하려면 로그인하세요.
아직 댓글이 없습니다.