[CSS -5] 배경 및 색상 다루기

배경 다루기

background

• 단축속성
• 콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있음
• 배경으로 추가된 색상이 나이 미지 등은 박스 모델의 바깥쪽 여백을 제외 한 나머지 영역 안에서 요소의 콘텐츠를 뒷받침
• 접미사

  접미사	설명	속성값 유형
  -color	요소의 배경 색상 지정	색상
  -clip	요소 내 배경의 적용 범위(에디에만)	border-box padding-box content-box
  -image	요소의 배경 이미지 지정	이미지 url
  -origin	요소 내 배경의 시작 위치(에디서부터)	border-box padding-box content-box
  -size	배경 이미지의 크기	수치와 단위
  -position	배경 이미지의 위치	수치와 단위
  -repeat	배경 이미지의 반복 패턴	no-repeat repeat-x repeat-y

색상 지정하기

• 글자 색을 지정할 때는 color속성을 사용
• 색 지정 방법은 글자, 테부리, 배경 색 모두에 대해 동일
  • 키워드 : 색상을 나타내는 키워드를 입력
  • rgb함수 : rgb 함수에 수치를 입력
  • hsl함수 : hsl 함수에 수치를 입력
  • 16진수 값 :빨강, 초록, 파랑의 비율을 16진수로 표현해 색상을 결정
  • opacity속성을 통해 투명도 조절 가능