NARADESIGN

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


CSS Quiz 2!

본문 건너 뛰기

웹 브라우저 테스트를 위한 acid2 이미지 작년 가을에 제 블로그를 통해서 CSS Quiz! 라는 것을 처음 시도했었습니다. 실무에 전혀 도움이 되지 않고 오히려 알고 나면 허탈하기만 한 이런 일을 하려고 하는 이유는 창의적인 생각이 종종 엉뚱한 상상력으로부터 나온다는 믿음 때문입니다.

오늘의 퀴즈를 말씀 드리겠습니다.

좌측에 보시는 이미지는 웹 브라우저들이 HTML/CSS/PNG 형식을 얼마나 표준에 따라 잘 렌더링 하고 있는지를 확인해 주는 Acid2 테스트 페이지의 결과 화면값 입니다. 테스트에 합격 했을 때에만 만날 수 있는 미소띈 얼굴이죠. ^^

오늘은 저 이미지를 이용해서 웹 브라우저가 아닌 여러분을 좀 테스트 해볼까 합니다. HTML/CSS/PNG를 이용하여 미소띈 얼굴을 완성해 보세요!

규칙은 다음과 같습니다.

  1. HTML/CSS/PNG만을 사용하고 문법적으로 유효해야 합니다. HTML Validation Test, CSS Validation Test
  2. Javascript, SVGScalable Vector Graphics 등 다른 언어는 전혀 사용하지 않습니다.
  3. 이미지는 하나만 사용할 수 있고 이것미소띤 얼굴의 눈 이미지(eyes.png)을 사용해야 합니다.
  4. Internet Explorer 6~8, Firefox 3.x, Safari 3.x, Opera 9.x, Chrome1.x 브라우저에서 동일하게 보여야 합니다.

이 퀴즈가 의도하는 것은 제한된 상황 이나 규칙 속에서 창의적인 아이디어를 도출하고 문제를 해결하고자 하는 능력을 기르도록 하기 위함이 아니라 그냥 재미를 위해서 입니다. ㅜㅜ; 한번만 도전해 주세요. ㅎㅎ.

오늘의 퀴즈는 HTML/CSS 지식만 있으면 누구나 풀 수 있는 문제이기 때문에 그냥 문제를 풀기만 하는 분께는 아무런 혜택이 없습니다. 웹 표준 문법과 브라우저 호환성을 만족시키면서 HTML/CSS 코드를 가장 효과적으로 활용한  한 분께 제가 맛있는 식사 한끼 대접 하겠습니다.

이 퀴즈는 시간제한이 있습니다. 오늘로부터 정확히 1개월 후인 2009년 4월 22일까지만 답을 받겠습니다. 답은 여러분 개인의 웹 호스팅 계정을 이용하여 파일을 업로드 하신 후 댓글로 URL을 남겨 주시면 됩니다. 댓글로 답을 주셨더라도 4월 22일까지는 답안을 마음껏 수정 하셔도 됩니다. 하지만 다른 분의 답안을 컨닝하는 것은 양심에 따라 자제해 주시리라 믿습니다.

평가 기준은 다음과 같습니다.

  1. 웹 표준 문법을 지켰는지
  2. 브라우저 호환성을 확보 했는지
  3. HTML 코드를 효과적으로 사용 했는지
  4. CSS 코드를 효과적으로 사용 했는지

1~2 번을 만족시키지 못한 정답은 평가에서 제외 하도록 하겠습니다. 즉, 코드를 효과적으로 사용 했더라도 표준 문법을 준수하고 브라우저 호환성을 확보해야만 합니다. 코드를 얼마나 효과적으로 사용했는지를 측정할 때 파일의 용량을 측정하지 않습니다. HTML 요소의 개수와 CSS 선택자 및 속성 사용 수를 측정 하므로 파일 용량을 줄이기 위하여 매우 짧은 이름의 CSS 선택자를 지정할 필요는 없습니다.

문제 자체는 쉽지만 이 퀴즈는 풀어놓고도 한참을 생각하게 만드는 매력이 있을껍니다. ^^; 4월 22일에는 제 답안도 한번 공개해 보겠습니다. 알고 나면 허탈하겠지만 말입니다.

