리버티게임:CSS

CSS(Cascading Style Sheet)는 웹 페이지를 더 예쁘게 디자인할 수 있는 스타일시트 언어입니다.

CSS를 사용하면 배경색을 넣어 예쁜 틀을 제작하고, 이미지의 모양새를 변경하고, 버튼의 색을 바꾸는 등 당신이 보는 리버티게임 페이지를 더 아름답게 만들 수 있습니다. 리버티게임에서 화려한 디자인을 가진 틀과 게임들은 전부 CSS를 사용하여 만들었습니다.

리버티게임에서는 사용자:너/common.css와 같은 CSS 문서를 작성하여 모든 문서에서 나 스스로에게만 특정 요소를 다르게 보이게 만들 수도 있고, 일반 문서에서 #css 파서 태그를 사용해 해당 문서에 적용할 CSS 문서를 가져오거나 작성할 수 있습니다. 혹은 각 HTML 태그의 style 값에 한 줄의 문자열로 태그에 적용할 CSS 속성을 적용할 수 있습니다. 이렇게 모양새를 바꾸는 설정을 스타일(style)이라고 하며, (속성 이름): (값);의 형태를 가지고 있습니다.

CSS의 동작[원본 편집]

CSS는 HTML 요소가 렌더링되는 모양과 레이아웃을 정합니다. 따라서 디자인을 할 때에는 각 요소 간의 간섭을 어느 정도 생각할 필요가 있습니다.

따라서 리버티게임에서 CSS를 사용할 때에는 저장 버튼 옆 미리 보기 단추를 적극적으로 사용하는 것을 권장합니다.

기본 모양새[원본 편집]

위에서 설명한 CSS 스타일을 #css 태그나 CSS 문서 내에서 사용할 때에는 선택자를 먼저 쓰고 중괄호로 감싼 영역 내에 스타일 속성들을 한 줄씩 적습니다. 모든 스타일 속성은 ;(세미콜론) 글자로 끝나야 합니다. HTML 태그의 style 속성에 작성하는 경우, 중괄호 내의 속성들만 작성하면 됩니다.

/* 설명을 위한 주석은 이렇게 양 옆에 슬래시 문자와 별표 문자를 대칭으로 적고 그 사이에 이렇게 설명을 넣으면 됩니다. */
#example {
  display:flex;
  flex-direction:row;
  position:relative;
  top: 1rem;
  text-align:center;
  color: white;
  background-color: #00FF00;
  margin: 2px;
  border: 1px solid green;
}

위에 있는 예시에서 선택자는 #example이고, 속성 이름은 display, flex-direction, position 등 :앞의 내용이고, flex, row, relative 등 :뒤의 내용은 해당 속성의 값입니다.

선택자[원본 편집]

id 선택자[원본 편집]

아이디 선택자는 id 속성을 넣은 단 하나의 HTML 태그를 선택하여 스타일을 변경할 때 사용합니다. # 글자 뒤에 HTML 태그 내 id 값을 적는 식으로 사용합니다(예: #myid)

클래스 선택자[원본 편집]

아이디 선택자는 class 속성을 넣은 여러 개의 HTML 태그를 선택하여 스타일을 변경할 때 사용합니다. . 글자 뒤에 HTML 태그 내 class 값을 적는 식으로 사용합니다(예: .myclass)

태그 선택자[원본 편집]

그냥 현재 페이지에 있는 모든 버튼이나 이미지를 선택할 수도 있습니다. 그런 경우에는 div, span, img, button 등 태그 종류를 그대로 쓰면 됩니다.

링크를 고르고 싶은 경우에는 a라고 쓰면 됩니다.

속성 선택자[원본 편집]

class나 id 속성 이외의 다른 속성으로 HTML 태그를 선택할 수 있습니다. [대괄호] 안에 HTML 태그의 속성을 쓰듯이 속성의 이름과 값을 쓸 수 있습니다.

값에 상관없이 태그에 특정 속성이 존재하기만 하면 될 경우 [대괄호] 안에 속성 이름만 씁니다. (예: [data-myattr])

속성의 값이 특정 값과 정확히 일치해야 한다면 속성 이름 옆에 = 글자를 쓰고, 그 뒤에 "큰따옴표"로 감싼 속성의 값을 씁니다. (예: [data-myattr="myvalue"])

의사 클래스[원본 편집]

특정한 상태를 갖는 HTML 태그를 선택할 때 다음과 같이 : 문자로 시작하는 여러 의사 클래스를 사용할 수 있습니다.

