NARADESIGN

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


CSS Quiz2! 결과를 확인 하세요!

본문 건너 뛰기

우선 CSS Quiz2! 라는 듣보잡 이벤트에 묻지도 않고 따지지도 않고 참여해 주신 여러분들께 감사드리고 여러분들의 그 열정에 박수를 보내드립니다. 이벤트에 참여 하기 위해 사랑하는 사람과 보내야 할 귀중한 시간도 잠시 미루고 늦은 퇴근을 했거나 또는 잠을 미루셨을 줄로 압니다. 굳이 밥 한끼 얻어 먹어보자고 참여하신 분은 없으실테니까요.

이벤트 참여에 대한 보상은 이 퀴즈에 도전하는 순간 이미 각자에게 충분히 주어졌다고 생각합니다. 약간의 흥분과 재미를 느끼셨다면 말이죠. 그러나 가벼운 선의의 경쟁과 그 결과에 대한 보상을 전혀 기대하지 않았다고는 생각하지 않습니다. 제가 여러분들께 드릴 수 있는 작은 보상은 각 개인의 답안을 나름대로 분석해 보고 정량화 해서 피드백을 드리는 일이라고 생각 했습니다. 물론 1등 하신 분께는 밥도 쏴야 하구요. ㅋㅋ.

솔직히 말씀드려서 평가 결과를 점수로 환산하고 순위를 매기는 일이 쉽지는 않았습니다. 나름 머리 쥐어 뜯어가며 고민 했지만 스스로 생각하기에도 완전히 공평하거나 합리적인 최선의 기준이었다고는 생각하지 않습니다. 또 생각보다 낮은 점수와 순위를 받으신 분들의 결과까지 공개가 되기 때문에 상처받으실까봐 걱정도 됩니다. 여하튼 결국 이 퀴즈의 평가라는 것은 객관적인 기준 없이 제 멋대로 설정했기 때문에 절대로 결과를 신뢰해서는 안되며 오직 재미를 위해 이것을 했다고만 생각해 주셨으면 좋겠습니다.

생각보다 좋은 성적을 받으셨다면 로또 맞았다고 생각하시면 되구요. 생각보다 낮은 성적을 받으셨다면 평가 기준이 공정하지 않았다고 생각해 주시기 바랍니다. 퀴즈 낼 당시에도 말씀드렸지만 그저 재미를 위해 했습니다!

CSS Quiz2 평가 결과 및 답안 분석
순위 이름 답안 호환성 HTML CSS
IE6 IE7 IE8 FF3 CR1 SF3 OP9 유효성 요소수 속성수 유효성 선택자수 속성수
1 황준상 보기 pass pass pass pass pass pass pass pass 10 3 pass 16 54
2 민즈 보기 pass pass pass pass pass pass pass pass 10 8 pass 16 47
3 신현석 보기 pass pass pass pass pass pass pass pass 10 10 pass 15 56
4 정찬명 보기 pass pass pass pass pass pass pass pass 9 9 pass 15 66
5 dohoons 보기 pass pass pass pass pass pass pass pass 11 9 pass 13 70
6 완규 보기 pass pass pass pass pass pass pass pass 15 17 pass 20 52
7 나상욱 보기 pass pass pass pass pass pass pass pass 15 16 pass 16 79
8 김대현 보기 fail fail pass pass pass pass pass pass 37 41 pass 28 46

브라우저 호환성을 일일이 체크했구요. HTML 요소 수와 속성 수를 헤아렸습니다. 또 CSS 선택자 수와 속성 수를 헤아려 보았습니다. 1등은 코드를 가장 경제적으로 작성해 주신 황준상님께서 차지 하셨고(축하드립니다!) 꼴등은 불과 30분만에 이것을 해치우셨다는 김대현님께서 차지하셨습니다. 황준상님께서는 CSS 코드도 경제적으로 사용하셨지만 HTML 요소의 속성까지 아껴 사용하신 부분이 주효했다고 판단 합니다. 김대현님은 HTML/CSS 유효성 검사까지는 가볍게 pass 하셨는데 IE 6~7 브라우저 호환성에 문제가 있었습니다. 사실 이것은 IE 6~7 브라우저가 표준을 따르지 않았기 때문에 발생하는 문제지요. 꼴찌 하셨지만 한번 꽉 안아드리고 싶네요. ^^;

아래 표는 참여하신 분들의 코드를 분석하고 그 결과를 점수로 환산 했던 제멋대로 자료 입니다. 이해가 되시면 좋겠는데 굳이 이해가 되지 않는다고 하셔도 제가 뭐 드릴 말씀은 없습니다. ㅜㅜ;

CSS Quiz2 항목별 평가 점수 상세
점수 이름 기본(5) 호환성(35)
35-(N*5)
HTML(20+10) CSS(20+10)
요소
20-(N*0.5)
속성
10-(N*0.2)
선택자
20-(N*0.5)
속성
10-(N*0.1)
81 황준상 5 35 15 9.4 12 4.6
80.7 민즈 5 35 15 8.4 12 5.3
79.9 신현석 5 35 15 8 12.5 4.4
79.6 정찬명 5 35 15.5 8.2 12.5 3.4
79.2 dohoons 5 35 14.5 8.2 13.5 3
73.9 완규 5 35 12.5 6.6 10 4.8
73.4 나상욱 5 35 12.5 6.8 12 2.1
44.7 김대현 5 25 1.5 1.8 6 5.4

