AcaMate/AcaMate_Web
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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">
<main class="flex-1 w-full w-max-960 mx-auto">
@Body
</main>
</div>

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

@ -32,14 +32,16 @@
@* </head> *@
@* <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="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="[480px]:p-4">
@* <div class="[480px]:p-4"> *@
<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");'
>
<div class="flex flex-col gap-2 text-left">
@ -58,7 +60,7 @@
<span class="truncate">Get Started</span>
</button>
</div>
</div>
@* </div> *@
</div>
<div class="flex flex-col gap-10 px-4 py-10 container">
<div class="flex flex-col gap-4">

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

@ -1,18 +1,27 @@
<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">
<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 class="flex flex-1 justify-end gap-8">
<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="#">Join</a>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">What's New</a>
<div class="hidden md:flex flex-1 justify-end gap-8">
<div class="flex flex-1 justify-end gap-8">
<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="#">Join</a>
<a class="text-text-title font-medium leading-normal hover:text-blue-800" href="#">What's New</a>
</div>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
@onclick= "OnClickLogin">
<span class="truncate">Get Started</span>
</button>
</div>
<button class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-blue-500 hover:bg-blue-800 text-white text-sm font-bold leading-normal tracking-[0.015em] mr-4"
@onclick= "OnClickLogin">
<span class="truncate">Get Started</span>
</button>
</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>

2
wwwroot/css/tailwind.css
View File

File diff suppressed because one or more lines are too long