들어가기 앞서..
인터넷을 하다보면 주소를 타고 들어가서 이미지를 보고 영상을 보는 경우가 대부분이다. 오늘은 하이퍼 링크와 이미지에 대해서 배워본다.
오늘은 무엇을 배울까 ?
하이퍼링크 태그, 이미지 삽입, 동영상 삽입
출발!
#### 하이퍼 링크 참고하기 위해서 주소 및 링크를 공유하는 경우가 있는데 그것을 하이퍼 링크 라고 한다. HTML link는 hyperlink를 의미하며 **a(anchor) tag**가 그 역할을 담당한다. ``` Visit google.com! ``` a 태그는 위와 같이 href 안에 주소를 넣는다. a태그 사이에는 원하는 글자를 삽입할수 있다.다른 태그들 안에 id값을 지정하여서 원하는 위치로 이동 시킬수 있다.
<p id="top"> 출발! </p>
<a href="#top">Go to top</a>Go to top
버튼을 클릭하면 위의 출발로 이동한다.
위의 코드 처럼 p태그의 <출발>을 나는 윗부분에 미리 작성해 두었다.
파일 경로
파일 경로를 자주 쓰는 곳은 폴더에서 폴더로 이동할때의 경로 또한 다운로드 할때의 경로로 자주 쓰인다. 경로에는 절대경로와 상대경로가 있다.
절대경로(Absolute path)
현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.
http의 주소와 또는 폴더 주소와 같이 c:경로 등에서 사용된다.
상대경로(Relative path)
현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.
target 어트리뷰트
target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.
<a href="http://www.google.com" target="_blank">Visit google.com!</a>
<a href="http://www.google.com" target="_self">Visit google.com!</a>blank를 작성하면 새로운 윈도우나 탭에서 창이 열린다
self를 입력하면 지금의 창에서 링크가 연결된다. self가 기본값이다.
이미지
홈페이지, 어플리케이션 등을 제작할때도 이미지를 많이 이용하게 될것이다.
웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.
<img src="assets/images/doug.jpg" alt="doug" width="100">위의 태그 처럼 이용한다. 닫는 태그는 없다.
src는 이미지의 경로 이다.
alt는 이미지를 못 불러왔을경우 (엑박) 의 경우 말 혹은 이미지를 넣을수 있다.
width와 height는 폭과 길이 즉, 크기를 지정할수 있다.
미디어
audio
audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
<audio src="assets/audio/Kalimba.mp3" loop preload controls></audio>
src 는 파일의 경로이다
preload는 사전에 미리 불러올지 지정하는 것이다.
autoplay 자동 재생
loop 반복 재생
controls 재생 ,스피커 등 도구 표시
띄어 쓰기로 구분한다.
영상
<video src="as.mp4" width="640" height="360" controls>태그는 위와 같다. 미디어와 같이 preload, autoplay, loop, controls가 사용 가능하며 추가로 poster로 이미지 경로를 삽입하여 영상재생전의 이미지로 사용할수 있다.
