이미지 삽입
<img> 태그의 src 속성에 이미지 파일의 주소를 지정한다.
- src에 지정할 수 있는 이미지의 종류 : BMP, GIF, PNG, JPG(JPEG), animated-GIF
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!--새파일 ctrl+n-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>이미지 삽입</title>
</head>
<body>
<p>이미지 삽입 예시</p>
<img src="gloriasteinem.jpg" width="300" height="300" alt="journalist and political activist""><br/>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
- src : 이미지 파일의 URL. 필수속성이다.
- alt : 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열. 필수속성이다.
- width : 이미지가 출력되는 너비. 생략되면 원본 이미지의 폭, 픽셀 수로 설정된다.
- height : 이미지가 출려되는 높이. 생략되면 원본 이미지의 너비, 픽셀 수로 설정된다.
이미지의 절대경로와 상대경로
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상대경로, URL, 절대경로</title>
</head>
<body>
<h3>이미지의 상대경로, URL & 절대경로</h3>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
* 절대경로로는 다른 사람에게 이미지를 보여줄 수 없습니다. 상대경로 혹은 url로만 사용
'화면구현' 카테고리의 다른 글
| HTML 테이블 만들기 (0) | 2020.03.03 |
|---|---|
| HTML 리스트 작성하기 (0) | 2020.03.03 |
| 링크태그와 메타 데이터 삽입 (0) | 2020.03.03 |
| HTML 태그(4) (0) | 2020.03.02 |
| HTML 태그(3) (0) | 2020.03.02 |
rss