CSS Quiz 2!
작년 가을에 제 블로그를 통해서 CSS Quiz! 라는 것을 처음 시도했었습니다. 실무에 전혀 도움이 되지 않고 오히려 알고 나면 허탈하기만 한 이런 일을 하려고 하는 이유는 창의적인 생각이 종종 엉뚱한 상상력으로부터 나온다는 믿음 때문입니다.
오늘의 퀴즈를 말씀 드리겠습니다.
좌측에 보시는 이미지는 웹 브라우저들이 HTML/CSS/PNG 형식을 얼마나 표준에 따라 잘 렌더링 하고 있는지를 확인해 주는 Acid2 테스트 페이지의 결과 화면값 입니다. 테스트에 합격 했을 때에만 만날 수 있는 미소띈 얼굴이죠. ^^
오늘은 저 이미지를 이용해서 웹 브라우저가 아닌 여러분을 좀 테스트 해볼까 합니다. HTML/CSS/PNG를 이용하여 미소띈 얼굴을 완성해 보세요!
규칙은 다음과 같습니다.
- HTML/CSS/PNG만을 사용하고 문법적으로 유효해야 합니다. HTML Validation Test, CSS Validation Test
- Javascript, SVGScalable Vector Graphics 등 다른 언어는 전혀 사용하지 않습니다.
- 이미지는 하나만 사용할 수 있고 이것
(eyes.png)을 사용해야 합니다. - 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일까지는 답안을 마음껏 수정 하셔도 됩니다. 하지만 다른 분의 답안을 컨닝하는 것은 양심에 따라 자제해 주시리라 믿습니다.
평가 기준은 다음과 같습니다.
- 웹 표준 문법을 지켰는지
- 브라우저 호환성을 확보 했는지
- HTML 코드를 효과적으로 사용 했는지
- CSS 코드를 효과적으로 사용 했는지
1~2 번을 만족시키지 못한 정답은 평가에서 제외 하도록 하겠습니다. 즉, 코드를 효과적으로 사용 했더라도 표준 문법을 준수하고 브라우저 호환성을 확보해야만 합니다. 코드를 얼마나 효과적으로 사용했는지를 측정할 때 파일의 용량을 측정하지 않습니다. HTML 요소의 개수와 CSS 선택자 및 속성 사용 수를 측정 하므로 파일 용량을 줄이기 위하여 매우 짧은 이름의 CSS 선택자를 지정할 필요는 없습니다.
문제 자체는 쉽지만 이 퀴즈는 풀어놓고도 한참을 생각하게 만드는 매력이 있을껍니다. ^^; 4월 22일에는 제 답안도 한번 공개해 보겠습니다. 알고 나면 허탈하겠지만 말입니다.
현재까지 도전하신 분들
도전하실 분들께서는 아래 도전자분들의 소스코드를 4월 22일까지 열어보지 않기로 합니다. 스스로 한번 완성해 보세요. ^^
- dohoons – http://dohoons.com/test/cssQ/index.html
- 민즈 – http://cfs.tistory.com/custom/blog/8/89197/skin/images/quiz.html
- 나상욱 - http://good617boy.digimoon.net/2.htm
- 신현석 – http://hyeonseok.com/docs/css-quiz2/
- 완규 – http://siren070.googlepages.com/cssquiz.html
- 황준상 - http://www.webpeace.net/test.html / http://www.webpeace.net/test2.html
- 김대현 - http://gwangpa.com/css_quiz/
- 정찬명 – http://naradesign.net/open_content/quiz/smile/
- mihee - http://izamlover.cafe24.com/quiz.html
잼있겠는데요. 저도 한번 해봐야 겠네요. ㅎㅎ
적어도 한 분 낚았군요. ㅋㅋ
png 이미지만 제한이 있으므로… gif 이미지를 쓰면 되겠네요 ㅎㅎ;;;;
http://dohoons.com/test/cssQ/index.html
재밌는 퀴즈네요ㅎㅎ
일단 제가 1등으로 댓글~
언급된 브라우저 테스트는 모두 마쳤구요~
효율적으로 잘 했는지 모르겠지만 여러가지 생각해볼수있는 유익한 시간이었네요.
(조건에 PNG 가 있어서 IE6 에서는 IE Conditional Comments 를 썼는데 맞는것 같기도..)
1UP님, 안돼요 안돼~ ㅎㅎ
dohoons님, 오~ 굿~ 저와 같은 클래스 이름 4개 발견. face, eyes, mouth, nose! ㅎㅎㅎ.
판도라의 상자처럼 유혹에 못 이겨….
그래도 border에 이런속성도 있었다는것을 이제 알겠되다니..ㅋ
그나마 만족..
전 패스 [....]
dohoons님이 1등으로 너무 잘 해주셨으므로 제가 올려봐야 컨닝한것처럼 느껴질 수도 있으니..ㅎㅎㅎ 걍 dohoons님에 소스에 생각을 덧 붙이면
sizingMethod에 ‘scale’보단 ‘image’가 더 의미 적절하지 않을까 하는 제 생각이구요^^;
(scale 메소드는 공간 사이즈에 따라 늘어나는 성질을 지님.)
그리고 IE8 호환을 위해 메타테그에
요런 코드 추가정도 생각해봤습니다. ㅎㅎㅎㅎ^^;
참고로 sizingMethod드 참고 URL은 아래와 같습니다.
http://msdn.microsoft.com/en-us/library/ms532920(VS.85).aspx
헉..안보이네;;;ㅎㅎㅎ;;; 코드는
[meta http-equiv="X-UA-Compatible" content="IE=7" /]
이런이런….ㅎㅎ 글 삭제가 안되네요 ㅎㅎ 몰랐습니다. ㅎㅎ
쩝;;
css를 이용한 창의력 놀이 ㅋㅋ
저두 해봐야 겠어요 ^^
윤선상님께서 제시해주신 IE8 호환 유도 코드(meta) 같은 방법을 사용하신다면 반칙으로 인정해 드리겠습니다. ㅎㅎㅎ. 그런 방법은 실제로 IE8 브라우저에서의 호환성을 확보하지 못한 것으로 판단해야 할 것 같습니다.
차영신님, 기대하고 있겠습니다. ㅎㅎ
차영신// 호환모드 태그를 굳이 쓸 필요는 없죠잉…
호환 유도 코드는 선상님께서 말씀하셨는데 왜 영신님께… ㅎㅎㅎ.
퍼블리셔가 아니라서 자신이 없어서 시간나면 참가해볼까 고민중이긴 한데요…
리플읽다가 보니까 힌트들이 종종 나오는군요. 리플도 보지 말고 있어야 겠네요. ㅎㅎ
Outsider님, 도전 하시는것만으로도 충분히 의미 있는 시간이 되시리라 믿습니다. ^^
저 ~ 나에님에게 태클 당한건가요 ? ㅠㅠ
이런 문제, 은근히 자주네시네요..
저는 css 가 지원되지 않는 브라우저라서 gg
다음번엔 얼굴을 여자로 해주시면 꼭 참여를 (~”)
http://cfs.tistory.com/custom/blog/8/89197/skin/images/quiz.html
재미있는 퀴즈였습니다.
다른 분들은 어떤 반짝이는 아이디어가 나올지 기대가 되네요. ^^
(웹 호스팅 계정이 없어서 티스토리 스킨올리는데 올렸다는……. ㄷㄷㄷㄷ)
일규님 CSS가 지원되지 않는 브라우저라면 IE6를 말씀하시는 건가요? ㅋㅋㅋ
민즈님 정답 잘 봤습니다. 딱 한 가지 아쉬운점은 이 퀴즈의 룰이 HTML/CSS 문법검사 통과를 요구하고 있다는 점입니다. 현재는 CSS Hack 때문에 Validation 검사를 통과하지 못하고 있습니다. 4월 22일까지는 고칠 수 있는 기회가 있습니다. 참여 감사합니다. ^^
HTML, CSS Validation 검사 하고 나서 ” 아~ PNG 처리 빼먹었네~ ” 하고선 핵을 쓰는 실수를 그만 ……… ^^a
도전정신을 불태우게 만드네요
학교과제가엄청많은데 과제 하나추가됬네요
ㅎㅎㅎ
http://good617boy.digimoon.net/2.htm
정찬명님이 IE8에 대해서 쓴 PPT자료를 보다가
개인사이트가 있는걸 보고 처음 왔는데
문득 퀴즈가 있길래 호기심에 해봤습니다.
validate를 제공해주는 사이트가 있는건 알고 있었지만
정작 사용해본건 이번이 처음이네요.
다 하고나서 다른분들과 소스비교를 해봤는데
저는 좀 허접하게 했더군요
코드 보시다보면 어이없어 하시는부분도 있으실겁니다 ^^
상욱님 안녕하세요? 허접해도 괜찮습니다. 스스로 의미있는 시간을 가지신 거잖아요.^^; 물론 지금까지 참가자 분들 가운데 가장 많은 HTML을 사용하기는 하셨지만. ㅎㅎ. 만약 아직 다른분들의 코드를 보지 않으셨다면 4월 22일까지 코드를 수정할 수 있습니다. 감사합니다.
에…해보니까 쉽지않아요..퇴근을 못했잖습니;;;;
결과물은 보여드릴수 없어요
네, 아직 시간이 많이 남아 있으니 너무 서두르지 마시고 천천히 하시죠. ^^;
저렇게 밝게 웃는 녀석이 아니어도 되죠?
저도 도전 할게요.^^
저렇게 밝게 웃는 녀석이어야 해요. 도전 환영!
안녕하세요? 실례가 안된다면 질문즘 해두 될까요? ㅎㅎ
제가 IETester라는 프로그램으로 IE 테스트를 하고 있습니다.
IE6 이하에서 png파일을 bg로 사용하기위해선
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader를 사용하는걸로 알고 있습니다. 하지만 이걸쓰면
bg위에 있는 링크 속성들이 먹히질 않더군요..IETester 프로그램 자체의 버그인지
아니면 IE6의 버그인지…제 컴이 이상한건지…궁금합니다…;;;
물론 삽질끝에 해결은 한것 같습니다만…
제대로 해결한건지… 원;;
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만 사용해 와서 잘 모르겠습니다. ㅎㅎ.
한번 시도는 해보았으나. 결국 결과물을 봐버렸습니다.
저는 양심이 없나 봅니다.ㅋㅋㅋ
일단 반칙이라는 것을 인정 받으시려면 등록을 하셔야.. ㅎㅎ.
http://hyeonseok.com/docs/css-quiz2/
저도 함 해봤습니다. :)
드디어 국내 정상급 엄친아 스타플레이어의 소스 코드가 공개 되나요~? ㅋㅋㅋ 아직 응모 안하신 분들이 무척 궁금해 하시겠는데요. 하지만 응모작을 보신 후 답을 제출하시면 반칙이라는점 잊지 마세요. ^^; 현석님 응모 감사합니다.
후후, 저도 참여하고 싶지만 현석님의 소스를 먼저 봐버렸……
저 참 양심적인것 같아요 ㅎㅎㅎㅎㅎㅎㅎㅎㅎ
얼리님의 호기심이 도전에 대한 욕구를 앞질렀군요. ㅋㅋㅋ
하지만, 음지에서 한번 해봤던.. ㅎㅎ
재밌네요~ 앞으로도 이런 퀴즈 많이 내주세요!
도전 합니다.
http://siren070.googlepages.com/cssquiz.html
조금 딴 짓을 하느라고 몆 줄 더 늘어났네요.
혹시 평가 기준이 갯수만이라면 조금 더 줄여보겠습니다. ^^;
완규님, 도전 감사합니다! 평가 기준으로 HTML 요소의 개수와 CSS 선택자 및 속성 사용 수를 측정 하기 때문에 개수를 줄이시면 더 좋습니다. 다른 분들의 답안을 아직 보지 않으셨다면 물론 수정할 기회가 있습니다. ^^; 그런데 그 유혹을 과연 뿌리 치셨을까요? ㅎㅎㅎ
정찬명의 생각…
CSS Quiz2! 4월 22일 24:00 까지 받겠습니다. 오늘 포함해서 고작 이틀 남았습니다….
저도 한번..ㅋ
http://www.webpeace.net/test.html
황준상님 CSS 코드 벗겨놓은것 보고 웃음을 참지 못했네요. 센스가 장난이 아니세요! ㅎㅎㅎ.
한번 해 봤어요..
http://gwangpa.com/css_quiz/
이건 뭐 소스가 임팩트도 없고… 기발하지도 않고… 잔잔하기만 하니…
소스가 너무 창피해요! ㅎㅎ
오늘이 마감이라길래 한 30분만에 만들었음을 위안 삼을께요..
도전 감사합니다. 굉장히 빨리 만드셨네요. ^^; 코드량이 좀 많기는 하지만요. 다른분들의 코드를 열지 않으셨다면 오늘 24시까지 개선하셔도 됩니다. 감사합니다.
우엉.. 1시간 반 남았는데 이러다가 퇴근 못하겠어요 =_=;; 꺅;;
코드량을 줄이는 숙제도 있던거군요..
나름 중독성..다시도전..
http://www.webpeace.net/test2.html
퇴근 하기 전에 아쉬어서 한번 끄적여 봤는데 IE6, 7은 못 맞추겠네요 하하. 시간은 30분 정도 남고 맘은 급하고 에잉~ 내공 부족이 드러나버리네요 하하;;
@미희
그래도 일단 공유는 해주세요. 제 직권으로 인정해 드릴께요. ㅋㅋ
제가 작성했던 결과물도 공개합니다. 물론 저는 퀴즈를 내기 전에 작성하고 이후 수정하고 싶다는 강한 유혹을 느꼈지만 다른분들의 정답을 봐버려서 수정하지 못했습니다.
http://naradesign.net/open_content/quiz/smile/
약속대로 가장 훌륭한 답을 제출하신 분께는 정찬명 1회 빌붙기 허용권을 드릴 예정이구요. 평가 결과는 오늘 저녁이나 내일 새벽에 공개 하겠습니다.
이햐..정찬명님 코드가 역시 대단하시네요 ~
이 퀴즈에서 제가 기대했던 ‘생각의 전환’ 한가지를 소스코드에서 배워갑니다.
@dohoons
저는 뭐 body 이용해서 HTML 요소 하나 줄인것 외에는 볼게 없습니다. ㅎㅎ. dohoons님은 CSS 선택자를 가장 적게 사용하셨더라구요. ^^
[...] CSS Quiz2! 라는 듣보잡 이벤트에 묻지도 않고 따지지도 않고 참여해 주신 여러분들께 [...]
[...] Quiz 1~2탄이 다소 아쉬운 분들을 위해 바로 3탄을 준비 했습니다. 이번 문제는 조금 [...]
http://izamlover.cafe24.com/quiz.html
딱 위에 시점에서 하다 만 퀴즈 그냥 올려 봅니다 하하하 완벽한 뒷북입죠 :)
(실은 올릴 계정이 없어서 일하다 말고 생각난 김에 계정부터 사버린 단무지형 인간)
나름 재미있었어요 +_+;; 머.. IE 6,7에서 무참히 얼굴이 박살나서 챙피하지만;;
다른 분들 꺼 소스 다 못봤는데 구경하러 가야겠습니다 씨익~~
@mihee
늦었지만 고생하셨어요. ^^; IE 6~7 지못미~ ㅎㅎㅎ.
[...] Acid Smile [...]