<img> vs background

• 이미지를 표현하는 방법은 HTML에서 img 태그를 사용하는 방법, CSS에서 background를 사용하는 방법 이렇게 2가지가 있다.
  이번 포스팅에서는 그 중 background를 정복할려고 한다

• 일단 img 태그나 CSS background나 이미지를 표현한다는 것은 동일하다. 보다 시멘틱하게 작업할려면 언제 img 태그를 사용하고 background를 사용해야할까?

😄 img vs background

• 대략적인 차이점은 아래와 같다

• img 태그가 background보다 성능에 유리
  
  
• img 태그는 프린트 출력시 포함, background는 미포함
  
  
• 이미지 태그는 alt 태그를 이용해 이미지 자체에 문구가 있거나 로딩에 실패시 알려주지만 background는 alt 태그가 없어서 알려주지 못함
  
  
• background는 이미지를 반복하는 등 디자인적 요소에서 유리
  
  
• img 태그는 구글 검색등을 통해 노출되지만 background는 노출되지 않는다
  
  종합해보면 이미지가 사용자에게 content를 이해하는데 도움을 주고 성능과 프린트 등을 고려하면 img 태그가 유리하고
  사용자의 content 이해보다 디자인적 요소가 중요시하다면 background가 유리하다

😄 background 속성

• background-attachment : 이미지를 어디에 고정시킬지, 스크롤 여부 지정 (default : scroll)

• background-origin : 이미지 시작위치(0,0)를 어디에서 시작할지 지정 (attachment가 더 우선순위) (default : padding-box)

• background-color : 이미지 배경색 지정

• background-image : 이미지 삽입 (default : none)

• background-position : 이미지 시작 위치 지정 (right, left, top, bottom, center)

• background-repeat : 이미지 반복 지정 (default : repeat)

• background-size : 이미지 크기 지정 (default : auto)

• background-clip : 이미지를 어느 영역만 채울지 지정

😄 code 1. image, repeat, position, size

/*HTML*/
<div class="e"></div>

/*CSS*/
div {
	width:100vw;
    height:300vh;
}

.e {
	/* 이미지 삽입 */
    background-image: url('img/background.png');
    /* 왼쪽 60px, 위 30px 떨어진 위치에서 시작 */
    background-position: left 60px top 30px;
    /* 이미지가 반복되지 않는다 */
    background-repeat: no-repeat;
    /* width 50px height 70px */
    background-size: 50px 70px;
}

background-image

url을 사용하여 지정한 이미지를 넣을 수 있다. 기본적으로 요소의 너비, 높이만큼 반복되어서 나온다
여러개의 이미지를 넣을 수도 있다. 쉼표로 구분하며 처음 지정한 이미지가 맨 위로 나온다

background-position

left, top, right, bottom, center로 지정할 수 있다
하나의 값만 지정하면 나머지 값은 자동으로 center로 지정된다
px 뿐만 아니라 em, %등의 단위도 사용 가능하다

background-repeat

no-repeat : 이미지가 반복되지 않는다
repeat-x : 이미지를 x축으로 반복한다 (잘릴 수 있음)
repeat-y : 이미지를 y축으로 반복한다 (잘릴 수 있음)
space : 이미지를 반복하다가 이미지가 잘릴 것 같으면 반복을 멈춘다. 반복되는 이미지 사이 여백이 존재하며 동일하게 가져간다 (잘리지않음)
round : 이미지를 반복하다가 이미지가 잘릴 것 같으면 반복을 멈추는데 반복되는 이미지 사이 여백이 전혀 없다. space와 다르게 이미지 비율이 깨지면서 늘어나거나 줄어든다 (잘리지 않음)

background-size

width와 height에 값을 지정한다. 하나의 값만 지정시 width만 적용되며 height는 auto를 가진다
cover : 요소 안의 이미지를 최대한 확대해서 보여준다. 이미지가 잘릴 수도 있다
contain : 요소 안의 이미지를 잘리지 않게 최대한 확대해서 보여준다. 이미지들은 동일한 비율을 유지한다

😄 code 2. attachment, origin, clip

/*HTML*/
<div class="e"></div>

/*CSS*/
div {
	width:100vw;
    height:100vh;
}

.e {
    background-image: url('img/background.png');
    border: 100px solid red;
    padding: 100px;
    /* 이미지 시작위치(0,0)를 border 경계선(0,0)부터 시작 */
    background-origin: border-box;
    /* 이미지를 viewport에 고정, 스크롤해도 고정 */
    background-attachment: fixed;
}

background-origin

border-box : 이미지의 시작위치(0,0)를 border 경계선(0,0)부터 시작
padding-box : 이미지의 시작위치(0,0)를 padding 경계선(0,0)부터 시작
content-box : 이미지의 시작위치(0,0)를 content 경계선(0,0)부터 시작

background-attachment

fixed : 이미지를 viewport에 고정, 스크롤 무시
local : 이미지를 요소에 고정, 요소에 스크롤 있으면 이미지도 스크롤 됨
scroll : 이미지를 요소에 고정, 요소에 스크롤 있어도 이미지는 고정됨

background-clip

border-box : 이미지를 border + padding + content 영역 전부 채운다
padding-box : 이미지를 padding 영역 + content 영역을 채운다
content-box : 이미지를 content 영역만 채운다

background

background는 단축 속성이 가능하다. 아래 주의점만 지키자
1. size는 무조건 position 바로 뒤에 위치해야하며 size/position으로 구분해야한다
2. 1번을 제외하고 속성 순서는 상관 없으며 필요시 생략도 가능하다

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