리버티게임:CSS

CSS(Cascading Style Sheet)는 웹 페이지를 더 예쁘게 디자인할 수 있는 웹 표준 명세입니다.

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

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

CSS의 동작

Cascading이라는 단어에 따라 CSS는 CSSOM이라는 트리 구조로 웹 페이지의 모양새를 구성하고 HTML DOM의 구조에 따라 렌더링합니다. 따라서 디자인을 할 때에는 각 요소 간의 간섭을 어느 정도 생각할 필요가 있습니다.

따라서 리버티게임에서 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;
}

선택자

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)으로 씁니다.

부정 의사 클래스

반대로 선택하고 싶을 경우 :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 문서 적용하기

CSS 문서를 따로 작성하고 위키 문서에 적용할 때 #css: 파서 함수를 사용할 겁니다. 이 때, CSS 문서의 소스코드를 틀로 가져와 파서 함수의 인자로 넣지 마세요. 특히 틀을 만들 때는요. 틀을 쓰지 말고 문서 이름만 그대로 넣어도 됩니다.

다만, 하위 문서를 상대적으로 가리킬 수 없고, 반드시 절대 경로를 사용해야 합니다.

❌ 나쁜 예 -> {{#css:{{CSS 문서}}}}
👍 좋은 예 -> {{#css:CSS 문서}}

❌ 나쁜 예 -> {{#css:{{/하위.css}}}}
❌ 오류    -> {{#css:/하위.css}}
👍 좋은 예 -> {{#css:여기/하위.css}}
👍 좋은 예 -> {{#css:{{#rel2abs:/하위.css}}}}

만약 css 파서 함수가 틀로 포함되어 여러번 들어온다면 CSS 문서를 틀로 가져와 파서 함수의 인자로 넣었을 때, CSS 문서가 여러번 중복되어 로딩됩니다. 하지만 문서 이름만 바로 넣으면 CSS 문서가 딱 한번만 불러와집니다. 여러 번 사용될 수 있는 틀에서 CSS 부분이 별개의 문서로 분리되지 않았다면 다른 문서로 분리시키고 파서 함수에 문서 이름으로 불러오는 것도 성능을 위한 좋은 선택이 될 것입니다.

게다가 CSS 문서가 주석으로 시작하는 경우와 같은 상황에서는 CSS 소스를 인자로 넣을 때 CSS 소스가 아닌 URL 경로로 잘못 인식되어 오류가 발생하는 경우도 있습니다. 이러한 오류를 막기 위해서라도 CSS 소스를 넣는 대신 문서 이름을 넣어야 합니다.

기타 및 참고자료

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