seonkyu.kim/AcaMate_Web
1
0
Fork 0
forked from AcaMate/AcaMate_Web
Code Pull Requests Activity

[🐛] 화면 반응형

Browse Source 
1. 화면 반응형 동작 가능하게 수정
This commit is contained in:
김선규 2025-05-27 16:34:56 +09:00
parent c1fdf2773d
commit 9e2151cbd7
4 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Program/Layout/MainLayout.razor
View File

@ -37,7 +37,7 @@
<!-- 본문 컨텐츠 --> <!-- 본문 컨텐츠 -->
@* <main class="flex-1 p-4 sm:p-6 md:p-8"> *@ @* <main class="flex-1 p-4 sm:p-6 md:p-8"> *@
<main class="flex-1"> <main class="flex-1 w-full w-max-960 mx-auto">
@Body @Body
</main> </main>
</div> </div>

12
Program/Views/Project/About.razor
View File

@ -32,14 +32,16 @@
@* </head> *@ @* </head> *@
@* <body> *@ @* <body> *@
<div class="relative flex size-full min-h-screen flex-col bg-white group/design-root overflow-x-hidden" style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'> <div class="relative flex size-full w-full min-h-screen flex-col items-center bg-white group/design-root overflow-x-hidden"
style='font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;'>
<div class="layout-container flex h-full grow flex-col"> <div class="layout-container flex h-full grow flex-col">
<div class="flex flex-1 justify-center"> <div class="flex flex-1 justify-center">
<div class="layout-content-container flex flex-col max-w-[960px] flex-1"> <div class="layout-content-container flex flex-col w-full max-w-[960px] flex-1 mx-auto">
<div class="container"> <div class="container">
<div class="[480px]:p-4"> @* <div class="[480px]:p-4"> *@
<div <div
class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10" class="w-full flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10"
@* class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat [480px]:gap-8 [480px]:rounded-lg items-start justify-end px-4 pb-10 [480px]:px-10" *@
style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDffY0eohqZnXKdWwIoiHloiYxZ1igyaJWtn7zdpfeze7pDhQuxV3MqvGueO1m-a38SDlXVEZUkd8es8cB8YvKHf8J-FIzTPFEHU4UnTNRBnX0XGv0EoZGrutA0kHnI_IA0k0SLtlU7NUK_7EcLabUHzALRgVZhcP98Bd-2GZl85-6ODqSHpe11pHXpyMz3RDDEzhDuHAwBBfJJaJG7zFC22X8Cc0K_V97Vf7jXfs-WYJ5CCrKAE3JpT2RUbdEJfiJHOkDh9yGWU1TB");' style='background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDffY0eohqZnXKdWwIoiHloiYxZ1igyaJWtn7zdpfeze7pDhQuxV3MqvGueO1m-a38SDlXVEZUkd8es8cB8YvKHf8J-FIzTPFEHU4UnTNRBnX0XGv0EoZGrutA0kHnI_IA0k0SLtlU7NUK_7EcLabUHzALRgVZhcP98Bd-2GZl85-6ODqSHpe11pHXpyMz3RDDEzhDuHAwBBfJJaJG7zFC22X8Cc0K_V97Vf7jXfs-WYJ5CCrKAE3JpT2RUbdEJfiJHOkDh9yGWU1TB");'
> >
<div class="flex flex-col gap-2 text-left"> <div class="flex flex-col gap-2 text-left">
@ -58,7 +60,7 @@
<span class="truncate">Get Started</span> <span class="truncate">Get Started</span>
</button> </button>
</div> </div>
</div> @* </div> *@
</div> </div>
<div class="flex flex-col gap-10 px-4 py-10 container"> <div class="flex flex-col gap-10 px-4 py-10 container">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">

11
Program/Views/Project/TopNav.razor
View File

@ -1,9 +1,10 @@
<div class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f5] py-4 bg-white"> <div class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#f0f2f5] py-4 bg-white">
<div class="flex items-center gap-4 text-[#111418] ml-4"> <div class="flex items-center gap-4 text-[#111418] ml-4">
<img src="/logo.png" alt="Icon" class="w-8 h-8"> <img src="/logo.png" alt="Icon" class="w-8 h-8">
<h2 class="text-[#111418] text-lg font-bold leading-tight tracking-[-0.015em]">AcaMate</h2> <h2 class="text-text-title text-lg font-bold leading-tight tracking-[-0.015em]">AcaMate</h2>
</div> </div>
<div class="hidden md:flex flex-1 justify-end gap-8">
<div class="flex flex-1 justify-end gap-8"> <div class="flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9"> <div class="flex items-center gap-9">
<a class=" text-text-title font-medium leading-normal hover:text-blue-800" href="#">About</a> <a class=" text-text-title font-medium leading-normal hover:text-blue-800" href="#">About</a>
@ -15,4 +16,12 @@
<span class="truncate">Get Started</span> <span class="truncate">Get Started</span>
</button> </button>
</div> </div>
</div>
<button class="md:hidden mr-4">
<!-- 햄버거 아이콘 (예시) -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div> </div>

2
wwwroot/css/tailwind.css
View File

File diff suppressed because one or more lines are too long