꼭 알아야 할 플렉스박스(Flexbox) 한 번에 정리하고 좀비 게임으로 마스터 해보자.

플렉스박스(Flexbox) 한 눈에 보기

이 사이트만큼 플렉스박스를 보기 쉽고 이해하기 좋게 만들어둔 곳은 아직 보지 못했다. 수시로 찾아보고 확인하는 사이트. 기본 개념을 익히거나 다시 찾아볼 때 아주 유용하다.

css-tricks.com

MDN의 flexbox의 기본 개념 페이지

MDN(Mozilla Developer Network)에서 제공하는 기본 개념 페이지. 이 페이지는 바이블이라고 해도 손색이 없다.

developer.mozilla.org

이제는 실전이다.

아래 사이트는 위에서 익힌 플렉스박스를 좀비 카드를 배치해보면서 익힐 수 있는 사이트다. 머릿속으로는 다 알고 있는 것 같아도 막상 쓰려고 하면 잘 안되는 경험이 있다면 가볍게 도전해보자.

크롬이나 파이어폭스 개발자 도구를 열고 .infected 엘리먼트를 찾아 css의 항목 값을 수정하면 된다. gedd.ski flexbox challenge