방송대 HTML5웹프로그래밍 2강: 콘텐츠 의미에 맞는 요소 선택과 접근성

방송대 HTML5웹프로그래밍 2강: 콘텐츠 의미에 맞는 요소 선택과 접근성

브라우저에 비슷하게 보이는 두 화면도 HTML의 의미 구조는 전혀 다를 수 있습니다. 이 글은 리스트·이미지·링크·테이블을 외워서 배치하는 대신, 콘텐츠의 역할을 먼저 판별하고 알맞은 요소와 속성을 선택하는 절차를 익히도록 구성했습니다. 코드를 읽은 뒤에는 접근성과 반응형 환경에서 생기는 오류까지 스스로 진단할 수 있습니다.

보이는 모양보다 먼저 묻는 네 가지 질문

HTML은 정보의 의미와 관계를 표현하고, CSS는 그 정보가 보이는 방식을 조절합니다. 따라서 들여쓰기된 문장이 보인다고 모두 리스트인 것은 아니며, 칸이 가지런히 놓였다고 모두 테이블인 것도 아닙니다. 다음 네 질문은 2강의 여러 요소를 하나의 선택 규칙으로 연결합니다.

콘텐츠에 던질 질문	주로 선택할 구조	결정적 의미
여러 항목이 하나의 묶음인가?	ul, ol, dl	집합·순서·용어와 설명의 관계
시각 정보가 필요한가?	img, picture	대체 텍스트와 화면 조건에 맞는 이미지 선택
사용자를 다른 자원이나 위치로 이동시키는가?	a	목적지를 가진 탐색과 자원 연결
행과 열의 교차 관계를 읽어야 하는가?	table 계열	표 제목·머리글·데이터 셀의 관계

모양만 흉내 내면 화면에서는 그럴듯해도 브라우저, 검색 도구, 스크린 리더가 관계를 파악하기 어렵습니다. 반대로 의미에 맞는 요소를 고르면 기본 동작과 접근성 정보가 함께 생기고, CSS가 바뀌어도 문서 구조는 유지됩니다.

판단 핵심: “어떻게 보이게 할까?”보다 “이 정보끼리는 어떤 관계인가?”를 먼저 묻습니다. 의미 구조를 HTML로 정한 뒤 불릿, 테두리, 크기, 정렬 같은 표현을 CSS로 조절하는 순서가 안전합니다.

반복 정보라면 집합·순서·설명 관계를 구분한다

순서가 결과를 바꾸는지 확인하기

ul은 순서가 중요하지 않은 항목의 집합, ol은 단계나 순위처럼 순서 자체가 의미인 목록입니다. 두 요소의 각 항목은 li로 표시합니다. 불릿을 없애기 위해 문단과 줄바꿈으로 바꾸면 목록이라는 의미까지 사라집니다. 내비게이션처럼 불릿이 필요 없는 목록도 HTML은 ul > li > a 구조로 유지하고 CSS에서 표시만 바꾸는 편이 맞습니다.

직접 구성한 예로 수강 신청 준비물을 ‘신분증, 필기도구, 충전기’라고 적는다면 항목의 순서를 바꿔도 뜻이 유지되므로 ul이 적합합니다. 반면 ‘로그인 → 과목 선택 → 신청 확인’은 순서가 바뀌면 절차가 실패하므로 ol이 적합합니다.

<h3>신청 절차</h3>
<ol>
  <li>로그인한다.</li>
  <li>과목을 선택한다.</li>
  <li>신청 결과를 확인한다.</li>
</ol>

목록 안에 하위 목록을 넣을 때는 하위 ul이나 ol을 상위 li의 자식으로 둡니다. 그래야 어떤 항목의 세부 목록인지 관계가 끊기지 않습니다. li 종료 태그는 일부 상황에서 생략할 수 있지만, 중첩 구조의 가독성과 협업 도구의 안정성을 위해 명시적으로 닫는 습관이 좋습니다.

번호 모양과 목록 의미를 분리하기

