[웹 디자인] 10일차: CSS 색상 및 배경

색상

CSS에서 색상은 웹 디자인의 중요한 요소 중 하나입니다. 색상을 사용하여 텍스트, 배경, 테두리 등을 스타일링할 수 있습니다.

색상 표현 방법

CSS에서 색상을 표현하는 여러 가지 방법이 있습니다:

• 색상 이름: 미리 정의된 색상 이름을 사용합니다.
• color: red;
• 16진수 표기법: #RRGGBB 형식을 사용합니다.
• color: #ff0000;
• RGB 표기법: rgb(red, green, blue) 형식을 사용합니다.
• color: rgb(255, 0, 0);
• RGBA 표기법: rgb(red, green, blue, alpha) 형식을 사용하며, alpha 값은 투명도를 나타냅니다.
• color: rgba(255, 0, 0, 0.5);
• HSL 표기법: hsl(hue, saturation, lightness) 형식을 사용합니다.
• color: hsl(0, 100%, 50%);
• HSLA 표기법: hsl(hue, saturation, lightness, alpha) 형식을 사용하며, alpha 값은 투명도를 나타냅니다.
• color: hsla(0, 100%, 50%, 0.5);

색상 적용 예제

/* 색상 이름 */
h1 {
  color: blue;
}

/* 16진수 표기법 */
p {
  color: #333333;
}

/* RGB 표기법 */
div {
  color: rgb(255, 165, 0);
}

/* RGBA 표기법 */
span {
  color: rgba(255, 165, 0, 0.7);
}

/* HSL 표기법 */
a {
  color: hsl(240, 100%, 50%);
}

/* HSLA 표기법 */
button {
  color: hsla(240, 100%, 50%, 0.5);
}

배경

CSS 배경 속성은 요소의 배경 색상, 이미지, 반복 등을 설정하는 데 사용됩니다.

배경 색상

• background-color: 요소의 배경 색상을 설정합니다.

예제:

body {
  background-color: #f0f0f0;
}

배경 이미지

• background-image: 요소의 배경 이미지를 설정합니다.

예제:

body {
  background-image: url('background.jpg');
}

배경 반복

• background-repeat: 배경 이미지의 반복 여부를 설정합니다.
  • repeat: 기본값으로, 배경 이미지가 가로와 세로로 반복됩니다.
  • repeat-x: 배경 이미지가 가로로 반복됩니다.
  • repeat-y: 배경 이미지가 세로로 반복됩니다.
  • no-repeat: 배경 이미지가 반복되지 않습니다.

예제:

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

배경 위치

• background-position: 배경 이미지의 시작 위치를 설정합니다.

예제:

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

배경 크기

• background-size: 배경 이미지의 크기를 설정합니다.
  • cover: 배경 이미지가 요소를 덮도록 크기를 조절합니다.
  • contain: 배경 이미지가 요소 안에 맞도록 크기를 조절합니다.

예제:

body {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

배경 고정

• background-attachment: 배경 이미지의 스크롤 동작을 설정합니다.
  • scroll: 기본값으로, 배경 이미지가 함께 스크롤됩니다.
  • fixed: 배경 이미지가 고정되고 스크롤되지 않습니다.
  • local: 요소의 내용과 함께 스크롤됩니다.

예제:

body {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

복합 배경 속성

• background: 배경 색상, 이미지, 반복, 위치, 첨부 등을 한 줄에 설정할 수 있습니다.

예제:

body {
  background: #f0f0f0 url('background.jpg') no-repeat center center / cover fixed;
}

결론

CSS 색상 및 배경 속성은 웹 페이지의 시각적 디자인을 크게 향상시킬 수 있습니다. 다양한 색상 표현 방법과 배경 속성을 활용하여 더욱 매력적이고 사용자 친화적인 웹 페이지를 만들 수 있습니다. 이번 글에서는 색상과 배경 속성의 다양한 사용법에 대해 배웠습니다.

다음 글에서는 박스 모델에 대해 알아보겠습니다.

다음 글에서 만나요!