background
웹 페이지 작업 시 배경을 처리하는 background 속성에 대해 정리해보자.
background-color
배경색을 지정하는 속성으로, 투명도를 지정할 수 있는 rgba도 사용할 수 있다.
background-color: #BCCDBE;
background-color: rbga(188,205,190, 0.3);background-image
배경을 이미지 파일로 지정하는 속성
background-image: url("이미지 경로");background-size
배경 이미지의 크기를 조절하는 속성으로
auto,cover,contain이 있다. px이나 %값으로 직접 조절도 가능하다.
auto: 디폴트 값으로 이미지 원본 사이즈로 표시한다.cover: 배경을 표현하는 크기만큼 배경 이미지를 조절하여 표현한다. 구역에 꽉 차게 표시하기 위해서 구역보다 원본 이미지가 크거나 작다면, 이미지를 자르거나 늘려서 표시한다.contain: 배경 이미지가 완전하게 표시되도록 이미지의 크기를 조절하여 배경 구역에 표시한다. 배경 구역의 비율과 이미지의 비율이 다를 경우 이미지가 반복되서 표현될 수 있다.
background-size: contain;
background-size: 55%;
background-size: 100px;
background-size : cover;background-repeat
배경 이미지의 반복 여부를 지정하는 속성으로 repeat, repeat-x , repeat-y , no-repeat , space, round, initail, inherit 등이 있다.
- repeat : 디폴트 값 , 이미지를 반복해서 표시한다
- repeat-x : 배경 이미지를 가로 방향으로 반복한다
- repeat-y : 배경 이미지를 세로 방향으로 반복한다
- no-repeat : 배경 이미지를 반복없이 한 번만 표시한다
- space : 배경 이미지가 화면에 잘리지 않게 가능한 반복해서 표현하고 첫 번째와 마지막 이미지는 배경구역 양쪽에 고정되며 반복된 이미지들 사이 여백은 균등하게 표시된다
- round : 배경 이미지 사이에 여백없이, 화면에 가득 표시되도록 배경 이미지 크기를 줄이거나 늘려서 반복 표시한다.
background-repeat: no-repeat;
background-repeat: space;background-origin
배경 이미지를 채우기 시작하는 위치를 지정하는 속성
- border-box : 테두리 영역 왼쪽 위부터 채운다.
- padding-box : 안쪽 여백 영역 왼쪽 위부터 채운다.
- content-box : 내용 영역 왼쪽 위부터 채운다.
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속 받는다.
background-position
배경 이미지의 위치를 지정하는 속성
- x-position : 가로 위치
- y-position : 세로 위치
- initial : 기본값
- inherit : 상속
위치 값으로 사용할 수 있는 것
- 가로 위치 값 :
left,center,right,백분율,길이 - 세로 위치 값 :
top,center,bottom,백분율,길이
background 속성들을 한 번에 쓰기
background : background 의 여러 속성들을 한번에 쓸 수 있는 문법
background : background-color | background-image | background-size | background -repeat | background-origin ....- 순서에는 딱히 영향이 없다. (아래 주의사항 예외)
주의할 점 📢
background-position 속성과 backgroun-size 속성을 한번에 쓰려면
position/size
방식으로 작성해주어야 오류가 발생하지 않는다 !
