[ HTML 웹 문서 ] '이미지 삽입하기' 학습
[ 이미지 삽입 <img> 태그 ]
<img> 태그 : 웹 문서에 이미지를 삽입할 때 사용
기본형
<img src="이미지 파일 경로" alt="대체용 텍스트">
👇👇
[ <img> 태그의 src 속성 ]
웹 문서 파일의 위치를 기준으로 이미지 경로 지정
HTML과 이미지 파일이 '현재 동일한 폴더'에 있다면
아래와 같이 src속성에 '파일이름' 또는 './파일이름'만 적는다.
<img src="gingerbread-5884607_640.jpg" alt="Christmas-img">
이미지 파일이 '현재 폴더의 image폴더'에 있다면
아래와 같이 src속성에 'image/파일이름' 또는 './image/파일이름'을 적는다.
<img src="images/puppy-1207816_1280.jpg" alt="강아지">
| 위치 | 경로 |
| html 문서와 이미지 파일이 현재 동일한 폴더에 있을 때 |
PuppyImg.jpg 또는 ./PuppyImg.jpg |
| 파일이 현재 폴더의 하위폴더 인 images 폴더에 있을 때 | images/PuppyImg.jpg 또는 ./images/PuppyImg.jpg |
| 파일이 현재 폴더의 한단계 위의 폴더에 있을 때 | ../PuppyImg.jpg |
| 파일이 현재 폴더 한단계 위의 폴더 images폴더에 있을 때 |
../images/PuppyImg.jpg |
[ <img> 태그의 alt 속성 ]
이미지를 설명하는 대체 텍스트
화면 낭독기에서 이미지 대신 대체 텍스트를 읽어준다. (웹 접근성이 높아진다.)
이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시
>> 아래와 같이 경로를 잘못 지정한 경우 이미지 대신 '대체 텍스트'가 표시된다.
<img src="/puppy-1207816_1280.jpg" alt="강아지">
텍스트 자체를 이미지로 만들었을 경우 대체 텍스트 안에
이미지 파일의 내용을 그대로 넣어주어야 한다.
불릿 이미지나 작은 아이콘 등의 경우에는 alt=" "처럼 지정한다.
[ 참고) 웹 문서와 이미지 ]
웹 페이지에서 사용할 수 있는 이미지 파일은
파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에
주로 몇 가지 파일 형식만 사용한다.
👇👇
| 파일형식 | 설명 |
| GIF (graphic interchange format) | 표시할 수 있는 색상 수가 최대 256가지뿐이지만 다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작은 이미지에 주로 사용 |
| JPG/JPEG (joint photographic experts group) | 색상과 명암을 GIF보다 다양하게 표현할 수 있다. 이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어질 수도 있다. |
| PNG (portable network graphics) | 네트워크용으로 개발된 파일 형식이다. 색상을 다양하게 표현하면서 투명한 배경도 만들 수 있으므로 웹에서 가장 많이 사용한다. |
[ <img> 태그의 width, height 속성 ]
이미지의 크기를 조정하는 속성
'width'나 'height' 중 1개만 지정해도 나머지 속성은 자동으로 비율을 계산한다.
| 단위 | 설명 | 예시 |
| % | 이미지 크기 값을 퍼센트(%)로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정합니다. |
width = "10%" |
| px | 이미지 크기 값을 픽셀(px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시합니다. |
width = 100px" |
예시
<body>
<p>원래 크기의 이미지</p>
<img src="images/puppy-1207816_1280.jpg" alt="강아지">
<p>width="10%", height="10%"로 지정한 이미지</p>
<img src="images/puppy-1207816_1280.jpg" alt="강아지" width="10%">
<p>width="150px", height="150px"로 지정한 이미지</p>
<img src="images/puppy-1207816_1280.jpg" alt="강아지" width="150px">
</body>
지금까지 [ HTML ] 웹 문서 '이미지 삽입하기'에 대해 알아보았습니다.
다음 포스팅에서는 [ HTML ] 웹 문서 '오디오/비디오 & 하이퍼링크 삽입하기'에 대해 알아보겠습니다.
❤긴 글 읽어주셔서 감사드립니다❤
사진은 '픽사베이' 라이선스에 따라 무료로 사용 가능한 파일입니다. / 출처를 밝히지 않아도 됨 /
'웹개발 > 웹 개발[프런트엔드-VSCode]' 카테고리의 다른 글
| 프론트엔드 [ HTML 웹 문서] 폼 삽입하기 (0) | 2022.12.23 |
|---|---|
| 프런트엔드 [ HTML 웹 문서 ] 오디오/비디오 & 하이퍼링크 삽입하기 (2) | 2022.12.22 |
| 프런트엔드 [ HTML 웹 문서 ] 표 만들기 (0) | 2022.12.22 |
| 프런트엔드 [ HTML 웹 문서 ] 목록 만들기 (0) | 2022.12.21 |
| 프런트엔드 [ HTML 웹 문서 ] 텍스트 태그 (2) | 2022.12.21 |