ol의 type은 번호 기호의 종류, start는 시작 번호, reversed는 역순 번호를 지정합니다. 특정 li의 value는 그 지점의 번호를 바꿉니다. 하지만 번호의 모양만 바꾸려는 목적이라면 CSS의 list-style-type을 우선 고려합니다. 속성이 바뀌어도 ‘순서가 의미인 목록’이라는 본질은 그대로입니다.

<ol type="A" start="3">
  <li>요청 주소를 확인한다.</li>
  <li>서버 응답을 확인한다.</li>
  <li value="8">렌더링 결과를 기록한다.</li>
</ol>

이 예의 표시는 C, D, H로 진행됩니다. start="3"이 세 번째 알파벳에서 시작하게 하고, 마지막 항목의 value="8"이 그 항목 번호를 여덟 번째 알파벳으로 다시 지정하기 때문입니다.

용어와 설명이 한 쌍이면 정의 리스트

dl은 단순한 두 열 배치가 아니라 용어·설명 또는 키·값의 대응을 표현합니다. dt에는 용어나 키를, dd에는 설명이나 값을 둡니다. 사전, 메타데이터, FAQ, 제품 사양처럼 “무엇에 대한 설명인가?”가 분명할 때 유용합니다.

<dl>
  <dt>수강 방식</dt>
  <dd>온라인 강의</dd>
  <dt>학습 기간</dt>
  <dd>6주</dd>
</dl>

오개념 교정: 화면을 두 줄로 정렬하고 싶다는 이유만으로 dl을 쓰면 안 됩니다. 핵심은 모양이 아니라 dt와 dd 사이에 실제 정의·설명 관계가 있는지입니다. 단순 배치는 CSS가 담당합니다.

이미지는 파일 선택·대체 설명·표시 크기를 함께 설계한다

src와 alt는 서로 다른 실패를 대비한다

img는 웹 문서에 이미지를 넣는 인라인 요소입니다. src는 불러올 파일의 URL을 지정하고, alt는 이미지가 보이지 않거나 시각적으로 확인하기 어려울 때 전달할 대체 정보를 제공합니다. 이미지가 전달하는 정보가 ‘분기별 매출이 2분기에 최고점’이라는 사실이라면 alt="그래프"보다 그 핵심 관계를 설명하는 문장이 낫습니다.

장식용 무늬처럼 콘텐츠 의미가 없는 이미지는 alt=""로 두어 보조 기술의 읽기 흐름에서 제외합니다. 강의자료는 필요에 따라 aria-hidden="true"도 함께 쓸 수 있음을 보여 줍니다. 반대로 정보성 이미지를 빈 alt로 처리하면 사용자가 핵심 정보를 잃습니다.

<img
  src="images/enrollment-chart.webp"
  alt="신청 인원은 월요일 120명에서 수요일 180명으로 증가했다"
  loading="lazy">

사진은 WebP·AVIF 또는 필요에 따라 JPG, 아이콘과 로고는 SVG·PNG 같은 형식을 고려할 수 있습니다. 경로는 사이트 루트를 기준으로 하는 절대 경로와 현재 문서를 기준으로 하는 상대 경로를 구분해야 합니다. width·height와 테두리 같은 화면 표현은 강의의 원칙대로 CSS와 함께 관리하며, 반응형 이미지에는 보통 max-width: 100%와 height: auto를 사용해 원본 비율을 유지합니다. loading="lazy"는 이미지가 화면 가까이에 왔을 때 로딩하도록 지시해 초기 로딩 부담을 줄이는 데 활용합니다.

같은 장면의 크기 선택과 다른 장면의 선택을 구별하기

srcset은 같은 장면을 여러 해상도로 준비하고 각 파일의 원본 너비를 500w처럼 알려 줍니다. sizes는 미디어 조건에 따라 이미지가 화면에서 차지할 예상 너비를 브라우저에 전달합니다. 브라우저는 이 정보와 화면·픽셀 밀도를 종합해 적절한 후보를 고릅니다. sizes는 파일 선택의 힌트이지 레이아웃 자체를 만드는 CSS가 아닙니다.

