728x90
이미지 태그란 <img/>
이미지 태그는 HTML에서 이미지를 불러오기 위해 사용하는 태그이다. 이미지 태그를 이용하면 아래의 네이버의 웹페이지처럼 웹 페이지의 로고, 검색버튼 이미지, 메일 이미지 등을 구현할 수 있다.
<img> 의 속성
이미지 tag는 empty tag이기 때문에 여느 태그만 사용하여 생성한다. 이미지 태그는 여러 속성을 가지고 있다.
src 속성
src 속성은 img 태그에서 필수로 입력해야 하는 속성이다. HTML에서 이미지는 모두 외부에서 가지고 오는 것이기 때문에 "어디"에서 가지고 오는지를 이미지 태그의 src 속성에 명시해주어야 한다. 이미지의 경로는 해당 파일이 저장되어 있는 로컬 저장소 일 수도 있고, 웹 주소일 수 도 있다.
주로 사용되는 이미지 포맷은 크게 3가지로 다음과 같다.
- .jpg : 압출률 높음(손실 압축), 큰 이미지에 사용
- .gif : 256색, 투명 지원, 아이콘 등 작은 이미지에 적합, 애니메이션
- .png : 알파(투명도) 지원, 픽셀당 4byte, ARGB
<!-- 현재 디렉토리 이미지 파일 -->
<img src="pulpitrock.jpg">
<!-- 상대경로 -->
<img src="../img/pulpitrock.jpg">
<img src="../img/pulpitrock.jpg">
<!-- 절대경로 -->
<img src="https://www.w3schools.com/images/w3schools_green.jpg">
alt 속성
src 속성을 통해 이미지의 경로로 갔는데 해당 이미지가 없다면 어떻게 해야 할까? 이 때에 사용되는 것이 alt 속성이다. alt 속성의 text값을 넣어주게 되면, 해당 이미지 파일이 없을 때 대체하여 alt의 값을 보여주는 것이다.
<!-- 해당 이미지가 없을 경우 no image 출력 -->
<img src="pulpitrock.jpg" alt = "no image">
width & height
브라우저에서 표현되는 이미지 크기를 지정해줄 수 있다. style 속성을 사용해서 해 줄 수도 있지만 img 태그의 경우 자체 속성으로 지정해 줄 수 있다.
width, height를 지정을 안 해준다면 이미지가 원래 가지고 있었던 크기로 지정이 되지만 이럴 경우 이미지 로딩 시 화면 깜빡임 증상이 발생하기 때문에 크기를 지정해주는 것을 권한다.
<!-- img 속성을 이용하여 크기 지정 -->
<img src="pulpitrock.jpg" alt = "no image" width = "200px" height = "400px">
<!-- style 속성을 이용하여 크기 지정 -->
<img src="pulpitrock.jpg" alt = "no image" style = "width : 200px; height : 400px;">
사용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Image</title>
</head>
<body>
<!-- 경로에 이미지가 없을 경우 -->
<img src="https://www.w3schools.com/images/w3schools_green123.jpg" alt="Mountain View" width = "200px" height = "200px">
<br>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" style="width:104px; height:150px;">
</body>
</html>다음과 같이 잘 나오는 것을 볼 수 있다.
728x90
'Web > HTML' 카테고리의 다른 글
| [HTML] list (1) | 2023.10.29 |
|---|---|
| [HTML] Table (0) | 2023.10.28 |
| [HTML] Tag - DIV&SPAN (0) | 2023.10.20 |
| [HTML] Style 속성 (0) | 2023.10.20 |
| [HTML] 속성(Attribute) (0) | 2023.10.19 |