[HTML/CSS] 📚 색상과 배경

📋 기억하고 싶은 내용

📌 색상 - HEX(16진수), rgb, rgba

div {
	background-color: #ffffff;
    background-color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 255, 0.8);
}

• rgba() 표기법을 사용하면 불투명도를 설정할 수 있다.

📌 opacity

• 보통 0.0 이상 1.0 이하의 숫자를 사용해 불투명도를 설정한다.
• 기본값은 1이다.
• 요소의 콘텐츠를 포함해 모든 곳에 영향을 주지만, 자식 요소가 상속하지는 않는다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖는다.

  rgba() 표기법으로 불투명도를 설정하면 요소 내부의 콘텐츠에는 영향을 주지 않는다.

📌 background-color, background-image

• background-color는 backgorund-image 뒤에 렌더링 되므로, backgorund-color의 z-index 속성 값이 더 낮다고 볼 수 있다.
• 이미지의 사이즈가 요소보다 작으면 바둑판식 배열로 여러 개의 이미지를 반복해서 보여준다.

📌 background-repeat

• repeat-x로 설정하면 가로 방향으로만 반복하고, repeat-y로 설정하면 세로 방향으로만 반복한다.
• no-repeat으로 설정하면 반복하지 않는다.

📌 background-position

• 키워드를 사용하면 x축과 y축 순서와 상관없이 작성할 수 있다.
• 한 개의 키워드 값을 작성하면 x축과 y축 모두 적용된다.
• 이미지를 정가운데에 위치시키고 싶을 때 background-position: center 속성은 유용하게 사용된다.

📌 background-origin

• 기본값은 padding-box다.
• margin-box는 존재하지 않고, margin은 외부 여백이기 때문에 원점(0, 0)으로 지정할 수 없다.

📌 background-size

• 기본값은 auto이고, 이미지의 원본 크기를 유지한다.
• cover 키워드는 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정되고, 이미지의 가로세로비가 요소와 다르다면 이미지를 잘라내어 빈 공간이 생기지 않도록 한다.
• contain 키워드는 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정하기 때문에 빈 공간이 생길 수 있다.
• contain, cover 키워드는 이미지의 비율을 유지하며 요소의 크기에 맞춰진다.
• 한 개의 <length> 값을 지정하면 이미지의 비율을 유지하면서 가로 사이즈만 조절된다.
• cover 키워드와 100%는 동일하게 동작하는 것으로 보이지만, 100%로 지정하면 가로만 100% 되는 것이다. (빈 공간 생길 수 있음)

📌 background

• background-attachment, background-clip 하위 속성은 거의 사용하지 않는다.
• background-color 값은 마지막에 작성해야 한다.
• backgorund-size 값은 background-position 값 바로 뒤에만 위치할 수 있으며, '/' 문자로 구분해야 한다.

🔗 참고 래퍼런스

• <color> - MDN
• opacity - MDN
• background-color - MDN
• background-image - MDN
• background-repeat - MDN
• background-origin - MDN
• background-size - MDN
• background - MDN