NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


[CSS Quiz] CSS를 이용하여 아군 포로를 구출하라!

본문 건너 뛰기

백만년만에 블로그에 글 쓰네요. 오늘은 팀 동료들에게 냈던 퀴즈 하나 공유합니다. 여러분도 한 번 도전해 보세요.

상황 설명

  • <ol>은 적의 진영이기 때문에 함부로 침범하거나 수정할 수 없습니다.
  • <li>는 적군 병사이거나 또는 적군에게 잡혀간 아군 병사들 입니다.
  • 1과 9는 적의 문지기 병사이고, 짝수인 2, 4, 6, 8 역시 적군 병사입니다.
  • 밑줄 친 숫자(1보다 크고 9보다 작은 홀수)가 적진에 잡혀간 아군 병사입니다.

<style>/* 아군 진지: 작전은 이곳에 */</style>
<!– 적군 진지: 수정할 수 없음 –>
<ol>
<li>1(적군: 문지기)</li>
<li>2(적군)</li>
<li>3(아군)</li>
<li>4(적군)</li>
<li>5(아군)</li>
<li>6(적군)</li>
<li>7(아군)</li>
<li>8(적군)</li>
<li>9(적군: 문지기)</li>
</ol>
<!– 적군 진지: 수정할 수 없음 –>

미션 설명

  • 아군 진지에서 스타일 상륙작전을 이용하여 적진에 잡혀간 아군 병사에게 빨간 망토(background:red)를 씌워주세요.
  • 아군 진지에서 가장 짧게 작전을 작성하여 아군 포로에게만 빨간 망토를 씌우는 사람이 승리.
  • 비밀 작전이기 때문에 JS 또는 image 연합군의 도움을 받을 수 없음.
  • 크롬 브라우저 최신 버전에서 실행 가능한 작전을 인정함.
  • 작전은 여러 번 작성하거나 수정해서 제출할 수 있음.
  • 1등에게는 스타벅스에서 제일 비싼 커피를 쏘겠음.
  • 작전 점수(코드 byte 수)가 동일한 경우 답을 먼저 제출한 사람이 승리.
  • 야전 교범: http://www.w3.org/TR/selectors/
  • 훈련소: http://codepen.io/ | http://jsfiddle.net/
  • 어느 초보 훈련병의 연습 결과 예: http://codepen.io/naradesign/pen/Hocut 당연히 이것보다 짧아야 함.

통신 보안: 댓글에 정답을 노출하지 마시오. 작전은 훈련소에서 세우고 작전이 완료되면 훈련소 URL을 링크할 것.

분류: CSS,웹 표준 | 2014년 8월 1일, 16:56 | 정찬명 | 댓글: 21개 |
트랙백URI - http://naradesign.net/wp/2014/08/01/2057/trackback/