HTML 요소 및 속성 그리고 CSS 선택자 및 속성을 많이 사용할수록 기본점수에서 감점하는 방식을 사용 했습니다. 이런 시스템은 누가 평가를 하느냐에 따라서 항목별 변별력과 점수폭을 다르게 설정할 수 있기 때문에 주관적인 요소가 반영되어 있고 논란의 여지가 있습니다. 이것이 바로 제가 재미를 강조하는 이유 입니다. ㅡㅡ;

1등하신 황준상님께는 식당 및 메뉴를 자유롭게 선택할 수 있는 프리미엄 빌붙기 1회 사용권을 , 그리고 참여하신 모든 분들께는 가까운 기사식당에서 백반 빌붙기 1회 사용권을 드리겠습니다. 빌붙기 사용권은 저를 보시면 언제든 사용하실 수 있습니다! ^^; 감사합니다!

분류: CSS,웹 표준 | 2009년 4월 24일, 5:24 | 정찬명 | 댓글: 19개 |
트랙백URI - http://naradesign.net/wp/2009/04/24/793/trackback/

19개의 댓글이 있습니다.

  1. 정찬명의 생각…

    CSS Quiz2! 결과를 확인 하세요!…

  2. 황준상 댓글:

    헉..영광입니다.. 1등이라니.. 재미지만서도..
    프리미엄 빌붙기 ㅡㅡ ‘우리나라 최고의 식당이 어디지?’

  3. 황준상 댓글:

    새벽까지 엄청 고생하셨습니다.
    어휴..참여하신 분이 100명이 넘었으면.. 생각해도 끔찍한데요?

  4. 정찬명 댓글:

    축하드립니다! 정말 잘하셨더라구요! ㅎㅎ. 참여하시는 분이 많아지면 뭐 좋은거죠. 한달 내내 평가만. ㅋㅋㅋ.

  5. 블루비 댓글:

    1등 하신 분 쵝오네요.. ^^
    한 수 배워 갑니다. ^^

  6. 초식동물 댓글:

    아~ 여유가 없어서 참여를 못 했는데;_ ;
    담번엔 저도 참여해보고 싶네요!!

  7. dohoons 댓글:

    아하.. 개수를 줄이는게 포인트였군요~
    1등하신 황준상님 코드가 정말 타이트합니다 ㅋㅋㅋ
    벌써부터 다음퀴즈가 기대되네요(..있을지?ㅎㅎ)

  8. 정찬명 댓글:

    @블루비 @초식동물 @dohoons
    퀴즈 한번 낼 때마다 머리가 좀 아프지만 다음 퀴즈를 또 열심히 준비해 보겠습니다. 좋은 아이디어 있으시면 언제든 제안해 주세요. ^^; 감사합니다! dohoons님 다음에 저 보시면 꼭 밥사달라고 말씀해주세요! ㅎㅎ.

  9. 차영신 댓글:

    좋은 문제와 평가까지 수고하셨습니다.

    저는 입과 눈을 마무리 못해서 참가 못했습니다.
    게으름 반성중입니다. ㅠㅠ

  10. 김대현 댓글:

    아이 창피해~~ 우분투를 사용하는지라 IE에서 볼 생각은 전혀 하지 않았어요 ㅋㅋ
    찬명님 절 안아주시고 싶으시다니 부끄럽사와~~ +_+;;

  11. 정찬명 댓글:

    @차영신
    또 다른걸 한번 준비해 보죠 뭐. ^^ 좋은 아이디어 있으면 공유해 주세요. ㅎㅎ.

  12. 정찬명 댓글:

    @김대현
    꽈~악~ 안아드립죠. ㅎㅎㅎ. 나름 화이팅 하셨잖아요. 충분히 의미 있습니다!

  13. 초보 댓글:

    초보자를 위해서 약간의 분석, 혹은 설명을 해주신다면 좀 더 갚진 블로깅이 아닐까 생각됩니다. DXImageTransform 같은 내용은 언급해 주셔도 좋을 것 같습니다.

  14. 정찬명 댓글:

    궁금한게 있으시면 이렇게 질문 하시면 되지요. ^^;
    아래 MSDN에서 제공하는 페이지를 참고 하시면 도움이 되실 껍니다.

    Visual Filters and Transitions Reference
    http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx

    AlphaImageLoader Filter
    http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx

    png-24 포멧 이미지의 투명한 영역이 IE6에서 회색으로 보이는 버그가 있는데 그 문제를 해결하기 위해 IE 전용 속성(filter)을 사용한 것입니다.

    png-24 포멧과 IE6 문제에 대해 더 자세히 알고 싶으시면 검색을… ^^;

  15. 얼리 댓글:

    IE6, 정말 골치덩어리.

  16. 정찬명 댓글:

    IE6를 밥줄이라고 생각하시는 분들도 더러 계셔요. ㅎㅎ.

  17. 나상욱 댓글:

    잘봤습니다. ^^

    소스하나하나 다 보시고 힘드셨겠네요.

  18. 정찬명 댓글:

    상욱님, 참여해 주셔서 감사합니다. 상욱님도 충분히 잘 하셨어요. ^^

  19. […] 빌붙기와 프리미엄 빌붙기의 차이에 대해 궁금하신 분들은 CSS Quiz 2! 결과를 확인하세요! 포스팅 하단을 참고해 주세요. 농담이 아니라 어느 곳에서든 정답자 […]

댓글 쓰기

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

필수 아님

필수 아님