CSS Quiz-CSS를 이용해 아군을 구출하라!
출처 : 정찬명님 블로그 (http://naradesign.net/wp/2014/08/01/2057/)
상황 설명
-
- 은 적의 진영이기 때문에 함부로 침범하거나 수정할 수 없습니다.
- 는 적군 병사이거나 또는 적군에게 잡혀간 아군 병사들 입니다.
- 1과 9는 적의 문지기 병사이고, 짝수인 2, 4, 6, 8 역시 적군 병사입니다.
- 밑줄 친 숫자(1보다 크고 9보다 작은 홀수)가 적진에 잡혀간 아군 병사입니다.
<!– 적군 진지: 수정할 수 없음 –>
- 1(적군: 문지기)
- 2(적군)
- 3(아군)
- 4(적군)
- 5(아군)
- 6(적군)
- 7(아군)
- 8(적군)
- 9(적군: 문지기)
미션 설명
- 아군 진지에서 스타일 상륙작전을 이용하여 적진에 잡혀간 아군 병사에게 빨간 망토(background:red)를 씌워주세요.
- 아군 진지에서 가장 짧게 작전을 작성하여 아군 포로에게만 빨간 망토를 씌우는 사람이 승리.
- 비밀 작전이기 때문에 JS 또는 image 연합군의 도움을 받을 수 없음.
- 야전 교범: http://www.w3.org/TR/selectors/
- 훈련소: http://codepen.io/ | http://jsfiddle.net/
- 정찬명 님의 답 : http://codepen.io/naradesign/pen/Hocut
최근에 전문가를 위한 CSS3를 공부하는 중에 이 문제를 만난 덕분에 쉽게 풀었습니다.