도움말:사용자 CSS: 두 판 사이의 차이

2021년 9월 1일 (수) 01:05 기준 최신판

사용자는 위키에 기본적으로 주어진 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://bigforest.miraheze.org/">큰숲백과</a>
<ul>
<li> <a href="https://bigforest.miraheze.org/wiki/도움말:위키_문법">위키 문법</a>
<li> <a href="https://bigforest.miraheze.org/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	디지털 기기의 화면에 띄울 때 적용합니다.
print	인쇄용 페이지에 적절한 요소
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; }

라고 입력하시면 됩니다.

리버티 스킨 관련

부트스트랩에 관한 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;
}

CSS에서 사용하는 키워드

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

이 도움말 문서의 출처는 리브레 위키의 도움말:사용자 CSS 문서입니다.

보기 • 토론 • 편집 • 역사 큰숲백과 도움말
기초 사용법	이용 안내 서명 파일 올리기
위키 문법	문법 표 틀 TeX TeX 글꼴형 문자 TeX 특수문자 특수 명령문 타임라인 파일 고급 이미지 문법 입력 상자 퀴즈
특수 기능	시각 편집기 환경설정 사용자 JS 사용자 CSS 미디어위키 API 미디어위키 쿼리 분류 트리 키보드 단축키
관리자 매뉴얼	관리자 매뉴얼 편집 필터 찾아바꾸기 미디어위키 메시지 위키 설정 위키 디자인 소도구 문자삽입 도구