[HTML/CSS] 이미지 넣기 <img>태그!!

 

[HTML/CSS] 이미지 넣기 <img>태그!!

이미지는 웹 문서를 한눈에 파악하기 쉽도록 해주는 가장 중요한 매체로 웹 페이지에서 텍스트와 함께 가장 많은 부분을 차지하기 때문에 반드시 알고 있어야해요.

 

 

<img> 이미지 삽입 태그

태그	속성	속성값	비고
img	src	파일명이나 URL	이미지 파일의 경로와 파일명 혹은 URL
	alt	이미지 설명	이미지에 대한 대체 텍스트
	border	테두리 지정	테두리선 두께 지정
	align	left / right 등 정렬	top/middle/bottom/left/right 지정
	width	숫자 / % 등 너비	이미지의 가로크기
	height	숫자 / % 등 높이	이미지의 세로크기
	hspace	좌우 여백 숫자	이미지의 좌우여백
	vspace	상하 여백 숫자	이미지의 상하여백

* alt 속성은 웹접근성 향상을 위해서 작성해주는것이 좋습니다. 이미지 접속이 불가능할 경우 엑스박스와 함께 대체 텍스트가 노출되는데 이때 대체 텍스트를 작성해두었다면 이미지가 보이지 않아도 무슨 내용인지 파악 할 수 있습니다. 또한 시각장애인이 이미지를 볼 수 없을때 TTS가 대체 텍스트를 읽어주므로 내용 파악이 가능하도록 해줍니다. 마지막으로 검색엔진이 이미지와 함께 대체 텍스트를 크롤링하기 때문에 노출의 기회 또한 많아집니다. 예) <img src="https://t1.daumcdn.net/cfile/tistory/244A4E435934C57829">

 

 

 

티스토리는 글을 쓸 때 첨부된 사진을   누르면 우측 메뉴에 사진 크기와   대체 텍스트 입력창이 있어서   쉽게 alt 속성을 넣을 수 있어요.

 

 

 

 

< 연습하기 >

 

w3스쿨js피들