도움말:사용자 CSS

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

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

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

1 기본 문법 규칙[편집]

더 자세한 내용은 생활코딩 CSS 튜토리얼이나 W3schools CSS부분 등을 참조하시면 됩니다.

기본적으로 CSS 편집 규칙은 다음과 같습니다.

tagname {
'property1':'set1';
'property2':'set2';
}

태그네임은 "div"같은 태그의 이름, Property는 속성명, set은 각 Property에 대해 원하는 값을 표현합니다. 예를 들면 <div style="background-color:yellow;"></div>를 의미하는 코드는 style 부분을 아래처럼 지정할 수 있습니다.

div {
background-color:yellow;
}

1.1 id, class 선택자[편집]

ID와 Class 값은 각 태그에 고유한 이름을 붙입니다. 다만 ID값은 문서 내부에 오직 하나의 태그에만 붙일 수 있지만 class값은 문서 내부에 여러 태그에 붙일 수 있다는 차이가 있습니다. ID값은 #idname, class값은 .classname 형식으로 붙일 수 있습니다. 예를 들면 <span id="libre-no-1" style="color:#4188f1;"></span> 같은 경우 아래와 같은 방식으로 표현할 수 있습니다.

#libre-no-1 { /* 글자색을 libre 기본 색으로 바꾸는 코드 */
color:#4188f1;
}

마찬가지로 <span class="libre-holic" style="color:#4188f1;"></span> 같은 경우는 아래와 같은 방식으로 표현이 가능합니다.

.libre-holic { /* 글자색을 libre 기본 색으로 바꾸는 코드 */
color:#4188f1;
}

1.2 자손 선택자 및 자식 선택자[편집]

특정 태그 A에 둘러싸인 부분에 태그 B가 있을 때 B를 A의 자손 선택자, A를 B의 조상 선택자라고 부릅니다. 특히 A와 B 사이에 감싼 태그가 없는 경우에는 B를 A의 자식 선택자, A를 B의 조상 선택자라고 부릅니다. 특정 조상선택자 A 안에 자식 선택자 B를 선택할 경우 띄어쓰기를 통해 (조상) (자식) 선택자 형태로 지정할 수 있습니다.

예를 들면 아래 HTML 태그를 보면 알 수 있습니다.

<a href="https://librewiki.net/">리브레 위키</a>
<ul>
<li> <a href="https://librewiki.net/wiki/도움말:위키_문법">위키 문법</a>
<li> <a href="https://librewiki.net/wiki/도움말:Tex_문법">Tex 문법</a>
</ul>

여기서 단순히 선택자 a를 사용하면 위의 리브레 위키 링크까지 영향을 받습니다. 그러면 ul 태그 안의 a 태그의 스타일만 바꾸기 위해서는 다음과 같이 지정하면 됩니다.

ul a{ /*글자색 초록색으로 */
color:green;
}

또는 a 태그가 li 태그 바로 아래에 있을 때만 글자색을 바꾸게 지정할 수도 있습니다. 자식 선택자는 ">" 기호를 사용합니다.

li>a{ /*글자색 초록색으로 */
color:green;
}

1.3 동시 선택자[편집]

선택자를 붙여서 서술할 경우 선택자 모두에 해당되는 것만 집어넣을 수 있습니다. 예를 들어 div 태그에서 클래스명이 "libre xtype"인 객체는 다음과 같이 선택하면 됩니다.

div.libre.xtype{ /*글자 기울임 */
font-style:italic;
}

1.4 병렬 선택자[편집]

반점(,)을 이용해서 여러 선택자에 같은 효과를 집어넣을 수 있습니다. 예를 들면 클래스명이 "libre-1"과 "libre-2"로 지정된 선택자에 동등한 효과를 주기 위해서는 다음과 같은 코드를 사용하시면 됩니다.

.libre-1, .libre-2{ /*글자를 굵게 */
font-weight:bold;
}

1.5 속성 선택자[편집]

쌍점 :를 이용해 마우스 속성을 선택할 수 있습니다.

