NARADESIGN

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


웹 표준 경진대회 ‘기출+예상’ 문제 풀어보세요.

본문 건너 뛰기

몇일 전 있었던 제4회 웹 표준의 날에는 골든벨 형식의 웹 표준 경진대회도 함께 진행 되었는데요. 웹 표준의 날에 참석하지 못하셨던 분들께도 기회를 드리고자 이렇게 블로그에 옮기게 되었습니다. 재미로 풀어보시고 채점도 한번 해보세요. 참고로 이 블로그에는 경진대회 때 후보 문제로 분류되어 출제되지 않았던 문제도 포함되어 있습니다. 또한 출제가 되었지만 옮기지 않은 문제도 있습니다. 다음 웹 표준 경진대회 때 또 나올지도 모를 일이죠. 정답은 빈칸 [정답]을 마우스로 드래그 하시면 보입니다. 100점 맞으시는 분께는 진짜 맛있는거 쏠께요. 점수는 양심껏 채점 하시구요. ^^

문제 1 _ CDK는 무엇의 약어 입니까?
[CSS Design Korea]

문제 2 _ KWAG은 무엇의 약어 입니까?
[Korea Web Accessibility Group]

문제 3 _ CSS, HTML, XHTML 무엇의 약어 입니까?
[Cascading Style Sheet, Hyper Text Markup Language, eXtensible Hyper Text Markup Language]

문제 4 _ W3C는 무엇의 약어 입니까?
[World Wide Web Consortium]

문제 5 _ 이 이미지가 사용되는 테스트의 이름은 무엇입니까?
[Acid2 Browser Test]

문제 6 _ DOCTYPE 선언은 닫힘 태그가 있다?
[X – 없습니다.]

문제 7 _ XHTML 태그의 속성 및 값은 소문자만 사용할 수 있다?
[X – 속성은 소문자로만 작성해야 하나 값은 대문자 사용 가능합니다.]

문제 8 _ 오래된 웹 브라우저들을 위해 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 Standards Mode를 대신하여 사용되는 웹 브라우저의 기술을 나타내는 용어는?
[Quirks Mode – Quirks Mode는 IE5 브라우저를 흉내낸다]

