이미지 (image)

참고

developer.mozilla.org/ko/docs/Web/HTML/Element/img

: 이미지 삽입 요소

 

 

<img src="#" alt="" />

 

 

 

• src

- 필수 속성.

- 포함하고자 하는 이미지 절대/상대 경로를 넣어준다.

 

 

 

 

 

• alt

- alt 필수는 아니지만 항상 값을 넣어줄 것!

- 이미지 컨텐츠를 간단 명료하게 설명하는 텍스트 (이미지 유/무, 파일 이름 그 자체를 넣어서는 안됨)

- 스크린 리더가 alt의 값을 읽어 사용자에게 이미지 설명 => 접근성을 높을 수 있음

- 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌.

- alt 속성을 아예 적어주지 않으면. '이미지가 콘텐츠에서 중요한 부분이지만 텍스트로는 표현할 수 없다'의 의미

- alt="" 빈문자열을 사용하면. 이미지가 콘텐츠의 중요 부분은 아니니까 비 시각적 브라우저가 굳이 렌더링하지 않아도 된다는 의미. (시각적 브라우저도 만약 alt가 비어있는데 이미지가 깨질 경우? 깨진 이미지 아이콘을 표시하지 않음)

- 이미지를 텍스트로 복사- 붙여넣기할 때, 이미지 링크를 북마크 할 때도 alt 값 사용

 

 

 

 

 

• 이미지를 링크로

<a href="https://developer.mozilla.org">
  <img src="https://developer.mozilla.org/static/img/favicon144.png"
       alt="Visit the MDN site">
</a>

alt 텍스트에 해당 링크가 가리키는 곳 반드시 넣을 것.

 

 

 

 

 

 

• 스타일링

- 이미지는 display:inline이지만 

이미지 자체가 가지고 있는 크기가 있다. (그래서 inline-block처럼 보이기도..)

- width, height, padding, border/border-radius, margin 등의 속성 사용 가능

(물론 사용하기 전에 명시적으로 display:block을 선언해주면 오차없이 더 깔끔한 코딩 가능)