2_html_(각종 태그들)
표관련태그
<tr> : 한 개의 행(row)를 만드는 태그
<td> : 한 개의 열(col)를 만드는 태그
<th> : 열에 대한 제목을 표시하는 태그 가운데 정렬 및 굵은 글씨로 표시됨
<caption> : 테이블의 제목이나 내용을 추가하는 태그
<figure><figcaption> : 테이블의 설명 혹은 이미지설명태그
@ 표의 행과 열 병합 @
colspoan 속성 : 열 병합
rowspan 속성 : 행 병합
* td, th 태그에만 사용 가능한 속성
영역관련태그
<p>, <pre> : 문단 영역을 지정하는 태그
<div> 는 <p>, <pre>와 같은 영역 지정 성질을 가지고 있음
-> block 형식
@ div 태그와 span 태그의 차이점 1 : 줄바꿈
-div태그
div태그 작성 시 새로 생성된 div태그의 영역은 이미 존재하는 태그 다음줄에 영역이 설정된다
(block 형식 : 공간을 수직으로 분할)
+ block 형식의 태그는 width, height 속성 사용 가능
-span태그
span태그는 작성 시 줄바꿈이 일어나지 않고 옆으로 영역이 이어서 설정됨
(inline 형식 : 공간을 수평으로 분할)
+ inline형식은 width, height 속성 사용 불가
@ div 태그와 span 태그의 차이점 2 : 영역지정방식
-div태그 : 사각형 박스로 영역을 지정
-span태그 : 내부 내용(Content)만 영역으로 지정
@iframe태그
웹 문서 안에 다른 웹문서를 추가하는 태그(inline형식)
이미지관련태그
<img> : 웹 페이지에 사진이나 그림을 삽입할 때 사용되는 태그
*img태그는 inline형식
@img태그 속성
- src : 삽입할 이미지 경로 지정 속성
- alt : 이미지의 경로가 잘못되거나, 이미지를 제대로 사용할 수 없는 경우 대체 텍스트를 표시하는 용도로 사용
+ 시각 장애인을 위한 ScreenReader에서 이미지를 대체하여 낭독해주는 텍스트를 작성
- width/height : 태그의 크기를 지정하는 속성
고정된 크기의 단위(px) 및 가변크기단위(%등)
미디어 관련 태그
@ 오디오 관련 태그
<audio>
속성
- src : 경로
- controls : 재생도구 출력 지정
- autoplay : 자동 재생 여부 지정(모바일 적용 X)
- loop : 반복 여부 지정
- preload : 미리 로드할지 여부 지정
@ 비디오 관련 태그
<video>
속성
- src : 경로
- controls : 재생도구 출력 지정
- autoplay : 자동 재생 여부 지정(모바일 적용 X)
- loop : 반복 여부 지정
- preload : 미리 로드할지 여부 지정
- width / height : 크기 지정
- poster : 재생 전 출력할 이미지 지정(경로)
하이퍼 링크 관련 태그
하이퍼링크 기능은 웹 문서가 다른 문서와 구분되는 가장 핵심적인 기능
클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 해줌
텍스트 또는 이미지를 클릭하여 이동하는 방법
+ 페이지 내 이동도 가능 (id="~~") (a href="#~~")
@ 새로운 페이지로 열기 옵션
target="_blank" 기본옵션은 : target="_self"