Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: 화면에 반응형 디자인 적용 #597 #598

Merged
merged 2 commits into from
Jan 15, 2025
Merged

refactor: 화면에 반응형 디자인 적용 #597 #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f8b2db
refactor: 반응형 디자인 적용
BurningFalls Jan 15, 2025
f0aadf8
refactor: 주석 삭제
BurningFalls Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 33 additions & 27 deletions backend/src/main/resources/static/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* Reset and Basic Styling */
body {
margin: 0;
font-family: 'Arial', sans-serif;
Expand All @@ -10,22 +9,21 @@ h1, h2, p {
margin: 0;
}

/* Features Section */
.features {
display: flex;
flex-direction: column; /* 세로 정렬 */
flex-direction: column;
align-items: center;
gap: 15rem; /* 각 아이템 간의 간격 */
gap: 10rem;
padding: 0;
background-color: #ffffff;
}

.feature {
width: 80%; /* 부모 컨테이너 전체 너비 */
height: auto; /* 화면 높이만큼 채우기 */
position: relative; /* 내부 이미지 정렬을 위한 상대 위치 설정 */
overflow: hidden; /* 넘치는 이미지 잘라내기 */
display: flex; /* 내부 이미지 중앙 정렬 */
width: 80%;
height: auto;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
Expand All @@ -39,8 +37,8 @@ h1, h2, p {
}

.feature img {
width: 100%; /* 부모 컨테이너의 가로 크기에 맞추기 */
object-fit: contain; /* 비율을 유지하며 잘리지 않도록 설정 */
width: 100%;
object-fit: contain;
}

.feature .background-image {
Expand All @@ -49,42 +47,50 @@ h1, h2, p {
}

.feature .overlay-image {
position: absolute; /* 부모를 기준으로 절대 위치 */
top: 13%; /* 세로 중앙 정렬 */
left: 65%; /* 가로 중앙 정렬 */
width: 28%; /* 덮어씌울 이미지의 크기 */
position: absolute;
top: 13%;
left: 65%;
width: 28%;
object-fit: contain;
}

/* Footer 기본 스타일 */
footer {
text-align: center;
padding: 2rem; /* 기본 패딩 */
padding: 2rem;
background: #E3C7FF;
color: #222222;
font-size: 1.5rem; /* 기본 글씨 크기 */
font-size: 1.5rem;
}

/* 1024px 이하 화면 */
@media (max-width: 1024px) {
footer {
padding: 2rem; /* 패딩 줄이기 */
font-size: 1.25rem; /* 글씨 크기 줄이기 */
padding: 1.5rem;
font-size: 1.25rem;
}

.features {
gap: 5rem;
}
}

/* 768px 이하 화면 */
@media (max-width: 768px) {
footer {
padding: 1.5rem; /* 더 작은 패딩 */
font-size: 1rem; /* 더 작은 글씨 크기 */
padding: 1.2rem;
font-size: 1rem;
}

.features {
gap: 2rem;
}
}

/* 480px 이하 화면 */
@media (max-width: 480px) {
footer {
padding: 1rem; /* 최소 패딩 */
font-size: 0.875rem; /* 가장 작은 글씨 크기 */
padding: 1rem;
font-size: 0.875rem;
}

.features {
gap: 1rem;
}
}
5 changes: 0 additions & 5 deletions backend/src/main/resources/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Staccato</title>
<!-- AOS CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="/index.css">
</head>
<body>

<!-- Features Section -->
<section class="features">
<div class="feature feature-start" data-aos="fade-up">
<img th:src="${'https://image.staccato.kr/web/index/feature-01.png'}" alt="Feature 1">
Expand Down Expand Up @@ -39,12 +36,10 @@
</div>
</section>

<!-- Footer -->
<footer>
<p>&copy; 2025 Staccato. All rights reserved.</p>
</footer>

<!-- AOS JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
Expand Down
Loading