<HTML> Unit 3. HTML 기본 태그

이채현·2022년 11월 8일

전부 다 <body> 태그 안에 입력!

1) 글자 태그

1. 제목 글자

<h1>, <h2>, <h3>, <h4>, <h5>,<h6>

h는 Heading을 의미
h1 ~ h6 순서대로 첫 번째부터 여섯 번째까지 큰 제목 글자 생성. (숫자가 작을 수록 제목도 큼.)

[예시]

  <body>
    <h1>제목 글자</h1>
    <h2>제목 글자</h2>
    <h3>제목 글자</h3>
    <h4>제목 글자</h4>
    <h5>제목 글자</h5>
    <h6>제목 글자</h6>

2.본문 글자

<p> : 본문 문단 생성 (paragraph)
- 한 줄 띄어쓰기 자동 생성.
<br>: 줄 바꿈 (break)
<hr>: 수평 줄 삽입 (horizontal rule)

3.하이퍼링크

<a>: 다른 웹 페이지 or 웹 페이지 내부의 특정 위치로 이동. (anchor)
- href 속성 (hyper reference)
  
  <다른 웹 페이지로 이동>
  <a href="URL 주소">출력 글자</a>
  
  [예시]
```
<a href="http://hanbit.co.kr">한빛미디어</a>
```
  <웹 페이지 내부에 연결하기>
  1. 연결하고자 하는 태그에 id속성 입력.
  2. <a>태그의 href속성에 "#id 속성" 입력.
  [예시]
```
<body>
  <a href="#alpha">Alpha 부분</a>
  <h1 id="alpha">Alpha</a>
```
```
      
```
- 다양한 경로
  
  1) 절대 경로
  : 링크의 전체 경로 (전부 다 기입)
```
http://naver.com 
```
  2) 상대 경로
  : 같은 프로젝트 폴더 내의 경로
  - 현재 문서와 동일한 위치
```
animal.jpg
```
  - 현재 문서를 기준으로 하위 폴더
    
    [표기]: 슬래시 기호(/)
```
image/animal.jpg
```
  - 현재 문서를 기준으로 상위 폴더
    
    [표기]: 마침표 2개(..)+슬래시 기호(/)
```
../animal.jpg
```
  3) 아이디 경로
  : 같은 문서 내의 경로
  
  #name -> id 속성이 name인 태그의 위치로 이동.
  
  [예시]
```
<body>
  <a href="#name">Alpha 부분</a>
  <h1 id="name">Alpha</a>
```

4.글자 모양 태그

<b>: 굵은 글자 (bold)
<i>: 기울어진 글자 (italic)
<small>: 작은 글자
<sub>: 아래 첨자 (subscript)
<sup>: 위 첨자 (superscript)
<ins>: 밑줄 글자 (insert)
<del>: 취소선이 그어진 글자 (delete)

※ 단, 글자 모양 태그 내부에 제목 글자 태그 <h1~h6>와 본문 글자 태그 <p>, <br>, <hr>를 넣을 수 X.

   <i>
     <h1>웹 표준 위반</h1>
     <p>웹 표준 위반</p>
   </i>

2) 목록 태그

: 내비게이션 메뉴를 만들기 위해 사용되는 태그.

※ 내비게이션 메뉴란?
: 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼.

• <ul> : 순서가 없는 목록 생성. (unordered list)

• <ol>: 순서가 있는 목록 생성. (ordered list)

• <li>: 목록 요소 생성. (list item)

[예시-중첩 목록 만들기]

  <body>
    <ul>
      <!---첫 번째 목록>
	  <li>
  		<b>과일</b>
		<ol>
			<li>사과</li>
   			<li>바나나</li>
   			<li>오렌지</li>
  		</ol>
  	  </li>
    </ul>
</body>

3) 테이블 태그

1.테이블 태그

<table>: 표 삽입
<tr> (table row): 표에 행 삽입
<th> (table heading): 표의 제목 셀 생성. (볼드체)
<td> (table data): 표의 일반 셀 생성.
<thead>, <tbody>: <table> 안의 내용을 head와 body로 나눔. (필수 태그 X)

2.테이블 태그의 속성

<table>
- border: 표의 테두리 두께 지정
<th>, <td>
- colspan (열): 셀의 너비 (가로, 열을 합친 것)
- rowspan (행): 셀의 높이 (세로, 행을 합친 것)

[예시-행.열 병합표 만들기]

방법)
1. <tr> 태그로 행 먼저 구성.
2. <table> 태그의 border 속성으로 테두리 생성.
3. <th>,<td> 태그의 colspan, rowspan 속성으로 행 병합 또는 열 병합 생성.
4. 행 기준으로 각 셀을 작성.

<body>
	<table border="1">
		<tr>
   			<th colspan="2">지역별 홍차</th>
  		</tr>
		<tr>
   			<th rowspan="3">중국</th>
   			<td>정산소중</td>
   		</tr>
   			<td>기문</td>
		<tr>
   			<td>운남</td>
  		</tr>
		<tr>
   			<th rowspan="4">인도 및 스리랑카</th>
   			<td>아삼</td>
   		</tr>
		<tr>
   			<td>실론</td>
  		</tr>
		<tr>
   			<td>다질링</td>
   		</tr>
		<tr>
   			<td>닐기리</td>
  		</tr>
 	</table>
</body>

4) 미디어태그

: 이미지, 오디오, 비디오 등 멀티미디어를 넣기 위해 사용되는 태그.

1. 구분

내용물 o
- <audio>: <audio> </audio>
- <video>: <video> </video>
내용물 x
- <img>

2. 속성

<img>
- src: 이미지의 경로 지정
- alt: 이미지가 없을 때 나오는 글자 지정
- width: 이미지의 너비 지정
- height: 이미지의 높이 지정

[예시]

<body>
	<img src="Penguins.jpg" alt="그림이 존재하지 않습니다. width="300" height="200">
</body>

<audio>, <video>
- src: 음악, 비디오 파일의 경로 지정. (value: URL)
- type: 웹브라우저가 음악 파일을 다운로드한 후 재생 가능한 파일인지 확인하는 작업을 대신 해줌 (value: audio or video / 확장자)
- controls: 음악, 비디오 재생 도구 출력 여부 지정
- preload: 음악, 비디오를 준비 중일 때 데이터를 미리 불러올지 여부 지정.
  - preload의 value:
    - auto : 전체가 띄워짐.
    - metadata : metadata만 띄워짐.
    - none: 아무것도 띄워지지 않음.
- autoplay: 음악, 비디오의 자동 재생 여부 지정.
- loop: 음악, 비디오의 반복 여부 지정.

[예시]

<body>
	<audio controls autoplay loop preload="autoplay">
		<source src="Kalimba.mp3" type="audio/mp3">
		<source src="Kalimba.ogg" type="audio/ogg">
   </audio>
</body>

<video>
- width: 비디오의 너비 지정
- height: 비디오의 높이 지정
- poster: 동영상을 불러오는 동안 사용자에게 보여줄 이미지 지정. (value:URL)

[예시]

<body>
	<video controls poster="http://placehold.it/640*360">
		<source src="Wildlife.mp4" type="video/mp4">
		<source src="Wildlifr.webm" type="video/webm">
    </video>
</body>