웹 이미지의 종류
1) 비트맵: 다양한 색상을 자연스럽게 표현하지만 확대/축소시 깨지는 현상이 발생합니다.
ex) 이런 고화질의 고양이 사진
2) 벡터: 정교한 이미지를 표현하기는 어렵지만 확대/축소가 자유롭고 용량 변화가 없습니다.
ex) 단순 아이콘
| 종류 | 특징 | 이미지손실여부 |
|---|---|---|
JPG | 용량 적음 | O |
PNG | 용량 큼, 투명도 지원 | X |
GIF | 애니메이션 지원, 8비트 색상 | ? |
WEBP | 손실/비손실 압축 지원, 애니메이션 지원, 투명도 지원 | X |
SVG | CSS/JS로 제어 가능 | X |
글자(인라인)와 상자(블록)
| 종류 | 방향 | 특징 | 사이즈지정 | 상하여백 |
|---|---|---|---|---|
| Inline | 좌->우 | 길이, 높이가 컨텐츠 크기만큼 줄어든다, 안에 Block태그 사용 불가 | X | 사용X |
| Block | 위->아래 | 길이, 높이가 부모 요소의 크기만큼 자동으로 늘어난다. | O | 사용O |
--> Block이 Inline에 비해 꽤나 관대하게 사용할 수 있다.
개발자