잔글 (봇: 자동으로 텍스트 교체 (-\{\{키\|([^}]*)\}\} *\+ * +{{키|\1}}+)) |
|||
(사용자 5명의 중간 판 33개는 보이지 않습니다) | |||
5번째 줄: | 5번째 줄: | ||
상단 바의 색깔이나 글꼴 등을 바꾸고 싶거나 취소선 안의 내용을 지우는 등의 보이기 효과를 바꾸는 방법은 사용자 [[CSS]]를 조작하면 됩니다. [[특수:내사용자문서/common.css]]에서 해당 소스를 복사-붙여넣기를 하시면 됩니다. 특정 스킨에만 설정된 효과를 적용하시고 싶으시면 사용자:{{사용자}}/(스킨이름).css에 내용을 복사-붙여넣기 하시면 됩니다. | 상단 바의 색깔이나 글꼴 등을 바꾸고 싶거나 취소선 안의 내용을 지우는 등의 보이기 효과를 바꾸는 방법은 사용자 [[CSS]]를 조작하면 됩니다. [[특수:내사용자문서/common.css]]에서 해당 소스를 복사-붙여넣기를 하시면 됩니다. 특정 스킨에만 설정된 효과를 적용하시고 싶으시면 사용자:{{사용자}}/(스킨이름).css에 내용을 복사-붙여넣기 하시면 됩니다. | ||
== | == 기본 문법 규칙 == | ||
더 자세한 내용은 [https://opentutorials.org/course/2418 생활코딩 CSS 튜토리얼]이나 [https://www.w3schools.com/css/ W3schools CSS부분] 등을 참조하시면 됩니다. | |||
기본적으로 CSS 편집 규칙은 다음과 같습니다. | |||
<syntaxhighlight lang="css"> | |||
tagname { | |||
'property1':'set1'; | |||
'property2':'set2'; | |||
} | |||
</syntaxhighlight> | |||
태그네임은 "div"같은 태그의 이름, Property는 속성명, set은 각 Property에 대해 원하는 값을 표현합니다. 예를 들면 <code><nowiki><div style="background-color:yellow;"></div></nowiki></code>를 의미하는 코드는 style 부분을 아래처럼 지정할 수 있습니다. | |||
<syntaxhighlight lang="css"> | |||
div { | |||
background-color:yellow; | |||
} | |||
</syntaxhighlight> | |||
=== id, class 선택자 === | |||
ID와 Class 값은 각 태그에 고유한 이름을 붙입니다. 다만 ID값은 문서 내부에 오직 하나의 태그에만 붙일 수 있지만 class값은 문서 내부에 여러 태그에 붙일 수 있다는 차이가 있습니다. ID값은 <nowiki>#</nowiki>idname, class값은 .classname 형식으로 붙일 수 있습니다. 예를 들면 <code><nowiki><span id="libre-no-1" style="color:#4188f1;"></span></nowiki></code> 같은 경우 아래와 같은 방식으로 표현할 수 있습니다. | |||
<syntaxhighlight lang="css"> | |||
#libre-no-1 { /* 글자색을 libre 기본 색으로 바꾸는 코드 */ | |||
color:#4188f1; | |||
} | |||
</syntaxhighlight> | |||
마찬가지로 <code><nowiki><span class="libre-holic" style="color:#4188f1;"></span></nowiki></code> 같은 경우는 아래와 같은 방식으로 표현이 가능합니다. | |||
<syntaxhighlight lang="css"> | |||
.libre-holic { /* 글자색을 libre 기본 색으로 바꾸는 코드 */ | |||
color:#4188f1; | |||
} | |||
</syntaxhighlight> | |||
=== 자손 선택자 및 자식 선택자 === | |||
특정 태그 A에 둘러싸인 부분에 태그 B가 있을 때 B를 A의 자손 선택자, A를 B의 조상 선택자라고 부릅니다. 특히 A와 B 사이에 감싼 태그가 없는 경우에는 B를 A의 자식 선택자, A를 B의 조상 선택자라고 부릅니다. 특정 조상선택자 A 안에 자식 선택자 B를 선택할 경우 띄어쓰기를 통해 (조상) (자식) 선택자 형태로 지정할 수 있습니다. | |||
예를 들면 아래 HTML 태그를 보면 알 수 있습니다. | |||
<syntaxhighlight lang="xml"> | |||
<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> | |||
</syntaxhighlight> | |||
여기서 단순히 선택자 a를 사용하면 위의 리브레 위키 링크까지 영향을 받습니다. 그러면 ul 태그 안의 a 태그의 스타일만 바꾸기 위해서는 다음과 같이 지정하면 됩니다. | |||
<syntaxhighlight lang="css"> | |||
ul a{ /*글자색 초록색으로 */ | |||
color:green; | |||
} | |||
</syntaxhighlight> | |||
또는 a 태그가 li 태그 바로 아래에 있을 때만 글자색을 바꾸게 지정할 수도 있습니다. 자식 선택자는 ">" 기호를 사용합니다. | |||
<syntaxhighlight lang="css"> | |||
li>a{ /*글자색 초록색으로 */ | |||
color:green; | |||
} | |||
</syntaxhighlight> | |||
=== 동시 선택자 === | |||
선택자를 붙여서 서술할 경우 선택자 모두에 해당되는 것만 집어넣을 수 있습니다. 예를 들어 div 태그에서 클래스명이 "libre xtype"인 객체는 다음과 같이 선택하면 됩니다. | |||
<syntaxhighlight lang="css"> | |||
div.libre.xtype{ /*글자 기울임 */ | |||
font-style:italic; | |||
} | |||
</syntaxhighlight> | |||
=== 병렬 선택자 === | |||
반점(,)을 이용해서 여러 선택자에 같은 효과를 집어넣을 수 있습니다. 예를 들면 클래스명이 "libre-1"과 "libre-2"로 지정된 선택자에 동등한 효과를 주기 위해서는 다음과 같은 코드를 사용하시면 됩니다. | |||
<syntaxhighlight lang="css"> | |||
.libre-1, .libre-2{ /*글자를 굵게 */ | |||
font-weight:bold; | |||
} | |||
</syntaxhighlight> | |||
=== 속성 선택자 === | |||
쌍점 :를 이용해 마우스 속성을 선택할 수 있습니다. | |||
<syntaxhighlight lang = "css"> | |||
a:active {color: #FF0000} /*클릭 중인 링크 */ | |||
a:hover{color: #7F7F7F; text-decoration: underline;} /* 마우스 위 얹을 때 */ | |||
a:visited{color: #FF00FF;} /* 이미 방문한 링크에 대한 속성 추가 */ | |||
</syntaxhighlight> | |||
=== 특정 속성 제거할 때 사용하기 === | |||
tag:not(속성명)을 이용해서 속성명이 없는 것을 설정할 수 있습니다. 다음과 같은 경우 하이라이트된 부분에만 속성이 적용됩니다. | |||
{| | |||
|width="60%"|코드 | |||
<syntaxhighlight lang ="xml" line highlight=2,4,5> | |||
<div class="selected">테스트</div> | |||
<div class="">예제</div> | |||
<div class="selected">보기</div> | |||
<div class="not-selected">선택된 부분에</div> | |||
<div class="">속성이 적용</div> | |||
</syntaxhighlight> | |||
| | |||
CSS | |||
<syntaxhighlight lang ="css"> | |||
div:not(.selected){ /*selected 클래스 미적용 */ | |||
font-weight:bold; | |||
} | |||
</syntaxhighlight> | |||
<br /><br /> | |||
|} | |||
=== 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번째 자식이어야''' 적용됩니다. | |||
참조 : [http://nthmaster.com/ nth요소 관련 정보] | |||
nth-of-type vs nth-child의 의미 차이 보기 | |||
{| | |||
|width="50%"|코드 | |||
<syntaxhighlight lang ="xml" line> | |||
<div>div[1] | |||
<span>div[1]>span[1]</span> | |||
<p>div[1]>p[1]</p> | |||
<p>div[1]>p[2]</p> | |||
<div>div[1]>div[1]</div> | |||
<div>div[1]>div[2]</div> | |||
<span>div[1]>span[2]</span> | |||
</div> | |||
<p>p[1]</p> | |||
<p>p[2]</p> | |||
<div>div[2]</div> | |||
<p>p[3]</p> | |||
<p>p[4] | |||
<span>p[4]>span[1]</span></p> | |||
<div>div[3]</div> | |||
<p>p[5]</p> | |||
<p>p[6]</p> | |||
<div>div[4] | |||
<div>div[4]>div[1]</div> | |||
<p>div[4]>p[1]</p> | |||
<div>div[4]>div[2]</div> | |||
</div> | |||
</syntaxhighlight> | |||
| | |||
CSS | |||
<syntaxhighlight lang ="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번째 태그일 때 굵게 */ | |||
</syntaxhighlight> | |||
<br /><br /> | |||
결과 : <br /> | |||
왼쪽은 기울인 글씨로 표시된 부분, 오른쪽은 굵은 글씨로 표시된 부분이 정답이 됩니다. | |||
|} | |||
{| | |||
|width="50%"|기울어지는 부분 | |||
<syntaxhighlight lang ="xml" line highlight=4,6,10,18,19,20,21,22> | |||
<div>div[1] | |||
<span>div[1]>span[1]</span> | |||
<p>div[1]>p[1]</p> | |||
<p>div[1]>p[2]</p> | |||
<div>div[1]>div[1]</div> | |||
<div>div[1]>div[2]</div> | |||
<span>div[1]>span[2]</span> | |||
</div> | |||
<p>p[1]</p> | |||
<p>p[2]</p> | |||
<div>div[2]</div> | |||
<p>p[3]</p> | |||
<p>p[4] | |||
<span>p[4]>span[1]</span></p> | |||
<div>div[3]</div> | |||
<p>p[5]</p> | |||
<p>p[6]</p> | |||
<div>div[4] | |||
<div>div[4]>div[1]</div> | |||
<p>div[4]>p[1]</p> | |||
<div>div[4]>div[2]</div> | |||
</div> | |||
</syntaxhighlight> | |||
| | |||
굵어지는 부분 | |||
<syntaxhighlight lang ="xml" line highlight=6,7,14> | |||
<div>div[1] | |||
<span>div[1]>span[1]</span> | |||
<p>div[1]>p[1]</p> | |||
<p>div[1]>p[2]</p> | |||
<div>div[1]>div[1]</div> | |||
<div>div[1]>div[2]</div> | |||
<span>div[1]>span[2]</span> | |||
</div> | |||
<p>p[1]</p> | |||
<p>p[2]</p> | |||
<div>div[2]</div> | |||
<p>p[3]</p> | |||
<p>p[4] | |||
<span>p[4]>span[1]</span></p> | |||
<div>div[3]</div> | |||
<p>p[5]</p> | |||
<p>p[6]</p> | |||
<div>div[4] | |||
<div>div[4]>div[1]</div> | |||
<p>div[4]>p[1]</p> | |||
<div>div[4]>div[2]</div> | |||
</div> | |||
</syntaxhighlight> | |||
|} | |||
=== 형제 선택자 === | |||
선택자1+선택자2 형식으로 사용하면 선택자1 뒤에 나오는 선택자 2를 선택하고, 선택자1~선택자 2 형식으로 입력하면 선택자 1 다음의 형제 선택자 2를 고릅니다. | |||
<syntaxhighlight lang="css"> | |||
/* 인접 형제 선택자 - h2 바로 다음에 오는 형제 선택자만 */ | |||
h2+ul {background:green;} | |||
/* 일반 형제 선택자 - h1 다음에 오는 모든 형제 선택자 */ | |||
h2~ul {color:#7f0000;} | |||
</syntaxhighlight> | |||
=== 애트리뷰터 선택자 === | |||
대괄호 [attribute]를 이용해서 특정 애트리뷰트를 만족시키는 객체의 CSS를 줄 수 있습니다. [attribute] 단독으로 사용하면 attribute가 있는 것들, [attribute="값"] 형태로 사용하면 attribute가 특정한 값들을 바꿀 수 있습니다. | |||
예시 : color가 검은색인 글씨를 빨간색으로 바꾸는 방법 | |||
<syntaxhighlight lang="css"> | |||
* [color="black"], * [color="#000000"], * [color=rgb(0,0,0)]{ | |||
color:red;} | |||
</syntaxhighlight> | |||
또한 애트리뷰트 선택자는 등호 뿐 아닌 ~=, |=, ^=, $=, *=으로 표시할 수 있고, 각각 다음과 같은 의미를 나타냅니다. | |||
{|class="wikitable" | |||
|+ 애트리뷰트 선택자의 의미 | |||
|- | |||
! 선택자 !! 의미 | |||
|- | |||
| [attribute~="value"] || 애트리뷰트의 값에서 특정 단어 value를 포함하는 경우. [border ~='solid']라고 지정하면 border가 solid 속성으로 지정된 모든 태그를 선택할 수 있습니다. | |||
|- | |||
| [attribute<nowiki>|</nowiki>="value"] || 애트리뷰트의 값에서 특정 단어 value로 시작하는 경우. 예를 들면 [class<nowiki>|</nowiki>='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 등등)에 대해 지정할 수 있습니다. | |||
|} | |||
=== 미디어 연결 선택자 === | |||
<code><nowiki>@import url(' ') (미디어 쿼리);</nowiki></code> 형식으로 URL에 지정된 CSS를 가져올 수 있습니다. | |||
아래 표는 미디어 쿼리 목록입니다. | |||
{|class="wikitable" | |||
|- | |||
! 미디어 쿼리 !! 역할 | |||
|- | |||
| all || 모든 장치에서 균일하게 보여줍니다. 생략시 all이 기본입니다. | |||
|- | |||
| tv || 텔레비전 유형의 장치에 적용합니다. | |||
|- | |||
| screen || 디지털 기기의 화면에 띄울 때 적용합니다. | |||
|- | |||
| print || 인쇄용 페이지에 적절한 요소 | |||
|- | |||
| speech || 스크린 리더에 적용되는 요소 | |||
|- | |||
| and, or, not || 논리 연산자를 적용할 수 있습니다. 예를 들면 print or speech | |||
|- | |||
| min-width:(최소넓이) || 최소 넓이가 얼마일 때 적용 | |||
|- | |||
| max-width:(최대넓이) || 최대 넓이가 얼마일 때 적용 | |||
|} | |||
또한 <code><nowiki>@media (미디어 쿼리)</nowiki></code>선택자를 이용하면 특정 미디어 쿼리를 만족할 때 CSS 조건을 바꿀 수 있습니다. | |||
== 활용 예제 == | |||
=== 사용자 폰트 바꾸기 === | === 사용자 폰트 바꾸기 === | ||
[[특수:내사용자문서/common.css]]에 다음 코드를 넣으면 본문의 폰트가 돋움으로 변경됩니다. 단, 설치되어 있지 않으면 돋움으로 보이지 않습니다. | [[특수:내사용자문서/common.css]]에 다음 코드를 넣으면 본문의 폰트가 돋움으로 변경됩니다. 단, 설치되어 있지 않으면 돋움으로 보이지 않습니다. | ||
< | <syntaxhighlight lang=css>#mw-body-text { font-family: '돋움'; }</syntaxhighlight> | ||
웹폰트를 통해 PC에 설치되지 않은 폰트도 사용할 수 있습니다. 아래는 나눔 고딕을 웹폰트로 로드하는 예시입니다. | 웹폰트를 통해 PC에 설치되지 않은 폰트도 사용할 수 있습니다. 아래는 나눔 고딕을 웹폰트로 로드하는 예시입니다. | ||
< | <syntaxhighlight lang=css> | ||
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); | @import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); | ||
body { font-family: "Nanum Gothic"; } | body { font-family: "Nanum Gothic"; } | ||
</ | </syntaxhighlight> | ||
편집창의 폰트를 변경하고 싶다면 <code>textarea#wpTextbox1</code>에 대한 폰트를 변경하시면 됩니다. 아래는 예시입니다. | 편집창의 폰트를 변경하고 싶다면 <code>textarea#wpTextbox1</code>에 대한 폰트를 변경하시면 됩니다. 아래는 예시입니다. | ||
< | <syntaxhighlight lang=css> | ||
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext); | @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro&subset=latin,latin-ext); | ||
textarea#wpTextbox1 { font-family: 'Source Code Pro'; } | textarea#wpTextbox1 { font-family: 'Source Code Pro'; } | ||
</ | </syntaxhighlight> | ||
=== 링크 텍스트 바꾸기 === | === 링크 텍스트 바꾸기 === | ||
[[:wikipedia:Help:Link|영위백 도움말:링크]] 문서도 참조하세요. 다음과 같이 중괄호 안에 있는 속성을 바꾸어서 설정할 수 있습니다. | [[:wikipedia:Help:Link|영위백 도움말:링크]] 문서도 참조하세요. 다음과 같이 중괄호 안에 있는 속성을 바꾸어서 설정할 수 있습니다. | ||
< | <syntaxhighlight lang="css"> | ||
/* 속성 변환 예시 */ | /* 속성 변환 예시 */ | ||
.mw-body a:link { color: #0000FF; } /* 방문하지 않은 링크 */ | .mw-body a:link { color: #0000FF; } /* 방문하지 않은 링크 */ | ||
39번째 줄: | 309번째 줄: | ||
.mw-body a.mw-redirect:visited {color:#3070A0} /* 이미 방문한 넘겨주기 */ | .mw-body a.mw-redirect:visited {color:#3070A0} /* 이미 방문한 넘겨주기 */ | ||
</ | </syntaxhighlight> | ||
a:link는 평범한 링크, a:external은 외부 링크, a.mw-redirect는 넘겨주기의 속성을 결정하며, 뒤에 ":visited"가 붙은 것은 방문한 링크의 설정을, ":hover"가 붙은 것은 마우스를 올려놓았을 때의 설정이며, ":active"가 붙은 것은 클릭해서 실행 중인 링크에 대한 설정입니다. | a:link는 평범한 링크, a:external은 외부 링크, a.mw-redirect는 넘겨주기의 속성을 결정하며, 뒤에 ":visited"가 붙은 것은 방문한 링크의 설정을, ":hover"가 붙은 것은 마우스를 올려놓았을 때의 설정이며, ":active"가 붙은 것은 클릭해서 실행 중인 링크에 대한 설정입니다. | ||
47번째 줄: | 317번째 줄: | ||
=== 특정 태그 안의 효과를 바꾸기 === | === 특정 태그 안의 효과를 바꾸기 === | ||
사용자 CSS에서는 태그 이름을 붙인 뒤 태그 안의 글자의 효과를 바꾸는 기능도 가지고 있습니다. 예를 들면 취소선을 나타내는 태그는 <nowiki><strike>, <del>, <s> </nowiki> 세 가지가 있습니다. 이를 이용해서 | 사용자 CSS에서는 태그 이름을 붙인 뒤 태그 안의 글자의 효과를 바꾸는 기능도 가지고 있습니다. 예를 들면 취소선을 나타내는 태그는 <nowiki><strike>, <del>, <s></nowiki> 세 가지가 있습니다. 이를 이용해서 | ||
< | <syntaxhighlight lang="css">태그명 { (속성); }</syntaxhighlight> | ||
태그명 { (속성); | |||
}</ | |||
라고 입력하시면 해당 태그명 안의 글자 효과가 변경됩니다. | 라고 입력하시면 해당 태그명 안의 글자 효과가 변경됩니다. | ||
예를 들면 취소선이 쳐진 글자 내부의 글자 색깔을 검은색으로 변경하고 싶으면 [[특수:내사용자문서/CSS]]에 | 예를 들면 취소선이 쳐진 글자 내부의 글자 색깔을 검은색으로 변경하고 싶으면 [[특수:내사용자문서/CSS]]에 | ||
< | <syntaxhighlight lang="css"> | ||
strike, del, s{ | strike, del, s { color: black; } | ||
</syntaxhighlight> | |||
} | |||
</ | |||
라고 입력하시면 되고, 취소선 내부의 글자를 아예 보이지 않게 하기 위해서는 | 라고 입력하시면 되고, 취소선 내부의 글자를 아예 보이지 않게 하기 위해서는 | ||
< | <syntaxhighlight lang="css"> | ||
strike, del, s{ | strike, del, s { display:none !important; } | ||
display:none !important; | </syntaxhighlight> | ||
} | |||
</ | |||
라고 입력하시면 됩니다. | 라고 입력하시면 됩니다. | ||
취소선 효과를 무시하고 싶을 때에는 | 취소선 효과를 무시하고 싶을 때에는 | ||
< | <syntaxhighlight lang="css"> | ||
del, s {text-decoration:none!important; color:black; } | del, s { text-decoration: none!important; color:black; } | ||
</ | </syntaxhighlight> | ||
라고 입력하시면 됩니다. | 라고 입력하시면 됩니다. | ||
=== 모바일에서 둘러보기 상자 안 보이게 설정 === | |||
{{틀|둘러보기 상자}} 틀은 가로폭을 많이 차지하는 특성 상 모바일에서 보기 불편하며, 실제로도 MobileFrontEnd 등 일부 모바일 전용 확장기능에서는 나타나지 않게 되어 있습니다. 가로폭이 좁은 환경에서 둘러보기 상자를 띄우지 않기 위한 소스는 다음과 같습니다. | |||
<syntaxhighlight lang="css"> | |||
/* 가로폭 800px 미만 환경에서 둘러보기 상자 안 보여주기 */ | |||
@media (max-width: 799px) { | |||
.navbox{ display:none;} | |||
} | |||
</syntaxhighlight> | |||
=== 단축키를 버튼 옆에 표시 === | |||
<syntaxhighlight lang="css"> | |||
/* accesskey 속성이 있는 링크를 찾아 뒤에 단축키를 표시함. */ | |||
a[accesskey]:after { | |||
content: " " attr(accesskey); | |||
font-size: 0.9em; | |||
text-transform: uppercase; | |||
} | |||
</syntaxhighlight> | |||
단축키는 {{키|Alt}}나 {{키|Alt}}+{{키|Shift}}를 같이 누르면 됩니다. 다른 프로그램의 Alt 매핑을 우회하려면 Shift를 같이 눌러주세요. | |||
== 리버티 스킨 관련 == | == 리버티 스킨 관련 == | ||
77번째 줄: | 361번째 줄: | ||
=== 상단바 디자인 변경 === | === 상단바 디자인 변경 === | ||
다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다. | 다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다. | ||
< | {{숨김 시작|title=리버티 스킨 디자인 지정}} | ||
<syntaxhighlight lang="css"> | |||
/* 일부 내용은 사:Skim/liberty.css에서 가져왔습니다. */ | /* 일부 내용은 사:Skim/liberty.css에서 가져왔습니다. */ | ||
/*상단 바 디자인*/ | /*상단 바 디자인*/ | ||
139번째 줄: | 424번째 줄: | ||
/*CSS코드 */ | /*CSS코드 */ | ||
} | } | ||
</syntaxhighlight> | |||
</ | {{숨김 끝}} | ||
다른 방법으로 리버티 스킨의 기본 색을 다른 색으로 한번에 치환하려면 다음과 같은 방법을 사용해도 됩니다. | 다른 방법으로 리버티 스킨의 기본 색을 다른 색으로 한번에 치환하려면 다음과 같은 방법을 사용해도 됩니다. | ||
< | <syntaxhighlight lang="css"> | ||
/*사용자:코코아/liberty.css에서 가져왔습니다. */ | /*사용자:코코아/liberty.css에서 가져왔습니다. */ | ||
151번째 줄: | 436번째 줄: | ||
background-color: (#색상명)!important; | background-color: (#색상명)!important; | ||
} | } | ||
</ | </syntaxhighlight> | ||
=== 다크 모드에서 이질감 줄이기 === | |||
환경 설정에서 리버티 스킨을 다크 모드로 설정하면 위키가 전반적으로 다크 모드에 맞게 설정됩니다. 그러나 pre 태그 등 일부 태그는 다크 모드로 CSS가 변경되지 않기에 이질감을 느낄 수 있습니다. 이질감을 줄이기 위한 설정으로 아래 소스를 [[특수:내사용자문서/liberty.css]]에 붙이시면 됩니다. | |||
{{숨김 시작|title=다크 모드에서 이질감 줄이는 CSS 소스}} | |||
<syntaxhighlight lang="css"> | |||
/* 참조: 사용자:Cerulean/liberty-dark.css */ | |||
/* 다크 모드에 최적화된 리버티 스킨 디자인 변경 */ | |||
/* 기본색: #4188f1-> #224A87 */ | |||
.Liberty .nav-wrapper, | |||
.Liberty .nav-wrapper .navbar .form-inline .btn:hover, | |||
.Liberty .nav-wrapper .navbar .form-inline .btn:focus, | |||
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active::before, | |||
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:hover::before, | |||
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:focus::before, | |||
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:active::before, | |||
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-footer .label, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:hover, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:focus, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:active, | |||
#liberty-scrollup, | |||
#liberty-scrolldown, | |||
[style*="background: #4188f1;"], | |||
[style*="background:#4188f1;"] | |||
[style*="background-color:#4188f1;"]{ | |||
background-color: #224a87; | |||
} | |||
/* navbar 관련 스타일 */ | |||
#searchInput { /* 문서 검색창 */ | |||
background-color:#1f2023; | |||
color: inherit; | |||
} | |||
/* msUpoad 색상 */ | |||
#msupload-div { | |||
background-color: #1f2023; | |||
} | |||
#msupload-dropzone { | |||
color: inherit; | |||
} | |||
/* 소스 상자 등 색깔 변경 */ | |||
pre, | |||
.liberty-notice { | |||
background-color: #1f2023; | |||
color: inherit; | |||
} | |||
/* 사용자 문서 안내 */ | |||
.libre-notice { | |||
background-color: #1f2023 !important; | |||
color: inherit !important; | |||
} | |||
.libre-notice .tp_link { | |||
color: white !important; | |||
} | |||
/* 요약문 */ | |||
input#wpSummary { | |||
background-color: #1f2023 !important; | |||
color: inherit !important; | |||
} | |||
/* 미리보기버튼 */ | |||
#wpPreview { | |||
background-color: #2f9dba; | |||
color:white; | |||
} | |||
/* 차이 보기 */ | |||
#wpDiff { | |||
background-color:#315830; | |||
color:white; | |||
} | |||
/* 체크박스 */ | |||
.editButtons input { | |||
filter: brightness(0.9); | |||
border-color: transparent !important; | |||
} | |||
/* 선택상자 옵션 */ | |||
select { | |||
background-color: #1f2023; | |||
color: white; | |||
border: 1px solid white; | |||
} | |||
select option:hover { | |||
background-color: #5e5e5e; | |||
} | |||
/* 텍스트 상자 옵션 */ | |||
input [type*="text"] { | |||
background-color: #1f2023; | |||
color: inherit; | |||
} | |||
/* 특수문서 - 미디어위키용 입력상자 스타일 재설정 */ | |||
/* 수정 - 필터로 색상반전이 더 좋을 것 같음. */ | |||
/* 목록 상자 */ | |||
/* | |||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, | |||
.oo-ui-dropdownWidget-open, | |||
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button:not(#wpSave):not(#wpPreview):not(#wpDiff) { /* 저장, 미리보기, 차이보기 버튼은 회색배경 적용하지 않기 */ | |||
background-color: #1f2023 !important; | |||
color: white; | |||
border: 1px solid white; | |||
} | |||
*/ | |||
/* 메뉴 옵션 */ | |||
/* | |||
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget { | |||
background: rgba(10, 18, 18, 0.5); | |||
} | |||
*/ | |||
/* 위젯 라벨명 */ | |||
/* | |||
.oo-ui-labelElement-label { | |||
color: white; | |||
} | |||
*/ | |||
/* 메뉴 선택시 */ | |||
/* | |||
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover { | |||
background: #eae8f1; | |||
color: black !important; | |||
} | |||
*/ | |||
/* 텍스트 상자 */ | |||
/* | |||
.oo-ui-textInputWidget .oo-ui-inputWidget-input { | |||
background-color: #1f2023; | |||
color: inherit; | |||
} | |||
*/ | |||
/* 라디오 상자, 체크박스 배경색 검게 - jQuery로 바꿀 수 있을 지 테스트 예정. */ | |||
/* | |||
.mw-rcfilters-head .oo-ui-buttonElement-button, | |||
.mw-changeslist .mw-changeslist-legend, | |||
.mw-rcfilters-head .oo-ui-widget, | |||
.mw-rcfilters-ui-menuSelectWidget-footer, | |||
.mw-rcfilters-ui-overlay .oo-ui-menuSelectWidget, | |||
.mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup, | |||
.mw-rcfilters-ui-overlay .oo-ui-buttonElement-button, | |||
.mw-rcfilters-ui-overlay .oo-ui-labelElement, | |||
.mw-rcfilters-ui-filterMenuHeaderWidget-header { | |||
background: black !important; | |||
} | |||
*/ | |||
/* | |||
.mw-rcfilters-head .oo-ui-tagMultiselectWidget-handle { | |||
background: #ffffff1a !important; | |||
} | |||
*/ | |||
/* 스크롤바가 거슬리니 일단 삭제 */ | |||
fieldset.oo-ui-layout { | |||
overflow:hidden; | |||
} | |||
/* 테스트 - 요소 반전 실험 */ | |||
#ooui-2 | |||
{ | |||
filter:invert(1); | |||
} | |||
/* 반전이 일어나지 않는 요소들 수동보정 - 선택상자 */ | |||
.mw-changeslist .mw-changeslist-legend, | |||
.mw-rcfilters-head .oo-ui-widget, | |||
.mw-rcfilters-ui-menuSelectWidget-footer, | |||
.mw-rcfilters-ui-overlay .oo-ui-menuSelectWidget, | |||
.mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup, | |||
.mw-rcfilters-ui-overlay .oo-ui-buttonElement-button, | |||
.mw-rcfilters-ui-overlay .oo-ui-labelElement, | |||
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend | |||
{ | |||
background-color: black !important; | |||
} | |||
/* 최근 바뀜 상자 관련 */ | |||
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { | |||
background-color:#1f2023; | |||
} | |||
.oo-ui-buttonElement.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-buttonElement-button, | |||
.oo-ui-textInputWidget .oo-ui-inputWidget-input, | |||
.mw-search-profile-tabs, | |||
.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle, | |||
.mw-rcfilters-ui-filterMenuHeaderWidget-header, | |||
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:not(.oo-ui-buttonElement-active) | |||
{ | |||
background-color: #1f2023 !important; | |||
color: #ddd; | |||
} | |||
.oo-ui-layout button[type="submit"] .oo-ui-labelElement-label, | |||
{ | |||
color:black; | |||
} | |||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle, | |||
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, | |||
bdi { | |||
color: #ddd; | |||
} | |||
.oo-ui-decoratedOptionWidget .oo-ui-labelElement-label { | |||
color: #9f9f9f; | |||
} | |||
div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon { | |||
background-color: #4f4f02; | |||
} | |||
/* 텍스트는 명도 올리기 */ | |||
div.mw-warning-with-logexcerpt [style*="color:blue;"] { | |||
color: #7f7fff; | |||
} | |||
/* 메뉴 투명하게 */ | |||
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget { | |||
filter:alpha(opacity=40); | |||
} | |||
/* 선택 배경메뉴는 더 진하게 -> 반전은 더 연하게 ->일단 취소 */ | |||
/* | |||
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover { | |||
background: #9f9f9f; | |||
}*/ | |||
/* focus 글자 색 반전 -> 재반전시킴 */ | |||
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover { | |||
color: #c93; | |||
} | |||
.oo-ui-icon-highlight:not(.mw-rcfilters-ui-filterItemHighlightButton-circle) { | |||
filter: invert(1); | |||
} | |||
/* charInsert 상자 배경색 전환 */ | |||
.mw-edittools-section input { | |||
background-color:#315830; | |||
} | |||
/* 준보호 편집문서 편집창 색상 진하게 */ | |||
.mw-textarea-sprotected { | |||
background-color: #9f9fff; | |||
} | |||
/* 틀 설명문서 배경색 변경 - jQuery로 설정할 예정. */ | |||
.template-documentation { | |||
background-color: #00585f !important; | |||
color: white; | |||
} | |||
/* 본문 관련 */ | |||
/* 진한 글씨는 흰색 -> 연초록로 바꾸어서 시각 자극을 줄이기 */ | |||
#content b { | |||
color: #dfffdf; | |||
} | |||
/* 취소선 친 글씨색 더 밝게 */ | |||
del, s, strike { | |||
color: #ccc; | |||
} | |||
/* 링크색은 살짝 밝게 지정 */ | |||
a { | |||
color: #519ff1 | |||
} | |||
a.new { /* 새 링크 */ | |||
color: #f97f7f; | |||
} | |||
/* 태그 색상 밝은 톤으로 바꾸기 */ | |||
.mw-plusminus-pos { | |||
color: #4fdf4f; | |||
} | |||
.mw-plusminus-neg, .mw-tag-markers, .newpage { | |||
color: #df7f7f; | |||
} | |||
/* 편집창 차이 내역 */ | |||
html td.diff-context { | |||
background-color: #1f2023; | |||
border-color: #afafaf; | |||
color: #ddd; | |||
} | |||
.diff-addedline .diffchange { /* 추가 텍스트 */ | |||
background: #002f4f; | |||
color: #ccf; | |||
} | |||
.diff-deletedline .diffchange { /* 삭제된 텍스트 */ | |||
background: #4f4f02; | |||
color: #fda; | |||
} | |||
/* 플로우 상자 타이틀 - 그냥 푸른빛 도는 어두운 회색으로 바꾸자 */ | |||
.flow-topic-titlebar { | |||
background-color: #3a515f; | |||
color: #ddd; | |||
} | |||
.flow-topic-meta { | |||
color: #ccc | |||
} | |||
.flow-component .mw-ui-icon.mw-ui-icon-before.mw-ui-icon-only:before { | |||
filter: invert(0.9) saturate(1.8) brightness(1.6) hue-rotate(186deg); | |||
} | |||
/* 플로우 메뉴 ul */ | |||
div>.flow-menu ul { | |||
filter: invert(0.9) saturate(1.8) opacity(0.9) hue-rotate(186deg); | |||
} | |||
/* 플로우 모달 */ | |||
.flow-ui-modal-layout { | |||
background-color: #bbb; | |||
} | |||
.flow-ui-modal input.mw-ui-input { | |||
color: #1f2023; | |||
} | |||
.mw-ui-button.mw-ui-progressive:disabled { | |||
background-color: #5c5c5c; | |||
border-color: #5c5c5c; | |||
} | |||
/* 둘러보기 상자 설정 */ | |||
.navbox th:first-type { /* 머릿글 상자 - jQuery로 스타일 변경 예정 */ | |||
background-color: #224A87 !important; | |||
} | |||
.navbox th.tp_link { | |||
background-color: #1f2023 !important; | |||
} | |||
.navbox td [style*="background:#b7b7b721"] { /* 기본 셀 상자 색상 - jQuery로 변경 예정 */ | |||
background-color: #4f4f4f !important; | |||
} | |||
.navbox td.navbox-list { | |||
background-color: #1f2023 !important | |||
} | |||
code { /* 코드 박스 */ | |||
background-color: #1f2023; | |||
color: #ddd; | |||
} | |||
/* 편집 경고창 */ | |||
.warningbox { | |||
background-color: #1f2023; | |||
color: #ddd; | |||
} | |||
/* 문법 강조 요소 관련 - 사용자:Cerulean 소스 참조 */ | |||
.mw-highlight .nc { /* 문법 강조 css #id에 해당 */ | |||
color: #0075ff !important; | |||
} | |||
.mw-highlight .nn { /* css .class에 해당 */ | |||
color: #0099dd; | |||
} | |||
.ace-tm .ace_gutter, | |||
.ace-tm .ace_gutter-active-line, | |||
.codeEditor-status { | |||
background: #f0f0f029; | |||
color: #c1c1c1; | |||
} | |||
.ace-tm { /* 편집기 상자 */ | |||
background-color: unset; | |||
color: white; | |||
} | |||
.ace_marker-layer .ace_selection { /* 블록 지정 */ | |||
background: rgb(0 0 0 / 18%) !important; | |||
} | |||
.ace_storage, | |||
.ace_keyword { /* 스토리지, 키워드 */ | |||
color: #00abff !important; | |||
} | |||
.ace_identifier { /* 식별자 */ | |||
color: rgba(255, 255, 255, 0.815) !important; | |||
} | |||
.ace_operator { /* 연산자 */ | |||
color: rgb(0 0 0) !important; | |||
} | |||
.ace_library { /* 라이브러리 */ | |||
color: rgb(255 137 66) !important; | |||
} | |||
.ace_function { /* 함수 */ | |||
color: #ff0000 !important; | |||
} | |||
.ace_paren { /* 괄호 */ | |||
color: #000 !important; | |||
} | |||
.ace_string { /* 문자열 */ | |||
color: #00a706 !important; | |||
} | |||
.ace_numeric { /* 숫자 */ | |||
color: #045600 !important | |||
} | |||
.ace_content { /* 텍스트 */ | |||
/*background: black !important;*/ | |||
} | |||
.ace_variable { /* 변수 */ | |||
/*color: #6cb3ff !important;*/ | |||
} | |||
.ace_text-layer { | |||
color: #000 !important; | |||
} | |||
.ace-tm .ace_cursor { | |||
/*filter: invert(1);*/ | |||
} | |||
.ace_hidden-cursors .ace_cursor { | |||
opacity: 0.6; | |||
} | |||
.ace-tm .ace_support.ace_type, | |||
.ace-tm .ace_support.ace_class { | |||
color: rgb(76 40 0) !important; | |||
} | |||
.ace-tm .ace_print-margin { | |||
background: #323232; | |||
} | |||
.ace_line { | |||
/*font-size: 1.1em;*/ | |||
} | |||
/* 문단 색 지정 */ | |||
.Liberty .content-wrapper .liberty-content .liberty-content-main h1, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-main h2, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-main h3, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-main h4, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-main h5, | |||
.Liberty .content-wrapper .liberty-content .liberty-content-main h6 { | |||
border-color: #ffffff52; | |||
} | |||
/* 아이콘 색상 반전. 편집창에서 코드 아이콘은 반전 제외. */ | |||
.oo-ui-iconElement-icon:not(.oo-ui-icon-markup.oo-ui-image-progressive):not(.mw-rcfilters-ui-filterItemHighlightButton-circle) { | |||
filter: invert(1); | |||
} | |||
.oo-ui-popupWidget-popup, | |||
.mw-echo-ui-notificationItemWidget { | |||
background-color: #000 !important; | |||
} | |||
.mw-echo-ui-notificationItemWidget-content-message-header { | |||
color: #ffffff !important; | |||
} | |||
.mw-echo-ui-notificationItemWidget-unread { | |||
background-color: #1b1b1b !important; | |||
} | |||
.mw-echo-ui-menuItemWidget>.oo-ui-labelElement-label { | |||
color: white !important | |||
} | |||
.oo-ui-popupWidget-footer .oo-ui-buttonElement-button { | |||
background: black !important; | |||
} | |||
.mw-echo-ui-notificationItemWidget:hover { | |||
border-color: #ffffff3b !important; | |||
} | |||
.mw-echo-ui-notificationItemWidget, | |||
.oo-ui-popupWidget-popup, | |||
.oo-ui-popupWidget-head, | |||
.oo-ui-popupWidget-footer, | |||
.oo-ui-buttonElement-framed, | |||
.editOptions, | |||
.editOptions #wpSummary, | |||
.wikiEditor-ui .wikiEditor-ui-view, | |||
#editpage-specialchars select { | |||
border-color: #ffffff3b !important; | |||
} | |||
/* 위키 텍스트 상자에 반전효과 부여. */ | |||
.wikiEditor-ui-text { | |||
filter: invert(0.9) saturate(1.8) opacity(0.9) hue-rotate( | |||
186deg); | |||
} | |||
/* 반전효과 주기 전에 텍스트 상자 밝게 재지정 - 반전되므로 편집창이 어두워진다. */ | |||
textarea#wpTextbox1 { | |||
background-color: #ddd; | |||
color:#000000; | |||
} | |||
/* 편집 상용구 스타일 반전 실험 */ | |||
#esSummaryButtons essummarybutton { | |||
filter: invert(1); | |||
} | |||
/* 커스텀 입력상자 배경색 반전 실험 */ | |||
#editpage-specialchars select, #editpage-specialchars a { | |||
background-color: #1f2023; | |||
} | |||
</syntaxhighlight> | |||
{{숨김 끝}} | |||
혹은 다크 모드에서만 위의 CSS가 작동하게 만들고 싶으시면 아래와 같은 소스를 [[특수:내사용자문서/liberty.js]]에 붙이시면 됩니다. | |||
<syntaxhighlight lang="javascript"> | |||
// 다크 모드일 때 다크 테마 불러오기. liberty-dark 속성이 클라이언트 스크립트(js)에 의해 부여되므로 스크립트 로드 후에 로딩할 수 있게 처리. | |||
setTimeout(function(){ | |||
if (mw.user.options.values['liberty-dark'] === 'dark' || window.matchMedia("(prefers-color-scheme:dark)").matches) { | |||
mw.loader.load('//librewiki.net/index.php?title=사용자:Utolee90/liberty-dark.css&action=raw&ctype=text/css', 'text/css'); | |||
}}, 500); | |||
</syntaxhighlight> | |||
== 리브레 스킨 관련 == | == 리브레 스킨 관련 == | ||
{{숨김 시작|title=리브레 스킨은 더 이상 지원되지 않습니다.}} | |||
다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다. 참고로 리브레 스킨의 기본 셋팅은 [https://gitlab.com/LibreDev/Liberty-MW-Skin 이곳]에서 확인할 수 있습니다. | 다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다. 참고로 리브레 스킨의 기본 셋팅은 [https://gitlab.com/LibreDev/Liberty-MW-Skin 이곳]에서 확인할 수 있습니다. | ||
< | <syntaxhighlight lang="css"> | ||
/*상단 바 배경 디자인*/ | /*상단 바 배경 디자인*/ | ||
178번째 줄: | 962번째 줄: | ||
} | } | ||
</ | </syntaxhighlight> | ||
{{숨김 끝}} | |||
== CSS에서 사용하는 키워드 == | == CSS에서 사용하는 키워드 == |
2023년 8월 17일 (목) 04:00 기준 최신판
사용자는 위키에 기본적으로 주어진 CSS 설정을 수정해서 디자인을 변경할 수 있습니다.
특수:내사용자문서/common.css를 누르시거나 특수:환경설정에서 두 번째 탭인 문서 보이기를 누릅니다. 그 다음에 모든 스킨에 공유된 CSS/자바스크립트 에서 사용자 CSS 항목을 클릭하시면 사용자:사용자/common.css를 편집하라는 창이 나타납니다. 이곳에 자신이 원하는 CSS 설정을 입력하시면 됩니다. 역시 특정한 스킨에서만 CSS 설정을 변경하시려면 사용자:사용자/(스킨이름).css를 대신 편집하시면 됩니다.
상단 바의 색깔이나 글꼴 등을 바꾸고 싶거나 취소선 안의 내용을 지우는 등의 보이기 효과를 바꾸는 방법은 사용자 CSS를 조작하면 됩니다. 특수:내사용자문서/common.css에서 해당 소스를 복사-붙여넣기를 하시면 됩니다. 특정 스킨에만 설정된 효과를 적용하시고 싶으시면 사용자:사용자/(스킨이름).css에 내용을 복사-붙여넣기 하시면 됩니다.
기본 문법 규칙[원본 편집]
더 자세한 내용은 생활코딩 CSS 튜토리얼이나 W3schools CSS부분 등을 참조하시면 됩니다.
기본적으로 CSS 편집 규칙은 다음과 같습니다.
tagname {
'property1':'set1';
'property2':'set2';
}
태그네임은 "div"같은 태그의 이름, Property는 속성명, set은 각 Property에 대해 원하는 값을 표현합니다. 예를 들면 <div style="background-color:yellow;"></div>
를 의미하는 코드는 style 부분을 아래처럼 지정할 수 있습니다.
div {
background-color:yellow;
}
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;
}
자손 선택자 및 자식 선택자[원본 편집]
특정 태그 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;
}
동시 선택자[원본 편집]
선택자를 붙여서 서술할 경우 선택자 모두에 해당되는 것만 집어넣을 수 있습니다. 예를 들어 div 태그에서 클래스명이 "libre xtype"인 객체는 다음과 같이 선택하면 됩니다.
div.libre.xtype{ /*글자 기울임 */
font-style:italic;
}
병렬 선택자[원본 편집]
반점(,)을 이용해서 여러 선택자에 같은 효과를 집어넣을 수 있습니다. 예를 들면 클래스명이 "libre-1"과 "libre-2"로 지정된 선택자에 동등한 효과를 주기 위해서는 다음과 같은 코드를 사용하시면 됩니다.
.libre-1, .libre-2{ /*글자를 굵게 */
font-weight:bold;
}
속성 선택자[원본 편집]
쌍점 :를 이용해 마우스 속성을 선택할 수 있습니다.
a:active {color: #FF0000} /*클릭 중인 링크 */
a:hover{color: #7F7F7F; text-decoration: underline;} /* 마우스 위 얹을 때 */
a:visited{color: #FF00FF;} /* 이미 방문한 링크에 대한 속성 추가 */
특정 속성 제거할 때 사용하기[원본 편집]
tag:not(속성명)을 이용해서 속성명이 없는 것을 설정할 수 있습니다. 다음과 같은 경우 하이라이트된 부분에만 속성이 적용됩니다.
코드
<div class="selected">테스트</div>
<div class="">예제</div>
<div class="selected">보기</div>
<div class="not-selected">선택된 부분에</div>
<div class="">속성이 적용</div>
|
CSS div:not(.selected){ /*selected 클래스 미적용 */
font-weight:bold;
}
|
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의 의미 차이 보기
코드
<div>div[1]
<span>div[1]>span[1]</span>
<p>div[1]>p[1]</p>
<p>div[1]>p[2]</p>
<div>div[1]>div[1]</div>
<div>div[1]>div[2]</div>
<span>div[1]>span[2]</span>
</div>
<p>p[1]</p>
<p>p[2]</p>
<div>div[2]</div>
<p>p[3]</p>
<p>p[4]
<span>p[4]>span[1]</span></p>
<div>div[3]</div>
<p>p[5]</p>
<p>p[6]</p>
<div>div[4]
<div>div[4]>div[1]</div>
<p>div[4]>p[1]</p>
<div>div[4]>div[2]</div>
</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번째 태그일 때 굵게 */
|
기울어지는 부분
<div>div[1]
<span>div[1]>span[1]</span>
<p>div[1]>p[1]</p>
<p>div[1]>p[2]</p>
<div>div[1]>div[1]</div>
<div>div[1]>div[2]</div>
<span>div[1]>span[2]</span>
</div>
<p>p[1]</p>
<p>p[2]</p>
<div>div[2]</div>
<p>p[3]</p>
<p>p[4]
<span>p[4]>span[1]</span></p>
<div>div[3]</div>
<p>p[5]</p>
<p>p[6]</p>
<div>div[4]
<div>div[4]>div[1]</div>
<p>div[4]>p[1]</p>
<div>div[4]>div[2]</div>
</div>
|
굵어지는 부분 <div>div[1]
<span>div[1]>span[1]</span>
<p>div[1]>p[1]</p>
<p>div[1]>p[2]</p>
<div>div[1]>div[1]</div>
<div>div[1]>div[2]</div>
<span>div[1]>span[2]</span>
</div>
<p>p[1]</p>
<p>p[2]</p>
<div>div[2]</div>
<p>p[3]</p>
<p>p[4]
<span>p[4]>span[1]</span></p>
<div>div[3]</div>
<p>p[5]</p>
<p>p[6]</p>
<div>div[4]
<div>div[4]>div[1]</div>
<p>div[4]>p[1]</p>
<div>div[4]>div[2]</div>
</div>
|
형제 선택자[원본 편집]
선택자1+선택자2 형식으로 사용하면 선택자1 뒤에 나오는 선택자 2를 선택하고, 선택자1~선택자 2 형식으로 입력하면 선택자 1 다음의 형제 선택자 2를 고릅니다.
/* 인접 형제 선택자 - h2 바로 다음에 오는 형제 선택자만 */
h2+ul {background:green;}
/* 일반 형제 선택자 - h1 다음에 오는 모든 형제 선택자 */
h2~ul {color:#7f0000;}
애트리뷰터 선택자[원본 편집]
대괄호 [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 등등)에 대해 지정할 수 있습니다. |
미디어 연결 선택자[원본 편집]
@import url(' ') (미디어 쿼리);
형식으로 URL에 지정된 CSS를 가져올 수 있습니다.
아래 표는 미디어 쿼리 목록입니다.
미디어 쿼리 | 역할 |
---|---|
all | 모든 장치에서 균일하게 보여줍니다. 생략시 all이 기본입니다. |
tv | 텔레비전 유형의 장치에 적용합니다. |
screen | 디지털 기기의 화면에 띄울 때 적용합니다. |
인쇄용 페이지에 적절한 요소 | |
speech | 스크린 리더에 적용되는 요소 |
and, or, not | 논리 연산자를 적용할 수 있습니다. 예를 들면 print or speech |
min-width:(최소넓이) | 최소 넓이가 얼마일 때 적용 |
max-width:(최대넓이) | 최대 넓이가 얼마일 때 적용 |
또한 @media (미디어 쿼리)
선택자를 이용하면 특정 미디어 쿼리를 만족할 때 CSS 조건을 바꿀 수 있습니다.
활용 예제[원본 편집]
사용자 폰트 바꾸기[원본 편집]
특수:내사용자문서/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'; }
링크 텍스트 바꾸기[원본 편집]
영위백 도움말:링크 문서도 참조하세요. 다음과 같이 중괄호 안에 있는 속성을 바꾸어서 설정할 수 있습니다.
/* 속성 변환 예시 */
.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; }
라고 입력하시면 됩니다.
모바일에서 둘러보기 상자 안 보이게 설정[원본 편집]
{{둘러보기 상자}} 틀은 가로폭을 많이 차지하는 특성 상 모바일에서 보기 불편하며, 실제로도 MobileFrontEnd 등 일부 모바일 전용 확장기능에서는 나타나지 않게 되어 있습니다. 가로폭이 좁은 환경에서 둘러보기 상자를 띄우지 않기 위한 소스는 다음과 같습니다.
/* 가로폭 800px 미만 환경에서 둘러보기 상자 안 보여주기 */
@media (max-width: 799px) {
.navbox{ display:none;}
}
단축키를 버튼 옆에 표시[원본 편집]
/* accesskey 속성이 있는 링크를 찾아 뒤에 단축키를 표시함. */
a[accesskey]:after {
content: " " attr(accesskey);
font-size: 0.9em;
text-transform: uppercase;
}
단축키는 Alt나 Alt+⇧ Shift를 같이 누르면 됩니다. 다른 프로그램의 Alt 매핑을 우회하려면 Shift를 같이 눌러주세요.
리버티 스킨 관련[원본 편집]
부트스트랩에 관한 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;
}
다크 모드에서 이질감 줄이기[원본 편집]
환경 설정에서 리버티 스킨을 다크 모드로 설정하면 위키가 전반적으로 다크 모드에 맞게 설정됩니다. 그러나 pre 태그 등 일부 태그는 다크 모드로 CSS가 변경되지 않기에 이질감을 느낄 수 있습니다. 이질감을 줄이기 위한 설정으로 아래 소스를 특수:내사용자문서/liberty.css에 붙이시면 됩니다.
/* 참조: 사용자:Cerulean/liberty-dark.css */
/* 다크 모드에 최적화된 리버티 스킨 디자인 변경 */
/* 기본색: #4188f1-> #224A87 */
.Liberty .nav-wrapper,
.Liberty .nav-wrapper .navbar .form-inline .btn:hover,
.Liberty .nav-wrapper .navbar .form-inline .btn:focus,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link.active::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:hover::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:focus::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-header .nav .nav-item .nav-link:active::before,
.Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent .live-recent-footer .label,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:hover,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:focus,
.Liberty .content-wrapper .liberty-content .liberty-content-header .content-tools .tools-btn:active,
#liberty-scrollup,
#liberty-scrolldown,
[style*="background: #4188f1;"],
[style*="background:#4188f1;"]
[style*="background-color:#4188f1;"]{
background-color: #224a87;
}
/* navbar 관련 스타일 */
#searchInput { /* 문서 검색창 */
background-color:#1f2023;
color: inherit;
}
/* msUpoad 색상 */
#msupload-div {
background-color: #1f2023;
}
#msupload-dropzone {
color: inherit;
}
/* 소스 상자 등 색깔 변경 */
pre,
.liberty-notice {
background-color: #1f2023;
color: inherit;
}
/* 사용자 문서 안내 */
.libre-notice {
background-color: #1f2023 !important;
color: inherit !important;
}
.libre-notice .tp_link {
color: white !important;
}
/* 요약문 */
input#wpSummary {
background-color: #1f2023 !important;
color: inherit !important;
}
/* 미리보기버튼 */
#wpPreview {
background-color: #2f9dba;
color:white;
}
/* 차이 보기 */
#wpDiff {
background-color:#315830;
color:white;
}
/* 체크박스 */
.editButtons input {
filter: brightness(0.9);
border-color: transparent !important;
}
/* 선택상자 옵션 */
select {
background-color: #1f2023;
color: white;
border: 1px solid white;
}
select option:hover {
background-color: #5e5e5e;
}
/* 텍스트 상자 옵션 */
input [type*="text"] {
background-color: #1f2023;
color: inherit;
}
/* 특수문서 - 미디어위키용 입력상자 스타일 재설정 */
/* 수정 - 필터로 색상반전이 더 좋을 것 같음. */
/* 목록 상자 */
/*
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget-open,
.oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button:not(#wpSave):not(#wpPreview):not(#wpDiff) { /* 저장, 미리보기, 차이보기 버튼은 회색배경 적용하지 않기 */
background-color: #1f2023 !important;
color: white;
border: 1px solid white;
}
*/
/* 메뉴 옵션 */
/*
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
background: rgba(10, 18, 18, 0.5);
}
*/
/* 위젯 라벨명 */
/*
.oo-ui-labelElement-label {
color: white;
}
*/
/* 메뉴 선택시 */
/*
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
background: #eae8f1;
color: black !important;
}
*/
/* 텍스트 상자 */
/*
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: #1f2023;
color: inherit;
}
*/
/* 라디오 상자, 체크박스 배경색 검게 - jQuery로 바꿀 수 있을 지 테스트 예정. */
/*
.mw-rcfilters-head .oo-ui-buttonElement-button,
.mw-changeslist .mw-changeslist-legend,
.mw-rcfilters-head .oo-ui-widget,
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-overlay .oo-ui-menuSelectWidget,
.mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup,
.mw-rcfilters-ui-overlay .oo-ui-buttonElement-button,
.mw-rcfilters-ui-overlay .oo-ui-labelElement,
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
background: black !important;
}
*/
/*
.mw-rcfilters-head .oo-ui-tagMultiselectWidget-handle {
background: #ffffff1a !important;
}
*/
/* 스크롤바가 거슬리니 일단 삭제 */
fieldset.oo-ui-layout {
overflow:hidden;
}
/* 테스트 - 요소 반전 실험 */
#ooui-2
{
filter:invert(1);
}
/* 반전이 일어나지 않는 요소들 수동보정 - 선택상자 */
.mw-changeslist .mw-changeslist-legend,
.mw-rcfilters-head .oo-ui-widget,
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-overlay .oo-ui-menuSelectWidget,
.mw-rcfilters-ui-overlay .oo-ui-popupWidget-popup,
.mw-rcfilters-ui-overlay .oo-ui-buttonElement-button,
.mw-rcfilters-ui-overlay .oo-ui-labelElement,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend
{
background-color: black !important;
}
/* 최근 바뀜 상자 관련 */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color:#1f2023;
}
.oo-ui-buttonElement.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-buttonElement-button,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.mw-search-profile-tabs,
.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle,
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:not(.oo-ui-buttonElement-active)
{
background-color: #1f2023 !important;
color: #ddd;
}
.oo-ui-layout button[type="submit"] .oo-ui-labelElement-label,
{
color:black;
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
bdi {
color: #ddd;
}
.oo-ui-decoratedOptionWidget .oo-ui-labelElement-label {
color: #9f9f9f;
}
div.mw-warning-with-logexcerpt, div.mw-lag-warn-high, div.mw-cascadeprotectedwarning, div#mw-protect-cascadeon {
background-color: #4f4f02;
}
/* 텍스트는 명도 올리기 */
div.mw-warning-with-logexcerpt [style*="color:blue;"] {
color: #7f7fff;
}
/* 메뉴 투명하게 */
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
filter:alpha(opacity=40);
}
/* 선택 배경메뉴는 더 진하게 -> 반전은 더 연하게 ->일단 취소 */
/*
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
background: #9f9f9f;
}*/
/* focus 글자 색 반전 -> 재반전시킴 */
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget:hover {
color: #c93;
}
.oo-ui-icon-highlight:not(.mw-rcfilters-ui-filterItemHighlightButton-circle) {
filter: invert(1);
}
/* charInsert 상자 배경색 전환 */
.mw-edittools-section input {
background-color:#315830;
}
/* 준보호 편집문서 편집창 색상 진하게 */
.mw-textarea-sprotected {
background-color: #9f9fff;
}
/* 틀 설명문서 배경색 변경 - jQuery로 설정할 예정. */
.template-documentation {
background-color: #00585f !important;
color: white;
}
/* 본문 관련 */
/* 진한 글씨는 흰색 -> 연초록로 바꾸어서 시각 자극을 줄이기 */
#content b {
color: #dfffdf;
}
/* 취소선 친 글씨색 더 밝게 */
del, s, strike {
color: #ccc;
}
/* 링크색은 살짝 밝게 지정 */
a {
color: #519ff1
}
a.new { /* 새 링크 */
color: #f97f7f;
}
/* 태그 색상 밝은 톤으로 바꾸기 */
.mw-plusminus-pos {
color: #4fdf4f;
}
.mw-plusminus-neg, .mw-tag-markers, .newpage {
color: #df7f7f;
}
/* 편집창 차이 내역 */
html td.diff-context {
background-color: #1f2023;
border-color: #afafaf;
color: #ddd;
}
.diff-addedline .diffchange { /* 추가 텍스트 */
background: #002f4f;
color: #ccf;
}
.diff-deletedline .diffchange { /* 삭제된 텍스트 */
background: #4f4f02;
color: #fda;
}
/* 플로우 상자 타이틀 - 그냥 푸른빛 도는 어두운 회색으로 바꾸자 */
.flow-topic-titlebar {
background-color: #3a515f;
color: #ddd;
}
.flow-topic-meta {
color: #ccc
}
.flow-component .mw-ui-icon.mw-ui-icon-before.mw-ui-icon-only:before {
filter: invert(0.9) saturate(1.8) brightness(1.6) hue-rotate(186deg);
}
/* 플로우 메뉴 ul */
div>.flow-menu ul {
filter: invert(0.9) saturate(1.8) opacity(0.9) hue-rotate(186deg);
}
/* 플로우 모달 */
.flow-ui-modal-layout {
background-color: #bbb;
}
.flow-ui-modal input.mw-ui-input {
color: #1f2023;
}
.mw-ui-button.mw-ui-progressive:disabled {
background-color: #5c5c5c;
border-color: #5c5c5c;
}
/* 둘러보기 상자 설정 */
.navbox th:first-type { /* 머릿글 상자 - jQuery로 스타일 변경 예정 */
background-color: #224A87 !important;
}
.navbox th.tp_link {
background-color: #1f2023 !important;
}
.navbox td [style*="background:#b7b7b721"] { /* 기본 셀 상자 색상 - jQuery로 변경 예정 */
background-color: #4f4f4f !important;
}
.navbox td.navbox-list {
background-color: #1f2023 !important
}
code { /* 코드 박스 */
background-color: #1f2023;
color: #ddd;
}
/* 편집 경고창 */
.warningbox {
background-color: #1f2023;
color: #ddd;
}
/* 문법 강조 요소 관련 - 사용자:Cerulean 소스 참조 */
.mw-highlight .nc { /* 문법 강조 css #id에 해당 */
color: #0075ff !important;
}
.mw-highlight .nn { /* css .class에 해당 */
color: #0099dd;
}
.ace-tm .ace_gutter,
.ace-tm .ace_gutter-active-line,
.codeEditor-status {
background: #f0f0f029;
color: #c1c1c1;
}
.ace-tm { /* 편집기 상자 */
background-color: unset;
color: white;
}
.ace_marker-layer .ace_selection { /* 블록 지정 */
background: rgb(0 0 0 / 18%) !important;
}
.ace_storage,
.ace_keyword { /* 스토리지, 키워드 */
color: #00abff !important;
}
.ace_identifier { /* 식별자 */
color: rgba(255, 255, 255, 0.815) !important;
}
.ace_operator { /* 연산자 */
color: rgb(0 0 0) !important;
}
.ace_library { /* 라이브러리 */
color: rgb(255 137 66) !important;
}
.ace_function { /* 함수 */
color: #ff0000 !important;
}
.ace_paren { /* 괄호 */
color: #000 !important;
}
.ace_string { /* 문자열 */
color: #00a706 !important;
}
.ace_numeric { /* 숫자 */
color: #045600 !important
}
.ace_content { /* 텍스트 */
/*background: black !important;*/
}
.ace_variable { /* 변수 */
/*color: #6cb3ff !important;*/
}
.ace_text-layer {
color: #000 !important;
}
.ace-tm .ace_cursor {
/*filter: invert(1);*/
}
.ace_hidden-cursors .ace_cursor {
opacity: 0.6;
}
.ace-tm .ace_support.ace_type,
.ace-tm .ace_support.ace_class {
color: rgb(76 40 0) !important;
}
.ace-tm .ace_print-margin {
background: #323232;
}
.ace_line {
/*font-size: 1.1em;*/
}
/* 문단 색 지정 */
.Liberty .content-wrapper .liberty-content .liberty-content-main h1,
.Liberty .content-wrapper .liberty-content .liberty-content-main h2,
.Liberty .content-wrapper .liberty-content .liberty-content-main h3,
.Liberty .content-wrapper .liberty-content .liberty-content-main h4,
.Liberty .content-wrapper .liberty-content .liberty-content-main h5,
.Liberty .content-wrapper .liberty-content .liberty-content-main h6 {
border-color: #ffffff52;
}
/* 아이콘 색상 반전. 편집창에서 코드 아이콘은 반전 제외. */
.oo-ui-iconElement-icon:not(.oo-ui-icon-markup.oo-ui-image-progressive):not(.mw-rcfilters-ui-filterItemHighlightButton-circle) {
filter: invert(1);
}
.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationItemWidget {
background-color: #000 !important;
}
.mw-echo-ui-notificationItemWidget-content-message-header {
color: #ffffff !important;
}
.mw-echo-ui-notificationItemWidget-unread {
background-color: #1b1b1b !important;
}
.mw-echo-ui-menuItemWidget>.oo-ui-labelElement-label {
color: white !important
}
.oo-ui-popupWidget-footer .oo-ui-buttonElement-button {
background: black !important;
}
.mw-echo-ui-notificationItemWidget:hover {
border-color: #ffffff3b !important;
}
.mw-echo-ui-notificationItemWidget,
.oo-ui-popupWidget-popup,
.oo-ui-popupWidget-head,
.oo-ui-popupWidget-footer,
.oo-ui-buttonElement-framed,
.editOptions,
.editOptions #wpSummary,
.wikiEditor-ui .wikiEditor-ui-view,
#editpage-specialchars select {
border-color: #ffffff3b !important;
}
/* 위키 텍스트 상자에 반전효과 부여. */
.wikiEditor-ui-text {
filter: invert(0.9) saturate(1.8) opacity(0.9) hue-rotate(
186deg);
}
/* 반전효과 주기 전에 텍스트 상자 밝게 재지정 - 반전되므로 편집창이 어두워진다. */
textarea#wpTextbox1 {
background-color: #ddd;
color:#000000;
}
/* 편집 상용구 스타일 반전 실험 */
#esSummaryButtons essummarybutton {
filter: invert(1);
}
/* 커스텀 입력상자 배경색 반전 실험 */
#editpage-specialchars select, #editpage-specialchars a {
background-color: #1f2023;
}
혹은 다크 모드에서만 위의 CSS가 작동하게 만들고 싶으시면 아래와 같은 소스를 특수:내사용자문서/liberty.js에 붙이시면 됩니다.
// 다크 모드일 때 다크 테마 불러오기. liberty-dark 속성이 클라이언트 스크립트(js)에 의해 부여되므로 스크립트 로드 후에 로딩할 수 있게 처리.
setTimeout(function(){
if (mw.user.options.values['liberty-dark'] === 'dark' || window.matchMedia("(prefers-color-scheme:dark)").matches) {
mw.loader.load('//librewiki.net/index.php?title=사용자:Utolee90/liberty-dark.css&action=raw&ctype=text/css', 'text/css');
}}, 500);
리브레 스킨 관련[원본 편집]
다음과 같은 변수명을 이용해서 색상바나 드롭다운 메뉴의 디자인을 바꿀 수 있습니다. 참고로 리브레 스킨의 기본 셋팅은 이곳에서 확인할 수 있습니다.
/*상단 바 배경 디자인*/
.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 명령어의 기본적인 지식은 이곳을, 미디어위키 상에서의 코딩 규칙은 이곳이나 이곳을 참조하시기 바랍니다.
기초 사용법 | |
---|---|
위키 문법 | |
특수 기능 |