<img
  srcset="campus-small.jpg 480w,
          campus-medium.jpg 960w,
          campus-large.jpg 1440w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         33vw"
  src="campus-medium.jpg"
  alt="잔디 광장에서 중앙도서관을 바라본 모습">

뷰포트가 560px이면 첫 조건이 맞으므로 표시 예정 너비는 약 560px입니다. 800px이면 둘째 조건이 맞아 약 400px, 1200px이면 앞의 두 조건이 모두 거짓이므로 약 396px이 됩니다. 이 계산은 브라우저가 후보를 고를 때 참고하는 표시 크기이며, 실제 화면 배치는 별도의 CSS 규칙과 함께 결정됩니다.

picture는 화면 조건이나 지원 파일 형식에 따라 아예 다른 파일을 제시할 때 사용합니다. 브라우저는 위에서부터 source를 검사해 조건이 맞는 첫 후보를 선택하고 나머지를 무시합니다. 맨 마지막 img는 일치하는 후보가 없거나 picture 처리를 지원하지 못하는 상황의 대체 경로이므로 빠뜨리지 않습니다.

<picture>
  <source media="(max-width: 640px)" srcset="campus-portrait.webp">
  <source srcset="campus-wide.webp" type="image/webp">
  <img src="campus-wide.jpg" alt="중앙도서관 앞 광장">
</picture>

선택 절차: 같은 장면의 해상도만 달라지면 srcset·sizes, 화면 조건에 따라 구도나 형식까지 달라지면 picture를 검토합니다. 어느 경우든 의미 있는 alt와 CSS 레이아웃을 별도로 확인합니다.

링크는 이동 목적과 사용자가 예상할 결과를 드러낸다

주소보다 먼저 목적을 분류하기

a 요소의 핵심은 href로 목적지를 연결하는 것입니다. 다른 페이지로 이동할 때는 URL, 같은 페이지의 특정 위치로 이동할 때는 #id, 이메일·전화·문자 앱을 열 때는 각각 mailto:, tel:, sms: 스킴을 사용합니다. “여기”나 “클릭”보다 “강의계획서 보기”처럼 목적을 설명하는 링크 텍스트를 쓰면 링크만 훑어도 결과를 예측할 수 있습니다.

<a href="#assignment-guide">과제 작성 안내로 이동</a>

<section id="assignment-guide">
  <h3>과제 작성 안내</h3>
  <p>제출 형식과 마감 시간을 확인합니다.</p>
</section>

다른 문서의 특정 위치라면 guide.html#assignment-guide처럼 문서 URL과 조각 식별자를 함께 씁니다. 목적지의 id가 존재하지 않거나 한 문서에서 중복되면 앵커 이동이 의도대로 작동하지 않습니다.

새 탭·다운로드·연락 링크의 조건

target="_blank"는 새 탭이나 창에서 열도록 지정합니다. 강의자료에서는 새 문서가 원래 창을 조작하거나 이전 주소 정보가 전달되는 위험을 줄이는 안전한 작성 습관으로 rel="noopener noreferrer"를 함께 지정합니다. 새 탭이 필요한 이유가 없다면 현재 창에서 이동하는 기본 동작도 선택지입니다.

<a href="https://www.knou.ac.kr"
   target="_blank"
   rel="noopener noreferrer">한국방송통신대학교 홈페이지 열기</a>

download는 연결한 자원을 열기보다 저장하도록 제안하며, 값으로 저장 파일명을 지정할 수도 있습니다. 다만 브라우저 보안 정책에 따라 같은 출처의 자원에서 주로 기대한 대로 동작합니다. PDF·오디오·압축 파일 링크에는 “ZIP, 25MB”처럼 형식과 크기를 텍스트에 알려 주면 사용자가 실행 결과를 예측하기 쉽습니다. 이메일과 전화 링크도 사용자 환경에 해당 앱이 있어야 하므로 동작이 달라질 수 있습니다.

잘못된 접근과 교정: href="javascript:..."로 동작을 넣으면 이동이라는 링크의 의미와 명령 실행이 섞여 보안·유지보수가 어려워집니다. 이동이 아니라 동작이라면 button을 쓰고 JavaScript 이벤트 처리를 분리합니다.

