8강 - 이미지 태그 (img tag)

안녕하세요! 강연하는 남자 "월횽"입니다. 오늘은 웹사이트나 블로그에서 이미지 태그 (img tag) 사용법에 대해 알아보겠습니다.

이미지 태그는 텍스트 외에 이미지를 추가하여 페이지를 더 매력적으로 만들고, 사용자 경험을 향상시키는 역할을 합니다.

반응형

 

이미지 태그 사용 방법

이미지 태그를 사용하기 위해서는 우선 이미지 파일을 준비해야 합니다. 예를 들어 아래와 같이 이미지.jpg라는 이미지 파일이 있다고 가정합시다. 이 이미지를 웹사이트에 삽입하기 위해서는 다음과 같은 코드를 사용합니다.

 

 

<img src="이미지.jpg" alt="월횽" height="500" width="100">

 

코드 해설

· <img src="...">: src 속성은 이미지 파일의 경로를 지정합니다. 여기서는 수업을 위한 이미지.jpg를 지정했습니다.
· alt="...": alt 속성은 이미지의 대체 텍스트를 지정합니다. 이 경우, "월횽"을 입력했습니다.
· height="..." / width="...": height와 width 속성은 이미지의 세로와 가로 크기를 지정합니다.

 

이미지 파일 확장자

· .JPG: 일반적인 이미지 파일로 배경색이 적용됩니다.
· .PNG: 투명 배경을 지원하는 이미지 파일로, 로고 등에 자주 사용됩니다.
· .GIF: 움직이는 이미지를 지원하는 파일 형식으로, 애니메이션 이미지에 많이 사용됩니다.

 

이미지 크기 확인 방법

 

맥 사용 시

1. 이미지를 마우스 오른쪽 버튼으로 클릭하세요.
2. "정보 가져오기"를 선택하세요.
3. "규격" 항목에서 이미지의 가로와 세로 크기를 확인할 수 있습니다

 

윈도우 사용 시

1. 이미지를 마우스 오른쪽 버튼으로 클릭하세요.
2. "속성"을 선택하세요.
3. "자세히" 탭에서 이미지의 크기를 확인할 수 있습니다.

오늘은 이미지 태그에 대해 알아보았습니다. 추가로 궁금한 점이 있으면 댓글로 남겨주세요! 즐거운 하루 보내시길 바랍니다.