웹 표준 & 접근성 종합퀴즈

1. 다음 중 웹 표준에 대한 설명으로 옳지 않은 것을 고르세요.

A.W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙이다.

B.웹 표준을 지키면 웹 호환성, 웹 접근성을 향상시킬 수 있다.

C.구조, 표현, 동작을 담당하는 코드들이 분리되면서 유지보수가 용이해졌다.

D.코드가 분리되고 파일 개수가 늘어나면서 트래픽 비용은 늘어났다.

A.W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙이다.

B.웹 표준을 지키면 웹 호환성, 웹 접근성을 향상시킬 수 있다.
C.구조, 표현, 동작을 담당하는 코드들이 분리되면서 유지보수가 용이해졌다.
D.코드가 분리되고 파일 개수가 늘어나면서 트래픽 비용은 늘어났다.

웹 표준의 등장으로 구조, 표현, 동작의 각 영역을 담당하는 코드들이 분리되면서 코드가 경량화되었고, 코드가 가벼워진만큼 트래픽 비용이 줄어드는 효과를 얻게 되었습니다.

---

2.다음 중 시맨틱 요소에 대한 설명으로 옳은 것을 모두 고르세요.

A.<div>, <span>은 시맨틱 요소가 아니다.
B.<section>은 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 시맨틱 요소다.
C.시맨틱 요소를 잘 사용하면 웹 접근성과 검색 효율성을 높일 수 있다.
D.시맨틱 요소를 사용해도 id, class 속성의 중요도는 동일하다.

A. <div>, <span>은 시맨틱 요소가 아니다.

B. <section>은 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 시맨틱 요소다.
C. 시맨틱 요소를 잘 사용하면 웹 접근성과 검색 효율성을 높일 수 있다.
D. 시맨틱 요소를 사용해도 id, class 속성의 중요도는 동일하다.

<div>, <span>은 시맨틱 요소가 아니며, <div>, <span>은 콘텐츠를 구분짓는 용도로 주로 사용되며, 시맨틱 요소와 달리 콘텐츠의 의미나 구조를 나타내지 않습니다.

B. <article> 요소에 대한 설명입니다.

D. 시맨틱 요소로 설명할 수 있는 역할과 기능에 대한 id, class는 지정하지 않아도 되기 때문에 그만큼 id, class 속성의 중요도는 낮아집니다.

---

3. 다음 중 화면 각 위치에서 사용하기 가장 적절한 시맨틱 요소가 아닌 것을 고르세요.

A.<header>

B.<nav>

C.<footer>

D.<aside>

A.<header>

B.<nav>
C.<footer>
D.<aside>

C는 보통 웹 페이지의 메인이 되는 주요 콘텐츠가 위치하는 자리입니다. 따라서 <main> 요소가 가장 적절한 시맨틱 요소입니다.

---

4. 다음 중 바르게 사용한 마크업을 고르세요.

A.

<strong>
	<section>김코딩의 코딩클럽</section>
</strong>

B.

<a src="/weather">
	<p>오늘의 날씨는 매우 맑습니다.<br/>
	내일은 흐릴 예정입니다.</p>
</a>

C.

<h3>
	<em>블록 요소의 종류</em>
</h3>

D.

<h1 style="color:red">초특가 세일 진행중</h1>

A. <strong>의 자식 요소로 <section>이 들어가 있습니다. 인라인 요소가 블록 요소를 자식으로 가지므로 틀린 사용법입니다.

B. <a>의 자식 요소로 <p>가 들어가 있습니다. 인라인 요소가 블록 요소를 자식으로 가지므로 틀린 사용법입니다. <br/>의 사용법은 올바릅니다.

C. 블록 요소 <h3>의 자식으로 인라인 요소 <em>이 있습니다. 또한 <i> 대신 같은 스타일 속성을 적용하는 시맨틱 요소 <em>을 사용했습니다. 따라서 맞는 사용법입니다.

D. <h1> 요소에 style 속성으로 인라인 스타일링을 사용했습니다. 따라서 틀린 사용법입니다.

---

5.다음 중 크로스 브라우징에 대한 설명으로 옳지 않은 것을 고르세요.

A.크로스 브라우징은 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.

B.인터넷 익스플로러의 지원 종료로 크로스 브라우징의 난이도가 낮아졌다.

C.크로스 브라우징은 초기 기획 → 개발 → 수정 → 테스트의 단계로 이루어진다.

D.개발 단계에서는 주요 고객층이 주로 사용하는 브라우저의 호환성을 고려한 코드를 사용해야 한다.

A.크로스 브라우징은 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업을 의미한다.

B.인터넷 익스플로러의 지원 종료로 크로스 브라우징의 난이도가 낮아졌다.
C.크로스 브라우징은 초기 기획 → 개발 → 수정 → 테스트의 단계로 이루어진다.
D.개발 단계에서는 주요 고객층이 주로 사용하는 브라우저의 호환성을 고려한 코드를 사용해야 한다.

크로스 브라우징은 초기 기획 → 개발 → 테스트/발견 → 수정/반복의 단계로 이루어집니다.

---

6. 다음 중 SEO에 대한 설명으로 옳은 것을 고르세요.

A.SEO가 제대로 되지 않으면 아무도 찾지 않는 웹 페이지가 될 수도 있다.

B.SEO에는 페이지 내부에서 진행할 수 있는 Off-Page SEO, 페이지 외부에서 진행할 수 있는 On-Page SEO, 두 종류가 있다.

C.광고비를 사용하여 검색 결과 상위에 뜨게 만드는 것은 On-Page SEO의 예시다.

