방송대 방통대 HTML5웹프로그래밍 2강 - 리스트·이미지·하이퍼링크·테이블 표현 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 2강 - 리스트·이미지·하이퍼링크·테이블 표현

HTML은 웹 콘텐츠의 의미와 구조를 표현하고, 시각적 모양은 CSS가 담당한다. 이 글에서는 리스트, 이미지, 하이퍼링크, iframe, 테이블을 올바른 의미 구조와 웹 접근성 관점에서 사용하는 방법을 2강의 코드 예제와 함께 정리한다.

1. HTML 표현의 기본 원칙

웹 문서를 만들 때 HTML 요소는 화면에 어떻게 보이는가보다 콘텐츠가 무엇을 의미하는가를 기준으로 선택해야 한다. 목록은 리스트 요소로, 표 형식 데이터는 테이블 요소로, 다른 위치나 문서로 이동하는 기능은 링크 요소로 표현한다. 색상, 테두리, 배치, 글머리 기호와 같은 시각적 표현은 CSS로 제어한다.

HTML은 의미 구조를 담당하고, 모양은 CSS로 제어한다.
문단과 줄바꿈으로 목록을 흉내 내거나 테이블로 페이지 레이아웃을 만드는 방식은 콘텐츠의 의미를 흐리고 접근성과 유지보수를 떨어뜨린다.

의미에 맞는 요소를 사용하면 브라우저뿐 아니라 검색엔진과 스크린 리더도 문서 구조를 더 정확히 이해한다. 또한 기본 스타일을 제거하거나 바꾸더라도 HTML 구조는 그대로 유지되므로 여러 화면 크기와 보조기술에 대응하기 쉬워진다.

표현 대상	대표 HTML 요소	선택 기준
항목의 집합	ul, ol, dl	순서 의미와 용어-설명 관계를 기준으로 선택한다.
이미지	img, picture, source	대체 텍스트와 반응형 파일 선택을 고려한다.
이동과 연결	a	목적지를 예측할 수 있는 링크 텍스트를 제공한다.
표 데이터	table과 관련 요소	행과 열의 관계가 있는 데이터에만 사용한다.

2. 리스트 표현

2.1 순서 없는 리스트: ul

ul은 순서가 의미 없는 항목의 집합을 표현한다. 각 항목은 li로 작성하며 브라우저는 기본적으로 각 항목 앞에 불릿을 표시한다. 메뉴, 내비게이션, 기능 목록처럼 항목의 모음 자체가 중요한 경우에 알맞다.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

불릿 모양은 CSS의 list-style-type으로 변경할 수 있다. 내비게이션 메뉴에서는 list-style: none;으로 불릿을 제거하는 패턴이 흔하다. 목록을 단순히 p와 br로 나열하면 의미 있는 목록 구조가 사라지므로 사용하지 않는다.

중첩 리스트

다단계 메뉴나 계층형 항목은 리스트 안의 li에 다시 리스트를 넣어 표현한다. 하위 리스트는 그것을 설명하는 상위 li의 자식으로 배치해야 계층 관계가 명확하다. 실무의 전역 내비게이션은 흔히 nav > ul > li > a 구조를 사용한다.

<nav>
  <ul class="gnb">
    <li><a href="/about">학과소개</a></li>
    <li><a href="/curriculum">교과과정</a></li>
    <li><a href="/notice">공지사항</a></li>
  </ul>
</nav>

2.2 리스트 항목: li

li는 ul이나 ol 안에서 개별 리스트 항목을 표현한다. 브라우저의 기본 스타일이 들여쓰기와 글머리 기호를 제공하지만 디자인은 CSS로 조정한다. 종료 태그는 사양상 생략할 수 있는 경우가 있어도 협업, 가독성, 도구 호환성을 위해 명시적으로 닫는 것이 권장된다.

2.3 순서 있는 리스트: ol

ol은 단계, 절차, 순위처럼 순서 자체가 의미 있는 목록을 표현한다. 기본 번호는 1, 2, 3, …이며 type, start, reversed, li의 value로 번호 표시 방식을 조정할 수 있다.

속성	기능	예시
type	순서 기호 종류 지정	1, a, A, i, I
start	첫 항목의 시작 번호 지정	<ol start="3">
reversed	번호를 역순으로 표시	<ol reversed>
value	특정 li부터 번호 변경	<li value="10">

