미디어위키:Common.css: 두 판 사이의 차이

기술노트
편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
/* ========== 기본 폰트 (나무위키 스타일) ========== */
/* =========================================================
html, body, #content, #mw-content-text, .mw-body {
  MediaWiki:Common.css  (NamuWiki-like 스타일, 호환 버전)
  - CSS 변수(:root, --token) 미사용
  ========================================================= */
 
/* 기본 폰트 & 가독성 */
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
   font-family:
   font-family:
     "Malgun Gothic", "맑은 고딕", /* Windows 우선 */
     "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
    "Apple SD Gothic Neo",       /* macOS */
    Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
    "Noto Sans KR",             /* Linux/Chrome */
    "Helvetica Neue", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
     sans-serif !important;
     sans-serif !important;
   font-size: 15px;               /* 나무위키는 15px 사용 */
   font-size: 16px;
   line-height: 1.7;             /* 더 넓은 줄간격 */
   line-height: 1.65;
   font-weight: 400;             /* 기본 굵기 */
  color: #202122;
  letter-spacing: -0.2px;        /* 자간: 나무위키 느낌 */
   word-break: keep-all;         /* 한글 줄바꿈 개선 */
   -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.75rem;          /* ≈ 28px */
   font-size: 1.875rem;          /* ≈ 30px */
   font-weight: 600;             /* 나무위키는 살짝 더 가늘게 */
   font-weight: 700;
   color: #000;                 /* 제목은 완전 검정 */
   color: #1f2328;
   margin-bottom: .8rem;
   letter-spacing: -0.1px;
   letter-spacing: -0.5px;       /* 자간 조정 */
   margin: 0 0 .6rem 0;
}
}


/* ========== 섹션 제목(H2/H3) 스타일 ========== */
/* 섹션 제목(H2/H3) */
.mw-body h2 {
.mw-body h2 {
   font-size: 1.375rem;         /* ≈ 22px */
   font-size: 1.375rem;           /* ≈ 22~24px */
   font-weight: 600;
   font-weight: 700;
   color: #000;
   color: #1f2328;
   border-bottom: 2px solid #00a495; /* 나무위키 특유의 초록색 */
  letter-spacing: -0.1px;
   padding-bottom: .3rem;
   border-bottom: 1px solid #e5e7eb;
   margin-top: 1.8rem;
   padding-bottom: .35rem;
  margin-bottom: 1rem;
   margin-top: 1.4rem;
  letter-spacing: -0.3px;
}
 
.mw-body h2 .mw-headline {
  font-weight: 600;
  color: #000;
}
}
.mw-body h2 .mw-headline { font-weight: 700; }


.mw-body h3 {
.mw-body h3 {
   font-size: 1.125rem;         /* ≈ 18px */
   font-size: 1.125rem;           /* ≈ 18~20px */
   font-weight: 600;
   font-weight: 700;
   color: #000;
   color: #1f2328;
  margin-top: 1.4rem;
   letter-spacing: -0.1px;
  margin-bottom: .6rem;
   margin-top: 1.1rem;
   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;
}
}


/* 본문 여백 */
.mw-body-content p { margin: .6rem 0 .7rem; }
b, strong { font-weight: 700; letter-spacing: -0.1px; }
i, em { font-style: italic; }
i, em { font-style: italic; }


/* ========== 링크 색상(나무위키 스타일) ========== */
/* 리스트 간격 */
.mw-body a {  
.mw-body ul, .mw-body ol { margin: .4rem 0 .7rem 1.3rem; }
  color: #00a495;               /* 나무위키 특유의 청록색 */
  text-decoration: none;
}


.mw-body a:hover {  
/* 링크 색상 */
   color: #008577;               /* 호버시 더 진한 색 */
.mw-body a {
   text-decoration: underline;  
   color: #1a73e8;
   text-decoration: none;
}
}
.mw-body a:hover, .mw-body a:focus { text-decoration: underline; }


.mw-body a:visited {
/* [편집] 링크 톤다운 */
   color: #7b68ee;               /* 방문한 링크는 보라색 계열 */
.mw-editsection, .mw-editsection a {
   color: #6b7280;
  font-size: .875rem;
}
}


/* ========== 리스트/테이블 약간의 간격 보정 ========== */
/* 목차(TOC) */
.mw-body ul, .mw-body ol {
#toc, .toc {
   margin: .5rem 0 .8rem 1.5rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
   padding: .6rem .75rem;
  font-size: .95rem;
   line-height: 1.6;
   line-height: 1.6;
}
}
#toc .toctitle { font-weight: 700; letter-spacing: -0.1px; }
#toc ul { margin-left: 1rem; }


