오늘은 헷갈렸던 몇 가지 background 속성에 대해서 정리를 해볼 것이다.

Background

background 속성은 말그대로 "배경"을 이미지 파일을 이용해서 삽입하는 것을 말한다.

대체적으로 이전 게시물에서 한번 정리를 해서 겹칠 수도 있지만 background 속성은 디자인적으로 많이 사용하기 때문에 한번 더 속성에 관해서 정리할 예정이다.

background-image는 이미지를 배경으로 적용시키는 것을 기본적으로 알기 때문에 정리를 하지 않을 것이다.

background의 속성은 아래처럼 다양하다.

• background-repeat : 말 그대로, 배경 이미지를 반복을 하는지 안하는지에 대한 속성이다.
• background-size : 배경 이미지를 사이즈를 설정하는 속성이다.
• background-position : 배경 이미지를 배치할 위치를 설정하는 속성이다.
• background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정하는 속성이다.

Background-repeat

우선 background-image의 속성을 사용해서 배경 이미지를 적용해보았다.

빨간 테두리의 박스는 width:900px, height:800px로 적용하였고 배경이미지는 '640x640' 사이즈이다.

우선 background-image을 적용한 결과는 박스의 하단과 우측의 잘린 배경 이미지때문에 보기가 싫어진다.

이것은 background-repeat의 기본값이 적용되었기 때문이다.
background-repeat는 기본값이 repeat이기 때문에 no-repeat을 설정해주지 않으면 배경 이미지를 남는 공간에 반복해서 나열시킨다.

반복도 원한다면 x축과 y축으로 반복을 적용시킬 수 있는데 속성값으로 repeat-x와 repeat-y를 사용하면 된다.

아래 이미지는 각각 repeat-x와 repeat-y의 결과이다.
보면 파란색 박스의 영역을 비워져있고 원하는 방향으로만 반복된 것을 볼 수 있다.

그리고 있는지도 몰랐던 속성값이 더 있었다.
space와 round이다. 자주 쓰지 않을 것 같으니 참고만 해두는 것이 좋을 것 같다.

• space : space는 요소가 잘리지 않을 만큼 이미지를 반복한다. 가장 처음 이미지와 마지막 반복 이미지는 양 끝에 고정이 된다.

이미지를 320x320으로 변환하여 적용해보았다.

위의 이미지를 보면 중간의 + 모양으로 영역이 비워진 것을 볼 수 있다. 왜냐하면 이미지의 크기가 빨간색 박스의 영역에 3번이 들어가면 마지막의 배경 이미지가 잘리기 때문에 1번째와 2번째 이미지가 양끝을 차지하고 가운데가 텅 비는 것이다.

정리하자면 "배경 이미지가 잘리면 더 이상 반복하지않고 처음의 이미지와 마지막 반복 이미지를 양끝에 배치시킨다"라고 생각하면 될 것 같다!

• round : 이미지가 들어갈 수 있는 영역이 생기면 반복 이미지가 늘어나 여백을 남기지 않는 속성이다. 구체적으로 말하자면 이미지를 하나 추가할 수 있는 영역(남은 공간의 넓이가 이미지 전체 너비의 절반보다 크거나 같으면)이 생기면 이미지를 추가하고 기존에 적용된 반복된 이미지들은 크기가 줄어들어 배치가 된다.

아래의 이미지는 900x800의 박스에 적용한 결과다.

이미지의 크기 320x320의 이미지를 적용하면 x축으로 2번이 들어갈 수 있고 남은 영역이 900 - (320*2) = 260px으로 320px의 절반인 160px보다 크기 때문에 이미지를 한번 더 넣어서 결과적으로 3개가 반복된다.

y축같은 경우 2개의 이미지가 들어가서 남은 영역이 800 - (320*2) = 140px으로 160px보다 작으므로 이후 부터는 반복이 되지 않는다.

하지만 배경 이미지가 조절이 되어 줄어든 것이 보이기 때문에 이 두 속성은 정확히 계산을 해서 배경을 삽입하는게 아니라면 그렇게 권장하고 싶은 속성은 아닌 것 같다.

---

Background-position

background-position은 '좌측 상단의 모서리를 기준으로 배경 이미지의 배치를 어디에 할 것인가'를 지정하는 속성이다.

background-position의 값은 X축이동값 Y축이동값으로 사용하고 만약 값을 하나만 지정을 한다면 자동적으로 center로 간주된다.

값은 여러가지 형식으로 사용할 수 있다.

• 키워드 : top, left, bottom, right, center처럼 위치 값을 가리키는 키워드 값

• 단위값 : 대표적으로 px을 가장 많이 사용하며 em, ch 등 다양한 단위를 사용할 수 있다.

• % : 백분율을 사용할 수 있다.