실무에서는 번호 모양만 바꾸려면 type보다 CSS의 list-style-type을 사용하는 경우가 많다. 그러나 start, reversed, value처럼 실제 순서 값을 표현하는 속성은 필요에 따라 HTML에서 사용할 수 있다.

2.4 정의 리스트: dl, dt, dd

dl은 용어와 설명, 키와 값처럼 서로 대응하는 데이터를 나열한다. dt는 용어 또는 키, dd는 그 설명 또는 값이다. 용어 사전, FAQ, 제품 사양, 작성자와 날짜 같은 메타데이터에 알맞다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 언어</dd>
  <dt>CSS</dt>
  <dd>웹 페이지의 시각적 표현을 제어하는 언어</dd>
</dl>

선택 기준: 의미 구조가 “용어-설명” 또는 “키-값”이 아니라면 dl을 사용하지 않는다. 단순 항목 집합은 ul, 절차나 순위는 ol이 더 적절하다.

3. 이미지 표현과 반응형 이미지

3.1 img 요소의 기본 구조

img는 웹 페이지에 이미지를 삽입하는 인라인 요소이다. src는 이미지 파일의 경로를 지정하는 필수 속성이고, alt는 이미지를 볼 수 없거나 스크린 리더를 사용하는 상황에서 이미지의 의미를 전달한다.

<img src="images/sales-2025-q.png"
     alt="2025년 분기별 매출 그래프">

대체 텍스트는 “그림”처럼 모호하게 작성하지 않고 이미지가 전달하는 정보를 구체적으로 설명한다. 의미가 없는 장식용 이미지는 alt=""로 비워 보조기술의 읽기 대상에서 제외한다. 장식용 패턴처럼 완전히 숨겨야 할 때에는 강의 예처럼 aria-hidden="true"를 함께 고려할 수 있다.

alt는 웹 접근성의 핵심이다.
정보 이미지에는 의미를 전달하는 구체적인 설명을, 장식 이미지는 빈 대체 텍스트를 제공한다.

3.2 파일 형식과 경로

사진은 WebP나 AVIF를 우선 고려하고 필요에 따라 JPG를 사용한다. 아이콘과 로고는 SVG 또는 PNG가 알맞다. 이미지 경로는 사이트 루트를 기준으로 하는 절대 경로와 현재 문서 위치를 기준으로 하는 상대 경로로 구분한다.

width와 height 중 하나만 지정하면 다른 쪽은 원본 비율에 따라 자동으로 계산된다. 테두리 표현에는 오래된 border 속성을 사용하지 말고 CSS의 border 속성을 사용한다. 이미지맵의 usemap은 고정 좌표 때문에 반응형 화면에서 어긋나기 쉬워 실무에서는 사용을 지양한다.

3.3 기본 반응형 처리와 지연 로딩

이미지가 부모 요소보다 커지지 않게 하면서 원본 비율을 유지하려면 CSS에서 max-width: 100%;와 height: auto;를 함께 사용한다. loading="lazy"는 이미지가 뷰포트에 가까워질 때 로딩하도록 지시하여 초기 페이지 로딩을 줄이는 데 도움을 준다.

<img src="flower.jpg"
     alt="노란 튤립"
     class="responsive-img"
     loading="lazy">

3.4 srcset과 sizes

srcset은 같은 그림의 다양한 크기 파일과 각 파일의 원본 너비를 브라우저에 알려준다. 너비 서술자는 500w처럼 숫자 뒤에 w를 붙인다. sizes는 미디어 조건에 따라 이미지가 화면에서 차지할 예상 크기를 알려 브라우저가 적절한 파일을 선택하도록 돕는다.

<img
  srcset="img-small.jpg 500w,
          img-medium.jpg 1000w,
          img-large.jpg 2000w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  src="img-medium.jpg"
  alt="산과 호수가 보이는 풍경">

vw는 현재 브라우저 뷰포트 너비를 기준으로 하는 단위이며 1vw는 전체 너비의 1%이다. sizes는 파일 선택 정보를 제공할 뿐 실제 레이아웃 스타일을 대신하지 않으므로, 화면에 맞게 줄어들도록 별도의 CSS가 필요하다.

3.5 picture 요소