D.효율적인 HTML 요소 사용은 Off-Page SEO의 예시다.

A.SEO가 제대로 되지 않으면 아무도 찾지 않는 웹 페이지가 될 수도 있다.

B.SEO에는 페이지 내부에서 진행할 수 있는 Off-Page SEO, 페이지 외부에서 진행할 수 있는 On-Page SEO, 두 종류가 있다.
C.광고비를 사용하여 검색 결과 상위에 뜨게 만드는 것은 On-Page SEO의 예시다.
D.효율적인 HTML 요소 사용은 Off-Page SEO의 예시다.

Off-Page SEO와 On-Page SEO의 설명이 반대로 되어있습니다. 효율적인 HTML 요소 사용 등 페이지 내부에서 진행할 수 있는 SEO가 On-Page SEO, 광고비 사용 등 페이지 외부에서 진행할 수 있는 SEO가 Off-Page SEO입니다.

---

7. 다음 중 SEO에 영향을 미치는 요소 중 오픈그래프에 대한 설명으로 옳지 않은 것을 고르세요.

A.링크를 공유했을 때 미리보기에 뜨는 내용들을 다루는 요소다.

B.og:title 속성은 <title> 요소보다 우선되어 표시된다.

C.og:image 속성은 <img> 요소보다 우선되어 표시된다.

D.og:description 속성이 없으면 description 속성이 미리보기에 표시된다.

A.링크를 공유했을 때 미리보기에 뜨는 내용들을 다루는 요소다.

B.og:title 속성은 <title> 요소보다 우선되어 표시된다.
C.og:image 속성은 <img> 요소보다 우선되어 표시된다.
D.og:description 속성이 없으면 description 속성이 미리보기에 표시된다.

og:description 속성이 없으면 description 속성이 있더라도 미리보기 설명이 표시되지 않습니다. description 속성은 검색 엔진에서 미리보기 내용을 표시하는 속성입니다.

---

8. 다음 중 웹 접근성에 대한 설명으로 옳지 않은 것을 고르세요.

A. 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것이 웹 접근성의 목적이다.

B.웹 접근성이 잘 갖춰져 있어도 비장애인에게는 큰 도움이 되지 않는다.

C.우리나라의 웹 접근성 수준은 높은 정보화 수준에도 불구하고 높지 않다.

D.우리나라는 법으로 웹 접근성을 갖추도록 강제성이 부여되어 있어도 단속이 이루어지지는 않는다.

A. 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것이 웹 접근성의 목적이다.

B.웹 접근성이 잘 갖춰져 있어도 비장애인에게는 큰 도움이 되지 않는다.
C.우리나라의 웹 접근성 수준은 높은 정보화 수준에도 불구하고 높지 않다.
D.우리나라는 법으로 웹 접근성을 갖추도록 강제성이 부여되어 있어도 단속이 이루어지지는 않는다.

누구든지 화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스 없이 키보드밖에 사용할 수 없는 등 정보 접근에 제한을 받는 상황은 많습니다. 이런 상황에서도 웹 접근성은 동일한 수준의 정보를 제공받을 수 있도록 보장해줍니다.

---

9. 다음 중 대체 텍스트를 적절하게 작성한 예시를 고르세요.

A.

<img  src="./곰.png" alt="포유류" />

B.

<img src="./토끼.png" alt="물 먹는 토끼" />
<p>토끼가 물을 먹고 있다.</p>

C.

<img src="./고양이.png" alt="털을 잔뜩 부풀리고서 옆을 지나가고 있는 커다란 검은 고양이를 위협하고있는 노란 고양이 이미지" />

D.

<img class="background" src="./image01.png" alt="" />

 

A. 대체 텍스트의 설명이 너무 광범위합니다.

B. 인접한 요소에서 이미지를 설명하는 내용을 담고 있으므로 대체 텍스트까지 중복으로 작성할 필요가 없습니다.
C. 대체 텍스트의 설명이 지나치게 자세합니다.
D. class 속성으로 보아 배경 이미지로 사용되는 요소입니다. 배경 이미지의 경우 대체 텍스트에 빈 문자열을 주어 스크린 리더가 인식하지 않게 만드는 것도 좋은 사용법입니다.

---

10. 다음 중 WAI-ARIA를 가장 적절하게 사용한 예시를 고르세요.

A.

<div role="button">뒤로가기</div>

B.

<button aria-label="재생 버튼"><img src="./play_button.png" /></button>

C.

<input type="text" aria-label="아이디" />
<input type="text" aria-label="비밀번호" />

D.

<h3 role="h3">저녁 메뉴 추천<h3>

<button aria-label="재생 버튼"><img src="./play_button.png" /></button>

올바르게 WAI-ARIA를 사용한 예시는 B입니다. WAI-ARIA는 웹 콘텐츠의 접근성을 높이기 위해, HTML로는 표현할 수 없는 역할(role)과 상태(state)를 지정할 수 있는 기술입니다.

A는 role 속성을 사용하여 버튼 역할을 부여하고 있지만, 시맨틱한 HTML 버튼 요소를 사용하는 것이 더 적절합니다.

C는 aria-label 속성을 사용하여 입력 필드의 이름을 제공하고 있지만, 이는 label 요소를 사용하여 라벨을 제공하는 것이 더 적절합니다.

D는 role 속성을 사용하여 h3 요소를 다시 정의하고 있지만, 이는 HTML에서 이미 h3 요소가 제공하는 의미를 변경하는 것이며, 적절하지 않은 사용법입니다.

---