위의 이미지는 키워드 값으로 정렬했을때 배경의 위치를 나타낸 것이다.
키워드값으로 설정 시 설정한 곳으로 딱 붙은 다음 이미지와 닿는 부분의 중심을 영역의 중심에 맞춘다.
그림으로 보면 녹색의 부분이 전체 영역과 닿는 것을 볼 수 있다.

또한 영역보다 큰 배경 이미지도 기준점에서 설정한 값만큼 이동한다.

보통 키워드 값으로는 배경 이미지의 중앙 배치를 위해 center를 가장 많이 사용한다.

---

Background-size

background-size는 정확한 'px' 값을 넣어도 되지만 가장 헷갈리는 부분은 아마 cover와 contain일 것이다. 나도 잘 이해가 가지않아 오늘 정리해보려고 한다. 우선 cover와 contain의 설명을 MDN에서 살펴보도록 하자.

• cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정하고 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정한다.

cover는 이미지의 가로/세로의 크기와 전체 영역의 가로/세로의 크기 마다 커지는 기준인 position(잘리는 부분)이 다르다.

아래의 표는 내가 궁금해서 테스트를 해보고 가져온 결과이다.

테스트 방법은 이렇다.

---

1. 전체 영역 가로/세로와 이미지 크기 가로/세로의 경우의 수를 고려하여 전체 영역 박스와 이미지를 준비한다.

   • 전체 영역 가로가 클 때 : 이미지 가로/세로/동일할 때 3가지
   • 전체 영역 세로가 클 때 : 이미지 가로/세로/동일할 때 3가지
   • 전체 영역 가로/세로가 같을 때 : 이미지 가로/세로/동일할 때 3가지

2. background-size:cover를 전체 영역에 적용한 채로 준비한 이미지를 background-image로 적용 시킨 다음 cover가 적용된 배경 이미지에background-position이 기본값일 때와 cover가 적용이 되었을 때와 background-position의 키워드값을 이용하여 position기준이 어딘지 결과값이 같은 것을 도출하여 기록한다.

3. 결과값이 도출되면 어느 부분이 잘렸는지 확인하기 위해 각각의 방향으로 '1px'과 '-1px'을 주고 잘린 부분을 확인하고 기록한다.

아래는 이 테스트의 결과값이다.

	이미지 가로가 크다.	이미지 세로가 크다	이미지 가로/세로가 동일하다
전체 영역의 가로가 크다	position : top 기준(아래쪽 잘림)	position : top 기준(아래쪽 잘림)	position : top 기준(아래쪽 잘림)
전체 영역의 세로가 크다	position : left 기준(오른쪽 잘림)	position : left 기준(오른쪽 잘림)	position : left 기준(오른쪽 잘림)
전체 영역의 가로/세로가 동일하다	position : left 기준(오른쪽 잘림)	position : top 기준(아래쪽 잘림)	position : center 기준(이미지 잘림없음)

이런게 중요한 것인지 모르겠지만 스스로 궁금증을 풀어서 좋은 것 같다.

---

• contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정한다.

contain은 쉽게 말하면 전체 영역 내의 배경 이미지가 크기를 늘리는데 잘리는 부분이 없이 키우고 멈추는 것이다. cover처럼 배경 이미지의 잘림이 없는게 장점이나 여백이 생긴다.

위의 이미지는 전체 영역 800x800에서 640*426의 이미지를 사용한 것이다. 현재 no-repeat만 적용한 상태이다.

이제 contain을 적용시켜보자.

오른쪽에 있던 여백이 없어지고 아래쪽의 여백이 줄어든 것을 볼 수 있다. 그리고 이미지도 잘리지 않고 그대로 비율을 유지하여 크기가 커졌다.

하지만 우리는 대부분 배경 이미지가 꽉 차는 것을 선호하기 때문에 주로 cover를 많이 사용한다.

만약 background-attachment: fixed가 지정되어 있을 경우, %, cover, contain 값은 브라우저의 크기에 비례하여 지정된다고 한다. 이것은 앞쪽 "Background-size에 모르던 사실"에 언급하고 있을 것이다.

---

정리를 마치며 ⛳️

과제가 밀려서 블로그에 게시글을 적을 수 없어서 5일이 지나서야 하게 글을 하나 적을 수 있는 여유가 생겼다.
물론 핑계일 수도 있지만 생각보다 이전에 배웠던 HTML과 CSS는 별로 깊지 않았다는 생각이 많이 들었고 내가 듣지 못했던 내용도 많아서 강의에 집중하였다.
그 집중한 만큼 HTML과 CSS를 작성하는데 "이 태그를 여기 쓰는게 맞을까", "웹 접근성이 좋은가?" 등에 대한 생각을 한번 더 하게 되는 것 같다.

원래 블로그에 하루에 하나씩 쓰는 것이 목표였지만 의무감만으로 작성하는 게시물만큼 의미없는 게시물은 없을 것이다.
이번을 계기로 의무감보다 나의 이해에 초점을 맞춰 다시 해야겠다.