picture는 화면 상황에 따라 다른 구도의 이미지나 다른 파일 형식을 제공할 때 사용한다. 브라우저는 위에서부터 source를 검사하여 조건이 맞는 첫 번째 소스를 선택하고 나머지는 무시한다. 지원 가능한 파일이 없거나 조건이 맞지 않는 상황을 위해 마지막에 img를 반드시 둔다.

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <source media="(max-width: 768px)" srcset="img-portrait.jpg">
  <img src="img-default.jpg" alt="제품 사용 모습">
</picture>

구분: srcset과 sizes는 같은 이미지의 적절한 해상도를 브라우저가 선택하도록 하고, picture는 포맷 변경이나 화면별 다른 구도처럼 소스 자체를 바꾸는 데 유용하다.

4. 하이퍼링크와 다양한 이동

4.1 a 요소와 href

a는 문서와 서비스를 연결하는 인라인 요소이다. href에는 이동할 URL이나 경로를 지정한다. 다른 웹사이트로 이동할 때에는 https://와 같은 프로토콜을 포함해야 한다. 링크 텍스트는 “여기”, “다운로드”처럼 모호하게 쓰지 말고 목적지를 예측할 수 있도록 구체적으로 작성한다.

<a href="/syllabus.html">강의계획서 보기</a>
<a href="https://www.knou.ac.kr">한국방송통신대학교 홈페이지</a>

4.2 target과 rel

target="_self"는 현재 창에서 열리는 기본 동작이고, target="_blank"는 새 탭이나 새 창에서 연다. 새 탭을 열 때에는 보안과 개인정보 보호를 위해 rel="noopener noreferrer"를 함께 지정한다.

• noopener는 새 페이지가 window.opener를 통해 원래 페이지를 조작하지 못하게 한다.
• noreferrer는 이전 페이지 주소를 나타내는 Referer 정보를 보내지 않도록 한다.

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">외부 자료 새 탭에서 보기</a>

4.3 파일 열기와 다운로드

브라우저가 처리할 수 있는 PDF, 이미지, 동영상 링크는 보통 화면에서 열리지만 download 속성을 지정하면 저장을 유도할 수 있다. 속성값을 주면 저장할 파일명을 제안할 수 있다. 다만 브라우저 보안 정책에 따라 같은 출처의 파일에서 주로 동작한다.

<a href="/files/report.pdf">보고서 화면에서 보기</a>
<a href="/files/report.pdf" download="2025_매출_보고서.pdf">
  2025년 매출 보고서 PDF 다운로드
</a>

MP3, ZIP 같은 파일을 연결할 때에도 링크 텍스트에 파일 형식, 용도, 크기 등을 알려 사용자가 클릭 결과를 예측하게 한다. 이는 스크린 리더 사용자에게도 중요한 정보가 된다.

4.4 id를 이용한 문서 내부 이동

긴 페이지에서 특정 위치로 이동하려면 목적지 요소에 고유한 id를 지정하고 링크의 href에 #id값을 사용한다. 다른 페이지의 특정 위치로 이동할 때에는 페이지 URL 뒤에 #id값을 붙인다.

<a href="#section-review">고객 후기 보러 가기</a>

<section id="section-review">
  <h3>고객 후기</h3>
</section>

<a href="#">페이지 맨 위로 이동</a>

부드러운 스크롤 효과는 HTML이 아니라 CSS의 scroll-behavior: smooth;로 처리한다.

4.5 이메일, 전화, 문자 링크

mailto:는 이메일 클라이언트, tel:은 전화 앱, sms:는 문자 앱 실행을 유도한다. 사용자의 환경에 따라 동작이 달라질 수 있으며, 제목이나 본문 같은 매개변수를 URL에 포함할 수 있다.

<a href="mailto:support@example.com?subject=제품 문의">메일 보내기</a>
<a href="tel:010-1234-5678">서비스센터 전화 걸기</a>
<a href="sms:010-1234-5678?body=안녕하세요">문자 보내기</a>

금지할 패턴: 링크의 href에 JavaScript 코드를 직접 넣는 방식은 보안과 유지보수 측면에서 사용하지 않는다. 동작을 수행하는 UI는 button을 사용하고 이벤트 처리를 별도로 분리한다.

4.6 블록 링크

