HTML / CSS [ Image, Audio, Video ]

Image

• src 이미지 소스 상대경로도 가능하다.
• img 로 사용해도 되지만 대부분 div 로 감싸서 사용한다.

<div>
	<img src="image.jpg"/>
  	<img src="image.jpg" width="100px" height="100px"/>
  	<!-- width 와 height 가 없으면 원본 크기가 나온다. -->
</div>

border-radius

• 테두리 깎기

border-radius: top-left-x top-right-x bottom-right-x bottom-left-x
			/ top-left-y top-right-y bottom-right-y bottom-left-y
/* 테두리 둥글게 만들기 */
border-radius : 50% 50% 50% 50% / 50% 50% 50% 50%;
border-radius : 50%;

opacity

• 광도
  0.0 ~ 1.0 숫자가 적을수록 희미해진다.
  0.0 투명, 1.0 기본 광도

---

Audio

• 웹브라우저에서 플러그인의 도움없이도 음악멀티미디어를 재생할 수 있게 해주는 태그

controls

• audio 파일을 실행 및 중지 그리고 소리크기를 조절할 수 있는 조절기를 보이게 하기

<audio src="상대주소" controls></audio>

<audio controls>
  <source src="상대주소" type="audio/mp3"></source>
</audio>

<embed src="상대주소" type="audio/mp3" controls></embed>
<!-- 오디오를 지원하지 못하는 구형 MS 익스플로러에서 
	소리파일을 실행할 수 있도록 해준다. -->

<audio controls>
  <source src="상대주소"></source>
</audio>

<audio src="상대주소" controls></audio>

<audio src="상대주소" controls autoplay></audio>
<!-- controls autoplay : 음악을 자동으로 재생할 것인지를 결정 -->

<audio src="상대주소" controls autoplay loop></audio>
<!-- controls autoplay : 음악을 자동으로 재생할 것인지를 결정 -->
<!-- controls loop : audio 파일을 반복할지 안할지 설정 -->

---

Video

• 동영상을 삽입해주는 태그로써, 크롬에서만 지원해주고 있다.
• 삽입한 동영상은 자동재생이 안되므로 컨트롤도구가 삽입되어야 한다.

<video controls>
  <source src="상대주소" 
          type='video/~mp4;codec="~~, mp4~~"'</source>
</video>
<!-- controls 속성은 동영상 파일을 조절할 수 있는 조절기를 
									보이게 할 것인지 아닌지를 결정 -->

<!-- 포스터를 사용하고 싶은 경우 -->
<video width="숫자" height="숫자" controls poster="images/사진.jpg">
  <source src="상대주소" 
          type='video/~mp4;codec="~~, mp4~~"'</source>
</video>

<video width="숫자" height="숫자" controls autoplay>
  <source src="상대주소" 
          type='video/~mp4;codec="~~, mp4~~"'></source>
</video>
<!-- autoplay 속성은 동영상을 자동으로 재생할 것인지를 결정 -->

<video width="숫자" height="숫자" controls autoplay src="상대주소"
       type='video/mp4;codec="~~, mp4~~"'>
</video>
<!-- autoplay 속성은 동영상을 자동으로 재생할 것인지를 결정 -->

<video width="숫자" height="숫자" controls autoplay loop>
  	<source src="상대주소"
            type='video/mp4;codec="~~, mp4~~"'></source>
</video>
<!-- autoplay 속성은 동영상을 자동으로 재생할 것인지를 결정 -->
<!-- loop 속성은 동영상 파일을 반복해서 재생하도록 하는 속성 -->

---

정리

• ch07_image
  -> 01_image.html, 01_image.css, 02_image.html, 02_image.css, 03_image.html, 03_image.css

• ch08_audio
  -> 01audio, 02audio, 03audio, 04audio, 05audio, 06audio, 07audio

• ch09_video
  -> 01_video,02_video, 03_video, 04_video, 05_video