[수업-CSS] 03. 색상 스타일

CSS의 색상 표현 방법

① 영문명 ex. red, black, skyblue

② 16진수 rgb값을 기준으로 16 진수 작성 ex. #ff0000 (빨간색)

③ rgb/rgba rgb값을 0~255로 입력, rgba의 경우엔 투명도까지 설정 가능 (투명도는 1=불투명/0=투명)

④ hsl/hsla 색상, 채도, 밝기로 색을 입력하기 ex.hsla(색상 값, 채도 값(%), 명도 값(%), 투명도)

 

배경 관련 스타일

종류		설명	예시
background-color		배경색을 지정하는 속성	선택자{background-color: 색상표현;}
background-clip	border-box	박스 모델의 가장 외곽인 테두리까지 적용	선택자{background-clip: 속성 값;}
	padding-box	테두리 제외한 패딩 범위까지 적용
	content-box	내용 부문만 적용
background-image		배경에 이미지 설정	선택자{background-image: url(경로);}
background-repeat	repeat	브라우저에 가득 찰 때까지 가로/세로 반복	선택자{background-repeat: 속성 값;}
	repeat-x/repeat-y	넓이/높이만큼 반복
	no-repeat	반복 없이 한 번만 출력
background-size	auto	원래 배경 이미지 크기만큼 표시	선택자{background-size: 속성 값;}
	contain	요소 안으로 이미지가 들어갈 수 있게 확대/축소
	cover	요소 범위를 이미지가 덮을 수 있도록 확대/축소
	크기 값(px)/백분율	수치화된 값으로 표현(가로, 세로)
background-position	left/center/right	수직 위치 조절	선택자{background-position: 속성 값;}
	top/center/bottom	수평 위치 조절
	크기 값(px)/백분율	수치화된 값으로 표현(가로, 세로) * 왼쪽 모서리 좌표
background-origin	border-box	테두리 기준	선택자{background-origin: 속성 값;}
	padding-box	테두리르 뺀 패딩 기준
	content-box	내용 기준
background-attachment	scroll	default / 배경이미지가 움직이게	선택자{background-attachment: 속성 값;}
	fixed	배경 이미지 고정
background		배경 이지미 속성 한번에 설정	선택자{background: image값 repeat값 attachment값 position값 clip값 origin값 size값;}