먼저 인터넷에 사용할 이미지를 아무거나 html 을 작성한 파일들이 담긴 폴더에 복사하자.
필자는 아래 이미지를 사용하였다.
<img>태그는
태그 안에 src를 통해 경로를 설정하고, alt를 통해서 이미지의 이름을 설정한다.
width와 height를 통해서 사이즈 조절도 가능하다.
alt의 경우 시각 장애자를 위해 꼭 명시하는것을 추천한다.
큰 웹사이트의 경우 법적으로 필수로 명시하라고 되있다고 한다.
<a> 태그는 href에 이동할 링크를 입력하고
target="_blank"를 명시하면 새탭에서 열리고
명시하지 않으면 현재 페이지에서 열리게 된다.
아래 예제를 확인해 보자.
<html>
<head>
<meta charset="UTF-8">
<title>이미지</title>
</head>
<body>
<img src="picture.gif" alt="구글 이미지" width="250" height="150"/>
<!--alt="이미지 설명"은 글을 소리내어 읽어주는 기능을 할 때 이미지라고 읽어주게끔 명시하는 코드-->
<!--꼭 넣자-->
<!--이미지 우측 하단에 '_', 언더바처럼 표시가 하나 생기는데 CSS를 이용하면 지울 수 있으나-->
<!--HTML을 다루고 있으므로 넘어간다.-->
<br>
<a href="http://www.naver.com"target="_blank">
특정 링크로 이동
</a>
<!--href를 비워두면 자기 자신을 의미-->
<!--target="_blank"을 명시하여 새 탭에서 열기, 없다면 현재 페이지를 바꿈-->
<br>
<a href="http://www.naver.com"target="_blank">
<img src="picture.gif" alt="구글 이미지" width="250" height="150"/>
</a>
<!--a 태그가 이미지를 감싸면 이미지를 눌렀을때 링크 이동이 됨-->
<br>
</body>
</html>
a태그를 사용하면 우측 아래에 '_', 언더바가 생기는데 CSS를 통해서 없앨 수 있다.
하지만 현재 HTML을 다루기 때문에 생략
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-06.iframe, 다른 사이트 참조 + 예제 (0) | 2018.10.15 |
|---|---|
| [HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd) (0) | 2018.10.15 |
| [HTML]02-03.테이블(표) 만들기, style, table, tr, th, td, colspan, rowspan (0) | 2018.10.15 |
| [HTML]02-02. hr 태그, 01, 02의 예제, 공백 키워드 (0) | 2018.10.15 |
| [HTML]02-01.기본 뼈대, 글자 효과(title, h1~6, small, mark, b, del, ins, sub, sup, p, br 태그) (0) | 2018.10.11 |