클릭 영역을 넓혀도 상호작용은 중첩하지 않는다

HTML5에서는 a 안에 이미지, 제목, 문단 같은 흐름 콘텐츠를 넣어 카드 전체를 링크로 만들 수 있습니다. 그러나 그 카드 안에 또 다른 a나 button을 넣으면 어느 동작을 실행해야 하는지 충돌하므로 피합니다. 하나의 이미지 좌표마다 링크를 거는 이미지맵은 고정 좌표가 반응형 크기 변화와 어긋나기 쉬워 사용을 지양하고, CSS와 JavaScript로 조절 가능한 구조를 우선합니다.

외부 문서를 삽입할 때는 가능 여부와 대체 정보를 확인한다

iframe은 현재 페이지 안에 지도, 영상, 결제창 등 다른 문서를 삽입하는 창입니다. 주소를 src에 쓴다고 모든 사이트가 표시되는 것은 아닙니다. 상대 사이트의 보안 정책이 삽입을 막을 수 있고, 외부 자원은 로딩 성능과 보안 경계를 추가합니다. 따라서 필요한 외부 기능에만 제한적으로 사용합니다.

<iframe
  src="https://example.com/embed/map"
  width="600"
  height="450"
  title="캠퍼스 위치 지도"
  loading="lazy"
  allowfullscreen>
</iframe>

title은 프레임 안의 내용을 직접 보지 못하는 사용자에게 삽입 문서의 목적을 알려 줍니다. width와 height는 표시 영역, loading="lazy"는 지연 로딩, allowfullscreen은 전체 화면 기능 허용과 관련됩니다. 테두리 제거 같은 표현은 인라인 속성보다 CSS로 관리합니다.

삽입 전 점검: 외부 문서가 실제로 임베드를 허용하는가 → 삽입이 꼭 필요한가 → 사용자가 내용을 알 수 있는 title이 있는가 → 크기와 지연 로딩을 고려했는가의 순서로 확인합니다.

행과 열의 관계가 있을 때만 테이블을 선택한다

표를 읽는 기준선을 만든다

table은 성적표나 게시판 목록처럼 행과 열의 교차점이 의미를 만드는 데이터를 표현합니다. 페이지의 좌우 배치를 맞추려고 테이블을 쓰면 데이터 관계가 없는 화면을 표로 잘못 전달하게 됩니다. 레이아웃은 CSS Flexbox나 Grid로 구성합니다.

caption은 표가 무엇을 나타내는지 요약하며 table 시작 태그 바로 뒤에 둡니다. tr은 행, th는 머리글 셀, td는 데이터 셀입니다. 머리글 셀의 scope="col"과 scope="row"는 각각 열과 행 가운데 어느 방향의 제목인지 밝힙니다.

<table>
  <caption>스터디별 발표 시간</caption>
  <thead>
    <tr>
      <th scope="col">스터디</th>
      <th scope="col">요일</th>
      <th scope="col">시간</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">웹 표준</th>
      <td>화요일</td>
      <td>19:00</td>
    </tr>
  </tbody>
</table>

표의 테두리, 셀 크기, 정렬은 CSS로 관리합니다. border 속성을 HTML에 직접 넣는 방식은 구조와 표현을 섞으므로 학습용 결과 확인을 넘어 실제 문서에서는 피합니다.

행 그룹과 열 그룹은 서로 다른 축을 설명한다

thead, tbody, tfoot은 행을 머리글·본문·바닥글 그룹으로 나눕니다. 작성 순서는 thead → tbody → tfoot이며, 이 요소만 추가한다고 표의 행과 열 수가 달라지지는 않습니다. 구조가 분명해져 보조 기술의 해석, 행 그룹별 스타일, 인쇄와 스크롤 처리에 도움이 됩니다.