HTML5에서는 a 안에 이미지, 제목, 문단 등의 흐름 콘텐츠를 넣어 카드 전체를 클릭할 수 있는 블록 링크를 만들 수 있다. 다만 하나의 a 안에 다른 a나 button 같은 상호작용 요소를 중첩해서는 안 된다.

5. 이미지맵과 iframe

5.1 이미지맵

이미지맵은 하나의 이미지에 직사각형, 원, 다각형 좌표를 지정하여 여러 링크 영역을 만드는 방식이다. img의 usemap과 map, area를 사용한다. 그러나 좌표가 고정되어 이미지 크기가 바뀌면 클릭 영역이 어긋나므로 반응형 웹에서는 사용을 지양하고 CSS와 적절한 링크 UI로 대체하는 편이 좋다.

5.2 iframe

iframe은 현재 웹 페이지 안에 다른 웹 페이지나 외부 기능을 삽입하는 창이다. 유튜브 영상, 지도, 결제창처럼 외부 서비스를 빌려오는 경우에 제한적으로 사용한다. 모든 사이트를 삽입할 수 있는 것은 아니며 보안 정책에 따라 차단될 수 있다.

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  title="한국방송통신대학교 위치 지도"
  allowfullscreen
  loading="lazy">
</iframe>

title은 삽입된 콘텐츠의 목적을 스크린 리더 사용자에게 전달하는 접근성 핵심 속성이다. loading="lazy"는 필요할 때 로딩하여 초기 성능 부담을 줄이고, allowfullscreen은 전체 화면 사용을 허용한다. 보안과 성능 저하 가능성이 있으므로 필요한 경우에만 최소한으로 사용한다.

6. 테이블 표현

6.1 테이블의 사용 목적

table은 성적표, 시간표, 게시판 목록처럼 행과 열의 관계를 가진 표 데이터를 표현할 때만 사용한다. 페이지의 레이아웃을 배치하기 위해 사용해서는 안 되며, 레이아웃은 CSS Flexbox나 Grid로 구성한다.

요소	기능	핵심 특징
table	표 전체 컨테이너	표 형식 데이터를 감싼다.
caption	표 제목	표의 의미를 요약하는 접근성 요소이다.
tr	행 생성	가로 방향의 셀 그룹을 만든다.
th	제목 셀	scope로 행·열 제목 관계를 지정한다.
td	데이터 셀	실제 표 데이터를 담는다.

caption은 table 시작 태그 바로 다음에 두어 표가 무엇을 나타내는지 설명한다. 테두리, 셀 크기, 정렬은 HTML의 오래된 border 속성이 아니라 CSS로 관리한다.

<table>
  <caption>과목별 성적</caption>
  <tr>
    <th scope="col">과목</th>
    <th scope="col">중간시험</th>
    <th scope="col">기말시험</th>
  </tr>
  <tr>
    <th scope="row">알고리즘</th>
    <td>28</td>
    <td>50</td>
  </tr>
</table>

6.2 scope 속성

th의 scope="col"은 열 제목, scope="row"는 행 제목임을 나타낸다. 스크린 리더가 데이터 셀과 관련 제목 셀을 연결해 읽는 데 도움을 주므로 표의 접근성이 향상된다.

6.3 rowspan과 colspan

rowspan="n"은 현재 셀부터 아래쪽으로 n개의 행 셀을 세로 병합하고, colspan="n"은 현재 셀부터 오른쪽으로 n개의 열 셀을 가로 병합한다. 두 속성은 td와 th에만 사용한다.

복잡한 병합은 표의 구조를 이해하기 어렵게 하고 모바일 화면에서 깨지는 원인이 된다. 병합은 필요한 최소 범위에서만 사용한다. 좁은 화면에서는 표 컨테이너에 가로 스크롤을 제공하거나 데이터를 카드 형태로 재설계하는 방법을 고려한다.

유지보수 원칙: 데이터가 복잡해질수록 셀 병합을 늘리기보다 표 구조 자체를 단순하게 재설계하는 것이 좋다.

6.4 thead, tbody, tfoot

thead, tbody, tfoot은 테이블의 행 그룹을 머리글, 본문, 바닥글 영역으로 명시적으로 나눈다. 이 요소들은 시각적 배치를 자동으로 바꾸는 것이 아니라 구조를 구분한다. 행 그룹별 스타일링, 스크롤, 인쇄 처리와 보조기술의 구조 이해에 유용하다.

