img 태그
<img src = "이미지의 경로" alt=""/>속성 : 사진, 이미지, 그림 등 시각적 요소를 의미
웹페이지에서 이미지를 불러올 때 사용하는 태그
단독태그, inline 형태로 화면 영역만큼 나열되는 성격
필수속성
src : 경로를 지정하여 이미지를 가져올 때 사용
alt : 주석문, 이미지를 대체하는 문자를 나타낸다 (이미지에 대한 상세 설명), 이미지가 로드되지 않았을 때 나타나는 대체 텍스트로 지정할 수 있는 속성
이미지의 경로
<img src="이미지 경로"/>에서 index 파일과 함께 존재하는 jpg 폴더(/) 안의 이미지 (이름.확장자)를 불러서 찾는다.
절대경로 : 출발부터 시작해 도달하는 경로가 모두 일치해서 절대경로라 부른다.
상대경로 : index.html 파일 기준, 현재 위치(상대적으로 경로가 바뀌는 것을 의미)를 말한다.
외부 이미지를 사용할 때 절대 경로 사용
<img src="https://example.com/apple.jpg" alt="ex"/>현재 웹페이지의 위치 기준으로 이미지의 파일 경로를 지정
<img src="./ex4.jpg" alt="사막"/>width, height
width : 이미지 너비값
height : 높이값을 픽셀(px) 단위로 지정
지정한 크기값이 우선되므로 비율을 고려하지 않고
입력할 경우 이미지가 찌그러질 수 있다.
둘 중 하나의 값만 입력하거나 css를 이용해 보안할 수 있다.
<img src="jpg/ex4.jpg" alt="시믹" width="100"/>구글링하여 이미지 태그를 url로 연결하는 방법
구글에 원하는 이미지를 검색
마우스 우클릭으로 이미지 주소 복사 후 붙여넣기
코드
<img src="https://flexible.img.hani.co.kr/flexible/normal/960/960/imgdb/resize/2019/0121/00501111_20190121.webp" alt="url 이미지"/>결과
figure
문서의 주요 콘텐츠와 연관된 독립적인 콘텐츠 그룹을 나타내며
이미지, 사진, 삽화, 오디오 등의 멀티미디어 같은 콘텐츠를 넣을 때 사용
figcaption은 figure 안에서 사용, figure 요소에 캡션을 넣을 때 사용하는 태그, 제일 처음이나 마지막에 배치 ! 브라우저나 스크린리더 등에 이미지 설명을 전달하고 웹접근성을 향상시키는 데 사용
코드
<figure>
<figcaption>카메라의 올바른 사용법</figcaption>
<img src="ex4.jpg"/ alt="카메라">
<figcaption>카메라의 올바른 사용법</figcaption>
</figure>결과
카메라의 올바른 사용법
카메라의 올바른 사용법
