지난 11번째 블록르 내용으로 앵커태그인 <a> 태그에 알아보고 <a>태그와 함께 사용되는 추가적인 정보를 제공햐는 href 속성(attribute)에 대하여 알아보았습니다, 그리고 이번 12 번째 블로그 내용으로 웹문서에 image를 불러오는 <img>태그와 이 <img>태그와 관련된 src, alt, width and height, title 등 다양한 속성에 대하여 소개하고자 합니다
1 . <img>태그란?
<img> 태그는 image의 약어로 웹 페이지에 이미지를 표시하는 태그입니다. <img> 태그는 기술적으로 HTML 페이지에 삽입되지 않으며 HTML 페이지에 연결됩니다. <img> 태그는 참조된 이미지의 보관 공간을 만들어 주는 역할을 하게 됩니다.
----------
----------
2. <img> 태그를 지정하는 방법
1) <img> 태그는 내용(content)이 없는 빈태그(empty tag)로 되어 있기 때문에 속성만 포함 입력하며, <br> 태그처럼 닫는 태그(closing tgag)가 없습니다. 이는 이미지에 대한 정보가 <img> 태그의 속성에 별도로 기록될 수 있기 때문입니다. <img> 태그의 기본타입은 아래와 같습니다
3. <img>태그와 함께 사용되는 다양한 속성들
<img> 태그는 src, width, height, alt 및 title과 같은 다양한 속성과 함께 사용됩니다. . 1) src 속성은 이미지 소스의 파일 이름을 URL (웹 주소) 형식으로 지정합니다.
2) width 및 height 속성은 이미지 크기를 픽셀 단위나 %(퍼센트)로 브라우저에서 차지하는 비율로
나타낼 수 있습니다.
< Chrome 웹 브라우저에 표시되는 이미지>
3) alt 속성은 alternate text(대체텍스트)의 약자로 웹브라우저가 이미지를 찾지못해 제대로 보여주지 못하는 경우 이미지를 대신하여 보여주는 대체 텍스트를 말하며, 이 대체 텍스트는 이미지에 대한 올바른 설명을 담고 있어야 합니다
만약 <img> 태그의 주소오류나 타이핑오류 등으로 인해 웹브라우저가 이미지를 locate하는 데 실패하게 된다면,
아래의 예처럼 src속성이 이미지가 있는 위치를 제대로 입력하지 않는 경우, 대체텍스트로 입력된 flower가 표시되게 됩니다
4) 제목 속성(title attribute)은 마우스를 이미지에 올려놓을 때 나타나는 작은 이미지 설명 창입니다.
4. <img>태그와 src 속성(attribute) 코딩 예
