[HTML] 이미지 태그 활용과 그래픽

1. 이미지 종류

• GIF - 넓은 부분의 한 색에 대해서 압축 능력이 좋다. 
          256개의 색깔 표현이 가능하다.
          투명화도 가능하나, 모서리 부분이 들쭉날쭉 할 수 있다.
          여러개의 프레임을 가지고 있고, 짧은 동영상 표현이 가능하다.
  
  
• SVG - Scable Vector Graphic의 약자
          수학과 벡터로 이루어져 있기 때문에, 이미지의 크기를 정하는데 있어서 크고 늘리는데 손실이 없다.
           파일 사이즈가 굉장히 작다.
  
  
• JPG - 사진과 같은 이미지에 맞는 형태다.
          파일의 색을 단순화함으로써 압축을 할 수 있으나, 이미지 손실이 일어날 수 있다.
          압축 시 크기와 이미지의 품질 중에 선택하게 된다.
  
  
• PNG - 웹에서 gif와 jpg보다 새로운 등장한 형식이다.
           이미지의 투명성이 필요할 때 유용하다.
           jpg나 gif에 대해 더 좋은 성능을 보일 때도 있다.
          압축에 유리하다.
   

2. <img> 태그 

• 이미지 태그에는 4가지 속성이 사용된다. src(source), alt(alternative), height ,width 이다.
• src는 웹한테 어디에 파일 위치가 있는지 알려준다.
• alt는 그림이 보이지 않을 때, 그림을 대체로 보여줄 글이다.                                                   
• (눈이 안보이는 사람이 그림을 못볼때, 그림을 읽어주는 기능을 쓰면 브라우저가 alt에 쓰여진 글을 읽어준다.)
• height는 높이, width은 너비이다.

See the Pen Untitled by siloam72761 (@siloam72761) on CodePen.

 

 

 

 

 

3. 화면에 맞는 이미지 크기 설정하기

• 기기마다 각 이미지에 맞는 해상도 1x, 2x, 3x가 존재한다. 숫자가 커질수록 고해상도 이미지라고 보면 된다.
• 각 기기에 최적화되게 최대한 고해상도 설정이 필요하기에 한 이미지에 대해 여러개의 복사본을 만든다.
• 웹 브라우저가 보는 사람의 화면의 크기에 맞게 이미지를 제공해준다.

See the Pen Untitled by siloam72761 (@siloam72761) on CodePen.

 

 

 

 

 

4. 화면에 맞는 이미지 크기 설정하기(심화)

• img 태그 안에 pic 태그를 이용함으로써 좀 더 세부적인 설정이 가능하다.
• 다음 예제는 보는 사람의 화면의 너비가 600px일 경우 그냥 사진 중에서 화면에 맞는 사진을 업로드한다.
• 만약에 600px 미만일 경우 작은 화면에 맞게 잘려진 사진 중에서 사진을 업로드 한다.

See the Pen Untitled by siloam72761 (@siloam72761) on CodePen.