방송통신대 HTML5 웹 프로그래밍 :: 2강. HTML 요소: 리스트, 그림, 하이퍼링크, 테이블 기말시험 예상기출문제(정답및 해설)

 HTML 표현: 리스트, 이미지, 하이퍼링크, 테이블의 핵심 내용을 요약하고, 이를 바탕으로 한 기출문제 5개와 정답 및 해설을 작성해 드립니다.

 

반응형

 

방송통신대 HTML5

 

HTML5 공부하는데 도움이 되길 바라며 자료 올립니다.

 

 

 

 

 

1. 중요한 핵심 내용 요약

① 리스트(List) 표현 

• 순서 없는 리스트 (<ul>): 항목의 순서가 상관없는 단순 나열 시 사용하며, 각 항목은 <li> 태그로 감싸줍니다. 기본 불릿은 채워진 원(disc) 모양입니다.
• 순서 있는 리스트 (<ol>): 절차, 규칙, 순위 등 순서가 중요한 목록을 표현할 때 사용하며, 각 항목은 <li> 태그로 감싸줍니다. 기본 기호는 숫자(1, 2, 3...)이며, type 속성을 통해 영문자나 로마자 등으로 변경할 수 있습니다.
• 정의 리스트 (<dl>): 용어와 그에 대한 정의/설명을 쌍으로 표현할 때 사용합니다. 용어 제목은 <dt>, 상세 설명은 <dd> 태그를 사용하며, 하나의 <dt>에 여러 <dd>가 올 수도 있습니다.
• 실무 원칙: 리스트 구조는 메뉴, 내비게이션 바 등의 웹 UI 기반으로 매우 자주 활용됩니다. 기호나 불릿을 없애거나 바꾸는 등의 시각적 모양 제어는 HTML 속성이 아닌 CSS를 사용해야 합니다.

 

② 이미지(Image) 표현

• <img> 태그: 문서에 이미지를 삽입하는 대표적인 인라인 빈 요소(내용물과 닫는 태그가 없음)입니다.
• 핵심 속성:
  • src: 이미지 파일의 경로(URL)를 지정하는 필수 속성입니다.
  • alt: 이미지를 표시할 수 없거나 시각장애인이 스크린 리더를 사용할 때 읽어주는 대체 텍스트입니다. 웹 접근성을 위해 반드시 작성해야 합니다.
  • width / height: 이미지의 너비와 높이를 지정합니다. (단위 없이 숫자만 쓰면 픽셀(px) 단위로 인식).

 

③ 하이퍼링크(Hyperlink) 표현

• <a> 태그: 다른 웹 페이지, 파일, 이메일 주소, 혹은 동일 페이지 내의 특정 위치(앵커)로 연결하는 인라인 요소입니다.
• 핵심 속성:
  • href: 연결할 대상의 경로(URL 또는 식별자)를 지정하는 필수 속성입니다.
  • target: 링크가 열릴 위치를 지정합니다. 기본값은 현재 창에서 열리는 _self이며, 새 탭/새 창에서 열려면 _blank를 사용합니다.
• 페이지 내부 링크(앵커): 이동하고 싶은 대상 요소에 id="target" 속성을 부여하고, <a> 태그의 href="#target"과 같이 # 뒤에 id 값을 지정하면 해당 위치로 바로 스크롤이 이동합니다.

728x90

 

④ 테이블(Table) 표현

• 기본 구조: 표를 생성하는 <table>, 행(Row)을 나타내는 <tr>, 제목 셀을 나타내는 <th> (굵은 글씨, 가운데 정렬), 일반 데이터 셀을 나타내는 <td>로 구성됩니다.
• 구조적 그룹화: 표가 복잡하고 길어질 때 의미적으로 구별하기 위해 사용합니다.
  • <caption>: 표의 제목이나 설명을 지정하며, <table> 태그 바로 다음에 위치해야 합니다.
  • <thead>, <tbody>, <tfoot>: 각각 표의 헤더, 본문, 푸터 영역을 논리적으로 그룹화합니다.
• 셀 병합 속성: <td>나 <th> 태그에 적용합니다.
  • colspan="n": 가로 방향(열)으로 n개의 셀을 합칩니다.
  • rowspan="n": 세로 방향(행)으로 n개의 셀을 합칩니다.
