<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOG LIFE DESIGN</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
background:#f5f5f5;
color:#222;
}
a{
text-decoration:none;
color:#222;
}
/* 헤더 */
.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;
}
.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:80px;
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;
}
/* 3행 2열 */
.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;
}
/* 푸터 */
.footer{
background:#222;
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{
width:92%;
}
}
@media screen and (max-width:1100px){
.main_wrap{
flex-direction:column;
}
.visual,
.total{
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{
grid-template-columns:1fr;
}
}
@media screen and (max-width:480px){
.visual{
padding:35px;
}
.visual h2{
font-size:42px;
}
.img_box{
height:220px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header_wrap">
<h1 class="logo">
<a href="#">DOG LIFE</a>
</h1>
<nav class="menu" id="menu">
<a href="#">CARE</a>
<a href="#">WALK</a>
<a href="#">PLAY</a>
<a href="#">STORY</a>
</nav>
<div class="ham" id="ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main class="main_wrap">
<!-- 왼쪽 50% -->
<section class="visual">
<h2>
HAPPY DOG<br>
DAILY LIFE
</h2>
<p>
강아지의 일상은 작은 순간들이 모여
따뜻한 추억이 됩니다.<br><br>
산책, 놀이, 휴식, 친구들과의 만남까지
반려견과 함께하는 행복한 하루를
사진과 카드 형태로 구성한 페이지입니다.
</p>
</section>
<!-- 오른쪽 50% -->
<section class="total">
<h2 class="section_title">
Dog Moments
</h2>
<div class="card_wrap">
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1552053831-71594a27632d?auto=format&fit=crop&w=800&q=80" alt="강아지 사진">
</div>
<div class="card_text">
<h3>DOG CARE</h3>
<p>반려견의 건강과 기분을 세심하게 살피는 돌봄 시간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=800&q=80" alt="산책하는 강아지">
</div>
<div class="card_text">
<h3>DAILY WALK</h3>
<p>바깥 공기를 마시며 에너지를 채우는 즐거운 산책 순간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?auto=format&fit=crop&w=800&q=80" alt="웃는 강아지">
</div>
<div class="card_text">
<h3>HAPPY SMILE</h3>
<p>밝게 웃는 표정에서 느껴지는 강아지만의 순수한 매력입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?auto=format&fit=crop&w=800&q=80" alt="귀여운 강아지">
</div>
<div class="card_text">
<h3>CUTE MOMENT</h3>
<p>가만히 바라보기만 해도 기분이 좋아지는 귀여운 순간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?auto=format&fit=crop&w=800&q=80" alt="강아지 휴식">
</div>
<div class="card_text">
<h3>REST TIME</h3>
<p>편안하게 쉬며 하루의 피로를 풀어가는 조용한 휴식 시간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=crop&w=800&q=80" alt="강아지 친구들">
</div>
<div class="card_text">
<h3>WITH FRIENDS</h3>
<p>친구들과 함께 뛰어놀며 사회성을 키우는 즐거운 시간입니다.</p>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
COPYRIGHT 2026. DOG LIFE.<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>DOG LIFE DESIGN</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
background:#f5f5f5;
color:#222;
}
a{
text-decoration:none;
color:#222;
}
/* 헤더 */
.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;
}
.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:80px;
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;
}
/* 3행 2열 */
.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;
}
/* 푸터 */
.footer{
background:#222;
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{
width:92%;
}
}
@media screen and (max-width:1100px){
.main_wrap{
flex-direction:column;
}
.visual,
.total{
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{
grid-template-columns:1fr;
}
}
@media screen and (max-width:480px){
.visual{
padding:35px;
}
.visual h2{
font-size:42px;
}
.img_box{
height:220px;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header_wrap">
<h1 class="logo">
<a href="#">DOG LIFE</a>
</h1>
<nav class="menu" id="menu">
<a href="#">CARE</a>
<a href="#">WALK</a>
<a href="#">PLAY</a>
<a href="#">STORY</a>
</nav>
<div class="ham" id="ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<main class="main_wrap">
<!-- 왼쪽 50% -->
<section class="visual">
<h2>
HAPPY DOG<br>
DAILY LIFE
</h2>
<p>
강아지의 일상은 작은 순간들이 모여
따뜻한 추억이 됩니다.<br><br>
산책, 놀이, 휴식, 친구들과의 만남까지
반려견과 함께하는 행복한 하루를
사진과 카드 형태로 구성한 페이지입니다.
</p>
</section>
<!-- 오른쪽 50% -->
<section class="total">
<h2 class="section_title">
Dog Moments
</h2>
<div class="card_wrap">
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1552053831-71594a27632d?auto=format&fit=crop&w=800&q=80" alt="강아지 사진">
</div>
<div class="card_text">
<h3>DOG CARE</h3>
<p>반려견의 건강과 기분을 세심하게 살피는 돌봄 시간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?auto=format&fit=crop&w=800&q=80" alt="산책하는 강아지">
</div>
<div class="card_text">
<h3>DAILY WALK</h3>
<p>바깥 공기를 마시며 에너지를 채우는 즐거운 산책 순간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?auto=format&fit=crop&w=800&q=80" alt="웃는 강아지">
</div>
<div class="card_text">
<h3>HAPPY SMILE</h3>
<p>밝게 웃는 표정에서 느껴지는 강아지만의 순수한 매력입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?auto=format&fit=crop&w=800&q=80" alt="귀여운 강아지">
</div>
<div class="card_text">
<h3>CUTE MOMENT</h3>
<p>가만히 바라보기만 해도 기분이 좋아지는 귀여운 순간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?auto=format&fit=crop&w=800&q=80" alt="강아지 휴식">
</div>
<div class="card_text">
<h3>REST TIME</h3>
<p>편안하게 쉬며 하루의 피로를 풀어가는 조용한 휴식 시간입니다.</p>
</div>
</article>
<article class="card">
<div class="img_box">
<img src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=crop&w=800&q=80" alt="강아지 친구들">
</div>
<div class="card_text">
<h3>WITH FRIENDS</h3>
<p>친구들과 함께 뛰어놀며 사회성을 키우는 즐거운 시간입니다.</p>
</div>
</article>
</div>
</section>
</main>
<footer class="footer">
COPYRIGHT 2026. DOG LIFE.<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>
#스타일시트 반응형 연습2