저번 장에 이어, 이번 장에서는 HTML의 멀티미디어 태그 중
img 태그에 대해 다뤄보도록 하겠습니다!
◈ <img>
-> HTML 파일에 사진(jpg, jpeg, png 등)을 추가할 때 사용하는 태그
기본 구조 : <img ~ />
이미지 태그의 경우 사진을 추가하는 태그인데,
원하는 사진을 넣을 때는 반드시 <img src="" />를 통해 작성할 수 있습니다.
기본 구조는 이해가 가지만 src는 무엇인지 이해가 안 가시죠?
src는 source의 약자로 이미지의 원본이 존재하는 링크 및 파일명을 넣어주시면 됩니다!
간단한 예시를 통해 설명해드리겠습니다!
jaeyonglee960212.github.io/tistory/
Cla in love Linda
jaeyonglee960212.github.io
↑이미지 코드 결과 홈페이지↑
일단 설명에 앞서, 부담스러우시다면 죄송합니다 ㅜㅜ
이미지를 뭐를 쓸까 하다가 그냥 제 깃허브 프로필 이미지를 사용했습니다 ㅠㅠㅠㅠㅠ
아무튼!
img 태그를 어떻게 사용하는지 어느 정도 감이 오시죠??
제 깃허브 사이트 주소 때문에 뒤를 조금 잘라서 헷갈릴 수도 있으니 다시 한번 설명해드리겠습니다.
제일 처음 <img 를 작성하고
이후 src=를 작성한 다음
"이미지 링크"를 넣어주시면 됩니다!
<img src="링크주소" />
이미지 링크는 네이버 검색 기준
사진 검색 -> 사진 우클릭 -> 이미지 주소 복사 -> " "안에 ctrl+v(붙여넣기)
이렇게 하시면 됩니다!
그리고 이 과정을 거치게 되면 위의 사진처럼 이미지가 HTML 파일 안에 나타나게 된답니다!
어때요? 너무 신기하죠?
그런데...
지금 당장은 괜찮더라도 나중에 이미지가 삭제돼서 화면에 나오지 않는 경우가 있죠?
그때 사람들은 '이게 무슨 사진이지?'이라는 의문을 품을 수 있을 것입니다.
이런 상황을 방지하기 위해 img 태그에는 하나의 속성이 존재하는데
바로 alt 속성입니다!
alt 속성은 alternative의 약자로 대체한다는 의미입니다!
alt를 사용하게 되면
이미지를 출력할 수 없거나 삭제된 이미지일 경우
본인이 원하는 문구가 나오게끔 할 수 있는 것입니다!
예를 들어, <img src="~" alt="소방관 사진" />이라고 작성했을 때
이미지 파일이 문제가 있다면
이미지 파일의 자리에 "소방관 사진"이라는 문구가 나오는 것입니다!
어때요? 이해가 좀 되시나요?
최종 정리를 해보겠습니다!
<img> 태그는 HTML 파일에 소리 콘텐츠를 추가해 주는 태그이고,
무. 조. 건 src를 통해 출처를 작성해 줘야 합니다.
그리고 alt라는 속성이 있는데
alt는 이미지에 문제가 있을 때
그 자리를 대신해 줄 문구를 표현해 주는 속성입니다.
오늘도 저번에 이어 멀티미디어 태그를 다뤄보았는데요,
다음 장에서는 또 다른 중요한 멀티미디어 태그에 대해 다뤄보도록 하겠습니다!
그럼 다음 장에서 봬요!
안녀어어엉~~~~~
'html' 카테고리의 다른 글
| < html 공부 > 7장. HTML의 태그 (5) - iframe (0) | 2021.03.06 |
|---|---|
| < html 공부 > 6장. HTML의 태그 (4) - 멀티미디어(video) (0) | 2021.03.04 |
| < html 공부 > 4장. HTML의 태그 (2) - 멀티미디어(audio) (0) | 2021.03.02 |
| < html 공부 > 3장. HTML의 태그 (1) - 텍스트 (0) | 2021.02.17 |
| < html 공부 > 2장. HTML의 기본 구조 및 태그 기능 (0) | 2021.02.13 |