권장 작성 순서: thead → tbody → tfoot
각 그룹은 하나 이상의 tr을 포함하며 셀은 그 행 안에 배치한다.

6.5 colgroup과 col

colgroup은 여러 열을 묶고 col은 특정 열에 공통 스타일을 적용할 연결 지점을 제공한다. 같은 열 스타일이 여러 행에서 반복될 때 유지보수에 유용하다. span은 하나의 col 설정이 적용될 열의 개수를 지정한다.

<table>
  <caption>주간 일정</caption>
  <colgroup>
    <col class="time">
    <col span="2" class="schedule">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

colgroup은 caption 다음, thead나 첫 번째 tr 앞에 둔다. 실제 배경색과 너비 같은 스타일은 col에 지정한 클래스와 CSS를 연결하여 적용한다.

7. 핵심 개념 정리

• ul은 순서 없는 항목, ol은 순서가 중요한 항목, dl은 용어-설명 또는 키-값 구조에 사용한다.
• img의 src는 이미지 경로이며 alt는 이미지 의미를 전달하는 접근성 핵심 속성이다.
• 반응형 이미지는 CSS의 max-width: 100%, height: auto와 srcset, sizes, picture를 상황에 맞게 사용한다.
• a의 목적지는 href로 지정하고, 새 탭 링크에는 rel="noopener noreferrer"를 함께 사용한다.
• download는 파일 저장을 유도하고, #id 링크는 문서 내부의 특정 위치로 이동한다.
• 블록 링크 안에 다른 링크나 버튼을 중첩해서는 안 된다.
• iframe은 외부 콘텐츠를 삽입하며 title로 목적을 설명하고 최소한으로 사용한다.
• table은 표 데이터에만 사용하며 레이아웃은 CSS Flexbox나 Grid로 구현한다.
• caption, th의 scope, thead·tbody·tfoot은 표의 의미와 접근성을 높인다.

시험 직전 최종 점검

요소 이름만 외우기보다 어떤 의미 구조를 표현하는지 연결해 기억한다. 특히 ul·ol·dl의 구분, 정보 이미지와 장식 이미지의 alt, srcset과 picture의 역할, 새 탭 링크의 rel, 테이블의 scope와 행 그룹 요소가 자주 출제되는 핵심이다.

8. 예상문제 20선

1. 순서가 의미 없는 항목의 집합을 표현하는 요소는?

① ol ② ul ③ dl ④ table

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
ul은 순서가 중요하지 않은 항목의 집합을 표현하며 각 항목은 li로 작성한다.

2. 순서 있는 리스트의 번호를 역순으로 표시하는 속성은?

① start ② value ③ type ④ reversed

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
ol의 reversed 속성은 항목 번호를 역순으로 표시한다.

3. 용어와 설명 또는 키와 값의 관계를 표현하기에 가장 적절한 요소 조합은?

① dl, dt, dd ② ul, li, a ③ table, img, area ④ ol, source, caption

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
dl 안에서 dt는 용어·키, dd는 설명·값을 표현한다.

4. 정보 전달용 이미지의 alt 작성 방법으로 가장 적절한 것은?

① 모든 이미지에서 alt를 생략한다. ② 항상 “그림”이라고만 작성한다. ③ 이미지가 전달하는 정보를 구체적으로 설명한다. ④ 파일 경로를 그대로 적는다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
정보 이미지의 대체 텍스트는 이미지를 보지 못해도 같은 핵심 정보를 이해할 수 있도록 구체적으로 작성한다.

5. 의미 없는 장식용 이미지의 대체 텍스트로 적절한 것은?

① alt="장식 그림" ② alt="image" ③ alt 속성 자체를 항상 제거한다. ④ alt=""

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
장식 이미지는 빈 대체 텍스트를 지정하여 스크린 리더가 불필요한 정보를 읽지 않도록 한다.

6. 이미지 비율을 유지하면서 부모 요소보다 커지지 않게 하는 CSS 조합은?

① width: auto; height: 100%; ② max-width: 100%; height: auto; ③ border: 0; width: 200%; ④ height: 100vw; width: auto;

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
max-width: 100%는 부모 너비를 넘지 않게 하고 height: auto는 원본 비율을 유지한다.

7. srcset 속성의 주된 역할은?

