사용자 CSS

사용자는 위키에 기본적으로 주어진 CSS 설정을 수정해서 디자인을 변경할 수 있습니다.

특수:내사용자문서/common.css를 누르시거나 특수:환경설정에서 두 번째 탭인 문서 보이기를 누릅니다. 그 다음에 모든 스킨에 공유된 CSS/자바스크립트 에서 사용자 CSS 항목을 클릭하시면 사용자:사용자/common.css를 편집하라는 창이 나타납니다. 이곳에 자신이 원하는 CSS 설정을 입력하시면 됩니다. 역시 특정한 스킨에서만 CSS 설정을 변경하시려면 사용자:사용자/(스킨이름).css를 대신 편집하시면 됩니다.

상단 바의 색깔이나 글꼴 등을 바꾸고 싶거나 취소선 안의 내용을 지우는 등의 보이기 효과를 바꾸는 방법은 사용자 CSS를 조작하면 됩니다. 특수:내사용자문서/common.css에서 해당 소스를 복사-붙여넣기를 하시면 됩니다. 특정 스킨에만 설정된 효과를 적용하시고 싶으시면 사용자:사용자/(스킨이름).css에 내용을 복사-붙여넣기 하시면 됩니다.

문서의 내용 관련

사용자 폰트 바꾸기

특수:내사용자문서/common.css 에서

#mw-body-text { /*본문의 내용을 적용할 때 사용. */
font-size: 15px; /*글자 크기*/
font-family: dotum; /*글꼴 모양*/
font-weight: 400; /*글꼴의 두께*/
}

해당 내용을 복사한 이후 font-size 숫자를 원하는 대로 수정하면된다. 글꼴을 바꾸고 싶을 땐 font-family: 부분을 수정하면되고 ~~기본적으로 많이 쓰는~~ dotum, gulim 등을 쓰면된다. (글꼴을 바꾸기 싫으면 font-family 부분은 지워주자)

다만 이 설정은 이미 설치된 글꼴에서만 유효합니다.

따라서 새로운 폰트를 쓰고 싶다면, '웹폰트'를 사용해 사용자 CSS에 저장하면 된다. 예시로 '나눔고딕'을 구글 폰트를 통해 적용해보겠다.

CSS 문서 최상단에

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

을 추가한다.

아래 내용을 CSS 문서 내에 삽입한다.

body {
    font-family: "Nanum Gothic";
}

편집창에서 다른 폰트(특히, 고정폭 글꼴)을 사용할 때에는 textarea#wpTextbox1를 사용해주시면 됩니다.

예시:

@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext);
 
textarea#wpTextbox1 { font-family: 'Source Code Pro'; font-size:small; }

링크 텍스트 바꾸기

영위백 도움말:링크 문서도 참조하세요. 다음과 같이 중괄호 안에 있는 속성을 바꾸어서 설정할 수 있습니다.

