[CSS 기초] 색상과 배경

🌈 색상 표기 법

1 키워드 사용

 background-color : red; 

2. RGB 3차원 좌표계

#+16진수 표기법 :
color : #000000;
rgb 함수 표기형
rgb(0,0,0)
rgba 함수 표기법
rgb(0,0,255,0.8) → 0.8은 밝기를 의미한다. (투명도)

- 불투명도-Opacity

.floating-box{
   background-color : blue;
   opacity:1; (투명도가 없는 상태)
 }

위에서 사용했던 rgba와는 다르다.
opacity를 이용하면 내부에 있는 글자까지 투명도를 가진다.

3. HSL 실린더형 좌표계 사용

• 거의 사용하지 않는다.

  🌆 Background 배경 설정

  background-color도 많이 사용하지만, background-image를 통해 이미지를 배경으로 넣을 수 있다.

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

url을 이용하여 배경을 설정할 수 있다.
만약 지정된 width, height보다 설정 이미지가 작다면 바둑판 모양으로 나온다.

반복하고 싶지 않다면 ? background-reapeat 이용

background-repeat : repeat-x; => x축으로 반복한다.
background-repeat : repeat-y; => y축으로 반복한다.

background-repeat : no-repeat;=>배경이 단 한 번만 반복된다.

repeat default 상태

background-postion

: background-image의 위치를 설정할 수 있다.

background-position : (x축) (y축);

만약 repeat으로 한다면 전체가 채워지긴 하지만, 반복을 시작하는 위치를 설정할 수 있다.

background-position: top center ;

위에서 가운데에서 시작이 된다. center top과 동일한 셈이다.

background-origin

배경을 원점으로 테두리의 시작점(border), 테두리 내부(content), 안쪽 여백(padding)
background-origin : conetnt-box;

background-size

배경의 size를 변경하고 싶을 때 사용한다.

background-size:contain;

container위치에 쏙 들어가게 만든다.→ 빈 공간이 생긴다.

backgorund-size : cover; 

container 안에 꽉채운다. → 이미지가 찌그러지지 않는 내에서

background-size: 200px 1000px;

원하는 사이즈로 하면 이미지가 찌그러진다.