:hover: 마우스 커서가 닿아있는 요소를 선택합니다
:active: 커서나 터치로 누르고 있는 요소를 선택합니다.
:focus: 키보드 커서가 있는 요소를 선택합니다. 입력 중인 input이나 tab 키 또는 마우스로 선택한 요소입니다.

의사 요소[원본 편집]

실존하지 않는 가상의 요소를 만들고자 할 때 다음과 같이 :: 문자로 시작하는 여러 의사 요소 사용할 수 있습니다.

::before: 요소의 앞부분에 가상 요소를 선택합니다.
::after: 요소의 뒷부분에 가상 요소를 선택합니다.

선택자 결합[원본 편집]

여러 조건을 결합해서 더 구체적인 요소를 선택할 수 있습니다. 그냥 선택자를 뒤에 바로 붙이면 됩니다. 예를 들어, a와 b 클래스를 모두 가지고, data-x, data-y 속성을 모두 가진 요소는 .a.b[data-x][data-y]와 같이 선택할 수 있습니다. 기본적으로 순서는 상관이 없지만, 태그 선택자는 반드시 앞에 있어야 하며, 의사 클래스들은 다른 종류의 선택자의 뒤에 있어야 합니다. (예: div#myid.myclass:hover)

반대로 서로 다른 여러 선택자들을 한번에 선택해서 같은 CSS 속성을 적용할 수도 있습니다. 여러 선택자들을 , 글자로 나누면 됩니다. 예를 들어, div와 span 태그를 모두 선택하고 싶다면 div, span로 선택할 수 있습니다. ,는 우선순위가 높으므로 의사 클래스 안에서 쓰는 게 아니라면 선택자 중간에서 나눌 수 없습니다. 예를 들어, a 클래스나 b 클래스인 div를 모두 선택할 때, div.a, .b라고 쓰면 안되고 div.a, div.b처럼 따로 써야 합니다.

자식 선택하기[원본 편집]

CSS는 HTML DOM 구조에 따라 트리 구조로 설정하기 때문에, 부모 HTML 태그와 자식 HTML 태그 간의 관계를 선택자로 걸어 특정한 부분만 스타일 설정을 해야할 때가 많습니다. 다음은 자식을 선택하는 선택자들입니다.

div > a: div 바로 밑의 자식 a(하이퍼링크)만 선택합니다.
div a: div의 자식 a, 손자 a, 증손자 a, ... 등 모든 자손들을 선택할 때에 씁니다.
:first-child: 첫번째 자식인 요소(일반적으로 문서 가장 위쪽-왼쪽에 나타나는 요소)를 선택합니다. 예를 들어 div의 첫번째 자식을 선택한다면 div > :first-child으로 씁니다.
:last-child: 마지막 자식인 요소를 선택합니다. 예를 들어 div의 마지막 자식을 선택한다면 div > :last-child으로 씁니다.
:nth-child(k): k번째 자식인 요소를 선택합니다. 예를 들어 div의 3번째 자식을 선택한다면 div > :nth-child(3)으로 씁니다.

모든 요소 선택[원본 편집]

모든 요소를 선택하려면 *을 이용할 수 있습니다. 자주 쓰이지는 않지만, 모든 자손을 종류에 상관없이 선택할 때 등 다른 선택자와 함께 사용하면 좋습니다. 다만, *.foo 와 같이 옆에 클래스가 명시되어 있는 등 더 구체적인 선택자와 결합된 경우에는 *이 의미가 없으므로 생략하는 것이 좋습니다.

부정 의사 클래스[원본 편집]

반대로 선택하고 싶을 경우 :not() 의사 클래스를 사용할 수 있습니다. 괄호 안에 선택자를 넣으면 그 선택자에 해당하는 요소들을 뺀 요소들을 선택합니다. 예를 들어, myclass 클래스를 가진 요소를 뺀 모든 div 태그를 선택하고 싶다면 div:not(.myclass)와 같이 입력할 수 있습니다.

단위[원본 편집]

CSS에서는 크기나 길이를 다룰 때 단위를 붙입니다. 사용 가능한 단위는 다음과 같습니다.

px: 제일 기본적인 단위로, 절대값입니다. 하지만 배율 설정과 맞지 않을 수 있으므로 다른 상대 단위를 추천합니다.
%: 상위 요소의 크기의 비율입니다. 예를 들어, 너비(width)를 설정할 때, 100%는 상위 요소의 너비와 같습니다.
em: 글자 크기와 비례하는 단위로, 1em는 font-size에 설정된 크기와 같습니다. 즉, 한글 한글자의 크기와 같습니다.
rem: 최상위 요소(html 태그)의 글자 크기와 비례하는 단위로, 1rem은 html 태그에 설정된 font-size에 설정된 크기와 같습니다. 즉, 사용자가 브라우저에 설정한 글자 크기를 나타냅니다.
vh: 기기 화면의 높이의 비율입니다. 100vh는 기기 화면의 높이와 같습니다.
vw: 기기 화면의 너비의 비율입니다. 100vw는 기기 화면의 너비와 같습니다.
vmin: 기기 화면의 높이나 너비 중 더 작은쪽의 비율입니다.
vmax: 기기 화면의 높이나 너비 중 더 큰 쪽의 비율입니다.

속성[원본 편집]

배치[원본 편집]

display[원본 편집]

요소 자기 자신과 자식 요소들이 배치되는 방식을 정합니다.

block: 기본적인 레이아웃으로, 기본적으로 한 줄 전체를 차지하며, 요소 내부에도 공간을 가집니다. inline을 제외한 모든 레이아웃은 기본적으로 block 레이아웃을 기반으로 합니다.
inline: 또 다른 기본 레이아웃으로, 요소를 문자열로 취급합니다. 문자열 중간에서 해당 요소가 나와도 줄을 바꾸지 않고 계속 이어지며, 내부에 따로 공간을 갖지 않습니다. 해당 요소가 줄 끝에 나와 줄바꿈이 되면 중간에 끊어져서 다음 줄에 이어집니다. block을 포함한 다른 레이아웃을 inline처럼 배치시켜서 내부와 외부의 배치 방식을 서로 다르게 할 수 있습니다. 레이아웃 이름 앞에 inline-을 붙이면 됩니다. 이 경우 요소 외부에서는 인라인으로써 글자로 취급되지만, 그 요소 내부는 블록처럼 내부 요소를 자유롭게 배치할 수 있습니다. (예: inline-block, inline-flex)
flex: 자식 요소들을 한 줄로 쌓습니다. 기본적으로 block 요소들을 가로로 정렬할 때 사용합니다.
grid: 자식 요소들을 정해진 템플릿에 맞춰 정렬합니다. 표를 나눠 레이아웃을 구성하는 것 처럼 사용할 수 있습니다.

position[원본 편집]

block 요소 자기 자신의 위치를 정하는 방식을 설정합니다.

static: 기본값으로, HTML 문서의 순서에 맞게 앞 요소 아래에 정렬됩니다.
relative: static 기준의 위치에서 상대적으로 위치를 움직입니다.
absolute: 요소가 존재하는 공간 전체의 기준으로 절대적인 위치를 정합니다.
fixed: 화면 전체의 기준으로 절대적인 위치를 정합니다. 스크롤을 해도 위치가 바뀌지 않습니다.
sticky: 기본적으로는 static의 위치에 있지만, fixed 기준의 위치에 도달할 경우 해당 위치에 고정됩니다.

크기[원본 편집]

height: 블록 요소의 높이를 설정합니다.
width: 블록 요소의 너비를 설정합니다.

여백[원본 편집]

margin: 요소의 바깥쪽 여백을 설정합니다. 요소의 테두리에서 주변의 요소까지의 여백을 말합니다.
padding: 요소의 안쪽 여백을 설정합니다. 요소의 테두리에서 자식 요소까지의 여백을 말합니다. padding의 크기는 요소의 크기에 포함되며, 요소의 크기가 같을 때, padding이 커지면 자식 요소들이 더 좁아집니다.

글자[원본 편집]

미디어 쿼리: 반응형 웹페이지 만들기[원본 편집]

기기의 특성에 따라 서로 다른 스타일시트를 적용할 수 있습니다. CSS 파일에 @media (기기 특성)을 쓰고, 그 옆에 {대괄호}를 열어서 그 안에 선택자와 그 선택자의 속성들을 쭉 쓰면 됩니다.

사용할 수 있는 기기 특성은 다음과 같습니다. 괄호 안에 있는 특성은 제일 바깥의 괄호도 써야 합니다. 그 안에 있는 괄호 부분을 원하는 값으로 바꿔서 쓰면 됩니다.

screen: HTML 문서가 기기의 화면에 표시될 때
print: HTML 문서가 종이에 인쇄될 때
(min-width: (크기)): 화면의 폭이 지정된 크기보다 클 때
(max-width: (크기)): 화면의 폭이 지정된 크기보다 작을 때
(min-height: (크기)): 화면의 높이가 지정된 크기보다 클 때
(max-height: (크기)): 화면의 높이가 지정된 크기보다 작을 때
(prefers-color-scheme: (설정)): 라이트 모드 및 다크 모드 분기. 스킨의 설정은 반영되지 않으며 OS의 설정만 반영됩니다. 자세한 내용은 리버티게임:다크 모드를 참고해 주세요.
- (prefers-color-scheme: light): 기기가 라이트 모드로 설정될 때
- (prefers-color-scheme: dark): 기기가 다크 모드로 설정될 때

여러 특성을 모두 만족해야 하는 경우 and로 특성을 조합할 수 있습니다.

다 작성하고 나면 다음과 같은 모양새가 됩니다.

@media screen and (max-width: 800px) {
  #example {
    display: flex;
    margin: 0;
  }
}