현재까지 도전하신 분들

도전하실 분들께서는 아래 도전자분들의 소스코드를 4월 22일까지 열어보지 않기로 합니다. 스스로 한번 완성해 보세요. ^^

  1. dohoons – http://dohoons.com/test/cssQ/index.html
  2. 민즈 – http://cfs.tistory.com/custom/blog/8/89197/skin/images/quiz.html
  3. 나상욱 – http://good617boy.digimoon.net/2.htm
  4. 신현석 – http://hyeonseok.com/docs/css-quiz2/
  5. 완규 – http://siren070.googlepages.com/cssquiz.html
  6. 황준상 – http://www.webpeace.net/test.html / http://www.webpeace.net/test2.html
  7. 김대현 – http://gwangpa.com/css_quiz/
  8. 정찬명 – http://naradesign.net/open_content/quiz/smile/
  9. mihee – http://izamlover.cafe24.com/quiz.html

 

분류: CSS,웹 표준 | 2009년 3월 22일, 3:23 | 정찬명 | 댓글: 59개 |
트랙백URI - http://naradesign.net/wp/2009/03/22/708/trackback/

59개의 댓글이 있습니다.

  1. 신현석 댓글:

    잼있겠는데요. 저도 한번 해봐야 겠네요. ㅎㅎ

  2. 정찬명 댓글:

    적어도 한 분 낚았군요. ㅋㅋ

  3. 1UP 댓글:

    png 이미지만 제한이 있으므로… gif 이미지를 쓰면 되겠네요 ㅎㅎ;;;;

  4. dohoons 댓글:

    http://dohoons.com/test/cssQ/index.html

    재밌는 퀴즈네요ㅎㅎ
    일단 제가 1등으로 댓글~

    언급된 브라우저 테스트는 모두 마쳤구요~
    효율적으로 잘 했는지 모르겠지만 여러가지 생각해볼수있는 유익한 시간이었네요.
    (조건에 PNG 가 있어서 IE6 에서는 IE Conditional Comments 를 썼는데 맞는것 같기도..)

  5. 정찬명 댓글:

    1UP님, 안돼요 안돼~ ㅎㅎ

  6. 정찬명 댓글:

    dohoons님, 오~ 굿~ 저와 같은 클래스 이름 4개 발견. face, eyes, mouth, nose! ㅎㅎㅎ.

  7. 자애 댓글:

    판도라의 상자처럼 유혹에 못 이겨….
    그래도 border에 이런속성도 있었다는것을 이제 알겠되다니..ㅋ
    그나마 만족..

  8. 나에 댓글:

    전 패스 [….]

  9. 윤선상 댓글:

    dohoons님이 1등으로 너무 잘 해주셨으므로 제가 올려봐야 컨닝한것처럼 느껴질 수도 있으니..ㅎㅎㅎ 걍 dohoons님에 소스에 생각을 덧 붙이면
    sizingMethod에 ‘scale’보단 ‘image’가 더 의미 적절하지 않을까 하는 제 생각이구요^^;
    (scale 메소드는 공간 사이즈에 따라 늘어나는 성질을 지님.)
    그리고 IE8 호환을 위해 메타테그에

    요런 코드 추가정도 생각해봤습니다. ㅎㅎㅎㅎ^^;

    참고로 sizingMethod드 참고 URL은 아래와 같습니다.
    http://msdn.microsoft.com/en-us/library/ms532920(VS.85).aspx

  10. 윤선상 댓글:

    헉..안보이네;;;ㅎㅎㅎ;;; 코드는
    [meta http-equiv=”X-UA-Compatible” content=”IE=7″ /]

  11. 윤선상 댓글:

    이런이런….ㅎㅎ 글 삭제가 안되네요 ㅎㅎ 몰랐습니다. ㅎㅎ
    쩝;;

  12. 차영신 댓글:

    css를 이용한 창의력 놀이 ㅋㅋ

    저두 해봐야 겠어요 ^^

  13. 정찬명 댓글:

    윤선상님께서 제시해주신 IE8 호환 유도 코드(meta) 같은 방법을 사용하신다면 반칙으로 인정해 드리겠습니다. ㅎㅎㅎ. 그런 방법은 실제로 IE8 브라우저에서의 호환성을 확보하지 못한 것으로 판단해야 할 것 같습니다.

  14. 정찬명 댓글:

    차영신님, 기대하고 있겠습니다. ㅎㅎ

  15. 나에 댓글:

    차영신// 호환모드 태그를 굳이 쓸 필요는 없죠잉…

  16. 정찬명 댓글:

    호환 유도 코드는 선상님께서 말씀하셨는데 왜 영신님께… ㅎㅎㅎ.

  17. Outsider 댓글:

    퍼블리셔가 아니라서 자신이 없어서 시간나면 참가해볼까 고민중이긴 한데요…
    리플읽다가 보니까 힌트들이 종종 나오는군요. 리플도 보지 말고 있어야 겠네요. ㅎㅎ

  18. 정찬명 댓글:

    Outsider님, 도전 하시는것만으로도 충분히 의미 있는 시간이 되시리라 믿습니다. ^^

  19. 차영신 댓글:

    저 ~ 나에님에게 태클 당한건가요 ? ㅠㅠ

  20. 김일규 댓글:

    이런 문제, 은근히 자주네시네요..
    저는 css 가 지원되지 않는 브라우저라서 gg
    다음번엔 얼굴을 여자로 해주시면 꼭 참여를 (~”)

  21. 민즈 댓글:

    http://cfs.tistory.com/custom/blog/8/89197/skin/images/quiz.html

    재미있는 퀴즈였습니다.
    다른 분들은 어떤 반짝이는 아이디어가 나올지 기대가 되네요. ^^

    (웹 호스팅 계정이 없어서 티스토리 스킨올리는데 올렸다는……. ㄷㄷㄷㄷ)

  22. 정찬명 댓글:

    일규님 CSS가 지원되지 않는 브라우저라면 IE6를 말씀하시는 건가요? ㅋㅋㅋ

  23. 정찬명 댓글:

    민즈님 정답 잘 봤습니다. 딱 한 가지 아쉬운점은 이 퀴즈의 룰이 HTML/CSS 문법검사 통과를 요구하고 있다는 점입니다. 현재는 CSS Hack 때문에 Validation 검사를 통과하지 못하고 있습니다. 4월 22일까지는 고칠 수 있는 기회가 있습니다. 참여 감사합니다. ^^

  24. 민즈 댓글:

    HTML, CSS Validation 검사 하고 나서 ” 아~ PNG 처리 빼먹었네~ ” 하고선 핵을 쓰는 실수를 그만 ……… ^^a

  25. 길앞잡이 댓글:

    도전정신을 불태우게 만드네요
    학교과제가엄청많은데 과제 하나추가됬네요
    ㅎㅎㅎ

  26. 나상욱 댓글:

    http://good617boy.digimoon.net/2.htm

    정찬명님이 IE8에 대해서 쓴 PPT자료를 보다가
    개인사이트가 있는걸 보고 처음 왔는데
    문득 퀴즈가 있길래 호기심에 해봤습니다.

    validate를 제공해주는 사이트가 있는건 알고 있었지만
    정작 사용해본건 이번이 처음이네요.
    다 하고나서 다른분들과 소스비교를 해봤는데

    저는 좀 허접하게 했더군요
    코드 보시다보면 어이없어 하시는부분도 있으실겁니다 ^^

  27. 정찬명 댓글:

    상욱님 안녕하세요? 허접해도 괜찮습니다. 스스로 의미있는 시간을 가지신 거잖아요.^^; 물론 지금까지 참가자 분들 가운데 가장 많은 HTML을 사용하기는 하셨지만. ㅎㅎ. 만약 아직 다른분들의 코드를 보지 않으셨다면 4월 22일까지 코드를 수정할 수 있습니다. 감사합니다.

  28. juwon 댓글:

    에…해보니까 쉽지않아요..퇴근을 못했잖습니;;;;
    결과물은 보여드릴수 없어요

  29. 정찬명 댓글:

    네, 아직 시간이 많이 남아 있으니 너무 서두르지 마시고 천천히 하시죠. ^^;

  30. 꿈트리 댓글:

    저렇게 밝게 웃는 녀석이 아니어도 되죠?
    저도 도전 할게요.^^

  31. 정찬명 댓글:

    저렇게 밝게 웃는 녀석이어야 해요. 도전 환영!

  32. 윤선상 댓글:

    안녕하세요? 실례가 안된다면 질문즘 해두 될까요? ㅎㅎ
    제가 IETester라는 프로그램으로 IE 테스트를 하고 있습니다.
    IE6 이하에서 png파일을 bg로 사용하기위해선
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader를 사용하는걸로 알고 있습니다. 하지만 이걸쓰면
    bg위에 있는 링크 속성들이 먹히질 않더군요..IETester 프로그램 자체의 버그인지
    아니면 IE6의 버그인지…제 컴이 이상한건지…궁금합니다…;;;
    물론 삽질끝에 해결은 한것 같습니다만…
    제대로 해결한건지… 원;;

  33. 정찬명 댓글:

    png24 이미지 사용을 위해 IE 전용 속성을 사용하게 되면 다음과 같은 문제가 있습니다.

    IE에서는 png배경이 사용된 엘리먼트에 position:relative | absolute 속성이 들어가게 되면 자식요소의 a 엘리먼트에 마우스로 접근할 수 없는 버그가 있습니다. png배경이 포함된 요소에 position:relative|absolute 속성을 제거하거나 또는 a요소에 osition:relative | absolute 속성을 함께 부여해 보세요.

    만약 이게 문제가 아니라면 그때는 IETester를 의심해 볼 수도 있겠네요.
    IETester가 의심된다면 유사한 종류의 다른 도구들 사용해 보세요. ^^

    http://tredosoft.com/Multiple_IE
    http://www.xenocode.com/browsers/

    저는 IETester는 알파버전때 사용해 보고 Multiful IE만 사용해 와서 잘 모르겠습니다. ㅎㅎ.

  34. 이군 댓글:

    한번 시도는 해보았으나. 결국 결과물을 봐버렸습니다.
    저는 양심이 없나 봅니다.ㅋㅋㅋ

  35. 정찬명 댓글:

    일단 반칙이라는 것을 인정 받으시려면 등록을 하셔야.. ㅎㅎ.

  36. 정찬명 댓글:

    드디어 국내 정상급 엄친아 스타플레이어의 소스 코드가 공개 되나요~? ㅋㅋㅋ 아직 응모 안하신 분들이 무척 궁금해 하시겠는데요. 하지만 응모작을 보신 후 답을 제출하시면 반칙이라는점 잊지 마세요. ^^; 현석님 응모 감사합니다.

  37. 얼리 댓글:

    후후, 저도 참여하고 싶지만 현석님의 소스를 먼저 봐버렸……
    저 참 양심적인것 같아요 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ

  38. 정찬명 댓글:

    얼리님의 호기심이 도전에 대한 욕구를 앞질렀군요. ㅋㅋㅋ

  39. 얼리 댓글:

    하지만, 음지에서 한번 해봤던.. ㅎㅎ
    재밌네요~ 앞으로도 이런 퀴즈 많이 내주세요!

  40. 완규 댓글:

    도전 합니다.

    http://siren070.googlepages.com/cssquiz.html

    조금 딴 짓을 하느라고 몆 줄 더 늘어났네요.
    혹시 평가 기준이 갯수만이라면 조금 더 줄여보겠습니다. ^^;

  41. 정찬명 댓글:

    완규님, 도전 감사합니다! 평가 기준으로 HTML 요소의 개수와 CSS 선택자 및 속성 사용 수를 측정 하기 때문에 개수를 줄이시면 더 좋습니다. 다른 분들의 답안을 아직 보지 않으셨다면 물론 수정할 기회가 있습니다. ^^; 그런데 그 유혹을 과연 뿌리 치셨을까요? ㅎㅎㅎ

  42. 정찬명의 생각…

    CSS Quiz2! 4월 22일 24:00 까지 받겠습니다. 오늘 포함해서 고작 이틀 남았습니다….

  43. 정찬명 댓글:

    황준상님 CSS 코드 벗겨놓은것 보고 웃음을 참지 못했네요. 센스가 장난이 아니세요! ㅎㅎㅎ.

  44. 김대현 댓글:

    한번 해 봤어요..
    http://gwangpa.com/css_quiz/

    이건 뭐 소스가 임팩트도 없고… 기발하지도 않고… 잔잔하기만 하니…
    소스가 너무 창피해요! ㅎㅎ

    오늘이 마감이라길래 한 30분만에 만들었음을 위안 삼을께요..

  45. 정찬명 댓글:

    도전 감사합니다. 굉장히 빨리 만드셨네요. ^^; 코드량이 좀 많기는 하지만요. 다른분들의 코드를 열지 않으셨다면 오늘 24시까지 개선하셔도 됩니다. 감사합니다.

  46. mihee 댓글:

    우엉.. 1시간 반 남았는데 이러다가 퇴근 못하겠어요 =_=;; 꺅;;

  47. 황준상 댓글:

    코드량을 줄이는 숙제도 있던거군요..
    나름 중독성..다시도전..
    http://www.webpeace.net/test2.html

  48. mihee 댓글:

    퇴근 하기 전에 아쉬어서 한번 끄적여 봤는데 IE6, 7은 못 맞추겠네요 하하. 시간은 30분 정도 남고 맘은 급하고 에잉~ 내공 부족이 드러나버리네요 하하;;

  49. 정찬명 댓글:

    @미희
    그래도 일단 공유는 해주세요. 제 직권으로 인정해 드릴께요. ㅋㅋ

  50. 정찬명 댓글:

    제가 작성했던 결과물도 공개합니다. 물론 저는 퀴즈를 내기 전에 작성하고 이후 수정하고 싶다는 강한 유혹을 느꼈지만 다른분들의 정답을 봐버려서 수정하지 못했습니다.

    http://naradesign.net/open_content/quiz/smile/

    약속대로 가장 훌륭한 답을 제출하신 분께는 정찬명 1회 빌붙기 허용권을 드릴 예정이구요. 평가 결과는 오늘 저녁이나 내일 새벽에 공개 하겠습니다.

  51. dohoons 댓글:

    이햐..정찬명님 코드가 역시 대단하시네요 ~
    이 퀴즈에서 제가 기대했던 ‘생각의 전환’ 한가지를 소스코드에서 배워갑니다.

  52. 정찬명 댓글:

    @dohoons
    저는 뭐 body 이용해서 HTML 요소 하나 줄인것 외에는 볼게 없습니다. ㅎㅎ. dohoons님은 CSS 선택자를 가장 적게 사용하셨더라구요. ^^

  53. […] CSS Quiz2! 라는 듣보잡 이벤트에 묻지도 않고 따지지도 않고 참여해 주신 여러분들께 […]

  54. […] Quiz 1~2탄이 다소 아쉬운 분들을 위해 바로 3탄을 준비 했습니다. 이번 문제는 조금 […]

  55. mihee 댓글:

    http://izamlover.cafe24.com/quiz.html

    딱 위에 시점에서 하다 만 퀴즈 그냥 올려 봅니다 하하하 완벽한 뒷북입죠 :)
    (실은 올릴 계정이 없어서 일하다 말고 생각난 김에 계정부터 사버린 단무지형 인간)

    나름 재미있었어요 +_+;; 머.. IE 6,7에서 무참히 얼굴이 박살나서 챙피하지만;;
    다른 분들 꺼 소스 다 못봤는데 구경하러 가야겠습니다 씨익~~

  56. 정찬명 댓글:

    @mihee
    늦었지만 고생하셨어요. ^^; IE 6~7 지못미~ ㅎㅎㅎ.

댓글 쓰기

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

필수 아님

필수 아님