이미지와 하이퍼링크

웹에 이미지를 삽입하거나 링크를 삽입하는 방법을 알아보자.

 

이미지 삽입

 

1. 저장된 이미지 파일

<img src="경로" [속성="값"]>

 

2. 인터넷의 이미지 파일

<img src="이미지 주소">

 

이미지 속성

 

1. 이미지 설명

화면 낭독기가 시각장애인에게 읽어 줄 수 있다. 또는 이미지를 제대로 표시할 수 없는 상황에서 이미지 자리에서 확인할 수 있다.
<img src="cafe.jpg" alt="카페 가기">

이미지에 설명 글을 붙이기 (한글 문서 캡션 느낌이다.)
<figure>
    <img src="cafe.jpg">
    <figcaption>라이언커피</figcaption>
</figure>

2. 이미지 크기 설정

<img src="cafe.jpg" width="250" height="250">

 

하이퍼 링크

 

1. 링크 만들기

<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크할 주소" [속성="속성 값"> <img src="이미지 파일 경로"> </a>

2. 방문했던 링크 글자 색 바꾸기

<style>
    a {
        text-decoration:none;
        color:black;
        }
</style>

3. 새 탭에서 링크열기

<a href="http://github.com/S0I3R0I3" target="_black"> SIRI Github </a>

4. 페이지 점프하기 (앵커)

<태그 id="앵커 이름"> 텍스트 또는 이미지 </태그>
<a herf="#앵커 이름"> 텍스트 또는 이미지 </a>

---

본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을
참고하여 작성한 내용입니다.