위키 문서에 적용하기[원본 편집]

CSS 스타일시트를 위키 문서에 적용하려면 인라인 style 속성 및 <templatestyles> 파서 태그를 이용할 수 있습니다.

하나의 요소에만 간단한 스타일을 적용하려면 인라인 style 속성을 사용할 수 있습니다. span, div 등의 HTML 태그의 속성으로 style을 추가하고 그 값에 CSS 속성들을 넣으면 됩니다. 다음은 그 예시입니다.

<div style="display: none;">이 요소는 보이지 않습니다.</div>

적용할 속성이 많거나 반응형 디자인을 적용하거나 여러 요소에 걸쳐 스타일을 적용하려면 #css 파서 함수를 이용할 수 있습니다. <templatestyles> 파서 태그의 인자로 CSS 스타일시트가 저장된 문서 이름을 작성하면 됩니다. 다음은 그 예시입니다.

<templatestyles src="CSS 문서" />

CSS 문서 생성하기[원본 편집]

여러 문서에 사용하거나 내용이 길고 복잡한 스타일시트를 만든다면, 독립적인 CSS 문서를 만드는 것이 좋습니다.

기본 이름공간, 틀 이름공간 등 대부분의 이름 공간의 경우, 문서 이름이 .css로 끝나는 문서는 자동으로 sanitized-css 문서가 되므로 해당 문서에서 바로 CSS를 작성해서 저장하면 됩니다. 편집 창이 위키 편집기가 아닌 css 코드 편집기 형태인 것으로 sanitized-css 콘텐츠 모델이 적용됐는지를 확인할 수 있습니다.

