img
<img> 태그는 HTML 문서에 이미지를 삽입하는 태그입니다.
기본형
<img src="images.jpg" alt="No image" width="540" height="360">
주요 속성은 다음과 같습니다.
src - 이미지 파일 경로
이미지를 HTML 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야합니다. 경로가 정확하지 않다면 웹 문서에서 이미지가 표시되지 않습니다.
웹 상의 링크를 복사해 이미지 경로 지정하기
인터넷에 올라와 있는 이미지 링크를 복사해 이미지 경로를 지정해 보겠습니다. 크롬 브라우저에서는 웹 페이지에 넣고 싶은 이미지를 마우스 오른쪽 버튼으로 클릭하고 [ 이미지 주소 복사 ] 를 선택하면 이미지 경로를 알 수 있습니다. 이렇게 복사한 이미지 파일의 경로를 src 속성 값으로 지정할 수 있습니다.
<img src="https://www.blogger.com/img/logo_blogger_40px.png">
alt - 이미지를 설명해주는 대체 텍스트
alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용합니다. 대체 텍스트란
무엇이고 언제 사용할까요?
웹 페이지에 삽입한 이미지는 시각적인 요소이기 때문에 시각 장애인들은 그 내용을
알 수 없습니다. 웹 문서를 읽어주는 화면 낭독기도 문서 상의 텍스트만 읽어주기
때문에 이미지를 만나면 그대로 건너 뜁니다. 하지만
<img> 태그의 alt 속성을 작성하면 이미지에 대한 설명을 넣을
수 있고 시각 장애인에게 읽어 줄 수 있습니다.
<img src="home.jpg" alt="홈으로 가기">
하지만 특별한 의미 없이 화면을 꾸미기 위해 사용한 이미지에는 alt 속성에 대체 텍스트를 넣지 않아도 됩니다.
<img src="app.gif" alt="">
width, height - 이미지 크기 조정
이미지 파일을 웹 페이지에 추가 할 때 브라우저 창에 원하는 크기로 조정해 넣고 싶다면 width 속성과 height 속성을 사용하면 됩니다. width 속성과 height 속성을 사용하지 않으면 원본 그대로 표시됩니다.
이미지 파일의 용량은 그대로 두면서 웹 사이트의 디자인에 따라 이미지를 작게 또는 크게 표시해야 할 경우 이 속성을 사용하면 유용합니다.
다만, 작은 이미지를 크게 표시할 경우 화질이 나빠질 수 있습니다.
예제
예제 1
- width, height 속성을 정하지 않으면, 이미지 원본 크기 그대로 나옵니다.
- 만약 지정한 경로에 이미지가 없다면, alt 속성에 있는 값이 출력됩니다.
<img src="//bit.ly/2GrygUe" alt="My Image">
<img src="//bit.ly/2GrygUe_" alt="My Image">
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
- width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율에 맞게 정해집니다.
- height 속성으로 세로 크기만 정하면 가로 크기는 원본의 가로 세로 비율에 맞게 정해집니다.
- 가로 크기와 세로 크기를 동시에 정하면 원본의 가로,세로 비율과 상관없이 설정한 크기로 나옵니다.
<img src="//bit.ly/2GrygUe" alt="My Image">
<img src="//bit.ly/2GrygUe" alt="My Image" width="100">
<img src="//bit.ly/2GrygUe" alt="My Image" height="150">
<img src="//bit.ly/2GrygUe" alt="My Image" width="100" height="200">
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 3
- 첫번째 이미지는 클릭하면 현재 창에서 이미지를 표시합니다.
- 두번째 이미지는 클릭하면 새 창에서 이미지 표시합니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
이미지 도구
구글 드라이브로 이미지 링크 만들기 Blogger 사진 관리하기