도움말:사용자 CSS

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

문서의 내용 관련

사용자 폰트 바꾸기

이와 관련한 주제는 도움말:위키 문법#사용자 폰트 변경법에서 다룹니다.

간단히 말하자면 자신이 바꾸고 싶은 글꼴명, 글꼴 크기 등을 지정하는 옵션입니다. 다만 이 설정은 이미 설치된 글꼴에서만 유효합니다.

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

설치하지 않은 글꼴을 사용하고 싶으시면 웹폰트를 정의한 CSS파일을 이용하시면 됩니다.

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

링크 텍스트 바꾸기

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

/* 속성 변환 예시 */
.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:hover,
.Liberty .nav-wrapper .navbar .navbar-nav .nav-item span.nav-link:hover
{
/* 위와 마찬가지로 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코드 */
}

리브레 스킨 관련

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

/*상단 바 배경 디자인*/
.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 명령어의 기본적인 지식은이곳을, 미디어위키 상에서의 코딩 규칙은 이곳이나 이곳을 참조하시기 바랍니다.