[HTML 정리] 목록태그, 표(테이블), 미디어 삽입 태그

 

목록 태그

 

<ol></ol> : 순서있는 목록으로 기본으로 1. 2. 3. 이 붙는다 (li 태그와 함께 사용)

 

type = “1”	숫자 (기본값)
type = “a”	영문 소문자
type = “A”	영문 대문자
type = “i”	로마 숫자 소문자
type = “I”	로마 숫자 대문자

 

start 속성을 지정하여 몇번부터 시작할지 지정할 수 있다

 

<ul></ul> : 순서없는 목록으로 기본으로 불릿이 붙는다 (li 태그와 함께 사용)

<dl></dl> : 설명 목록으로 <dt>에 이름 / <dd> 설명을 입력한다

 

 

 

표(테이블)

 

<table></table> : 표를 만든다 (틀)

 

<caption> : 표의 제목 (생략 가능)

 

<tr></tr> : 하나의 행

<td></td> : 하나의 셀 (tr 태그 안에 넣어 사용)

(rowspan, colspan 속성을 넣어 셀 합치기가 가능)

 

<th></th> : 열 제목 (bold 텍스트로 보임)

 

영역을 지정하는 태그

<thead></thead> : 표에서의 열 제목

<tbody></tbody> : 표의 본문

<tfoot></tfoot> : 표의 요약

 

 

특정 열에 스타일 속성을 지정하고 싶다면

 

<colgroup></colgroup> : <col> 태그 여러개 묶을 시

<col> : 열 1개만 지정

(위의 태그는 caption 태그 바로 뒤에 써야 함)

 

<table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
        <col style="background-color: pink;">
        <col> <!-- 설정이 없어도 해주기 -->
        <col style="width: 150px;">
        <col style="width: 150px;">
        <!--  <col span ="2" style="width: 150px;"> : 위의 2개 동시에 -->
        </colgroup>
...

 

 

 

이미지 삽입

 

<img src = “이미지 파일 경로” alt = “대체용 텍스트”>

 

width(너비), height(높이) 속성으로 사이즈를 조정할 수 있다 (%, px)

 

 

 

오디오, 비디오 삽입

 

<object data="파일 경로" type="파일 타입"></object>

<embed src="파일 경로" type="파일 타입">

 

<audio src="파일 경로"></audio>

<video src="파일 경로"></video>

 

(controls 속성을 넣어야 플레이어가 표시된다)

 

autoplay	자동 재생
loop	재생 끝나고 자동으로 처음부터 재생
muted	오디오, 비디오 소리 제거
preload	페이지를 불러올 때 파일 로딩 방법 선택 (auto, metadata, none)
poster = “파일 이름”	비디오 썸네일 설정 (이미지)

 

 

 

하이퍼링크 설정

 

<a href = “링크 주소”>텍스트 또는 이미지</a>

(이미지로 설정하고 싶으면 img 태그를 이용하자)

 

target = “_blank” 속성을 부여하면 새로운 페이지에서 열린다

 

 

 

 

 

 

-Doit! HTML+CSS+자바스크립트 웹표준의 정석 책으로 공부하였습니다