HTML_DAY3

1. 이미지 삽입하기

<img> 태그
src 속성: 이미지 파일의 경로를 지정하여 웹 브라우저에 알려 주는 역할로 반드시 필요한 속성
alt 속성: 화면 낭독기 등에서 이미지를 대신하여 읽어 줄 텍스트 입력

	예시)
		<img src="이미지 파일 경로" alt="대체 텍스트">
        
이미지 파일의 경로는 '웹 문서 파일의 위치'를 기준으로 정해짐
웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에는 이미지 파일의 이름만!
다른 경로에 있다면 src 속성에 '하위 폴더'와 함께 이미지 파일 이름 입력!

이미지 크기를 조절하는 width(너비), height(높이) 속성
둘 중 하나만 지정해도 나머지 속성은 비율이 자동 계산 됨
단위는 퍼센트(%)와 픽셀(px), 픽셀 사용시 단위 없이 숫자만 표기

2. 오디오와 비디오 삽입하기

<object>,<embed> 태그 : 다양한 멀티미디어 파일을 삽입할 때 쓰는 태그

<object> 태그
data 속성에 보여 줄 멀티미디어 파일을 입력하고,
width와 height 속성으로 크기 지정. <object>태그는 닫는 태그 필요!

	예시)
    	<object width="900" height="800" data="product.pdf"></object>

<embed> 태그
src 속성을 사용해 삽입할 멀티미디어 파일 지정. 필요시 widthe와 height 속성으로 크기 지정.
<embed> 태그는 닫는 태그 없음!
        
    예시)
    	<embed src="medias/spring.mp3">
        
<audio> 태그 : HTML에서 배경 음악이나 효과음 등의 오디오 파일을 삽입할 때 사용
<vedio> 태그 : 비디오 파일을 삽입할 때 사용

<audio>와 <vedio> 태그의 속성
	controls : 플레이어 화면에 컨트롤바 표시
	autoplay : 오디오나 비디오 자동 실행
	loop : 반복 재생
	muted : 소리 제거
	preload : 페이지를 불러올 때 오디오나 비디오 파일을 '어떻게 로딩할 것인지' 지정.
    		  기본값 preload="auto"
	width, height : 비디오 플레이어의 너비와 높이. 하나만 지정할 경우 나머지 자동 계산됨
	poster="파일이름" : 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지 지정

	플레이어 표시 없이 배경 음악 넣기_예시)
    	<audio src="medias/spring.mp3" autoplay loop></audio>
        
    비디오 파일 자동 재생하기_예시
    	<vedio src="medias/salad.mp4" width="700" autoplay loop></vedio>

3. 하이퍼링크 삽입하기

링크는 <a> 태그를 사용. href 속성을 이용해 연결할 파일이나 링크할 주소 입력
기본형 <a href="링크할 주소">텍스트 또는 이미지</a>

텍스트 링크
<a>와 </a> 태그 사이에 링크로 만들 텍스트 입력. 
href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명 입력.

	예시)
    	<a href="../05/order.thml>주문서 작성하기</a>

이미지 링크
텍스트 링크와 입력 방법 동일. 이미지에 링크를 추가하면 마우스 포인터가 손 모양으로 바뀜

target 속성 : 링크를 새 탭에서 열어주는 속성
	예시)	
    	<a href="../05/order.html target="_blank">주문서 작성하기</a>