실무에서 자주 쓰는 CSS 패턴 정리

English (N/A)
#css#frontend

웹 개발을 하다 보면 비슷한 CSS 코드를 반복해서 작성하게 된다. 매번 검색하기보다는 자주 쓰는 패턴을 정리해두면 생산성이 올라간다. 이 글에서는 내가 실무 프로젝트에서 반복적으로 사용했던 CSS 패턴들을 정리했다.

배경 이미지를 화면에 꽉 채우기

랜딩 페이지나 히어로 섹션을 만들 때 배경 이미지를 화면 전체에 꽉 채우는 경우가 많다. 이때 이미지의 비율을 유지하면서 화면을 덮으려면 다음 세 가지 속성을 함께 사용한다.

.hero-section {
  background-image: url('/images/hero-bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

각 속성의 역할:

  • background-position: center - 이미지의 중앙이 화면 중앙에 오도록 한다. 화면 크기가 달라져도 핵심 부분이 보인다.
  • background-repeat: no-repeat - 이미지가 반복되지 않도록 한다.
  • background-size: cover - 이미지가 컨테이너를 완전히 덮도록 크기를 조절한다. 비율은 유지된다.

실제로 사용해보면 cover 와 contain 의 차이를 헷갈리기 쉬운데, cover 는 빈 공간 없이 꽉 채우고, contain 은 이미지 전체가 보이도록 한다.

배경 그라디언트

버튼이나 배너에 단색보다 그라디언트를 적용하면 좀 더 세련된 느낌을 줄 수 있다.

.gradient-button {
  /* 그라디언트 미지원 브라우저용 폴백 */
  background: #667eea;

  /* 모던 브라우저용 표준 문법 */
  background: linear-gradient(to right, #667eea, #764ba2);
}

예전에는 브라우저마다 다른 접두사(-webkit-, -moz-, -o-)를 붙여야 했지만, 2020년대 이후로는 대부분의 브라우저가 표준 문법을 지원하므로 접두사 없이 linear-gradient 만 써도 된다. 다만 폴백으로 단색 배경을 먼저 선언해두는 것이 안전하다.

자주 쓰는 그라디언트 방향:

  • to right - 왼쪽에서 오른쪽으로
  • to bottom - 위에서 아래로
  • to bottom right - 대각선
  • 135deg - 각도로 직접 지정

클릭 가능한 요소에 커서 스타일 적용하기

버튼이 아닌 요소(예: 리스트 아이템, 카드)를 클릭 가능하게 만들었을 때, 마우스를 올리면 포인터 커서로 바뀌어야 사용자가 "이건 클릭할 수 있구나"라고 인지한다.

.clickable {
  cursor: pointer;
}

예전에는 IE 구버전 호환을 위해 cursor: hand; 도 함께 썼지만, IE 지원이 종료된 지금은 cursor: pointer 만 쓰면 된다.

기타 유용한 커서 스타일:

  • cursor: not-allowed - 비활성화된 요소
  • cursor: grab - 드래그 가능한 요소
  • cursor: text - 텍스트 선택 가능
  • cursor: wait - 로딩 중

마무리

CSS는 단순해 보이지만 미묘한 차이가 사용자 경험에 큰 영향을 준다. 위 패턴들은 거의 모든 웹 프로젝트에서 사용하게 되므로 익혀두면 유용하다. 앞으로도 자주 쓰는 패턴이 생기면 이 글에 추가할 예정이다.