자주 쓰는 CSS 스타일 속성

텍스트 스타일링

속성	역할
color	글자 색
font-size	글자 크기
font-family	글꼴
font-weight	글꼴 굵기
line-height	줄 간격
text-decoration	밑줄/취소선 등 텍스트 꾸미기

배경 이미지: background-image

background-image 속성으로 요소에 배경 이미지를 넣을 수 있습니다.

.card {
  background-image: url("photo.jpg");
  background-repeat: no-repeat; /* 반복 여부 */
  background-position: center;  /* 위치 지정 */
  background-size: cover;       /* 크기 지정 */
}

반복 여부, 위치, 크기를 함께 지정해줘야 이미지가 원하는 대로 깔끔하게 배치됩니다.

그라디언트: linear-gradient

**그라디언트(그러데이션)**는 한 색에서 다른 색으로 부드럽게 변하는 효과입니다. background-image에 linear-gradient() 함수를 넣어서 만듭니다.

.banner {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

• to right 같은 값으로 방향을 조정할 수 있습니다.
• 색 사이에 비율을 지정해서 중간색을 추가할 수도 있습니다.
• 값을 손으로 계산하기보다는 cssgradient.io 같은 도구로 미리보기 하면서 코드를 뽑는 게 훨씬 빠릅니다.
• 이미지 위에 그라디언트를 얹으면 텍스트 가독성을 높이는 효과도 낼 수 있습니다.

그림자: box-shadow

box-shadow는 요소에 그림자를 넣는 속성입니다.

.card {
  box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.3);
  /*          가로 세로 블러 퍼짐 색 */
}

값의 순서를 억지로 외우기보다는 **의미(위치, 흐림, 퍼짐, 색)**로 이해하는 게 낫습니다. 실무에서는 디자이너가 만들어준 값을 그대로 복사해 쓰는 경우가 많고, 헷갈리면 "box shadow generator"를 검색해서 직접 만져보며 익히면 됩니다.

불투명도: opacity vs rgba

opacity는 요소 전체(텍스트, 배경 다 포함)를 반투명하게 만듭니다. 값은 0(완전 투명)부터 1(완전 불투명) 사이입니다.

.disabled-button {
  opacity: 0.5; /* 버튼 전체가 흐려짐 */
}

만약 배경만 반투명하게 하고 글자는 선명하게 두고 싶다면 opacity 대신 rgba()를 배경색에 써야 합니다. 품절/비활성화 표시 같은 곳에서 opacity가, 반투명 오버레이 같은 곳에서 rgba가 자주 쓰입니다.

참고: 개인 Notion 학습 노트