CWN(CHANGE WITH NEWS) - CSS, 게임으로 완벽 정리하기!

CSS(Cascading Style Sheets)는 텍스트의 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당합니다. CSS는 HTML 문서에서 스타일을 적용할 요소를 선택하여 디자인합니다.

스타일을 적용할 요소는 ‘선택자(selector)’라고 부릅니다. 선택자는 HTML의 태그가 될 수 있고, 여러 개의 요소를 묶어 따로 선택자로 지정할 수 있습니다. 이런 선택자의 종류는 다양합니다. 여기에 익숙해질 수 있는 몇 가지의 게임에 대해 소개하겠습니다.

1. CSS 선택자를 활용한 재료, 접시 찾기 게임

우측에는 HTML로 작성된 코드와 위 사진에서 ‘Select the fancy plate’와 같은 명령을 참고하여 CSS선택자를 입력하는 게임입니다.

2. CSS를 활용하여 개구리를 연잎으로 이동시키는 게임

CSS의 플렉스박스(flexbox) 속성을 이용하여 개구리를 연잎에 배치하며 레이아웃 속성을 익힐 수 있습니다.

HTML로만 작성된 문서는 그림이나 텍스트가 정리되지 않은 채 나열되어 있어 가독성이 떨어지고, 미적이지 않지만, CSS 속성을 잘 활용한다면, 한층 더 업그레이드된 웹을 디자인 할 수 있습니다.

[ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]