img tag


<img src="경로" alt="대체 텍스트 설명" />

1. 경로에는 URL과 같은 절대경로와 현재 디렉토리를 기준으로 한 상대경로를 지정할 수 있다.
2. alternative text는 오류로 인하여 이미지를 불러올 수 없는경우나 비 시각적 브라우저(시각장애인이 사용하는 브라우저등)
에서 이미지를 텍스트로 대체 할 수 속성입니다.
가능한 간단하고 명료하게 작성해야 합니다.
잘못된 예시) <img src="주소" alt="이미지" />
올바른 예시) <img src="주소" alt="물을 마시는 하마" />

3. srcset
srcset 속성은 다양한 크기를 가진 동일한 이미지를 명시해주는 속성입니다.
1개의 이미지를 명시하려면 해당 속성을 무시해도됩니다.

사용자의 환경에 맞추어 최적의 크기 이미지를 보여주기 위해 사용하는 속성이지만
원하는 해상도에 맞게 정확하게 명시 할 수 있는 CSS의 미디어쿼리 사용을 권장합니다.

EX)

<img srcset="주소1 300w,
          주소2 400w,
          주소3 1000w"
  src="주소4"
  alt="이미지 설명"
/>



위 예시는 뷰포트 너비가 300px일때 주소1, 400px일때 주소2, 1000px일때 주소3 이미지를 보여주며
srcset을 이용할 수 없는 상황에서는 src에 속한 이미지가 보여집니다.

'CSS' 카테고리의 다른 글

input 자동완성 background-color 변경하기  (0) 2021.09.12
css 컨벤션, css 코딩 스타일  (0) 2021.09.10
Anchor Tag <a> tag  (0) 2021.08.01
강조태그 <em> <strong>  (0) 2021.07.31