colgroup과 col은 열 단위 스타일을 묶는 축입니다. caption이 있다면 그 뒤, 행 그룹보다 앞에 둡니다. col span="2"는 이어지는 두 열에 같은 열 그룹 설정을 적용합니다. 행의 의미 그룹은 thead 계열, 열의 반복 스타일 그룹은 colgroup이라는 차이를 기억합니다.

병합 숫자는 차지하는 셀 수로 검산한다

rowspan="n"은 현재 셀에서 아래 방향으로 n개 행의 자리를, colspan="n"은 오른쪽 방향으로 n개 열의 자리를 차지합니다. 둘 다 td나 th에만 사용합니다. 병합된 셀이 차지한 자리에는 별도의 셀을 다시 만들지 않아야 각 행의 논리적 열 수가 맞습니다.

예를 들어 3열 시간표에서 월요일 일정이 09시와 10시 두 행에 걸치면 첫 행의 월요일 셀에 rowspan="2"를 둡니다. 다음 행에는 시간과 화요일 셀만 작성해야 합니다. 점심 시간이 월요일·화요일 두 열을 함께 차지한다면 그 셀에 colspan="2"를 둡니다. 각 행이 최종적으로 ‘시간·월요일·화요일’ 세 칸을 채우는지 세어 보면 오류를 찾을 수 있습니다.

경계 사례: 병합이 많을수록 모바일 화면에서 표가 깨지고 유지보수가 어려워집니다. 병합을 최소화하고 표 영역에 가로 스크롤을 제공하거나, 데이터 관계가 복잡하면 모바일에서 카드형 구조로 다시 설계하는 편이 낫습니다.

코드를 작성한 뒤 의미·대체·조건·구조 순서로 점검한다

여러 요소가 섞인 화면에서는 태그 이름부터 떠올리기보다 다음 순서로 검사하면 빠뜨리는 조건이 줄어듭니다.

1. 의미: 항목 집합, 순서, 정의 관계, 이동, 표 데이터 중 무엇인지 말로 설명합니다.
2. 대체: 이미지와 삽입 문서를 보지 못해도 alt, 링크 텍스트, title로 목적을 알 수 있는지 확인합니다.
3. 조건: 새 탭의 rel, 다운로드의 출처, picture의 첫 일치 후보, 앵커의 실제 id처럼 동작 조건을 확인합니다.
4. 구조: 중첩 목록의 부모, 링크 안의 상호작용 중첩, 표의 행별 열 수와 머리글 범위를 검사합니다.
5. 표현: 마지막에 CSS로 불릿, 크기, 테두리, 정렬과 반응형 배치를 조절합니다.

짧은 자가 점검으로 다음 화면을 판단해 보세요. ‘강의 자료 카드 6개를 격자로 배치하고 각 카드 전체가 상세 페이지로 이동한다’면 카드 집합 자체는 반드시 표일 필요가 없습니다. CSS Grid로 배치하고 각 카드의 비상호작용 콘텐츠를 하나의 a로 감싸되, 카드 안에 별도 버튼이나 링크를 중첩하지 않는 설계가 자연스럽습니다.

오류를 찾는 질문: CSS를 모두 제거해도 정보 관계가 이해되는가? 이미지를 숨겨도 핵심 정보가 남는가? 링크 텍스트만 모아 읽어도 목적지를 예측할 수 있는가? 표의 한 셀을 읽을 때 어느 행·열 제목과 연결되는지 알 수 있는가?

핵심 개념 정리

• 반복 정보: 순서가 무의미하면 ul, 순서가 의미이면 ol, 용어·설명 관계이면 dl을 선택합니다.
• 이미지: src와 의미에 맞는 alt를 기본으로 하고, 같은 장면의 크기 후보는 srcset·sizes, 조건별 다른 장면은 picture로 다룹니다.
• 링크와 삽입: a는 이동 목적과 결과를 구체적으로 알리고, iframe은 허용 여부·접근성·성능을 확인해 제한적으로 씁니다.
• 표: 행과 열의 관계가 있는 데이터에만 table을 쓰고, caption, 머리글 범위, 행·열 그룹, 병합 후 셀 수를 점검합니다.