① 이미지의 대체 텍스트를 지정한다. ② 이미지 테두리를 그린다. ③ 다양한 크기의 이미지 파일 후보를 브라우저에 제공한다. ④ 링크를 새 탭에서 연다.

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
srcset은 같은 이미지의 여러 크기 파일과 너비 정보를 제공하여 브라우저가 적절한 파일을 선택하게 한다.

8. picture 요소를 사용할 때 마지막에 반드시 두어야 하는 요소는?

① img ② map ③ area ④ iframe

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
조건에 맞는 source가 없거나 기능을 지원하지 않는 상황을 대비해 마지막에 기본 img를 둔다.

9. a 요소에서 이동 목적지를 지정하는 필수 속성은?

① src ② href ③ scope ④ colspan

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
href에는 링크가 이동할 URL, 파일 경로, 문서 내부 앵커 등을 지정한다.

10. target="_blank" 링크에 보안을 위해 함께 지정하는 값은?

① rel="noopener noreferrer" ② scope="col" ③ loading="lazy" ④ reversed

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
noopener는 새 페이지의 원래 창 조작을 막고 noreferrer는 이전 페이지 주소 전송을 막는다.

11. 같은 페이지의 id="review"인 요소로 이동하는 링크는?

① href="review" ② src="#review" ③ target="review" ④ href="#review"

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
문서 내부 앵커는 해시 기호 뒤에 목적지 요소의 id 값을 적어 연결한다.

12. 브라우저가 파일을 화면에 여는 대신 저장하도록 유도하는 속성은?

① sizes ② usemap ③ download ④ rowspan

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
download는 링크된 파일을 열기보다 저장하도록 유도하며 값으로 저장 파일명을 제안할 수도 있다.

13. 블록 링크를 만들 때 금지되는 구조는?

① a 안에 다른 a나 button을 넣는 구조 ② a 안에 이미지와 제목을 넣는 구조 ③ 링크 텍스트에 목적지를 설명하는 구조 ④ 카드 전체를 하나의 링크로 만드는 구조

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
하나의 링크 안에 또 다른 링크나 버튼 같은 상호작용 요소를 중첩하면 클릭과 접근성 동작이 충돌한다.

14. iframe의 접근성을 위해 삽입 콘텐츠의 목적을 설명하는 속성은?

① span ② value ③ title ④ reversed

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
iframe의 title은 삽입된 지도나 영상 등의 목적을 보조기술 사용자에게 알려준다.

15. table 요소의 올바른 사용 목적은?

① 웹 페이지 전체 레이아웃 구성 ② 행과 열의 관계가 있는 표 데이터 표현 ③ 모든 내비게이션 메뉴 표현 ④ 반응형 이미지 파일 선택

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
table은 성적표나 시간표처럼 행과 열로 관계를 나타내는 데이터에 사용한다. 레이아웃은 CSS로 구현한다.

16. 표의 의미를 요약하는 제목 요소는?

① thead ② th ③ colgroup ④ caption

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
caption은 표의 목적과 내용을 요약하며 일반적으로 table 시작 태그 바로 뒤에 둔다.

17. th 요소가 열 제목임을 나타내는 속성값은?

① rowspan="col" ② type="column" ③ scope="col" ④ span="scope"

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③
scope="col"은 해당 th가 열 제목임을, scope="row"는 행 제목임을 나타낸다.

18. 현재 셀부터 오른쪽으로 3개의 칸을 합치는 속성은?

① rowspan="3" ② colspan="3" ③ colgroup="3" ④ scope="3"

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②
colspan은 가로 방향 열 셀을 합치며 rowspan은 아래 방향 행 셀을 합친다.

19. 테이블의 권장 행 그룹 작성 순서는?

① tbody → tfoot → thead ② tfoot → thead → tbody ③ tbody → thead → tfoot ④ thead → tbody → tfoot

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④
표의 행 그룹은 머리글, 본문, 바닥글의 의미 흐름에 따라 thead, tbody, tfoot 순으로 작성한다.

20. 여러 열에 반복되는 스타일을 묶어 적용하기에 적절한 요소는?

① colgroup과 col ② dl과 dd ③ picture와 source ④ map과 area

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①
colgroup과 col은 열 단위로 클래스를 지정하여 반복되는 열 스타일의 유지보수를 쉽게 한다.