색상과 배경

색상

<color>

• 키워드 사용 또는 RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 rgb(), rgba()의 함수형 표기법)

<style>
	div {
    	color: #ffffff;
        color: rgb(0,0,0);
        color: rgba(0,0,0,0.8);
    }
</style>

• rgba() 를 사용시 투명도까지 조절 가능, 색상 속성값에만 영향을 준다.

opacity

• CSS요소의 불투명도를 설정하는 속성, 0~1 사이의 숫자 or % 사용
• 내부에 있는 모든 요소에 투명도가 적용된다.

배경

background-color

• 요소의 배경색을 지정하는 속성

background-image

• background-image : url("");
• 요소에 배경 이미지를 지정, 컬러보다 앞쪽에 렌더링, 이미지의 투명한 부분은 color 부분이 노출

background-repeat

• 기본값 : repeat 반복하여 요소를 채움
• repeat-x : 너비만 반복
• repeat-x : 높이만 반복
• no-repeat : 반복 x 이미지 원본 크기 1번만 채워짐

background-position

• : x축 y축 -> 기본 (0,0), px 등 단위 사용 가능
• : top center 등의 키워드 값 사용 가능

background-origin

• 배경의 원점을 테두리의 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 선택
• 초기값 : padding-box -> 패딩 영역의 시작점
• content-box -> 콘텐트 박스의 시작점
• border-box -> 테두리의 시작점

background-size

• 배경 이미지의 크기 지정, 기본값 auto -> 원본 크기
• cover -> 원본 비율을 유지하면서 제일 크게 설정, 빈공간 x
• contain -> 원본 비율을 유지하면서 요소의 크기에 맞춤, 빈공간 o
• 100px 100px -> 가로 세로의 비율을 직접 지정 가능, 단일 값 입력 시 width 값에 맞춰 늘어남
• 100% -> 가로의 너비에 맞춰 이미지 조정

background ( 단축 속성)

• 색상, 이미지, 원점, 크기, 반복 등의 여러 속성을 한번에 적용 가능
• color 속성은 맨 뒤에 사용
• position/size 의 순서로 / 사용해 구분