인라인 이미지에 대해 요약정리

 

 

인라인 이미지란 무엇인가?

 

인라인 이미지는 정보를 제공하거나 하이퍼링크를 나타내기 위해 웹 페이지에 삽입되는 그래픽 이미지를 말합니다. 인라인 이미지는 데이터 URI 체계를 사용하여 웹 페이지에 통합되며 일반적으로 GIF, JPEG 또는 PNG 형식의 파일입니다.

 

#URI에 대해 궁금하면 아래의 글 확인#

2020/05/06 - [IT/기획자의 IT 시스템 공부] - [쉽게 읽는 IT시스템] URI 와 HTTP 쉽게 이해하기

[쉽게 읽는 IT시스템] URI 와 HTTP 쉽게 이해하기

데이터 URI를 사용하면 브라우저에서 즉시 검색 할 수있는 작은 크기의 데이터를 포함 할 수 있습니다. 인라인 이미지는 HTML과 함께 브라우저에서 검색되어 웹 문서의 일부로 표시됩니다. 브라우저가 이미지를 빠르게 검색하고 표시 할 수 있도록 하기 위해서는 작은 크기의 인라인 이미지를 사용하는 것이 좋습니다. 이미지가 클수록 로딩 시간이 느려지고 사이트가 화면에 표시되는 데 시간이 오래 걸리기 때문입니다.

 

인라인 이미지의 html 태그를 사용합니다. img 태그를 볼 수가 있습니다. img 태그의 필수 속성은 src 속성입니다. src 속성은 브라우저가 이미지 파일을 검색 할 수있는 웹 주소 또는 URL을 지정합니다. src 속성 외에도 HTML 인라인 이미지는 세 가지 선택적 속성으로 정의 할 수 있습니다. 이들은 대체, 정렬 및 ismap입니다.

alt 속성은 인라인 이미지 텍스트 대안을 제공합니다. 따라서 뷰어의 브라우저가 그래픽을 지원하지 않는 경우 이미지 대신 텍스트를 보게됩니다. alt 속성을 사용해서 이미지를 대체할 수 있는 텍스트를 기입하는 것이 좋습니다. 하지만 alt 속성 값을 비워 둘 수 있습니다. 예를 들어 장식용 이미지인 경우 대체 텍스트를 제공 할 필요는 없습니다. 
  
인라인 이미지 스타일은 align 속성으로 설정할 수 있습니다. align 속성은 브라우저에 인라인 이미지가 웹 페이지의 텍스트와 관련하여 나오는 위치를 알려줍니다. 인라인 이미지는 웹 페이지에서 인접한 텍스트의 상단, 중간 또는 하단과 정렬 될 수 있습니다.