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 | 정찬명 | 댓글: 25개 |
트랙백URI - http://naradesign.net/wp/2014/08/01/2057/trackback/

25개의 댓글이 있습니다.

  1. 난다날아 댓글:

    날아오르라~ 스타일이여~

    http://codepen.io/anon/pen/BupbA

  2. seoh 댓글:

    http://jsfiddle.net/seoh/j4NUG/
    일단 아주 제일 먼저 생각나는 방법으로 시도해봤습니다.

  3. 난다날아 댓글:

    아.. 문제 잘못 이해했네. 고칠거에요!

  4. 후리자 댓글:

    http://codepen.io/anon/pen/fvbmr
    ㅎㅎㅎㅎ 문제 내용이 재밌어요~~

  5. 후리자 댓글:

    http://codepen.io/anon/pen/rDLBm
    다시 풀어봤어요~ 이런 문제 자주 내주세요~!

  6. 부침개 댓글:

    후리자님보다 길지만 요렇게도 된다는거 ㅎㅎ;
    http://codepen.io/boochim/pen/gtoDu

  7. 이형국 댓글:

    http://codepen.io/nbass/pen/DLbGd

    더 짧은 방법이 있을 것 같은데.. 음.. 어렵네여.

  8. 장소정 댓글:

    재밌습니다. 지식이 한정적이라서.. 전 이정도로.. 하하핫~~^^
    http://jsfiddle.net/97rc7/

  9. 배휘동 댓글:

    재미있네요. 덕분에 w3 스펙도 읽고.. http://jsfiddle.net/pL83T/

  10. 나크리 댓글:

    http://codepen.io/anon/pen/qDaCA

    단언컨데, 이이상은 없습니다.

  11. 청설모 댓글:

    http://codepen.io/reedids/pen/eAFuB
    오랜만이시네요 ㅎㅎ 재미있었어요.

  12. 정찬명 댓글:

    순위 중간 점검(순위, 이름, 바이트)

    1. @후리자 – 35 bytes
    2. @청설모 – 35 bytes
    3. @부침개 – 40 bytes
    4. @익명 – 46 bytes
    5. @이형국 – 50 bytes
    6. @배휘동 – 51 bytes
    7. @리베하얀 – 51 bytes
    8. @파란미르 – 53 bytes
    9. @난다날아 – 57 bytes
    10. @seoh – 79 bytes
    11. @장소정 – 87 bytes
    12. @나크리 – FAIL

    현재까지 35 bytes 짜리 코드를 가장 먼저 작성한 @후리자 님이 1위 입니다.
    일단 @후리자님께 스타벅스 기프티콘 발송해 드릴게요.
    그러나 @후리자님보다 더 짧은 코드를 작성하는 분이 언제든 또 나오면 그 분께도 커피를 쏘겠습니다.
    그리고 나서 신이 되는 거예요.

    지금부터는 다른 사람의 코드를 참고해도 좋습니다.
    Try again?

  13. 유재영 댓글:

    어렵네요..

  14. 이요요 댓글:

    http://jsfiddle.net/6f9hpajf/
    저도 작전에 도전!

  15. 송송 댓글:

    좋은정보 잘얻고 갑니다~감사합니다!

  16. 통스 댓글:

    ㅎㅎㅎㅎㅎ
    정말 재미있게 설명하시네요~*
    한참을 웃었습니다. ^^*

  17. 손에무좀 댓글:

    li:nth-child(even)+li:not(:last-child){background:red;}

  18. 토끼 댓글:

    이거 너무 재미있네요 ㅋㅋ
    요즘것도 아닌데 괜히 열시미 하게되는
    http://codepen.io/anon/pen/OMOxBe

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님