a:active {color: #FF0000} /*클릭 중인 링크 */
a:hover{color: #7F7F7F; text-decoration: underline;} /* 마우스 위 얹을 때 */
a:visited{color: #FF00FF;} /* 이미 방문한 링크에 대한 속성 추가 */

1.6 특정 속성 제거할 때 사용하기[편집]

tag:not(속성명)을 이용해서 속성명이 없는 것을 설정할 수 있습니다. 다음과 같은 경우 하이라이트된 부분에만 속성이 적용됩니다.

코드
1<div class="selected">테스트</div>
2<div class="">예제</div>
3<div class="selected">보기</div>
4<div class="not-selected">선택된 부분에</div>
5<div class="">속성이 적용</div>

CSS

div:not(.selected){ /*selected 클래스 미적용 */
font-weight:bold;
}



1.7 n번째 순번 지정시 사용[편집]

다음과 같은 속성들은 특정한 순번에서 지정할 때 사용됩니다. 태그명:속성함수(N)이며, N은 특정한 숫자거나 odd(홀수), even(짝수), 정수 A, B에 대해 An+B(예시 : 2n+3 - 3,5,7,...번째에 지정가능.) 형태로 지정할 수 있습니다.

  • tag:nth-of-type(N) 태그명이 tag이면서 N번째 순번의 태그에 모두 적용됩니다. 특히 tag:first-of-type은 tag:nth-of-type(1)을 의미합니다.
  • tag:nth-last-of-type(N) 태그명이 tag이면서 끝에서 N번째 순번의 태그에 모두 적용합니다. 특히 tag:last-of-type은 tag:nth-last-of-type(1)을 의미합니다.
  • tag:nth-child(N) 태그명이 tag이면서 tag의 부모 태그 중 N번째 순번의 자식일 때 적용됩니다. 특히 tag:first-child는 tag:nth-of-child(1)을 의미합니다. nth-of-type과는 달리 태그 자신이 반드시 부모의 N번째 자식이어야 적용됩니다.
  • tag:nth-last-child(N) 태그명이 tag이면서 tag의 부모 태그 중 끝에서 N번째 순번의 태그에 모두 적용합니다. 특히 tag:last-child는 tag:nth-last-child(1)을 의미합니다. 역시 nth-last-of-type과는 달리 태그 자신이 반드시 마지막에서 부모의 N번째 자식이어야 적용됩니다.

참조 : nth요소 관련 정보

nth-of-type vs nth-child의 의미 차이 보기

코드
 1	<div>div[1]
 2        <span>div[1]>span[1]</span>
 3	<p>div[1]>p[1]</p>
 4	<p>div[1]>p[2]</p>
 5	<div>div[1]>div[1]</div>
 6	<div>div[1]>div[2]</div>
 7        <span>div[1]>span[2]</span>
 8	</div>
 9	<p>p[1]</p>
10	<p>p[2]</p>
11	<div>div[2]</div>
12	<p>p[3]</p>
13	<p>p[4]
14	<span>p[4]>span[1]</span></p>
15	<div>div[3]</div>
16	<p>p[5]</p>
17	<p>p[6]</p>
18	<div>div[4]
19	<div>div[4]>div[1]</div>
20	<p>div[4]>p[1]</p>
21	<div>div[4]>div[2]</div>
22	</div>

CSS

p:nth-of-type(2), div:last-of-type{
font-style:italic
} /* 두 번째로 나타나는 p는 기울임 */
/* 마지막으로 나타나는 div는 기울임 */
p:first-child, div:nth-last-child(2), span:last-of-type{
font-weight:bold
} /* p가 부모 태그의 첫 번째 자식일 때는 굵게  */
/* div가 부모 태그의 마지막에서 2번째 태그일 때 굵게   */



결과 :
왼쪽은 기울인 글씨로 표시된 부분, 오른쪽은 굵은 글씨로 표시된 부분이 정답이 됩니다.

기울어지는 부분
 1	<div>div[1]
 2        <span>div[1]>span[1]</span>
 3	<p>div[1]>p[1]</p>
 4	<p>div[1]>p[2]</p>
 5	<div>div[1]>div[1]</div>
 6	<div>div[1]>div[2]</div>
 7        <span>div[1]>span[2]</span>
 8	</div>
 9	<p>p[1]</p>
10	<p>p[2]</p>
11	<div>div[2]</div>
12	<p>p[3]</p>
13	<p>p[4]
14	<span>p[4]>span[1]</span></p>
15	<div>div[3]</div>
16	<p>p[5]</p>
17	<p>p[6]</p>
18	<div>div[4]
19	<div>div[4]>div[1]</div>
20	<p>div[4]>p[1]</p>
21	<div>div[4]>div[2]</div>
22	</div>

굵어지는 부분

 1	<div>div[1]
 2        <span>div[1]>span[1]</span>
 3	<p>div[1]>p[1]</p>
 4	<p>div[1]>p[2]</p>
 5	<div>div[1]>div[1]</div>
 6	<div>div[1]>div[2]</div>
 7        <span>div[1]>span[2]</span>
 8	</div>
 9	<p>p[1]</p>
10	<p>p[2]</p>
11	<div>div[2]</div>
12	<p>p[3]</p>
13	<p>p[4]
14	<span>p[4]>span[1]</span></p>
15	<div>div[3]</div>
16	<p>p[5]</p>
17	<p>p[6]</p>
18	<div>div[4]
19	<div>div[4]>div[1]</div>
20	<p>div[4]>p[1]</p>
21	<div>div[4]>div[2]</div>
22	</div>

1.8 형제 선택자[편집]

선택자1+선택자2 형식으로 사용하면 선택자1 뒤에 나오는 선택자 2를 선택하고, 선택자1~선택자 2 형식으로 입력하면 선택자 1 다음의 형제 선택자 2를 고릅니다.

/* 인접 형제 선택자 - h2 바로 다음에 오는 형제 선택자만  */
h2+ul {background:green;}
/* 일반 형제 선택자 - h1 다음에 오는 모든 형제 선택자  */
h2~ul {color:#7f0000;}

1.9 애트리뷰터 선택자[편집]

대괄호 [attribute]를 이용해서 특정 애트리뷰트를 만족시키는 객체의 CSS를 줄 수 있습니다. [attribute] 단독으로 사용하면 attribute가 있는 것들, [attribute="값"] 형태로 사용하면 attribute가 특정한 값들을 바꿀 수 있습니다.

예시 : color가 검은색인 글씨를 빨간색으로 바꾸는 방법

* [color="black"], * [color="#000000"], * [color=rgb(0,0,0)]{
color:red;}

또한 애트리뷰트 선택자는 등호 뿐 아닌 ~=, |=, ^=, $=, *=으로 표시할 수 있고, 각각 다음과 같은 의미를 나타냅니다.

애트리뷰트 선택자의 의미
선택자 의미
[attribute~="value"] 애트리뷰트의 값에서 특정 단어 value를 포함하는 경우. [border ~='solid']라고 지정하면 border가 solid 속성으로 지정된 모든 태그를 선택할 수 있습니다.
[attribute|="value"] 애트리뷰트의 값에서 특정 단어 value로 시작하는 경우. 예를 들면 [class|='top']이라고 지정하면 top으로 시작하는 클래스 top, top-ten 등을 선택할 수 있습니다.
[attribute^="value"] 애트리뷰트의 값에서 특정 문자열 value로 시작하는 경우. 예를 들면 [class^='t']라고 입력하면 클래스 중 t로 시작하는 모든 객체들에 대해 지정할 수 있습니다.
[attribute $="value"] 애트리뷰트의 값에서 특정 문자열 value로 끝나는 경우. [class$='end']라고 입력하면 클래스 값이 'end'로 끝나는 모든 객체 (end, backend, dead-end 등등)에 대해 지정할 수 있습니다.
[attribute *="value"] 애트리뷰트의 값에서 특정 문자열 value를 포함하는 경우. [class*='lap']이라고 입력하면 클래스 값 중 lap이라는 문자열을 포함하는 객체 (lap, slap, lapse, lap-time 등등)에 대해 지정할 수 있습니다.

1.10 미디어 연결 선택자[편집]

@import url(' ') (미디어 쿼리); 형식으로 URL에 지정된 CSS를 가져올 수 있습니다.

아래 표는 미디어 쿼리 목록입니다.

미디어 쿼리 역할
all 모든 장치에서 균일하게 보여줍니다. 생략시 all이 기본입니다.
tv 텔레비전 유형의 장치에 적용합니다.
screen 디지털 기기의 화면에 띄울 때 적용합니다.
print 인쇄용 페이지에 적절한 요소
speech 스크린 리더에 적용되는 요소
and, or, not 논리 연산자를 적용할 수 있습니다. 예를 들면 print or speech
min-width:(최소넓이) 최소 넓이가 얼마일 때 적용
max-width:(최대넓이) 최대 넓이가 얼마일 때 적용

또한 @media (미디어 쿼리)선택자를 이용하면 특정 미디어 쿼리를 만족할 때 CSS 조건을 바꿀 수 있습니다.

2 활용 예제[편집]

2.1 사용자 폰트 바꾸기[편집]

특수:내사용자문서/common.css에 다음 코드를 넣으면 본문의 폰트가 돋움으로 변경됩니다. 단, 설치되어 있지 않으면 돋움으로 보이지 않습니다.

#mw-body-text { font-family: '돋움'; }

웹폰트를 통해 PC에 설치되지 않은 폰트도 사용할 수 있습니다. 아래는 나눔 고딕을 웹폰트로 로드하는 예시입니다.

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.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'; }

2.2 링크 텍스트 바꾸기[편집]

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

/* 속성 변환 예시 */
.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 등)을 집어넣을 수 있습니다.

2.3 특정 태그 안의 효과를 바꾸기[편집]

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

태그명 { (속성); }

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

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

strike, del, s { color: black; }

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

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

라고 입력하시면 됩니다.

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

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

라고 입력하시면 됩니다.

2.4 모바일에서 둘러보기 상자 안 보이게 설정[편집]

{{둘러보기 상자}} 틀은 가로폭을 많이 차지하는 특성 상 모바일에서 보기 불편하며, 실제로도 MobileFrontEnd 등 일부 모바일 전용 확장기능에서는 나타나지 않게 되어 있습니다. 가로폭이 좁은 환경에서 둘러보기 상자를 띄우지 않기 위한 소스는 다음과 같습니다.

/* 가로폭 800px 미만 환경에서 둘러보기 상자 안 보여주기 */
@media (max-width: 799px) {
    .navbox{ display:none;}
}

2.5 단축키를 버튼 옆에 표시[편집]

/* accesskey 속성이 있는 링크를 찾아 뒤에 단축키를 표시함. */
a[accesskey]:after {
    content: " " attr(accesskey);
    font-size: 0.9em;
    text-transform: uppercase;
}

단축키는 AltAlt + ⇧ Shift를 같이 누르면 됩니다. 다른 프로그램의 Alt 매핑을 우회하려면 Shift를 같이 눌러주세요.

3 리버티 스킨 관련[편집]

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

3.1 상단바 디자인 변경[편집]

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

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

/*사용자:코코아/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;
}

3.2 다크 모드에서 이질감 줄이기[편집]

환경 설정에서 리버티 스킨을 다크 모드로 설정하면 위키가 전반적으로 다크 모드에 맞게 설정됩니다. 그러나 pre 태그 등 일부 태그는 다크 모드로 CSS가 변경되지 않기에 이질감을 느낄 수 있습니다. 이질감을 줄이기 위한 설정으로 아래 소스를 특수:내사용자문서/liberty.css에 붙이시면 됩니다.

혹은 다크 모드에서만 위의 CSS가 작동하게 만들고 싶으시면 아래와 같은 소스를 특수:내사용자문서/liberty.js에 붙이시면 됩니다.

/* 다크 모드일 때 다크 테마 불러오기. 다크 모드를 지정하는 별도 클래스가 없어서 jQuery로 CSS 긁어와서 해결. */
if ($('h1').css("color")==='rgb(221, 221, 221)') {
   mw.loader.load('//librewiki.net/index.php?title=사용자:Utolee90/liberty-dark.css&action=raw&ctype=text/css', 'text/css');
}

4 리브레 스킨 관련[편집]

5 CSS에서 사용하는 키워드[편집]

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