728x90
그림을 HTML 페이지에 삽입할수있는 태그이다 (재밋겠다)
img태그의 주요 속성은
src : 이미지의 경로 지정
alt : 이미지가 없을때 나오는 글자지정
width : 이미지의 너비 지정
height : 이미지의 높이 지정
간단한 실습해보자
뜬금 견빈사진이지만 사실 이건 HTML 코드로 나타낸걸 웹에서 캡쳐뜬거다
HTML 폴더로 지정한곳에 images폴더를만들고 그안에 jindo.jpg 파일을 위치하였다.
코드를 보자
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<img src="images/jindo.jpg" alt="외출중" width="300"/><br/>
<img src="Nothing" alt="그림이 없습니다" width="300"/><br/>
<img src="http://placehold.it/300x200"/>
</body>
</html>
|
cs |
Nothing이라는 파일이 존재하지않아서 alt 속성이 적용되어 "그림이 없습니다" 라고 나왔습니다.
그리고 10번줄 내용은 웹 디자인할때 크기를 맞춰놓고 이미지가 준비되어있지 않을때 사용하는 태그이다
끝에 300x200, 200x150, 100x100등이 있다
이미지 > 오디오 > 동영상 순으로 소개하겠다 :)
728x90
'개발 > Html,Css' 카테고리의 다른 글
| 웹 개발 시 유용한 사이트 모음(css framework, editor) (4) | 2024.10.29 |
|---|---|
| CSS - 일반 구조 선택자 (0) | 2021.04.14 |
| 테스트 (0) | 2021.04.13 |
| HTML에 음악 재생바 넣기 (0) | 2021.02.17 |