• <colgroup>: 열(세로축) 단위로 스타일을 한 번에 지정하고자 할 때 사용하며, 내부에서 <col span="개수"> 형태로 활용하여 유지보수성을 높입니다.

 

2. 기출문제 5개 (정답 및 해설 포함)

1. 다음 중 HTML 리스트 태그의 사용법으로 올바르지 않은 것은?

① <ul>과 <ol> 태그의 직계 자식 태그로는 반드시 <li> 태그만 올 수 있다.

② <ol> 태그의 type 속성을 사용하면 숫자가 아닌 로마자나 알파벳 순서로 기호를 변경할 수 있다.

③ <dl> 태그 내부에서 용어의 제목은 <dt>로, 용어의 설명은 <dd>로 표현한다.

④ 리스트 항목 앞의 불릿(Bullet) 모양을 사각형으로 바꾸기 위해 <ul> 태그에 직접 시각적 속성을 지정하는 것이 실무에서 강하게 권장된다.

 

정답: ④ 해설: "HTML은 의미 구조를 담당하고 모양은 CSS로 제어한다"는 기본 원칙에 따라, 리스트 불릿의 모양을 바꾸거나 없애는 등의 시각적인 제어는 HTML 속성이 아닌 CSS(list-style-type 등)를 통해 처리해야 합니다.

2. 다음 <img> 태그의 활용에 대한 설명 중 웹 접근성(Web Accessibility) 측면에서 가장 중요한 속성은 무엇인가?

HTML

 

<img src="images/logo.png" alt="회사 로고" width="200">

 

① src

② alt

③ width

④ png

 

정답: ② 해설: alt 속성은 대체 텍스트(Alternate Text)를 의미합니다. 네트워크 오류나 경로 잘못으로 이미지가 엑박(출력 실패)이 뜨거나, 시각장애인이 스크린 리더(화면 낭독기)를 통해 웹 페이지를 이용할 때 이미지 대신 읽어주는 텍스트이므로 웹 접근성 준수를 위해 필수적인 속성입니다.

 

300x250

 

3. 새 창이나 새 탭을 열어서 링크된 외부 웹 페이지를 표시하고자 할 때, <a> 태그의 target 속성에 적용해야 하는 속성값은?

① _self

② _parent

③ _top

④ _blank

                                                                                                                                                                                                                                                                       

정답: ④ 해설: target 속성의 기본값은 현재 창에서 링크가 열리는 _self입니다. 사용자가 보고 있는 현재 창을 유지한 채 새 창이나 새 탭에서 링크를 열기 위해서는 _blank를 사용해야 합니다.

 

4. 다음 HTML 표(Table) 코드에서 (가)와 (나)에 들어갈 속성명이 바르게 짝지어진 것은?

HTML

 

<table border="1">
  <tr>
    <td (가)="2">1번과 2번 열을 가로로 합침</td>
  </tr>
  <tr>
    <td (나)="3">1, 2, 3번 행을 세로로 합침</td>
  </tr>
</table>

 

① (가) colspan , (나) rowspan

② (가) rowspan , (나) colspan ④

(가) colgroup , (나) rowgroup ③

(가) width , (나) height

 

정답: ① 해설: 가로 방향(열, Column)으로 셀을 병합할 때는 colspan 속성을 사용하고, 세로 방향(행, Row)으로 셀을 병합할 때는 rowspan 속성을 사용합니다.

 

5. 복잡한 구조의 HTML 표(Table)를 작성할 때, 표의 구조를 논리적으로 명확하게 구분하기 위해 사용하는 태그 그룹이 아닌 것은?

① <caption>

② <thead>

③ <tbody>

④ <colrow>

 

정답: ④ 해설: 표의 구조화 및 그룹화를 위해 표의 제목을 나타내는 <caption>, 상단 헤더 영역인 <thead>, 중간 본문 영역인 <tbody>, 하단 요약/푸터 영역인 <tfoot> 등의 태그를 사용합니다. <colrow>라는 태그는 존재하지 않으며, 열 단위 스타일 지정을 위해서는 <colgroup>과 <col>을 사용합니다.

 

 

코딩 자율학습 HTML + CSS + 자바스크립트:기초부터 반응형 웹까지 초보자를 위한 웹 개발 입문서 -

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."