새로운 화면을 만나면 ‘정보 관계를 한 문장으로 설명 → 그 관계를 가진 HTML 요소 선택 → 보지 못하거나 조건이 달라질 때의 대체 경로 확인 → 중첩과 셀 수 검산 → CSS로 표현 조정’ 순서로 판단하세요. 이 순서를 따르면 태그 암기를 넘어 구조·접근성·반응형 동작을 함께 설계할 수 있습니다. 다음 차시의 미디어와 시맨틱 요소도 같은 원칙, 즉 콘텐츠 역할을 먼저 정하고 요소를 선택하는 흐름 위에서 이해할 수 있습니다.

예상문제 10선

1. 다음 중 목록 요소 선택이 콘텐츠 의미와 가장 잘 맞는 것은?

① 수행 순서가 중요한 설치 절차를 ul로 표현한다. ② 서로 관계없는 두 열을 맞추기 위해 dl을 사용한다. ③ 용어와 그 설명의 대응을 dl, dt, dd로 표현한다. ④ 불릿 없는 메뉴를 만들기 위해 목록 구조 대신 br만 사용한다.

정답입니다.

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

정답 및 해설 보기

정답: ③

• ① 오답: 순서가 바뀌면 결과가 달라지는 절차는 ol이 의미에 맞습니다.
• ② 오답: dl은 단순한 두 열 배치가 아니라 정의·설명 또는 키·값 관계에 사용합니다.
• ③ 정답: dt가 용어, dd가 설명을 맡아 대응 관계를 구조로 드러냅니다.
• ④ 오답: 불릿은 CSS로 숨길 수 있으며, br로 바꾸면 메뉴 항목의 집합이라는 의미가 사라집니다.

2. 다음 코드에서 목록 기호가 표시되는 순서로 옳은 것은?

<ol type="A" start="3">
  <li>첫 항목</li>
  <li value="6">둘째 항목</li>
  <li>셋째 항목</li>
</ol>

① C, F, G ② A, F, G ③ C, D, E ④ 3, 6, 7

정답입니다.

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

정답 및 해설 보기

정답: ①

• ① 정답: type="A"는 알파벳 대문자, start="3"은 C에서 시작하며 value="6"은 둘째 항목을 F로 재지정합니다.
• ② 오답: start="3"을 무시해 첫 기호를 A로 잘못 계산했습니다.
• ③ 오답: 둘째 항목의 value="6"이 이후 번호 흐름을 바꾼다는 점을 반영하지 않았습니다.
• ④ 오답: 숫자 값은 순번 계산에 쓰이지만 type="A"에 따라 화면에는 알파벳으로 표시됩니다.

3. 정보성 매출 그래프와 장식용 배경 무늬를 각각 넣을 때 가장 적절한 대체 텍스트 조합은?

① 그래프는 alt="이미지", 무늬는 alt="배경 이미지" ② 그래프와 무늬 모두 파일명을 alt에 쓴다. ③ 그래프와 무늬 모두 alt를 생략한다. ④ 그래프는 핵심 추세를 설명하고, 의미 없는 무늬는 alt=""로 둔다.

정답입니다.

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

정답 및 해설 보기

정답: ④

• ① 오답: ‘이미지’는 그래프가 전달하는 관계를 설명하지 못하고, 장식 무늬의 설명은 불필요한 읽기 부담을 만듭니다.
• ② 오답: 파일명은 이미지의 정보 목적을 사용자에게 설명하지 못합니다.
• ③ 오답: 정보성 그래프의 alt를 생략하면 이미지를 보지 못하는 사용자가 핵심 정보를 잃습니다.
• ④ 정답: 정보성 이미지는 의미를 대체하고, 장식용 이미지는 빈 대체 텍스트로 읽기 흐름에서 제외합니다.

4. picture 안에서 여러 source와 마지막 img를 브라우저가 처리하는 방식으로 옳은 것은?

① 모든 source를 내려받은 뒤 파일 크기가 가장 작은 것을 고른다. ② 위에서부터 조건을 검사해 처음 맞는 후보를 쓰고, img는 대체 경로가 된다. ③ 마지막 source가 앞의 조건과 관계없이 우선한다. ④ source가 하나라도 있으면 img는 작성할 수 없다.

