[CSS] 배경(background) 속성정리 [3/18 Study]

 

 

CSS 배경(background) 속성정리

 

 

 

background 속성

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/background

background - CSS: Cascading Style Sheets | MDN

 

 

background는 아래 다양한 속성을 가집니다.

background-color	배경 색
background-image	배경 이미지
background-repeat	배경 이미지 반복 여부
background-position	배경 이미지 위치
background-size	배경 이미지 크기
background-origin	배경 이미지 시작지점 설정
background	배경 단축 속성

 

background-color

: 배경색을 지정할 때 사용합니다.

기본값은 transparent, 투명이고 색상명이나 색상 코드를 사용할 수 있습니다.

 

div {
  background-color: indigo; /* indigo*/
	background-color: #4b0082; /* indigo*/
	background-color: rgb(75, 0, 130); /* indigo*/
	background-color: rgba(75, 0, 130, 0.5); /* indigo 50% 불투명 */
}

 

 

backgroun-image

: 배경 이미지를 지정해줍니다.

기본값은 none 없음이고, 이미지 위치 경로를 상대 경로 또는 절대 경로를 통해서 나타낼 수 있습니다.

속성값을 명시할 때는 url() 함수를 사용하고 경로에 공백이 나올수 도 있기에 따옴표로 묶어주는것이 안전합니다.

background-image: url("이미지 위치 주소");

background-image: url("../image/bg.png");
background-image: url("../image/bg.png"), url("../image/bg2.png");

 

여러개의 이미지를 지정할 때는 쉼표로 구분해줍니다.(처음 지정한 이미지가 맨 위로 적용되어 겹쳐져서 보입니다.)

 

background-repeat

: 배경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정합니다.

기본값은 repeat입니다.

 

background-repeat: repeat | repeat-x | repeat-y | no-repeat

 

 

values

 

repeat

: 기본값이고 배경 이미지를 가로와 세로 모든방향으로 반복을 해줍니다.

 

repeat-x

: 배경 이미지를 가로 방향으로만 반복합니다.

 

repeat-y

: 배경 이미지를 세로 방향으로만 반복합니다.

 

no-repeat

: 배경 이미지를 반복하지 않습니다.

 

background-position

: 배경 이미지가 주어진 영역에서 어디에 위치할지 결정합니다.

기본값은 0% 0%(좌측상단)이며 절대/상대 단위를 사용하여 좌측 상단으로 부터 얼마나 떨어져야하는지를 지정할 수 있습니다. 보통 top, bottom, left, right, center와 같은 방향 키워드가 많이 사용됩니다.

이 속성은 background-repeat 속성을 no-repeat로 설정해놓고 사용하는게 일반적입니다.

배경 이미지가 반복된다면 위치를 지정하는 게 큰 의미가 없어지기 때문입니다.

 

background-position: x위치, y위치;

background-position: left top; /* right, left, top, bottom, center로 위치 지정 */
background-position: top; /* 하나의 값만 지정할 경우 다른 값은 center로 지정된다. */
background-position: center; 
background-position: left 50px top 20px; /* %, px, em 등의 단위로 사용 가능 */
background-position: 25% 75%; /* %, px, em 등의 단위로 사용 가능 */

 

 

 

background-size

 

: 배경 이미지의 크기를 결정합니다.

기본값은 auto이고 배경 이미지의 원본 사이즈를 사용합니다.

values

 contain

: 비율을 유지하면서 width, height 모두 요소를 벗어나지 않는 범위에서 최대로 확대 width, height 중 큰 값을 가진 쪽이 가득 찰 때까지 확대 합니다. (잘림 x)

 

cover

: 비율을 유지하면서 빈 공간 없이 이미지를 요소에 가득 채운다. width, height 중 작은 값을 가진 쪽이 가득 찰 때까지 확대하고 큰 값을 가진 쪽이 요소에서 벗어나 잘릴 수 있습니다. (잘림 o)

 

auto

: 이미지의 원본 크기 유지 합니다.

 

background-origin

: 배경 이미지의 원점(0, 0)을 어디에서부터 시작할지를 설정할 때 사용

기본값은 padding-box

 

background-origin: border-box | padding-box | content-box

 

 

 

background

: 단축속성으로 color, image, repeat, position, size, origin 등을 한번에 지정할 수 있다.

 

background: green;
background: url("test.jpg") repeat-y;
background: no-repeat center/80% url("../img/image.png");

 

주의사항

 

① size는 position바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 한다.

ex) background: center/80%;

 

② box 값은 2개 모두(origin, clip) 설정할 수도 있고, 아예 설정하지 않을 수도 있다.

2개 값 모두 설정할 경우, 처음 값이 background-origin, 두번째 값이 background-clip을 설정한다.

 

③ background-color 값은 마지막 레이어에만 적용할 수 있다.

 

④ 속성 값의 순서는 큰 상관이 없으며 필요하지 않으면 생략할 수 있다.

 

결론: 협업 프로젝트에서는 동료 개발자들이 스타일을 이해하는데 어려움을 겪을 수도 있습니다. 뿐만 아니라 단축 속성을 사용하면 의도치 않게 속성값들이 초기화되는 문제도 있으니 남용하지 않는 것이 좋겠습니다.

 

 

 

 

 

 

https://designer-ej.tistory.com/entry/CSS-background-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%ACcolor-image-position-repeat-%EB%93%B1

[CSS] background 속성 정리(color, image, position, repeat 등)

위 블로그를 참고하였고 MDN 사이트를 보면서 공부하였습니다.

 

 

 

 

🔥마무리

background 속성들에 대해서 MDN 표준문서를 보면서 공부하였다. 외국 사이트에서 한국어까지 지원된다는 사실을 이제 알고 적용해서 공부하니까 보기 너무 편했고 앞으로도 공부할 때 자주 이용할 것 같다.

오늘 공부는 앞으로 배경 이미지를 넣을 때 유용할게 사용 될 속성들이기 때문에 좀 더 집중해서 공부했고 직접 vscode에 적용해보고 비교해보면서 이해하려고 노력했고 여러 사이트를 다 찾아보면서 공부했다.

오늘도 화이팅😊