[HTML]HTML img 요소

목차

HTML img 요소

• 브라우저는 다른 HTML 요소와는 조금 다른 식으로 img 요소를 처리함
  HTML 페이지를 읽고 난 후 웹 서버로부터 각 이미지를 회수한 뒤 보여줌
  만약 웹페이지에 큰 이미지가 한 개 이상 있다면 섬네일(큰이미지를 보기 위해 사용자들이 클릭할 수 있는 작은 이미지)을 생성하여 웹 페이지를 좀 더 유용하게 하고 내려받는 속도를 빠르게 할 수 있음
  
  
• 웹 브라우저가 널리 지원하는 이미지의 형식으로는 JPEG, PNG, GIF가 있고 JPEG 형식은 사진이나 다른 복잡한 이미지에 적합
  GIF나 PNG형식은 로고나 단색으로 구성된 간단한 그래픽과 선, 텍스트에 적합
  JPEG 이미지는 다양한 품질로 압축될 수 있고 필요한 정도에 따라 파일 크기와 품질 사이에 최적의 균형을 맞추어서 사용하길 권장
  GIF & PNG는 무손실 형식이고 이는 파일크기가 JPEG보다 크다는 것을 의미, PNG는 GIF보다 투명도를 처리하는 데 더 낫고 256색으로 한정된 GIF보다 더 많은 색을 가지고 있음 GIF만 유일하게 애니메이션 지원
  
  
• img element의 alt속성은 이미지에 대한 설명을 나타날 때 사용, ex) 바나나 이런식으로 사용하고 해당 이미지가 표시되지 않는 경우 alt에 있는 내용이 표시됨, 또한 시각장애인을 위해 이미지를 설명하는 스크린 리더기에서도
  
  
• a태그에 주로 사용되는 title 속성은 해당 element에 대한 설명을 툴팁형식으로 보여줌(head안의 title과 혼동하면 안됨) ex) 링크예제, a태그가 아닌 다른 element에도 사용은 가능하지만 많이 쓰이지 않음
  
  
• 인용구를 지원하는 태그
  짧은 인용구: q태그(문단 안에서 인용할 때 사용하는 인라인 요소) ==> 이몸이 죽고죽어 일백번 고쳐죽어..
  그냥 "" 큰 타옴표를 사용하는것보다 좀 더 구조적이고 의미있게 하기위한 것(브라우저에게 실제 인용구라는 것을 인식하게 하기 위함)
  긴ㅅ 인용구: blockquote태그(항상 앞과 뒤에 라인브레이크를 가진 것처럼 표시되는 블록요소) ↓

출처 : Head First HTML and CSS(개정판)