시계위키: 대문: 두 판 사이의 차이
편집 요약 없음 |
태그: 편집 취소 |
||
| 1번째 줄: | 1번째 줄: | ||
<!-- 배경 영역 --> | |||
<div class="main-hero"> | <div class="main-hero"> | ||
<div class="main-card"> | <div class="main-card"> | ||
<!-- 여기부터 기존 대문 내용 --> | |||
<h1>시계위키에 오신 것을 환영합니다</h1> | <h1>시계위키에 오신 것을 환영합니다</h1> | ||
<p> | <p> | ||
| 10번째 줄: | 11번째 줄: | ||
</div> | </div> | ||
/* 배경(히어로) 영역 */ | |||
.main-hero { | .main-hero { | ||
position: relative; | position: relative; | ||
| 16번째 줄: | 18번째 줄: | ||
} | } | ||
/* 배경 이미지를 쓰고 싶다면(선택) — 이미지 경로만 바꾸면 됩니다 */ | |||
.main-hero { | .main-hero { | ||
background: url(/images/site/hero.jpg) center/cover no-repeat fixed; | background: url(/images/site/hero.jpg) center/cover no-repeat fixed; | ||
} | } | ||
/* 가운데 카드 박스(본문) */ | |||
.main-card { | .main-card { | ||
max-width: 980px; | max-width: 980px; | ||
| 30번째 줄: | 34번째 줄: | ||
} | } | ||
/* 다크 모드 대응(선택) */ | |||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
.main-card { | .main-card { | ||
| 38번째 줄: | 43번째 줄: | ||
} | } | ||
/* 반응형(선택) — 모바일은 여백만 살짝 줄이기 */ | |||
@media (max-width: 720px) { | @media (max-width: 720px) { | ||
.main-hero { padding: 28px 12px; } | .main-hero { padding: 28px 12px; } | ||
.main-card { padding: 20px; border-radius: 12px; } | .main-card { padding: 20px; border-radius: 12px; } | ||
} | } | ||