하지만 사용자 문서(사용자:로 시작하는 문서)거나 자동으로 css 코드 편집기가 적용되지 않거나, .css로 끝나지 않는 문서라면 콘텐츠 모델을 수동으로 sanitized-css로 변경하는 것이 좋습니다. 문서를 만들기 전 처음 편집할 때 주소창 뒤에 &model=sanitized-css&format=text/css를 추가하거나, 문서가 이미 있거나 없거나 상관없이 특수:콘텐츠모델변경에서 해당 문서의 콘텐츠 모델을 CSS로 바꾸면 됩니다. 이 기능은 도구 창의 문서 정보-문서 내용 모델 란의 변경 버튼을 눌러서도 접근할 수 있습니다. 또는 아래 양식에 문서 제목을 입력해서 새로운 CSS 문서를 만들 수 있습니다.

영

←

×

1	2	3	4	5	6	7	8	9	0	-
q	w	e	r	t	y	u	i	o	p	⬆
a	s	d	f	g	h	j	k	l	,	.
z	x	c	v	b	n	m	Space (_)

sanitized-css의 경우, 사용할 수 있는 CSS의 문법이 제한되며 .mw-parser-output 클래스를 가진 요소의 하위 요소에만 CSS가 적용될 수 있습니다. 사용 가능한 문법의 목록은 다음 문서에서 확인할 수 있습니다.

허용되지 않는 문법을 사용할 경우 저장 버튼을 누르면 오류창이 뜨면서 저장되지 않을겁니다. 이때 오류창에 어떤 문법이 사용할 수 없는 문법인지 확인할 수 있습니다.

기타 및 참고자료[원본 편집]

위에서 설명한 내용 이외에도 애니메이션을 넣는 등 CSS로 할 수 있는 것이 정말 많습니다. CSS의 전체 내용을 알고 싶다면 MDN의 CSS 설명 문서를 보시고, 영어가 되는 분이라면 w3schools의 강좌도 보시면 좋습니다.