[HTML] 표 및 이미지 표시하기

표를 구성하는 여러가지 태그

<table> : 표 전체를 감싸는 블록
<tr> : 표 안에서 행을 의미하는 행 태그
<td> : 행 안에서 하나의 셀(열)을 담당하는 셀 태그

<th> : 셀인데, 강조하고 싶은 셀. 두꺼워지고 가운데 정렬

<caption> : 테이블에 자막/제목/설명 등을 넣고 싶을 때 사용

표를 만들 때 사용하는 속성

colspan : 열 합치기
rowspan : 행 합치기

=> 셀을 합쳐서 표의 형태를 변형하기 위한 속성들. 둘 다 숫자를 값으로 지정해준다.

 

 

 

 

연습문제

 

이미지 표시하기

-이미지 표시를 위해서는 반드시 원본 소스가 있어야 한다.
-이미지 표시 태그인 <img> 라는 태그에 원본 소스를 지정해주는 방식으로 표시한다.
-<img> 태그는 사진 표시하는 특수한 기능을 수행하므로 닫는 태그가 필요하지 않다.

<img> 의 속성

-src : 여기에 원본 소스를 지정한다.
-alt : 이미지에 대한 대체 텍스트를 삽입한다.
-width : 너비에 대한 픽셀 값
-height : 높이에 대한 픽셀 값

src 지정 시에 파일 위치에 따른 변화

- 기본사항1 : src에는 원본파일의 위치정보와 파일명이 들어가야한다.
- 기본사항2 : html 문서와 원본파일이 같은 위치에 있으면 위치 정보를 생략할 수 있다.

- 위치 변경 사례 1. 같은 위치에 있을 때 
 ./ 기호 또는 아무것도 안쓰기 후 파일명 적으면 된다.
 . 의 의미 : 동일한 위치
 / 의미 : 그안에 있다 라는 의미
 => ./는 생략 가능하다
 
 -위치 변경 사례 2. 하위 폴더에 있을때
 
 하위폴더명/파일명
 하위폴더명/그안에있는하위폴더명/.../.../...
 
 -위치 변경 사례 3. 상위폴더에 있을때
 ..기호사용
 .. 의미 : 폴더 한칸 위로
 
 - 위치 변경 사례 4. 영 딴 곳에 있을 떄
 위치에 대한 절대값을 싹 적어주면 된다.
 

 

 

 

이미지 표시용 최신 태그

-이미지용 자막과 함께 이미지 표시하기: <figure>, <figcaption>
<figure>가 <img>와 <figcaption>을 묶는 역할을 하여, 자막이 있는 이미지를 표시할 수가 있다.