<3> 이미지와 페이지링크(앵커)

이미지 형식

 

GIF

색상 수는 256가지에서 제한적이라 화질이 낮지만

움직이는 이미지를 만드는 특징

 

JPG/ JPEG

사진을 위해서 개발된 이미지 형식으로 픽셀 기반이라서 

확대하면 계단현상이 있다.

 

PNG 

벡터 기반으로써 확대해도 계단현상이

일어나지 않는 장점

 

<img>

 

<img src ="#"> 

#에는 이미지 경로와 이미지 명을 넣는다

 

<img alt ="#"> 

#에는 이미지를 표시할 수 없을 때 이미지 설명을 넣음

화면 낭독기에서 이미지 대신 대체 텍스트를 읽어주는 특징

 

<width, height> 

가로와 세로를 지정가능

 

<figure>, <figcaption>

<figure> 
    <img src="image/#.jpg" alt="사진 이름">
    <!-- 캡션 붙이는 부분 -->
    <figcaption>사진 캡션</figcaption>
    </figure>

 

 

하이퍼링크 사용법 

<a href="http://www.##.com"> 페이지로 이동 </a>

<!-- 이미지에 하이퍼링크를 넣는 방법 
버튼의 경우에는 버튼으로 감싸고 a 테그를 사용 -->
<a href="http://www.##.com">
    <img src="image/##.JPG" alt="페이지 이동"> </a> 

 

앵커 태그 사용법 (페이지 안에서 이동)

 
 <ul id="con4"> 
 <!-- 앵커태그 #이 앵커를 실행하고 같은 아이디 명의 위치로 이동  -->
    <li><a href="#con1">앵커실행</a></li>
    ...
 </ul>
    
<h2 id="con1">앵커 타겟</h2>
<p>
    웹문서가 너무 길 경우 필요한 곳마다 문서 한에 이름을 붙여높고 
    그 위치로 한번에 이동하는 링크를 앵커라고 한다
</p>
<p> <a href="#con4">돌아가기</a> </p>