문제 9 _ 다음 중 대중적인 브라우저에서 Quirks Mode로 랜더링 되는 DTD를 모두 고르시오.
1. DTD 없음.
2. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
4. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
5. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
6. <!DOCTYPE html>
[1번, 5번. 참고 – http://naradesign.net/wp/2007/03/27/118/]

문제 10 _ 하이퍼링크에서 밑줄을 없애기 위한 방법으로 맞는 것은?
1. a { text-decoration:no underline; }
2. a { decoration:no underline; }
3. a { text-decoration:none; }
4. a { underline:none; }
[3번]

문제 11 _ 소문자로 작성된 영문 단어의 첫 글자를 대문자로 바꾸는 CSS 스타일은 무엇입니까?
1. CSS로는 불가능하다.
2. { text-transform:uppercase; }
3. { text-transform:capitalize; }
[3번]

문제 12 _ IE6 브라우저에서 float과 margin을 같은 방향으로 설정 했을 때 발생하는 더블 마진 버그를 예방하는 방법은?
1. width 값을 부여한다.
2. { position:relative; }
3. { display:inline; }
4. { zoom:1; }
[3번 – IE6 브라우저는 float과 margin의 방향이 같은 경우 두 배의 마진이 발생한다. 이 때 display 속성을 inline으로 바꾸면 더블 마진 버그가 발생하지 않는다. 그러나 float 속성이 부여된 요소는 display 속성이 block이 된 상태로써 이 값은 어떤 경우라도 덮어 쓸 수 없기 때문에 이 요소의 display 속성은 여전히 block 이다.]

문제 13 _ CSS 속성 중 cursor 속성의 값으로 올바르지 않은 것은?
1. default
2. help
3. pointer
4. hand
[4번 – hand라는 값은 MS IE 전용 값으로써 비 표준 속성이다. 그러나 IE 5.5 버전 이하의 브라우저는 pointer라는 값을 지원하지 않고 hand라는 값을 지원하는데 hand라는 값은 pointer와 같은 모습으로 랜더링된다.]

문제 14 _ CSS의 속성 가운데 박스의 border-color 속성이 지정되지 않은 경우 border-color의 값은 color 속성의 값으로부터 상속 받는다?
[O – 정답 입니다. border-color의 값이 지정되지 않은 경우 color의 값은 border-color의 값이 됩니다. 즉, border-color 를 지정하지 않은 요소에 color:blue 값을 지정하는 경우 이 요소의 border-color는 blue가 됩니다.]

문제 15 _ <input> 요소의 type 속성은 생략할 수 있다?
[O – 생략할 수 있습니다. 생략하는 경우 type 속성의 기본 값은 text가 됩니다. 한편 사용자의 입력 내용을 서버로 전송하려면 반드시 name 속성을 사용해야 합니다. 그러나 문법적으로는 어떤 속성도 필수로 요구하지 않습니다.]

문제 16 _ Transitional DTD를 사용하는 HTML 또는 XHTML 문서에서 CSS font 속성은 table 요소에 상속되지 않는다?
[X – 상속 됩니다. 그러나 DTD가 Quirks Mode인 경우에는 상속되지 않습니다.]

문제 17 _ <textarea> 요소는 row 속성과 col 속성을 생략할 수 있다?
[X – 반드시 작성해야 하는 속성으로서 생략할 수 없습니다.]

문제 18 _ CSS 속성 중 background-color는 Javascript에서 backgroundcolor로 표기한다?
[X – 대소문자에 유의해야 합니다. Javascript 에서는 CSS 속성을 카멜 케이스로 표기하는데 background-color는 backgroundColor 라고 표기 합니다.]

문제 19 _ <button> 요소에 type 속성을 지정하지 않는 경우 type 속성의 기본값은 button 이다?
[X – button  요소에 type 속성을 지정하지 않으면 기본 값은 submit이 되어 form을 전송하게 됩니다. 따라서 form을 전송하기 위한 목적이 아니라 단순하게 UI를 조작하기 위한 버튼(예:닫기, 인쇄) 이라면 type 속성을 button 이라고 정확히 명시해 주어야 합니다. 한편 IE6~7 브라우저는 button 요소에 type 속성을 지정하지 않는 경우 type 값이 button으로 동작하므로 혼동하지 않도록 유의해야 합니다.]

문제 20 _ XHTML 1.0 문서는 어떤 종류의 DTD를 가지고 있습니까?
[Strict, Transitional, Frameset]

문제 21 _ 웹 접근성 국가 표준의 4가지 원칙은 무엇입니까?
[인식의 용이성(Perceivable), 운용의 용이성(Operable), 이해의 용이성(Understandable), 신기술적 진보성(Robust)]

문제 22 _ CSS를 발명한 사람은 누구 입니까? 두 명을 고르세요.
1. Eric Meyer
2. Håkon Wium Lie
3. Tim Berners Lee
4. Bert Bos
5. Jeffrey Zeldman
[2번, 4번]

문제 23 _ 다음은 HTML DTD 문서가 문법을 정의하는 기호에 관한 설명입니다. 맞지 않는 것은?
1. A | B : A 또는 B로써 순서에 무관하게 사용할 수 있다.
2. A || B : A 또는 B로써 순서를 지켜야 한다.
3. A, B : A 그리고 B는 순서를 지켜야 한다.
4. A & B : A 그리고 B는 순서에 무관하다.
[2번 – || 기호는 DTD에 없습니다.]

문제 24 _ 다음은 HTML DTD가 문법을 정의하는 기호에 관한 설명입니다. 맞는 것을 모두 고르시오. 
1. A : A는 필수적이며 한 번만 사용할 수 있다.
2. A+ : A는 필수적이며 한 번 이상 사용해야 한다.
3. A? : A는 생략하거나 한 번만 사용할 수 있다.
4. A* : A는 생략하거나 한 번 이상 사용할 수 있다.
5. +(A) : 추가적으로 A를 사용할 수 있다.
6. -(A) : 예외적으로 A는 사용할 수 없다.
[1번, 2번, 3번, 4번, 5번, 6번 모두 맞는 설명 입니다.]

문제 25 _ 웹 접근성 준수를 의무화한 이 법률의 이름은 무엇입니까?
[장애인차별금지 및 권리구제 등에 관한 법률로써 줄여서 장차법이라고도 부릅니다. 이 법률은 웹 접근성 뿐만 아니라 사회 전반에 걸쳐 발생하는 장애인의차별에 관한 문제를 다루고 있습니다.]

문제 26 _ <title> 요소는 생략할 수 있다?
[X – 생략할 수 없습니다.]

문제 27 _ XHTML 문서에서 fieldset 요소를 사용하는 경우 legend 요소는 생략할 수 있다?
[O – 생략할 수 있습니다. 그러나 HTML 문서에서는 생략할 수 없습니다.]

문제 28 – HTML/XHTML Transitional 문서에서 address 요소는 자식 요소로 어떤 블럭 요소도 포함할 수 없다?
[X – 거의 모든 블럭 요소를 포함할 수 없습니다. 그러나 유일하게 P 요소를 포함할 수 있습니다. 한편 HTML/XHTML Strict 문서에서는 P 요소를 비롯하여 어떤 블럭 요소도 포함할 수 없습니다.]

문제 29 – inline 요소로 분류되면서도 block 요소와 inline 요소를 모두 포함할 수 있는 요소 이름을 아는대로 쓰시오.
[button, map, object, iframe, applet, ins, del]

문제 30 – iframe 요소는 HTML5(WD) 버전에서 폐기 되었다?
[X – 2010현 현재 초안에 의하면 폐기되지 않았습니다. 현재라는 단서를 붙인 것은 스펙이 아직 확정되지 않았기 때문입니다.]

문제 31 – CSS3(WD)의 border-radius 속성을 이용하여 좌측 상단의 모서리를 둥글게 처리하고자 한다. 이 때 표준 초안에서
제안하고 있는 속성의 표기법은?
1. border-radius-left-top
2. border-left-top-radius
3. border-radius-top-left
4. border-top-left-radius
[4번 – border의 수직(top, bottom) 방향을 먼저 작성하고 수평(left, right) 방향을 작성한 다음 radius를 작성 합니다.]

문제 32 – ‘I18N’은 무엇의 약어 입니까?
[internationalization(국제화) – 첫 글자인 ‘i’와 마지막 글자인 ‘n’ 사이에 포함된 알파벳의 개수가 ’18’개인데 이것을 ‘i18n’ 으로 줄여서 표기하고 있습니다. W3C의 국제화 활동 참고. http://www.w3.org/International/]

고생하셨습니다. 몇 문제 맞히셨나요? 어떤 문제가 어렵게 느껴지셨나요? 새롭게 배운 지식이 있으셨나요? 너무 많이 틀렸다고 낙심하지는 마세요. 제가 주관적으로 판단하건데 20문제 이상 맞히셨다면 충분히 훌륭하다고 생각하구요. 16문제 이상 맞히신 분들도 양호한 편이라고 생각합니다. 문제는 16문제 미만인데요. 내년에도 이러시면 곤란해요. ^^

분류: 웹 표준 | 2010년 6월 8일, 21:26 | 정찬명 | 댓글: 30개 |
트랙백URI - http://naradesign.net/wp/2010/06/08/1342/trackback/

30개의 댓글이 있습니다.

  1. onionmen 댓글:

    헉 잘봐줘야 16개 정도네요. 특히 1번 2번은 첨들어봤어요 ㅠㅠ

  2. 정찬명 댓글:

    @onionmen
    한국에서만 통하는 문제(국내 커뮤니티 이름)라서 그렇습니다. 틀리셔도 괜찮은 문제 였어요. ^^

  3. 김무건 댓글:

    오오… 적절한 퀴즈입니다!
    내년에는 잘 할겁니다! (쿨럭)

  4. 복닥 댓글:

    문제 3번 XHTML에서 좌절하던 저의 모습이 생각나네요 ^_^;;

  5. f.y. 댓글:

    흑 리더기로 보니까 답이 다 보여요ㅠㅠ

  6. Espressivo 댓글:

    아.. 많이 배웁니다 T_T
    미처 몰랐던 부분들이 많네요.

  7. 정찬명 댓글:

    @김무건
    내년에는 웹 표준의 날 참석하셔서 일등 하세요! ㅎㅎ

  8. 정찬명 댓글:

    @복닥
    많은 분들이 스펠링 문제를 가장 어렵다고 말씀하셨어요. ㅋㅋ

  9. 정찬명 댓글:

    @f.y.
    아~ 자바스크립트를 써서 정답을 토글 할껄 그랬네요. 다음부터는 그렇게 하도록 할께요. ^^

  10. 정찬명 댓글:

    @Espressivo
    저도 그렇습니다. 문제 내기 전까지 확실히 몰랐던게 많았어요. ㅎㅎ

  11. 김대민 댓글:

    헐…작업만 했지 문제로 보니 이론적으로 모르는것들…뿐..

    많이 배워갑니다.^ ^

  12. Outsider 댓글:

    아~ 14개 맞췄네요.. 제가 절 과대평가하고 있었군요.. ㅠㅠ

  13. 정찬명 댓글:

    @김대민
    다음부터는 실무적인 문제를 많이 내도록 노력해 보겠습니다. ^^

  14. 정찬명 댓글:

    @Outsider
    내년에는 꼭 100점 받으세요! ㅎㅎㅎ

  15. 작업 댓글:

    반성하게 되는 문제들;;ㅎㅎ
    잘봤습니다 근데 이 날 1등은 몇점이었나요?

  16. claire 댓글:

    언제나 느끼는거지만 정말 많은것을 배우고갑니다.
    이문제를 보니 실무적인것만 하면서 이론을 소홀히하고있던 제 자신이 보여지네여..ㅠㅠ 15문제정도..다음에는 100점 도전!! ^^

  17. 정찬명 댓글:

    @작업
    그날 참여하신 분들은 이 문제의 일부만 푸셨습니다. 그리고 패자부활전도 있었기 때문에 그날은 점수에 의미가 없었습니다. ^^

  18. 정찬명 댓글:

    @claire
    15점 받으셨지만 문제 출제자는 이런 훌륭한 자세의 학생들을 좋아한답니다. ㅎㅎㅎ

  19. 공인식 댓글:

    자세히 풀어보기도 전에 답안 확인법 – 습관적인 마우스 드래그와 Ctrl+A 의 무분별한 사용이 원인 – 을 알아버려 같이 보고 있네요 ㅡㅡ;
    필요할때마다 큰 도움 얻고 있습니다, 고맙습니다. ^^

  20. 정찬명 댓글:

    @공인식
    괜찮습니다. 저도 그런 버릇 있는걸요. 빈 공간 클릭하다가 엉뚱한 페이지로 넘어가 버리는 일도 허다하죠. ㅎㅎ

  21. 유진 댓글:

    뜬금없지만,, 걱정 감사! ^^ 여전히 열혈하시네요!!

  22. 정찬명 댓글:

    유진님도 여전하시던데요. ^^ 화이팅!

  23. 윤미경 댓글:

    DTD정의서는 전혀 본적이 없었네요.. 이런!
    여기서 언제나 많이 배우고 있습니다, 감사합니다^^

  24. 정찬명 댓글:

    @윤미경
    DTD에 대하여 더 많은 것을 알고 싶으시다면 이전에 작성했던 제 포스팅을 추천 드립니다. ^^
    http://naradesign.net/wp/2010/01/28/1165/

  25. 리베하얀 댓글:

    이문제였군요 –;;
    음.. 일찌감치 떨어젔을듯 ㅠㅠ

  26. 정찬명 댓글:

    @리베하얀
    많은 분들이 일찌감치 떨어지셨다가 패자부활전으로 다시 살아나셨습니다. ㅎㅎ

  27. 이벤장 댓글:

    아.. 스스로 너무 자만했었던듯하네요.

    이제 1년차 인 초짜이면서 -0-

    12점입니다. 챙피하네요.

    코딩만 신나게했지.. 이론은 꽝이란걸… 이제야알았습니다.

    다른문제도 내주세요~^^

    늘 잘 보고 갑니다.

  28. 별별 댓글:

    1, 2 무효. 췟~

  29. 정찬명 댓글:

    @별별
    1, 2 무효. 인정. ㅎㅎ

  30. 정찬명 댓글:

    @이벤장
    이론은 저도 약합니다. 다른 문제 내기 전에 일단 제 책상 앞에 쌓인 문제부터 해결해야 할것 같아요. 고맙습니다. ㅎㅎㅎ

댓글 쓰기

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

필수 아님

필수 아님