[목차]
A. 이미지 타입
B. 이미지 삽입 방법
A. 이미지 타입
웹에서 사용할 수 있는 이미지의 타입에는 크게 4가지가 있으며
다음과 같은 특징이 있다.
1. gif
- 가장 낮은 용량
- 낮은 이미지 품질 (8비트 컬러)
- 투명도 표현 O
- 여러장의 이미지를 하나의 파일 안에 담을 수 있음
2. jpg (jpeg)
- 낮은 용량
- 보통의 이미지 품질 (24비트 컬러)
- 투명도 표현 X
3. png
- 비교적 높은 용량 (손실 없는 이미지 압축)
- 높은 이미지 품질
- 투명도 표현 O
4. svg
- 가장 높은 용량
- 가장 높은 이미지 품질
- 확대 축소해도 이미지 품질이 변하지 않음
gif, jpg, png 포맷은 비트맵(Bitmap) 방식,
svg 포맷은 벡터(Vector) 방식이라고 부른다.
벡터방식은 비트맵 이미지처럼 도트로 구성되어있지 않기 때문에
확대 축소해도 이미지가 깨지지 않는다.
대신 그만큼 컴퓨터에 주는 부담도 높기 때문에 자주 사용하기는 어렵다.
(보통 사이트의 로고 등에 한정지어서 사용되고 있다.)
B. 이미지 삽입 방법
1. HTML 이미지 삽입
<img src="" alt="" width="" height=""/>
- src="#" : 삽입할 이미지의 링크 주소
- alt="#" : 해당 경로에 이미지가 없을 때 이미지 대신 보여줄 텍스트
- width, height ="#" : 삽입할 이미지의 넓이와 높이
2. CSS ~ 백그라운드 이미지 삽입
background-image: url();
괄호 안에 이미지 주소를 삽입한다.
background-size
백그라운드 이미지의 사이즈를 조절하는 속성.
background-size: auto;
이미지를 원래 사이즈 그대로 보여준다.
background-size: cover;
이미지 비율을 유지하며 화면을 꽉 채운다.
background-size: contain;
가로, 세로 중 먼저 채워지는 쪽에 이미지를 맞추어 보여준다.
background-size: 100px 50px;
가로, 세로 순서대로 픽셀값을 직접 지정한다, 비율 유지 X
background-size: 60% 70%;
가로, 세로 순서대로 퍼센트값을 직접 지정한다.
(퍼센트의 기준점은 부모 요소.)
background-repeat
박스 영역보다 배경이미지의 사이즈가 작을 때 이미지의 반복 노출 여부
background-repeat: no-repeat;
반복하지 않는다.
background-repeat: repeat;
이미지를 반복해서 보여준다. (기본 설정)
background-repeat: space;
반복할 수 있는 만큼 반복하고, 공간이 남으면 이미지 사이에 여백을 준다.
background-repeat: round;
반복할 수 있는 만큼 반복하고, 공간이 남으면 이미지 확대를 해서 채운다.
background-position
배경 이미지의 위치를 지정하는 속성.
background-position: left center;
가로는 왼쪽 정렬, 세로는 가운데 정렬.
(가로 속성에는 left, center, right 중 한 가지)
(세로 속성에는 top, center, bottom 중 한가지)
background-position: 70% 50%;
가로, 세로 순서대로 퍼센트값을 지정한다.
background-position: 50px 25px;
가로, 세로 순서대로 픽셀값을 지정한다.
