리버티게임: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;
}

선택자

자식 선택하기

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

기타 및 참고자료

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