[HTML5] HTML/CSS 3일차

HTML / CSS

✔ Preview

테이블태그, iframe 활용

 

---

✍ Tag Summary

Table

: <table> 태그는 페이지의 정보를 행과 열로 구성된 테이블의 형태로 보여주는 태그이다. <table> 태그 내에 <caption>이나 <td>, <th> 등의 태그를 이용해 정보를 표현한다.

 

Table Row (tr)

: <tr> 태그는 테이블의 행을 의미하며 <td>, <th>와 함께 사용된다.

Table Data (td)

: <td> 태그는 테이블의 일반 셀을 의미하며 기본적으로 왼쪽 정렬이 된 채로 보여진다.

Table Header (th)

: <th> 태그는 테이블의 제목 셀을 의미하며 기본적으로 글자가 굵게(bold) 처리되고 가운데 정렬이 된 채로 보여진다.

* colspan: 열 병합 / rowspan: 행 병합

 

<table>
	<tr><td>1행 1열의 데이터를 넣어주세요</td><td>1행 2열의 데이터를 넣어주세요</td></tr> <!-- 1행(2열) -->
	<tr><td>2행 1열의 데이터를 넣어주세요</td><td>2행 2열의 데이터를 넣어주세요</td></tr> <!-- 2행(2열) -->
</table>

 

 

Inline Frame (iframe)

: <iframe> 태그는 웹페이지 안에 새로운 웹페이지를 삽입할 수 있게 하는 태그이며 보여줄 웹페이지의 src를 반드시 명시해주어야 한다.

* <a> 태그와 target 속성을 활용해 웹페이지 내의 리스트를 클릭하면 iframe에 해당하는 페이지를 보여주게 만들 수 있다.

<iframe name="ifr_naver" src="https://www.naver.com" width="80% height="500"></iframe>

<ul>
	<li><a href="https://www.daum.net" target="ifr_naver">다음 홈페이지</a></li>
	<li><a href="https://www.google.com" target=ifr_naver>구글 홈페이지</a></li>
</ul>