리버티게임:CSS

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

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

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

CSS의 동작

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

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

기본 모양새

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

/* 설명을 위한 주석은 이렇게 양 옆에 슬래시 문자와 별표 문자를 대칭으로 적고 그 사이에 이렇게 설명을 넣으면 됩니다. */
#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라고 쓰면 됩니다.

자식 선택하기

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

• div > a
• div a
• div:first-child
• div:last-child
• div:nth-child(3)

기타 및 참고자료

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