[HTML] ul, li, table

<audio> <video>

• 오디오, 비디오 기능
• <audio src=”파일경로”></audio>
• <video src=”파일경로”><video>
  • controls : 재생막대 표시
  • autoplay : 자동재생기능
  • loop : 반복 재생
  • muted : 오디오, 비디오 소리를 제거
  • preload : 페이지를 새로고침할때 어떻게 오디오 등을 로딩시킬 것인지.
    • 기본적으로 preload = “auto”가 사용됨
    • auto, metadata, none
  • width(높이), height(가로)
  • poster = ”파일이름” : 비디오를 재생하기 전에 표시할 썸네일 이미지

 

 

목록을 만드는 태그

 

<ul> + <li>

• 순서 없는 목록을 만들 때 사용
• 내용 앞에 작은 원/사각형 등의 불릿이 붙음
• <ui><li>내용</li><li>내용2</li> ...<ui>
• <ul style ="list-style-type:">
  • <ul style ="list-style-type: circle">  : 빈 동그라미
  • <ul style ="list-style-type: square">  : 채워진 네모

 

<ol> + <li>

• 순서가 필요한 목록 (숫자 등)
• <ol><li>내용</li><li>내용2</li> ...</ol>
• 아래 속성에 따라 다르게 표현될 수 있다. <ol>

1. type 속성 - 1,2.. 등 숫자가 항목 앞에 기본으로 붙음
   
   1. a, 1, A, I(로마표기법) 등등 하면됨
   2. <ol type="A"> 이런식으로 하면 됨
2. start 속성 - 기본적으로 1부터 시작하나, 중간 번호부터 시작할 수 있다.
3. reversed 속성 - 항목을 역순으로 표시 (항목이 3개면 첫숫자가 3이 됨)

• 여러 항목이 쭈루룩 나올때는, </li> 태그 생략이 가능. <ol><li>내용<li>내용2 ...</ol>

<ul>
		<li>1일차
			<ol type="a">
			<li>해녀박물관
			<li>낚시체험
			</ol>
		</li>
		<li>2일차
			<ol type="a" start="3">
				<li>용눈이오름
				<li>만장굴
				<li>카약체험
			</ol>
		</li>
	</ul>

 

<dl> <dt> <dd>

• 들여쓰기 되는것
• <dl> : 설명 목록을 만들 태그
• <dt>제목</dt>  //앞에 나오는거
• <dd>내용</dd>  //들여쓰기 되는것

	<h1>제주 올레</h1>
	<dl>
		<dt>올레 1코스</dt>
			<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
			<dd>거리 : 14.6km(4~5시간)</dd>
			<dd>난이도 : 중</dd>
		<dt>올레 2코스</dt>
			<dd>코스 : 광치기 해변 - 온평 포구</dd>
			<dd>거리 : 14.5km(4~5시간)</dd>
			<dd>난이도 : 중</dd>
	</dl>

 

 

 

표를 만드는 태그

<table><tr><td><th>

• <caption>표 설명내용</caption>  //표 맨 위 중앙에 표시됨
  • <figcaption> : 바로 위에 왼쪽정렬로 제목이 표시됨
• <tr></tr> : 표 내용이 들어갈 곳( 구분= 세로)
  • <td>내용</td>
  • <th>내용</th> : 텍스트 굵게

 

<thead><tbody><tfoot>

• 머리말, 본문, 바닥을 표시하는 태그
• 반드시 적지 않아도 됨(영향력x)
• 코드에 입력할 때, tfoot을 위에 적어도 아래에 위치하게 됨. (이런 부분에선 영향력이 있다)

 

<colspan> <rowspan>

• 행(가로)이나 열(세로)을 합친 것을 넣을 때 사용
• <td colspan="합칠 행의 개수"></td>
• <th colspan="합칠 행의 개수"></th>
• <td rowspan="합칠 열의 개수"></td>
• <th rowspan="합칠 열의 개수"></th>

 

<figcaption>

• 바로 위에 왼쪽정렬로 제목이 표시됨