미디어위키:Common.css: 두 판 사이의 차이
둘러보기로 이동
검색으로 이동
편집 요약 없음 |
편집 요약 없음 |
||
| 1번째 줄: | 1번째 줄: | ||
/* ===== 인문지리학 전공 | /* ============================= */ | ||
/* 인문지리학 전공 메인 디자인 */ | |||
/* ============================= */ | |||
/* | .main-container { | ||
margin-top: 20px; | |||
} | |||
/* 상단 전공 메뉴 */ | |||
.dept-nav { | |||
display: flex; | |||
justify-content: flex-end; | |||
gap: 10px; | |||
margin-bottom: 20px; | |||
} | |||
.dept-nav a { | |||
padding: 8px 16px; | |||
text-decoration: none; | |||
font-size: 14px; | |||
border-radius: 6px; | |||
background: #f2f4f7; | |||
color: #1a2a3a; | |||
transition: 0.2s; | |||
} | |||
.dept-nav a.active { | |||
background: #1e4b8e; | |||
color: white; | |||
} | |||
.dept-nav a:hover { | |||
background: #dce3ec; | |||
} | |||
/* HERO */ | |||
.hero { | .hero { | ||
position: relative; | position: relative; | ||
height: | height: 360px; | ||
border-radius: | border-radius: 12px; | ||
overflow: hidden; | overflow: hidden; | ||
margin-bottom: 40px; | margin-bottom: 40px; | ||
background: url('/wiki/images/banner_hg.jpg') center/cover no-repeat; | |||
} | } | ||
.hero::after { | .hero::after { | ||
content: | content: ""; | ||
position: absolute; | position: absolute; | ||
top: 0; | top:0; right:0; bottom:0; left:0; | ||
background: rgba(0,0,0,0.45); | background: rgba(0,0,0,0.45); | ||
} | } | ||
| 23번째 줄: | 53번째 줄: | ||
.hero-content { | .hero-content { | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 50px; | ||
right: | right: 60px; | ||
color: white; | color: white; | ||
z-index: 2; | z-index: 2; | ||
| 31번째 줄: | 61번째 줄: | ||
.hero-title { | .hero-title { | ||
font-size: | font-size: 40px; | ||
font-weight: 700; | font-weight: 700; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
color: white; | |||
} | } | ||
.hero-subtitle { | .hero-subtitle { | ||
font-size: | font-size: 18px; | ||
color: white; | |||
} | } | ||
/* | /* 2단 레이아웃 */ | ||
.content-grid { | |||
display: grid; | |||
grid-template-columns: 2fr 1fr; | |||
gap: 40px; | |||
} | |||
/* 학술 활동 카드 */ | |||
.section-title { | .section-title { | ||
font-size: 22px; | font-size: 22px; | ||
| 50번째 줄: | 89번째 줄: | ||
} | } | ||
.activities-grid { | .activities-grid { | ||
display: grid; | display: grid; | ||
| 58번째 줄: | 96번째 줄: | ||
.activity-card { | .activity-card { | ||
background: | background: white; | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: 24px; | padding: 24px; | ||
| 80번째 줄: | 118번째 줄: | ||
font-size: 14px; | font-size: 14px; | ||
color: #64748b; | color: #64748b; | ||
margin-bottom: | margin-bottom: 12px; | ||
} | } | ||
| 90번째 줄: | 128번째 줄: | ||
.activity-button:hover { | .activity-button:hover { | ||
text-decoration: underline; | |||
} | |||
/* 우측 학과 소개 카드 */ | |||
.intro-card { | |||
background: white; | |||
border-radius: 12px; | |||
padding: 28px; | |||
border: 1px solid #dce3ec; | |||
box-shadow: 0 2px 8px rgba(0,0,0,0.06); | |||
} | |||
.intro-card h3 { | |||
margin-bottom: 12px; | |||
color: #1e4b8e; | |||
} | |||
.intro-card p, | |||
.intro-card li { | |||
font-size: 14px; | |||
line-height: 1.7; | |||
} | |||
/* FOOTER */ | |||
.dept-footer { | |||
margin-top: 60px; | |||
background: #153a6e; | |||
color: white; | |||
padding: 40px; | |||
border-radius: 12px; | |||
} | |||
.footer-grid { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 40px; | |||
} | |||
.dept-footer a { | |||
color: white; | |||
text-decoration: none; | |||
} | |||
.dept-footer a:hover { | |||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
2026년 3월 1일 (일) 05:40 판
/* ============================= */
/* 인문지리학 전공 메인 디자인 */
/* ============================= */
.main-container {
margin-top: 20px;
}
/* 상단 전공 메뉴 */
.dept-nav {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 20px;
}
.dept-nav a {
padding: 8px 16px;
text-decoration: none;
font-size: 14px;
border-radius: 6px;
background: #f2f4f7;
color: #1a2a3a;
transition: 0.2s;
}
.dept-nav a.active {
background: #1e4b8e;
color: white;
}
.dept-nav a:hover {
background: #dce3ec;
}
/* HERO */
.hero {
position: relative;
height: 360px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 40px;
background: url('/wiki/images/banner_hg.jpg') center/cover no-repeat;
}
.hero::after {
content: "";
position: absolute;
top:0; right:0; bottom:0; left:0;
background: rgba(0,0,0,0.45);
}
.hero-content {
position: absolute;
bottom: 50px;
right: 60px;
color: white;
z-index: 2;
text-align: right;
}
.hero-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 10px;
color: white;
}
.hero-subtitle {
font-size: 18px;
color: white;
}
/* 2단 레이아웃 */
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/* 학술 활동 카드 */
.section-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #1e4b8e;
display: inline-block;
}
.activities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.activity-card {
background: white;
border-radius: 12px;
padding: 24px;
border: 1px solid #dce3ec;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: 0.3s;
}
.activity-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.activity-title {
font-size: 17px;
font-weight: 600;
margin-bottom: 8px;
}
.activity-desc {
font-size: 14px;
color: #64748b;
margin-bottom: 12px;
}
.activity-button {
text-decoration: none;
font-weight: 600;
color: #1e4b8e;
}
.activity-button:hover {
text-decoration: underline;
}
/* 우측 학과 소개 카드 */
.intro-card {
background: white;
border-radius: 12px;
padding: 28px;
border: 1px solid #dce3ec;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.intro-card h3 {
margin-bottom: 12px;
color: #1e4b8e;
}
.intro-card p,
.intro-card li {
font-size: 14px;
line-height: 1.7;
}
/* FOOTER */
.dept-footer {
margin-top: 60px;
background: #153a6e;
color: white;
padding: 40px;
border-radius: 12px;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.dept-footer a {
color: white;
text-decoration: none;
}
.dept-footer a:hover {
text-decoration: underline;
}