.mw-body li {
/* 표(wikitable) */
   margin-bottom: .2rem;
.mw-body .wikitable {
   border: 1px solid #e5e7eb;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
}
}
 
.mw-body .wikitable th {
.mw-body .wikitable {  
   background: #f3f4f6;
   font-size: 0.875rem;         /* 표는 더 작게 */
   font-weight: 700;
   border-collapse: collapse;
  margin: 1rem 0;
}
}
 
.mw-body .wikitable th,
/* ========== 나무위키 특유의 디자인 요소 ========== */
.mw-body .wikitable td {
.mw-body blockquote {
   border: 1px solid #e5e7eb;
   border-left: 3px solid #00a495;
   padding: .45rem .6rem;
   padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #555;
}
}
.mw-body .wikitable tr:nth-child(even) { background: #fafafa; }


/* ========== 코드/인용구 스타일 ========== */
/* 코드 블록 */
code {
pre, code, kbd, samp, tt {
   font-family: "Consolas", "Monaco", "Courier New", monospace;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
  background-color: #f5f5f5;
              "Liberation Mono", "Noto Sans Mono", monospace !important;
  padding: 0.2rem 0.4rem;
   font-size: .95em;
  border-radius: 3px;
   font-size: 0.9em;
}
}
pre {
pre {
   background-color: #f8f9fa;
   background: #f8fafc;
   border: 1px solid #e9ecef;
   border: 1px solid #e5e7eb;
   border-radius: 4px;
   border-radius: 6px;
   padding: 1rem;
   padding: .7rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
}
/* 구분선 */
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1rem 0; }
/* 캡션 살짝 그레이 */
div.thumb .thumbcaption { color: #6b7280; font-size: .92rem; }

2025년 9월 6일 (토) 04:57 판

/* =========================================================
   MediaWiki:Common.css  (NamuWiki-like 스타일, 호환 버전)
   - CSS 변수(:root, --token) 미사용
   ========================================================= */

/* 기본 폰트 & 가독성 */
html, body, #content, #mw-content-text, .mw-body, .mw-parser-output {
  font-family:
    "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",
    Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",
    sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: #202122;
  letter-spacing: -0.2px;        /* 자간: 나무위키 느낌 */
  word-break: keep-all;          /* 한글 줄바꿈 개선 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 페이지 제목(H1) */
#firstHeading, .mw-body h1.firstHeading {
  font-size: 1.875rem;           /* ≈ 30px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  margin: 0 0 .6rem 0;
}

/* 섹션 제목(H2/H3) */
.mw-body h2 {
  font-size: 1.375rem;           /* ≈ 22~24px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .35rem;
  margin-top: 1.4rem;
}
.mw-body h2 .mw-headline { font-weight: 700; }

.mw-body h3 {
  font-size: 1.125rem;           /* ≈ 18~20px */
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.1px;
  margin-top: 1.1rem;
}

/* 본문 여백 */
.mw-body-content p { margin: .6rem 0 .7rem; }
b, strong { font-weight: 700; letter-spacing: -0.1px; }
i, em { font-style: italic; }

/* 리스트 간격 */
.mw-body ul, .mw-body ol { margin: .4rem 0 .7rem 1.3rem; }

/* 링크 색상 */
.mw-body a {
  color: #1a73e8;
  text-decoration: none;
}
.mw-body a:hover, .mw-body a:focus { text-decoration: underline; }

/* [편집] 링크 톤다운 */
.mw-editsection, .mw-editsection a {
  color: #6b7280;
  font-size: .875rem;
}

/* 목차(TOC) */
#toc, .toc {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .6rem .75rem;
  font-size: .95rem;
  line-height: 1.6;
}
#toc .toctitle { font-weight: 700; letter-spacing: -0.1px; }
#toc ul { margin-left: 1rem; }

/* 표(wikitable) */
.mw-body .wikitable {
  border: 1px solid #e5e7eb;
  border-collapse: collapse;
  font-size: .95rem;
  background: #fff;
}
.mw-body .wikitable th {
  background: #f3f4f6;
  font-weight: 700;
}
.mw-body .wikitable th,
.mw-body .wikitable td {
  border: 1px solid #e5e7eb;
  padding: .45rem .6rem;
}
.mw-body .wikitable tr:nth-child(even) { background: #fafafa; }

/* 코드 블록 */
pre, code, kbd, samp, tt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", "Noto Sans Mono", monospace !important;
  font-size: .95em;
}
pre {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: .7rem;
}

/* 구분선 */
hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1rem 0; }

/* 캡션 살짝 그레이 */
div.thumb .thumbcaption { color: #6b7280; font-size: .92rem; }
원본 주소 "https://technote.wiki/index.php?title=미디어위키:Common.css&oldid=772"