색상 표기법

css에서 색상을 표기하는 방법은 3가지가 있습니다.

1. 색상 직접 표기

• 해당하는 색상의 이름을 직접 입력할 수 있습니다.
  ex) color: blue

2. hex(16진법)

• 색상을 16진법으로 0~f까지 앞자리에 #을 붙여 표기합니다.
  ex) color: #ffffff

3. rgb, rgba

• rgb는 red, green, blue의 값을 0~255까지 사용하여 값을 표기합니다. a는 기존 rgb에 alpha를 더하여, transparent(투명도)값을 더합니다(기본값: 1).
  ex) color: rgb(0, 255, 0), color: rgba(11, 35, 144, 0.6)

opacity

• 요소의 불투명도를 설정합니다.
• 0 ~ 1까지 값을 설정할 수 있고, 0이 가장 투명한 상태입니다.
• rgba를 이용하여 불투명도를 조절하면 해당 요소에만 적용되고 자식 요소에는 적용되지 않지만, 해당 opactiy는 해당 요소의 자식요소까지 적용됩니다.

background

background-color

• 해당 요소의 배경 색상을 설정할 수 있습니다. 위의 색상 표기법에 따라 사용할 수 있습니다.

background-image

• 해당 요소의 배경에 이미지를 적용시킬 수 있습니다. background-color보다 우선시되어 화면에 보여집니다.
• 해당 요소의 영역보다 이미지의 크기가 작다면, 기본값으로 여러개의 이미지가 반복되어 보여집니다.
  
• ex) background-image: url("https://image_address...)

background-repeat

• background-image를 사용했을 때, 영역 내에서 이미지가 반복되기 때문에 원하지 않는 반복을 할 경우 repeat속성을 활용해서 원하는 방식으로 변경할 수 있습니다. (기본값: repeat)
• repeat-x: 이미지가 x축(가로)방향으로만 반복됩니다.
  
• repeat-y: 이미지가 y축(세로)방향으로만 반복됩니다.
  
• no-repeat: 이미지가 반복되지 않고, 이미지의 크기만큼만 영역을 차지합니다.
  

background-position

• 배경 이미지의 위치를 변경할 수 있습니다. 값은 x축, y축의 순서로 표기합니다. 값은 top, center, bottom, left, right의 키워드를 사용할 수 있고, 실제 수치를 입력할 수 있습니다. 값을 하나만 사용할 수도 있는데, 그런 경우에느 입력하지 않은 값은 center가 기본값이 됩니다.
• 여러개의 이미지가 반복되는 경우, 해당 위치를 기점으로 이미지가 반복됩니다.
  
• background-position: center를 적용했을 때, 이미지의 x축, y축이 중앙으로 이동했습니다.

background-origin

• 배경 이미지의 시작점의 위치를 조정하는 속성입니다.
• 속성값은 padding-box, content-box, border-box로, 기본값은 padding-box입니다.
  
• border-box는 배경이미지의 시작점이 border의 바깥쪽 부터이고, padding-box는 border의 안쪽 부터이고, content-box는 padding영역을 제외한 실제 콘텐츠 영역 부터입니다.

background-size

• 배경 이미지의 크기를 조절할 수 있습니다. 기본값은 auto로, 이미지의 원본 크기를 사용합니다.
• cover: 해당 요소보다 이미지의 크기가 작다면, 이미지를 요소의 크기에 맞게 늘립니다. 이미지와 요소의 비율이 다르다면 너비와 높이 중 일부가 요소의 크기에 맞게 잘릴 수 있습니다. 100%를 값으로 이용하면, cover처럼 너비는 해당 요소의 크기에 맞지만 높이는 요소의 크기보다 부족하거나 잘릴 수 있습니다.
• contain: 이미지의 비율을 유지하여 요소의 크기 안쪽으로 맞춥니다. 요소 크기의 안쪽에 맞춰서, 이미지 크기가 요소보다 작아질 수 있습니다.