[HTML] HTML PART.4(테이블 , 이미지, 음악파일, 동영상)

1) 테이블 생성 태그

 

<table border = "?" > </table>숫자에 맞춰서 밖의 테두리의 두깨가 결정 됩니다.

<tr></tr> = 행

<td></td> = 열

 

2) 테이블의 속성

 

border = "?" :  테두리 선 두깨

alian = "center" : 글자 가운데 맞춤

bgcolor = "color" : 배경 색

bordercolor = "color" : 테두리 색

cellpadding =  " " : 칸 안쪽 여벡

cellspacing =  " " : 칸과 칸 사이의 여백

 

 

 

 

3) 열 합치기

 

- 위의 테이블에 1행 1열과 1행 2열을 합쳐보도록 하겠습니다.

 

 

첫번째 열에는 <td colspan = "2"> 합치고 싶은 개수를 적고, 뒤에 있는 합쳐지는 열은 주석 처리해줍니다.

- colspan 의 속성을 이용해서 열을 합칠 수 있습니다.

 

 

4) 행 합치기

 

열을 합치는 것과 같은 방법으로 rowspan의 속성을 이용해서 행을 합칠 수 있습니다.

 

- 셀을 합치는 태그는 지원해주만 나누는 태그는 따로 지원해주지 않습니다. 그렇기 때문에 테이블을 확장하는 방법으로 대체해줍니다.

 

5) 테이블 확장 태그

 

 

 

테이블 안에 테이블을 추가적으로 넣는 방법으로 테이블을 확장 시켜서 나뉠 수 있도록 만들어줍니다.

 

6) 이미지 출력 태그

 

<img alt = " " 폴더 이름 / 파일이름 " >

단일 태그 : 영향을 미치는 길이 지정되어 있기 때문에 시작과 끝의 구분이 의미가 없어집니다.

(br : 줄바꿈 , hr : 수평선 , img : 이미지 태그)

 

src : 이미지의 경로 지정.

width : 이미지의 너비 지정.

height : 이미징의 높이 지정.

alt : 이미지가 없을 경우 나오는 글자 지정.

 

 

6-1) 네이버 소스를 가져와서 이미지 출력

 

 

 

<img src = "링크 주소” > 도메인을 넣어주면 해당 이미지를 그대로 출력합니다.  

단, 해당 사이트에서 사진을 변경하게 되면 나타나지 않게 됩니다.

 

 

7) 음악 파일 재생 태그

 

<audio src = "파일 이름"> </audio>

 

 controls = 음악 파일 형태 생성

loop = 반복 (loop : 무한 반복)

autoplay = 자동 재생

 

 

8) 동영상 재생 태그

 

<video src = "./ 폴더 이름 / 파일 이름"> </video>