Web Front 3: HTML 표 · 미디어 · 영역 태그

표(Table)는 웹 문서에서 자료를 행과 열로 정리할 때 사용

• 행(row) 과 열(column) 로 구성되며, 둘이 만나는 지점을 셀(cell) 

함수 목록

태그 설명 비고

<table>

표 전체 영역

border 속성으로 테두리

<tr>

한 행(table row)

가로 한 줄

<th>

제목 셀(table header)

굵게 + 가운데 정렬

<td>

일반 셀(table data)

실제 데이터

<caption>

표 제목

table 바로 안에 작성

 

💡 표의 구조 이해하기table(전체) → tr(행) → 그 안에 th/td(셀) 순으로 중첩
셀(th/td)은 반드시 행(tr) 안에 들어가야 한다!

---

표 : 셀 병합 (colspan / rowspan)

셀 태그(th, td)의 속성으로 여러 칸을 하나로 합칠 수 있다

함수 목록

속성 설명 예시

속성	설명	예시
colspan="n"	n개의 열을 가로로 병합	colspan="2"
rowspan="n"	n개의 행을 세로로 병합	rowspan="2"

예제

⚠️ 병합한 만큼 셀을 빼야 한다.

colspan="2"로 두 칸을 합쳤다면 그 행에서는td를 하나 적게 작성해야 칸 수가 맞다.

\rowspan으로 아래 행까지 자리를 차지한 경우, 아래 행에서는 그 칸을 생략한다.

 

 

표 : 구조화 태그 (thead / tbody)

표의 제목 영역과 본문 영역을 구분해 구조를 명확히 하는 것이 중요

💡 thead/tbody는 화면상 큰 차이가 없어 보여도, 문서 구조를 명확히 하고 스타일·정렬·접근성에 도움을 줌.

---

미디어 관련 태그 : 이미지 (img)

이미지를 화면에 삽입하는 태그입니다. 단독 태그

 

함수 목록

 

속성	설명
src	불러올 이미지의 경로 (필수)
alt	이미지를 못 불러올 때 표시할 대체 텍스트
width	가로 길이 (px 또는 %)
height	세로 길이 (px 또는 %)

 

 

width / height 단위

단위	특징
px (고정)	화면 크기와 상관없이 이미지 크기 고정
% (가변)	부모 요소/화면 크기에 따라 이미지 크기가 변함

💡 alt 속성을 꼭 작성

• 경로가 틀리거나 이미지를 못 불러올 때 대체 텍스트로 표시됩
• 시각장애인용 스크린리더가 이미지를 읽어주는 설명문이 된다. (접근성·SEO에 중요)

 

 

영역 관련 태그 : div vs span

div와 span은 영역을 묶는 용도의 태그로, 두 가지 큰 차이가 있다.

 

함수 목록

태그 분류 줄바꿈 영역 지정 방식

태그	분류	줄바꿈	영역 지정 방식
<div>	블럭 요소	발생함 (다음 줄로)	사각형 박스로 영역 차지
<span>	인라인 요소	발생 안 함 (옆으로)	내용(content) 크기만큼만 차지

 

 

iframe

웹 문서 안에 다른 웹페이지를 삽입하는 태그 (인라인 요소)

속성	설명
src	삽입할 페이지/영상의 경로
width / height	표시 영역 크기
frameborder	테두리 (0이면 없음)

💡 유튜브 영상은 유튜브의 공유 → 퍼가기(Embed) 에서 제공하는iframe코드를 그대로 붙여 넣으면 된다.