몇일 전 있었던 제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문제 미만인데요. 내년에도 이러시면 곤란해요. ^^
원본 출처 : http://naradesign.net/xe/tx/12570 정찬명님의 나라디자인입니다~^^
'프론트앤드 개발' 카테고리의 다른 글
| javascript 총정리 (0) | 2010.10.15 |
|---|---|
| Jquery 체크시 값을 더하고 빼주는 스크립트 (0) | 2010.10.15 |
| [펌] JQuery 관련 자료 (0) | 2010.10.15 |
| 당신은 웹표준개발자인가? (0) | 2010.10.15 |
| e-preventDefault 와 return false 의 차이점... (0) | 2010.10.15 |