오늘은 "HTML"에서 자주 사용하는 img 태그의 사용법과
속성에 대해서 알아보겠습니다.
HTML <img 태그> 사용법
|
1
|
<img src="apple.jpg">
|
cs |
보통 img 태그를 사용하는 방법은
<img src = "이미지 파일">로 사용합니다.
HTML <img 태그> 크기 변경
|
1
|
<img src="apple.jpg" width="128" height="128">
|
cs |
|
1
|
<img src="apple.jpg" style="width:128px; height:128px;>
|
cs |
위의 코드를 보면 둘 다 크기 변경하는 게
맞는데 정확하게 하기 위해서는
css 코드인 아래의 코드를 사용하시는 걸 권장합니다.
HTML <img 태그> 링크 넣기
|
1
2
3
|
<a href="이동하는 주소" target="_blank">
<img src="이미지파일" alt="이미지가 없을시에 텍스트">
</a>
|
cs |
img 태그에 링크를 넣기 위해서는
<a></a> 태그를 사용해야 하고
<a href = "이동하는 주소">를 넣으면 됩니다.
<alt> 의 경우 해당 이미지가 없을 경우
입력한 텍스트를 사용자에게 보여줍니다.
<target="_self"> -- 현재창
<target="_blank"> -- 새로운 창
이거 외에도 다른 속성이 있기는 한데
주로 사용하는 속성만 사용하겠습니다.
그럼 지금까지 간단하게 해 본
img 태그를 활용해서 코드를 한번
사용해보고 마무리하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<html>
<head>
<title> HTML _ img </title>
</head>
<body>
<img src="/Lee/img/apple.jpg" alt="This is apple" style="width:320px; height:214px; border: 3px solid black">
<img src="/Lee/img/apple.jpg" alt="This is apple" width="128" height="128"; style= "border: 3px solid black">
<br>
<img src="/Lee/img/website.jpg" alt="This is website" style="width:320px; height:214px; border: 3px solid black">
<img src="/Lee/img/website.jpg" alt="This is website" width="128" height="128"; style= "border: 3px solid black">
<br>
<a href="https://www.google.com/" target="_blank">
<img src="/Lee/img/g.png" alt="google" style="width:320px; height:214px; border: 3px solid black">
</a>
<a href="https://www.google.com/" target="_blank">
<img src="/Lee/img/g.png" alt="google" width="128" height="128"; style= "border: 3px solid black">
</a>
</body>
</html>
|
cs |
<HTML> 이미지(img) 태그 사용법 및 속성 정리
--- 끝 ---
'New Programming > HTML' 카테고리의 다른 글
| <HTML> 색상(Color) 태그 사용법 (0) | 2020.07.25 |
|---|---|
| <HTML> 제목 태그 h1,h2,h3,h4,h5,h6 사용법 (0) | 2020.07.23 |
| <HTML> 테이블(table) 사용법 정리 (table,th,tr,td,thead,caption) (0) | 2020.07.22 |