정답입니다.

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

정답 및 해설 보기

정답: ②

• ① 오답: 선택은 선언 순서와 미디어·형식 조건을 따르며 모든 후보를 받은 뒤 크기만 비교하는 절차가 아닙니다.
• ② 정답: 첫 일치 후보에서 선택이 끝나므로 조건의 구체성과 선언 순서가 중요하고, 마지막 img가 최후의 대안을 제공합니다.
• ③ 오답: 마지막 후보 우선이 아니라 위에서 아래로 검사하는 첫 일치 우선입니다.
• ④ 오답: picture에는 대체 표시와 alt 제공을 위한 img가 필요합니다.

5. 다음 sizes에서 뷰포트 너비가 900px일 때 브라우저에 알려 주는 이미지 표시 예정 너비는 얼마인가?

sizes="(max-width: 600px) 100vw,
       (max-width: 1000px) 50vw,
       33vw"

① 297px ② 450px ③ 600px ④ 900px

정답입니다.

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

정답 및 해설 보기

정답: ②

• ① 오답: 900의 33%에 해당하지만, 900px에서는 앞선 max-width: 1000px 조건이 먼저 일치합니다.
• ② 정답: 둘째 조건의 50vw가 적용되어 900 × 0.5 = 450px로 계산합니다.
• ③ 오답: 600px은 첫 미디어 조건의 경계값이지 이 뷰포트에서의 표시 너비가 아닙니다.
• ④ 오답: 100vw는 첫 조건이 맞는 600px 이하에서만 선택되며 900px에서는 적용되지 않습니다.

6. 새 탭으로 외부 사이트를 여는 강의자료의 안전한 작성 원칙에 맞게 고친 코드는?

① <a target="_self">외부 자료</a> ② <a href="자료" target="_blank">클릭</a> ③ <a href="javascript:open()">외부 자료</a> ④ <a href="https://example.com" target="_blank" rel="noopener noreferrer">외부 자료 열기</a>

정답입니다.

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

정답 및 해설 보기

정답: ④

• ① 오답: 이동 주소인 href가 없고 _self는 현재 창을 뜻하므로 새 탭 요구와 맞지 않습니다.
• ② 오답: 외부 URL의 프로토콜과 새 탭 보완용 rel이 빠졌고 링크 텍스트도 목적이 모호합니다.
• ③ 오답: 링크 의미에 JavaScript 실행을 섞은 방식으로, 동작은 버튼과 이벤트 처리로 분리해야 합니다.
• ④ 정답: 전체 외부 URL, 새 탭 대상, 강의자료가 제시한 rel, 구체적인 링크 텍스트를 함께 갖췄습니다.

7. 같은 페이지의 ‘후기’ 영역으로 이동하는 링크를 만들기 위한 올바른 조합은?

① 링크에 href="#review", 목적지에 id="review"를 둔다. ② 링크와 목적지에 모두 href="review"를 둔다. ③ 링크에 target="review"만 두고 목적지는 수정하지 않는다. ④ 링크에 download="review", 목적지에 name="review"를 둔다.

정답입니다.

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

정답 및 해설 보기

정답: ①

• ① 정답: 조각 식별자 #review가 같은 값을 가진 목적지 id를 찾아 이동합니다.
• ② 오답: 목적지 요소에는 이동 주소가 아니라 고유 식별자인 id가 필요합니다.
• ③ 오답: target은 링크 결과를 표시할 창이나 문맥을 지정하며 페이지 내 위치를 식별하지 않습니다.
• ④ 오답: download는 자원 저장을 제안하는 속성으로 앵커 위치 이동과 목적이 다릅니다.

8. 표의 구조 요소에 대한 설명으로 옳은 것은?

① caption은 표의 마지막 데이터 행을 만든다. ② thead를 쓰면 브라우저가 자동으로 첫 행을 굵게 표시한다. ③ scope="col"은 해당 th가 열 머리글임을 밝힌다. ④ colgroup은 여러 행을 머리글·본문·바닥글로 나눈다.

