이미지와 그라데이션 효과로 배경 꾸미기

이번 단원에서는 배경 이미지와 그라데이션 효과를 줄 수 있는 속성에 대해 배웠다. 배경 이미지는 웹을 만들 때 많이 사용되는 요소이고 눈에 가장 먼저 띄는 요소이기 때문에 집중해서 공부했다.

 

그런데 background - clip 속성과 background - origin 속성의 차이점을 모르겠다. 책에서는 배경 이미지의 적용 범위를 나타내는 속성이라고 나와있는데 둘 다 옵션도 같은것 같아 어떤 상황에서 어떤 속성을 써야하는지 다시 찾아봐야겠다.

 

+ 수정 ) clip은 배경색의 범위를 지정하는 속성이고 origin은 이미지를 지정하는 속성

---

배경색을 지정하는 속성

- background-color : 요소의 배경 색을 지정하는 속성. rgb값이나 16진수 또는 색상이름을 사용해서 지정

 

배경색의 적용범위를 조절하는 속성

- background-clip : 박스 모델에서 배경의 범위를 조절하는 속성. 배경을 테두리까지 지정할지 패딩범위까지 적용할지 등 정확한 범위를 지정한다.

종류	설명
border - box	박스의 테두리까지 적용 기본값
padding - box	박스의 패딩 범위까지 적용
contens - box	박스모델에서 내용 부분에만 적용

 

배경 이미지를 넣는 속성

- background - image : 웹 요소에 배경 이미지를 넣을 때 가장 기본이 되는 속성으로 url()에 이미지 파일 경로를 넣어서 사용

 

background - image를 이용해 이미지를 삽입했을 때 해당 요소와 이미지의 크기가 맞지 않다면 그림이 짤려서 보이거나 빈 칸을 계속해서 반복해서 채우는 현상이 생긴다. 

 

이러한 현상을 보완하기 위해 background - repeat 속성을 이용해 반복을 한 방향으로만 하거나 반복하지 않게 할 수도 있다. 

 

종류	설명
repeat	브라우저 화면에 가득 찰 때까지 가로와 세로로 반복
repeat - x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복
repeat - y	브라우저 화면 너비에 가득 찰 때까지 세로로 반복
no - repeat	한번만 표시하고 반복하지않음

배경이미지의 위치를 조절하는 속성

- background - position : 배경이미지의 수평 위치 또는 수직위치의 값을 조정

 

배경이미지의 적용 범위를 조절하는 속성 

- background - orgin : 박스모델에서 패딩이나 테두리가 있다면 배경이미지를 어디까지 표시할지 나타내는 속성 

종류	설명
border - box	박스의 테두리까지 적용
padding - box	박스의 패딩 범위까지 적용
contens - box	박스모델에서 내용 부분에만 적용 기본값

 

배경이미지의 크기를 조절하는 속성

- background - size : 배경을 채울 요소 크기보다 이미지가 너무 작거나 크다면 이 속성을 사용ㅎ여 이미지의 크기를 조절할 수 있다. 

종류	설명
auto	원래 배경 이미지 크기만큼 표시 기본값
contain	요소안에 배경이미지가 다 들어가도록 이미지를 확대/축소
cover	배경이미지로 요소를 모두 덮도록 이미지를 확대/축소
<크기>	이미지의 너비와 높이를 지정
<백분율>	요소의 크기를 기준으로 값을 백분율로 지정

 

그라데이션 효과를 주는 속성

- linear - gradient (to 방향 or 각도 ,<색상 중지점>); : 시작과 끝을 기준으로 to 를 이용하여 사용 

색상 중지점 : 그라데이션에서 색이 바뀌기 시작하는 지점