이미지를 표시하는 태그
<img> 태그 (MDN)
:: HTML 문서에서 이미지를 표시할 때 사용되는 태그.
:: 닫는 태그는 사용하지 않는다.
:: 이미지 주소를 나타내는 src 속성은 필수로 있어야 한다.
img 태그의 주요 속성
:::: src 속성
-- 표시할 이미지의 주소(URI)를 나타내기 위해서 사용되는 속성.
-- 값으로 내 컴퓨터에 있는 파일 경로나 웹 이미지 링크 주소를 사용할 수 있다.
---- 내 컴퓨터에 있는 파일을 웹에 보여주려면 이미지 파일도 서버에 같은 경로로 올라가 있어야 한다.
---- 웹 상의 이미지를 사용할 경우 경로를 '참조'하는 방식이기 때문에 원본 경로의 이미지 상태에 종속된다.
:::: alt 속성
-- 이미지를 표시할 수 없을 때 이미지를 설명하는 대체 텍스트를 삽입하기 위해 사용되는 속성.
-- 대체 텍스트는 웹 접근성을 향상 시키기 위해서도 넣어줄 필요가 있다.
:::: width, height 속성
-- 화면에 표시할 이미지의 넓이(width)와 높이(height)를 정하는 속성.
-- 값은 양의 정수값으로 단위 없이 적어야 한다. (px단위로 지정된다.)
-- 생략할 경우 원본 이미지의 크기로 표시된다.
-- width나 height 중 하나만 사용할 경우 나머지는 원본 이미지 크기 비율로 자동 설정된다.
-- 원본 이미지의 크기보다 크게 설정하면 이미지가 확대되고, 작게 설정하면 이미지가 축소된다.
-- 이때 사용된 이미지가 비트맵 포맷 이라면 확대시 화질이 깨지게 되니 주의해야한다.
---- 벡터 포맷인 svg 파일을 사용하면 확대해도 화질이 깨지지 않는다. (웹에서 사용가능한 이미지 포맷(영문))
---- css로도 이미지 크기를 조정할 수 있다. css를 사용하면 %단위로도 조정가능하다.
<img>태그를 사용하는 간단한 예제
See the Pen image example 1 by lypi (@Lypi) on CodePen.
브라우저 사이즈에 따라서 다른 이미지 로딩하게 하기.
:::: srcset 속성과 sizes 속성
-- srcset 속성은 sizes 속성과 함께 사용되며 브라우저 크기에 따라 다른 이미지를 로딩하게 한다.
-- srcset 속성과 sizes 속성은 조건을 '참고'하여 브라우저가 최적의 사이즈를 결정해서 출력하게 한다.
-- 그러므로 크기에 따라서 지정한 크기로 이미지가 로딩되게 하고 싶다면 미디어 쿼리를 쓰는게 좋다.
-- 결국 이 속성은 어떤 이미지를 어떤 크기로 보여줄지는 '브라우저가 결정'하라는 의미이다.
-- 큰 사이즈의 이미지를 다운로드해서 작은 사이즈의 화면에 축소해서 보여주는 것은 자원 낭비이기 때문이다.
-- 이 속성의 의의는 css의 미디어 쿼리와 달리 페이지 최적화라는 것을 잊어서는 안된다.
-- 본 예제는 웹 페이지로 연 뒤 창 크기를 바꾸면서 확인해볼 필요가 있다.
-- 더 확실하게 알 수 있도록 이미지 자체가 바뀔 수 있도록 해놨는데 캐쉬 저장이 되면 이미지가 변하지 않는다.
-- 크롬 개발자 모드를 켰을 때 캐쉬를 사용하지 않도록 하고, 화면 크기를 줄이고 새로고침을 하면 확인가능하다.
예제코드 (웹페이지에서 보기)
See the Pen image sample 2 by lypi (@Lypi) on CodePen.
썸네일용