1. 게임으로 배우는 CSS
CSS Diner는 CSS의 기본을 배우는데 유익합니다.
Diner 완료하신 다음, Flex에서는 박스를 만들어 그 안에 박스의 상태를 쉽게 조절할 수 있는 방법을 배우게 됩니다.
마지막 Grid는 가장 최근 방법론으로 Flex와 더불어 사용되고 전체적인 구조를 짜는데 유익합니다.
게임을 진행하시면서 명령어를 외우기 보다는 어떤 개념으로 만들어졌는지를 생각해보고 구글링을 해보고 진행하시길 바랍니다.
CSS Diner
CSS Flex
CSS Grid
2. 구글의 메인 페이지 스타일 씌우기
이전 목차인 HTML에서 만든 구글의 메인 페이지 틀에 스타일을 씌워봅시다. 꼭 구글과 동일한 모습으로 만들어내야 하는 것은 아닙니다. 자신이 원하는 스타일을 작성하며 여러가지 스타일을 익힙시다. 또한, 스타일을 입히다보면 HTML 구조를 바꿔야 할 수도 있습니다. 여러가지 시행착오를 겪으며 코드를 작성하는 것이 실력 향상에 많은 도움이 될 것입니다.
w3schools에는 여러가지 유용한 정보가 많습니다. w3schools와 위에서 배운 기술들을 적극 응용합시다. 결과물은 아래 이미지 정도의 모습이면 충분합니다.