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>
'web > HTML' 카테고리의 다른 글
[HTML] HTML PART.6(inline/block, 레이아웃 , 시멘틱 구조) (0) | 2020.06.20 |
---|---|
[HTML] HTML PART.5(입력 양식 태그 타입 , 레이블) (0) | 2020.06.17 |
[HTML] HTML PART.3(글자 효과 , 목록 만들기) (0) | 2020.06.15 |
[HTML] HTML PART.2(앵커 태크, 글자 꾸미기) (0) | 2020.06.15 |
[HTML] HTML PART.1(주석문, 제목,글자 조정) (0) | 2020.06.09 |