/* 속성 변환 예시 */
.mw-body a:link { color: #0000FF; } /* 방문하지 않은 링크 */
.mw-body a:link:visited { color: #0B0080; } /* 이미 방문한 링크 */
.mw-body a:link:hover { color: #7F7F7F; text-decoration: underline; } /*링크 위에 마우스를 올려놓을 때 */
.mw-body a:link:active { color: #FF0000; } /* 실행 중인 링크 */
.mw-body a:link.new { color: #FF0000; font-style:italic; } /* 문서가 없는 링크 */
.mw-body a:link.interwiki { color: #3366BB; } /* 인터위키로 타 위키의 문서를 연결하는 링크 */
.mw-body a:link.external { color: #33AF7F; } /* 위키위키 외부의 링크 */
/*또는 .mw-body a.external {}을 사용할 수도 있다.*/
.mw-body a:external { color:#008F00; } /* 이미 방문한 위키위키 외부의 링크 */
.mw-body a.mw-redirect {color:#308050} /* 넘겨주기 */
.mw-body a.mw-redirect:visited {color:#3070A0} /* 이미 방문한 넘겨주기 */

a:link는 평범한 링크, a:external은 외부 링크, a.mw-redirect는 넘겨주기의 속성을 결정하며, 뒤에 ":visited"가 붙은 것은 방문한 링크의 설정을, ":hover"가 붙은 것은 마우스를 올려놓았을 때의 설정이며, ":active"가 붙은 것은 클릭해서 실행 중인 링크에 대한 설정입니다.

글자 속성은 color, text-decoration, font 계열 태그들(font-family, font-style 등)을 집어넣을 수 있습니다.

특정 태그 안의 효과를 바꾸기

사용자 CSS에서는 태그 이름을 붙인 뒤 태그 안의 글자의 효과를 바꾸는 기능도 가지고 있습니다. 예를 들면 취소선을 나타내는 태그는 <strike>, <del>, <s> 세 가지가 있습니다. 이를 이용해서

태그명 { (속성);
}

라고 입력하시면 해당 태그명 안의 글자 효과가 변경됩니다.

예를 들면 취소선이 쳐진 글자 내부의 글자 색깔을 검은색으로 변경하고 싶으면 특수:내사용자문서/CSS에

strike, del, s{
      color: black;
}

라고 입력하시면 되고, 취소선 내부의 글자를 아예 보이지 않게 하기 위해서는

strike, del, s{
display:none !important;
}

라고 입력하시면 됩니다.

취소선 효과를 무시하고 싶을 때에는

del, s {text-decoration:none!important; color:black; }

라고 입력하시면 됩니다.

리버티 스킨 관련

부트스트랩에 관한 CSS 소스는 이곳에 있습니다.

상단바 디자인 변경

다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다.

/* 일부 내용은 사:Skim/liberty.css에서 가져왔습니다. */ 
/*상단 바 디자인*/
.Liberty .nav-wrapper
{
        background: (배경색, linear-gradient, 파일 등) ;
        height:(바 두께 조절); /*그러나 아무리 좁혀도 기본 설정보다 좁혀지지는 않는 것으로 알고 있음. */
}
/*상단 바 아이콘 호버(올려놓을 때) 변경*/
.Liberty .nav-wrapper .navbar .navbar-nav .nav-item a.nav-link:hover,
.Liberty .nav-wrapper .navbar .navbar-nav .nav-item span.nav-link:hover
{
  backgrouund: (배경색/linear-gradient 파일 등);
color: (글자 색깔);
/*그외의  CSS 입력 */
}
/*상단 바 아이콘 포커스(클릭시) 변경*/
.Liberty .nav-wrapper .navbar .navbar-nav .nav-item a.nav-link:focus,
.Liberty .nav-wrapper .navbar .navbar-nav .nav-item span.nav-link:focus
{
/* 위와 마찬가지로 CSS코드를 입력하면 된다. */
  
}
/*드랍 다운 메뉴 호버/포커스 변경. 이제부터는 편의상 호버/포커스 색상 변경을 하나로 묶는다.*/
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus
{ /*CSS 코드 */
}
/* 상단 버튼 변경 */
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools a.tools-btn:hover,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools a.tools-btn:focus
{ /*CSS 코드 */
}
/*상단 토글 버튼 디자인 변경 */
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools button.dropdown-toggle:hover,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools button.dropdown-toggle:focus
{ /*CSS 코드 입력 */
}
/*검색 창 아이콘 호버, 포커스 디자인 변경*/
.Liberty .nav-wrapper .navbar .form-inline button.btn:hover,
.Liberty .nav-wrapper .navbar .form-inline button.btn:focus
{
/* CSS 코드 */
}
/*우측 바 더보기 디자인 변경*/
.Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-footer span.label
{
/* CSS 코드 */
}
/*우측 바 더보기 호버, 포커스 디자인 변경*/
.Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-footer span.label:hover,
.Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-footer span.label:focus
{
/*CSS 코드 */
}
/*우측 바 탭 밑 선 색깔 변경*/
.Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-header .nav .nav-item a.nav-link.active::before,
.Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-header .nav .nav-item a.nav-link:hover::before,
.Liberty .content-wrapper .liberty-sidebar .liberty-right-fixed .live-recent .live-recent-header .nav .nav-item a.nav-link:focus::before
{
/*CSS코드 */
}

다른 방법으로 리버티 스킨의 기본 색을 다른 색으로 한번에 치환하려면 다음과 같은 방법을 사용해도 됩니다.

/*사용자:코코아/liberty.css에서 가져왔습니다. */

/*리버티 스킨의 기본색 #4188f1로 지정된 부분을 다른 색으로 치환합니다. */
[style*="background-color:#4188f1"], [style*="background-color: #4188f1"], [style*="background-color:#4188F1"], [style*="background-color: #4188F1"],
[style*="background:#4188f1"], [style*="background: #4188f1"], [style*="background:#4188F1"], [style*="background: #4188F1"] {
	background-color: (#색상명)!important;
}

리브레 스킨 관련

다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다. 참고로 리브레 스킨의 기본 셋팅은 이곳에서 확인할 수 있습니다.

/*상단 바 배경 디자인*/
.libre_navbar
{
        background: (배경색, linear-gradient, 파일 등) ;
        height:(바 두께 조절); /*그러나 아무리 좁혀도 기본 설정보다 좁혀지지는 않는 것으로 알고 있음. */
}
/*상단 바 아이콘 호버/포커스 디자인 변경*/
.libre_navbar_menu>li>a:hover,
.libre_navbar_menu>li>a:focus
{
/* CSS 입력 */
}
/* 상단바 드랍다운 디자인 변경 */
dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus
{ /*CSS 변경 */
}
/* 오른쪽 위 사용자 버튼 디자인 변경 */
.nav-login-btn
{/*CSS 변경 */
}

CSS에서 사용하는 키워드

CSS 명령어의 기본적인 지식은 이곳을, 미디어위키 상에서의 코딩 규칙은 이곳이나 이곳을 참조하시기 바랍니다.

보기 • 편집 리브레 위키 도움말
기초 사용법	기초 도움말 리브레 위키 사용법 화면 살펴보기 편집 시작하기 좋은 글 쓰기 서명 파일 올리기
위키 문법	문법 표 틀 TeX TeX 글꼴형 문자 TeX 특수문자 특수 명령문 입력 상자 모듈
특수 기능	사용자 JS 사용자 CSS 미디어위키 API 미디어위키 쿼리 분류 트리 키보드 단축키 상세 검색

도움말:사용자 CSS

목차