<CSS 기초> 12. Background

 

 이번 장은 Background 속성이다. 이는 지금까지는 박스의 색이나 텍스트의 배경 색을 입힐 때 사용했으나 실은 주로 이미지를 삽입할 때 사용한다. 하나하나 알아보자.

 

1. 배경색

 가장 기본적인 속성으로 background-color 을 통해 색을 줄 수 있으며 hex코드 rgb, rgba 모두 사용 가능하다.

 

2. 이미지 삽입

 background-image : url(); 을 통해 경로를 삽입하여 이미지를 넣을 수 있다. 기본적으로 원래 크기대로 넣어지며 이미지가 작으면 바둑판배열식으로 반복된다.

 

3. 반복속성

 이미지는 기본적으로 바둑판배열식으로 반복된다. 따라서 background-repeat : no-repeat; 을 통해 반복을 삭제할 수 있다.

 

4. 사이즈

 사이즈는 background-size : 를 이용하여 작성하며, 사이즈에 관한 속성은 세가지가 존재한다. 가장 먼저 contain이다.

 

  이는 상자안에 비율에 맞춰서 꽉 들어가는 모양을 보여준다. 이미지를 전부 보여줄 수 있다.

 

  위는 cover속성이다. 상자를 덮고 상자에 빈공간없이 맞춰져 있는 형태이다. 상자의 빈공간을 보여주지 않는다는 장점은 있지만 이미지가 짤릴 수 있다.

 

 마지막은 커스텀이다. 말그대로 직접 조절하는 것이다. 이는 background-size:auto 100%' 와 같이 가로 세로의 사이즈를 직접 조정할 수 있다. 이 때 사이즈에는 px도 가능하다.

 

5. 위치

 마지막으로 내부에서 이미지의 위치를 조절하는 속성이다. 

 

  background-position: center ceter;

 

 위와 같은 방식으로 작성하며 x와 y 의 순서이다. left bottom 과 같은 값으로 왼쪽 아래에 붙게 만들 수 도 있고 50% 50% 를 통해 똑같이 가운데 배열이 가능하다. 10px 20px 을 주게되면 x축으로 10px 떨어지고 y축으로는 20px 떨어지게 할 수 있다.

 

6. 팁

 이미지를 조정하고 텍스트의 위치를 flex를 통해 조정하다보면 flex의 박스크기가 작아지며 원하는 padding값이 안먹힐 경우가 있다. 이 때에는 flex-grow: 속성을 통해 1의 값을 통해 부모 사이즈를 따라 커지도록 맞춰주자. (이에 대한 자세한 내용은 참고의 링크 참조)

 

 

 

---

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

CSS Flex(Flexible Box) 완벽 가이드