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

2026년 10월 21일 (수) 12:37 기준 최신판

/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
/* 나눔고딕 미설치 컴에도 나눔고딕을 사용할 수 있게 함 구글 폰트에서 퍼옴 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
  src: url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
  src: url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
  src: url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
       url(http://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}
* { font-family: 'Nanum Gothic', sans-serif; }/*모든 글꼴을 나눔고딕으로. */

body.page-대문 h1.firstHeading {display:none;}
ol { 
	margin-left: 2cm;
list-style-type: decimal; 
}
img {
          display: block;
          margin: 0 auto;
          max-width: 100%;
    }
      
/* .tocnumber:after { content: '.' }*/

/* 반응형 그리드 레이아웃 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* 반응형 이미지 */
.responsive-image {
        display: block;
        margin: 0 auto;
        max-width: 100%;
}

.responsive-img {
    width: 100%; /* 부모 요소의 너비에 맞게 조정 */
    height: 600px; /* 원하는 높이 설정 */
    background-size: cover; /* 이미지가 div를 채우도록 조정 */
    background-position: center; /* 이미지의 중심을 기준으로 위치 조정 */
}

/* 모바일 환경에서의 텍스트 정렬 */
@media (max-width: 768px) {
    .main-page-intro {
        text-align: center;
    }
}

/* 데스크탑에서는 그리드 레이아웃 사용 */
@media (min-width: 769px) {
    .main-page-intro {
        display: flex;
        justify-content: space-between;
    }
}


/* 목차(TOC)에 넘버링 추가 */
#toc ul {
  counter-reset: item;
}
#toc li {
  display: block;
}
#toc li:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

/* 문서 섹션 제목(h2~h6)에 넘버링 추가 
.mw-headline {
  counter-reset: subsection;
}
h2 .mw-headline:before {
  counter-increment: section;
  content: counter(section) ". ";
}
h3 .mw-headline:before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
*/

/* 미디어위키 본문 영역 전체의 카운터 초기화 */
.mw-parser-output {
    counter-reset: h1-counter;
}

/* 1단계 제목 (h2) 넘버링 */
.mw-parser-output h2 {
    counter-reset: h2-counter;
}
.mw-parser-output h2 .mw-headline::before {
    counter-increment: h1-counter;
    content: counter(h1-counter) ". ";
}

/* 2단계 소제목 (h3) 넘버링 */
.mw-parser-output h3 {
    counter-reset: h3-counter;
}
.mw-parser-output h3 .mw-headline::before {
    counter-increment: h2-counter;
    content: counter(h1-counter) "." counter(h2-counter) " ";
}

/* 3단계 소제목 (h4) 넘버링 */
.mw-parser-output h4 .mw-headline::before {
    counter-increment: h3-counter;
    content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) " ";
}



/* 나만의 모던 심플 그레이 위키 테이블 */
.tb_gray {
    border-collapse: collapse !important;
    border: 1px solid #e0e0e0 !important;
    width: 100%;
    margin: 1em 0;
}
/* 타이틀 행 (중앙 정렬 + 은은한 회색 배경) */
.tb_gray th {
    background-color: #f5f5f5 !important;
    border-bottom: 2px solid #cccccc !important;
    border-right: 1px solid #e0e0e0 !important;
    padding: 10px !important;
    text-align: center !important;
}
/* 첫 번째 컬럼 (진한 강조 회색, 왼쪽 정렬) */
.tb_gray td:first-child {
    font-weight: bold;
    background-color: #fafafa !important;
    border-right: 1px solid #e0e0e0 !important;
    text-align: left !important;
}
/* 일반 본문 셀 */
.tb_gray td {
    padding: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}


/* 나만의 심플한 커스텀 위키 테이블 */
.tb_blue {
    border-collapse: collapse !important;
    border: 1px solid #dcdcdc !important;
    width: 100%;
    margin: 1em 0;
}
/* 타이틀 행 (중앙 정렬 + 하늘색 배경) */
.tb_blue th {
    background-color: #e6f2ff !important;
    border-bottom: 2px solid #b0d4ff !important;
    border-right: 1px solid #dcdcdc !important;
    padding: 10px !important;
    text-align: center !important;
}
/* 첫 번째 컬럼 (진한 강조 색상, 왼쪽 정렬) */
.tb_blue td:first-child {
    font-weight: bold;
    background-color: #f2f7fc !important;
    border-right: 1px solid #dcdcdc !important;
    text-align: left !important;
}
/* 일반 본문 셀 */
.tb_blue td {
    padding: 10px !important;
    border-bottom: 1px solid #eee !important;
}