미디어위키:Common.css: 두 판 사이의 차이
기술노트
편집 요약 없음 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
/* ========== 기본 폰트 ( | /* ========== 기본 폰트 (나무위키 스타일) ========== */ | ||
html, body, #content, #mw-content-text, .mw-body { | html, body, #content, #mw-content-text, .mw-body { | ||
font-family: | font-family: | ||
" | "Malgun Gothic", "맑은 고딕", /* Windows 우선 */ | ||
"Apple SD Gothic Neo", | "Apple SD Gothic Neo", /* macOS */ | ||
" | "Noto Sans KR", /* Linux/Chrome */ | ||
Helvetica, Arial, | "Helvetica Neue", Helvetica, Arial, | ||
"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", | "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", | ||
sans-serif !important; | sans-serif !important; | ||
font-size: | font-size: 15px; /* 나무위키는 15px 사용 */ | ||
line-height: 1. | line-height: 1.7; /* 더 넓은 줄간격 */ | ||
font-weight: 400; /* 기본 굵기 */ | |||
-webkit-font-smoothing: antialiased; | -webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
color: #373a3c; /* 나무위키 본문 색상 */ | |||
} | } | ||
/* ========== 페이지 제목(문서 최상단 H1) ========== */ | /* ========== 페이지 제목(문서 최상단 H1) ========== */ | ||
#firstHeading, .mw-body h1.firstHeading { | #firstHeading, .mw-body h1.firstHeading { | ||
font-size: 1. | font-size: 1.75rem; /* ≈ 28px */ | ||
font-weight: | font-weight: 600; /* 나무위키는 살짝 더 가늘게 */ | ||
color: # | color: #000; /* 제목은 완전 검정 */ | ||
margin-bottom: . | margin-bottom: .8rem; | ||
letter-spacing: -0.5px; /* 자간 조정 */ | |||
} | } | ||
/* ========== 섹션 제목(H2/H3) 스타일 ========== */ | /* ========== 섹션 제목(H2/H3) 스타일 ========== */ | ||
.mw-body h2 { | .mw-body h2 { | ||
font-size: 1. | font-size: 1.375rem; /* ≈ 22px */ | ||
font-weight: | font-weight: 600; | ||
color: # | color: #000; | ||
border-bottom: | border-bottom: 2px solid #00a495; /* 나무위키 특유의 초록색 */ | ||
padding-bottom: . | padding-bottom: .3rem; | ||
margin-top: 1. | margin-top: 1.8rem; | ||
margin-bottom: 1rem; | |||
letter-spacing: -0.3px; | |||
} | |||
.mw-body h2 .mw-headline { | |||
font-weight: 600; | |||
color: #000; | |||
} | } | ||
.mw-body h3 { | .mw-body h3 { | ||
font-size: 1. | font-size: 1.125rem; /* ≈ 18px */ | ||
font-weight: | font-weight: 600; | ||
color: # | color: #000; | ||
margin-top: 1. | margin-top: 1.4rem; | ||
margin-bottom: .6rem; | |||
letter-spacing: -0.2px; | |||
} | |||
.mw-body h3 .mw-headline { | |||
font-weight: 600; | |||
color: #000; | |||
} | } | ||
/* ========== 본문 가독성 보정 ========== */ | /* ========== 본문 가독성 보정 ========== */ | ||
.mw-body-content p { margin: . | .mw-body-content p { | ||
b, strong { font-weight: | margin: .7rem 0; | ||
letter-spacing: -0.2px; | |||
line-height: 1.7; | |||
} | |||
b, strong { | |||
font-weight: 600; /* 나무위키는 700보다 살짝 가늘게 */ | |||
color: #000; | |||
} | |||
i, em { font-style: italic; } | i, em { font-style: italic; } | ||
/* ========== 링크 색상( | /* ========== 링크 색상(나무위키 스타일) ========== */ | ||
.mw-body a { color: # | .mw-body a { | ||
.mw-body a:hover { text-decoration: underline; } | color: #00a495; /* 나무위키 특유의 청록색 */ | ||
text-decoration: none; | |||
} | |||
.mw-body a:hover { | |||
color: #008577; /* 호버시 더 진한 색 */ | |||
text-decoration: underline; | |||
} | |||
.mw-body a:visited { | |||
color: #7b68ee; /* 방문한 링크는 보라색 계열 */ | |||
} | |||
/* ========== 리스트/테이블 약간의 간격 보정 ========== */ | /* ========== 리스트/테이블 약간의 간격 보정 ========== */ | ||
.mw-body ul, .mw-body ol { margin: . | .mw-body ul, .mw-body ol { | ||
.mw-body .wikitable { font-size: 0. | margin: .5rem 0 .8rem 1.5rem; | ||
line-height: 1.6; | |||
} | |||
.mw-body li { | |||
margin-bottom: .2rem; | |||
} | |||
.mw-body .wikitable { | |||
font-size: 0.875rem; /* 표는 더 작게 */ | |||
border-collapse: collapse; | |||
margin: 1rem 0; | |||
} | |||
/* ========== 나무위키 특유의 디자인 요소 ========== */ | |||
.mw-body blockquote { | |||
border-left: 3px solid #00a495; | |||
padding-left: 1rem; | |||
margin: 1rem 0; | |||
font-style: italic; | |||
color: #555; | |||
} | |||
/* ========== 코드/인용구 스타일 ========== */ | |||
code { | |||
font-family: "Consolas", "Monaco", "Courier New", monospace; | |||
background-color: #f5f5f5; | |||
padding: 0.2rem 0.4rem; | |||
border-radius: 3px; | |||
font-size: 0.9em; | |||
} | |||
pre { | |||
background-color: #f8f9fa; | |||
border: 1px solid #e9ecef; | |||
border-radius: 4px; | |||
padding: 1rem; | |||
overflow-x: auto; | |||
font-size: 0.875rem; | |||
} |
2025년 9월 6일 (토) 02:21 판
/* ========== 기본 폰트 (나무위키 스타일) ========== */
html, body, #content, #mw-content-text, .mw-body {
font-family:
"Malgun Gothic", "맑은 고딕", /* Windows 우선 */
"Apple SD Gothic Neo", /* macOS */
"Noto Sans KR", /* Linux/Chrome */
"Helvetica Neue", Helvetica, Arial,
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
sans-serif !important;
font-size: 15px; /* 나무위키는 15px 사용 */
line-height: 1.7; /* 더 넓은 줄간격 */
font-weight: 400; /* 기본 굵기 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #373a3c; /* 나무위키 본문 색상 */
}
/* ========== 페이지 제목(문서 최상단 H1) ========== */
#firstHeading, .mw-body h1.firstHeading {
font-size: 1.75rem; /* ≈ 28px */
font-weight: 600; /* 나무위키는 살짝 더 가늘게 */
color: #000; /* 제목은 완전 검정 */
margin-bottom: .8rem;
letter-spacing: -0.5px; /* 자간 조정 */
}
/* ========== 섹션 제목(H2/H3) 스타일 ========== */
.mw-body h2 {
font-size: 1.375rem; /* ≈ 22px */
font-weight: 600;
color: #000;
border-bottom: 2px solid #00a495; /* 나무위키 특유의 초록색 */
padding-bottom: .3rem;
margin-top: 1.8rem;
margin-bottom: 1rem;
letter-spacing: -0.3px;
}
.mw-body h2 .mw-headline {
font-weight: 600;
color: #000;
}
.mw-body h3 {
font-size: 1.125rem; /* ≈ 18px */
font-weight: 600;
color: #000;
margin-top: 1.4rem;
margin-bottom: .6rem;
letter-spacing: -0.2px;
}
.mw-body h3 .mw-headline {
font-weight: 600;
color: #000;
}
/* ========== 본문 가독성 보정 ========== */
.mw-body-content p {
margin: .7rem 0;
letter-spacing: -0.2px;
line-height: 1.7;
}
b, strong {
font-weight: 600; /* 나무위키는 700보다 살짝 가늘게 */
color: #000;
}
i, em { font-style: italic; }
/* ========== 링크 색상(나무위키 스타일) ========== */
.mw-body a {
color: #00a495; /* 나무위키 특유의 청록색 */
text-decoration: none;
}
.mw-body a:hover {
color: #008577; /* 호버시 더 진한 색 */
text-decoration: underline;
}
.mw-body a:visited {
color: #7b68ee; /* 방문한 링크는 보라색 계열 */
}
/* ========== 리스트/테이블 약간의 간격 보정 ========== */
.mw-body ul, .mw-body ol {
margin: .5rem 0 .8rem 1.5rem;
line-height: 1.6;
}
.mw-body li {
margin-bottom: .2rem;
}
.mw-body .wikitable {
font-size: 0.875rem; /* 표는 더 작게 */
border-collapse: collapse;
margin: 1rem 0;
}
/* ========== 나무위키 특유의 디자인 요소 ========== */
.mw-body blockquote {
border-left: 3px solid #00a495;
padding-left: 1rem;
margin: 1rem 0;
font-style: italic;
color: #555;
}
/* ========== 코드/인용구 스타일 ========== */
code {
font-family: "Consolas", "Monaco", "Courier New", monospace;
background-color: #f5f5f5;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-size: 0.9em;
}
pre {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 1rem;
overflow-x: auto;
font-size: 0.875rem;
}