📝 표, 영역, 이미지, 하이퍼링크, 입력 관련 태그 배우기
#230209
img : 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
🏷️ img 태그의 속성
1. src : 삽입할 이미지의 경로를 지정하는 속성 (파일경로, 웹주소)
2. width / height : 이미지의 크기를 지정하는 속성
3. alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접 표시 (웹접근성)
✔️ 파일 속성 표시(SRC)
1) 파일경로로 이미지 출력
.. : 상위 폴더
/ : 아래, 안쪽, 안에
<예시 img src ="./images/짱구.jfif" alt="나는 짱구야">
2) 웹 이미지 경로(웹상 절대 경로)를 이용해서 이미지 출력
<예시 img src = "https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20100203_110%2Fwogml1117_1265188923345NJTyE_gif%2Funtitled-1d_wogml1117.gif&type=a340">
✔️ width, height 속성을 이용한 크기 조절
1) 고정 크기 단위(px) : 화면의 크기 상관 없이 지정된 값의 크기를 갖는 단위
<예시img src="./images/짱구1.png" width="300px" height="240px">
<예시img src="./images/짱구2.jpg" width="300px" height="240px">
2) 가변 크기 단위(%) : 화면이나 영역 기준 사이트 크기에 따라 크기 변경되는 단위
<예시img src="./images/짱구6.jfif" width="15%">
<예시img src="./images/짱구7.jfif" width="15%">
✔️ ALT 속성
<예시 img src="./images/짱구짤.gif" alt="나는 짱구야">
