HTML5 - 이미지와 하이퍼링크

4대 웹 콘텐츠
웹 콘텐츠는 텍스트, 이미지, 비디오, 오디오가 있으며, 웹 콘텐츠를 저장할 때 태그를 사용한다.

    <p>텍스트</p>
    <div class="box">이미지
        <img src="imgs/pelican.jpg" alt="팰리컨">
    </div>
    <video muted autoplay preload loop>비디오
        <source src="media/video.mp4" type="video/mp4">
    </video>
    <audio src="media/audio.mp3" muted cotrols>오디오

 

 

 

웹에서 사용하는 이미지 형식

1. GIF (Graphic Interchange Form)

2. JPG / JPEG (Joint Photographic Experts Group)

3. PNG (Portable Network Graphics)

 

 

 

이미지 삽입하기 <img>태그

<img src="경로" alt="이미지설명">

 

웹에 이미지를 삽입할 때 사용하는 태그

<img>태그의 필수 속성인 src에는 이미지의 경로를 입력하고, alt에는 이미지에 대한 설명을 입력 (웹 접근성 향상) 

스크린 리더에서 alt값을 읽어 알 수 없는 여러 오류들로 이미지를 표시할 수 없을 때 alt 텍스트 내용을 대신 가져와 보여줌

 

 

 

경로란?

절대 경로 : 이미지(리소스)가 원래 가지고 있는 절대적인 고유한 경로

ex) 웹 이미지 절대경로(http://www.naver.com/ruby.png), PC컴퓨터 절대경로(C:\user\ruby\ruby.png)

 

상대 경로 : 작성하는 파일의 위치가 경로의 시작점인 경로 (루트디렉토리)

ex) / 또는 상위 폴더 ../ 또는 하위 폴더 

 

 

하이퍼링크(hyperlink)란?

정보구조를 구성할 때 반드시 필요한 것이 '하이퍼 링크 기능'이다. 

하이퍼 링크 기능은 웹 페이지를 전환하는 기능이다. 

하이퍼 링크 기능은 <a> 태그로 구현한다.

 

 

 

링크 만들기 <a>, 속성 href

<a href="링크할 주소"></a>

 

속성	설명
href	링크한 문서나 사이트의 주소를 입력
target	링크한 내용이 표시될 위치(현재 창 또는 새 창)를 지정 (새 창 : _blank)
download	링크한 내용을 보여주는 것이 아니라 다운로드
rel	현재 문서와 링크한 문서의 관계를 나타냄
hreflang	링크한 문서의 언어를 지정
type	링크한 문서의 파일 유형을 나타냄