임베디드 요소 - img

img : 이미지를 담는 태그

   > 안쪽에 내용이 없는 닫힌 태그

   - src 속성 : source, 띄울 이미지의 경로를 표시하는 속성, 필수적으로 들어가야 한다.

   - alt 속성 : alternative, 대체 텍스트로, 이미지가 출력되지 않을 경우 이미지의 설명을 텍스트로 나타내게 만든다.

   - width & height : 이미지의 가로, 세로 크기를 지정해줄 수 있다.

      > width속성 또는 height 속성 중 하나만 사용한다면, 이미지의 비율에 맞춰 사용하지 않은 속성도 자동으로 정해진다.

      > 두 속성 모두 사용한다면, 비율을 무시하고 이미지 크기를 조정한다.

 

   반응형 이미지

   - srcset 속성 : 이미지 소스를 다수 올릴수 있는 속성

      > 반응형 이미지를 설정하기 위해 사용한다.

      > 이미지의 URL + 공백 + 너비서술자 or 픽셀 밀도 서술자 등을 입력하여 사용한다.

      > placeholder.com 사이트를 통해 사이즈에 맞는 이미지를 구할 수 있다.

      ex)

      <img src="images/basic.png"

               srcset=" images/big.png 600w,

                             images/basic.png 450w,

                             images/small.png 300w"/>

      위와 같이 지정해놓으면 웹 너비에 따라 이미지가 바뀐다.

   - sizes 속성 : 크기 조건을 입력한다

      > min-width : 최소 너비값 설정, 해당 이미지는 설정 너비 이하로는 줄어들지 않는다.

      > max-width : 최대 너비값 설정, 해당 이미지는 설정 너비 이상으로는 늘어나지 않는다.

      ex)

      <img src="images.png"

               srcset=" images/big.png 600w,

                             images/basic.png 450w,

                             images/small.png 300w"/>

               sizes="(min-width:600px) 600px,

                          (min-width:450px) 450px,

                           300px" />

      각 조건별로 최소 사이즈를 정해준다.

      (small.png 는 300px, basic.png는 450px, big.png는 600px로 고정한다.) 

 

   - 이미지 유형

      > JPEG : .jpg .jpeg .jfif .pjpeg .pjp 등의 확장자를 사용하며, 가장 많이 사용되고, 정지 이미지의 손실 압축에 적합하다.

      > PNG : .png 확장자로, 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우 JPEG보다 선호된다.

      > GIF : 여러장의 이미지로 구성된 애니메이션 표현 기능, 애니메이션 표현을 중점으로 하다보니 화질이 저하된다.

      > WEBP : 구글이 만든 이미지 포맷으로, 품질, 압축률 등이 우수하지만 지원되는 브라우저가 제한적이다.

         :: can i use 사이트를 통해 지원되는 브라우저를 검색해볼 수 있다.

      > SVG : 벡터를 활용하여 구성된 이미지, 비트로 구성된것이 아닌 벡터로 구성되어있어 확대되어도 깨짐현상이 없다.