정답입니다.

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

정답 및 해설 보기

정답: ③

• ① 오답: caption은 데이터 행이 아니라 표의 목적을 요약하는 제목입니다.
• ② 오답: thead의 본질은 행 그룹의 구조화이며 시각 표현 자체를 보장하는 장치가 아닙니다.
• ③ 정답: scope는 머리글이 어느 방향의 데이터와 연결되는지 보조 기술에 알려 줍니다.
• ④ 오답: 행 그룹은 thead, tbody, tfoot이 맡고 colgroup은 열 단위를 묶습니다.

9. 3열 표에서 첫 데이터 행의 둘째 셀이 rowspan="2"일 때, 바로 다음 행에 작성해야 할 실제 셀 수는?

① 2개 ② 3개 ③ 4개 ④ 6개

정답입니다.

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

정답 및 해설 보기

정답: ①

• ① 정답: 앞 행의 병합 셀이 다음 행의 한 자리를 이미 차지하므로 나머지 두 열에 해당하는 셀만 작성합니다.
• ② 오답: 세 셀을 모두 쓰면 병합 셀까지 합해 논리적으로 네 칸이 되어 3열 구조와 어긋납니다.
• ③ 오답: 병합을 추가 셀로 오해한 계산이며, 원래 열 수보다 한 칸 더 많습니다.
• ④ 오답: rowspan="2"의 숫자는 행 수이지 다음 행에서 셀 수를 두 배로 만드는 값이 아닙니다.

10. 모바일에서도 사용할 ‘학습자료 카드’ 화면을 설계하는 판단으로 가장 적절한 것은?

① 카드 정렬을 위해 의미와 관계없이 table과 복잡한 colspan을 사용한다. ② 카드 이미지를 클릭하게 하되 목적을 설명하는 텍스트와 alt는 생략한다. ③ 카드 전체를 a로 감싼 뒤 그 안에 별도 다운로드 a와 button을 중첩한다. ④ CSS로 카드를 배치하고, 카드 링크의 목적을 밝히며 상호작용 요소의 중첩을 피한다.

정답입니다.

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

정답 및 해설 보기

정답: ④

• ① 오답: 행·열 데이터 관계가 없는 카드 배치는 CSS가 담당하며 복잡한 셀 병합은 반응형 유지보수까지 어렵게 합니다.
• ② 오답: 이미지를 보지 못해도 링크 목적과 이미지 정보를 파악할 수 있도록 텍스트와 적절한 alt가 필요합니다.
• ③ 오답: 링크 안에 링크나 버튼을 중첩하면 클릭 동작과 키보드 탐색의 목적이 충돌합니다.
• ④ 정답: 의미 구조와 화면 배치를 분리하고, 예측 가능한 링크 정보와 유효한 상호작용 구조를 함께 확보합니다.

참고 자료와 작성 기준

이 글은 해당 차시 강의자료 전체를 바탕으로 학습 목적에 맞게 재구성한 비공식 학습자료입니다. 강의자료의 코드와 개념 범위를 확인한 뒤, 요소 선택 절차·직접 구성한 예제·오류 교정·선택지별 해설을 학습자의 이해 순서에 맞게 새로 구성했습니다.

• 작성·편집: 올에이클래스 학습연구팀
• 주요 근거: 한국방송통신대학교 HTML5웹프로그래밍 2강 「HTML 표현: 리스트, 이미지, 하이퍼링크, 테이블」 강의자료 :codex-file-citation{path="K1. 컴퓨터과학과/1. 재검토필요/2-1 HTML5웹프로그래밍/1. 강의록/HTML5웹프로그래밍_02_강의록.pdf" purpose="source"}
• 보충 자료: 외부 자료를 사용하지 않았으며, 강의자료의 설명 범위 안에서 예제와 판단 절차를 재구성했습니다.
• 편집 원칙: 올에이클래스 편집 정책
• 최종 내용 검토: 2026-09-05