[CSS] CSS를 더 잘 사용해보기 위한 팁(2)

위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,

이 글은 3번째 중 2번째 글이다.

---

10. Custom Scrollbars (커스텀 스크롤바)

문제: 스크롤바를 스타일링하고 싶습니다.

해결책: ::-webkit-scrollbar을 사용합니다.

부연 설명: 웹킷 기반 브라우저에서 커스텀 스크롤바를 만들 수 있습니다.

::-webkit-scrollbar는 스크롤바의 전체 영역을, ::-webkit-scrollbar-track은 스크롤바의 트랙을,

::-webkit-scrollbar-thumb는 스크롤바의 이동 가능한 부분을 스타일링합니다.

/* 스크롤바 전체 스타일링 */
::-webkit-scrollbar {
  width: 10px;
}
/* 스크롤바 트랙 스타일링 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 스크롤바 썸 스타일링 */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* 썸 호버 시 스타일링 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

11. Full-Screen Background Image (전체 화면 배경 이미지)

문제: 배경 이미지를 전체 화면에 맞추고 싶습니다.

해결책: background-size 속성을 사용합니다.

부연 설명: background-size: cover;는 이미지가 요소를 완전히 덮도록 조절합니다.

이 방법은 배경 이미지가 화면 크기에 관계없이 항상 전체 화면을 덮도록 할 때 유용합니다.

.full-screen-bg {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
}

12. Animated Gradient Background (애니메이션이 적용된 그라디언트 배경)

문제: 애니메이션이 적용된 그라디언트 배경을 만들고 싶습니다.

해결책: @keyframes를 사용합니다.

부연 설명: CSS 애니메이션을 사용하여 그라디언트 배경을 동적으로 변하게 할 수 있습니다.

이 방법은 배경에 생동감을 주고 시각적 관심을 끌 때 유용합니다.

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(270deg, #ff7e5f, #feb47b);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

13. Overlays (오버레이)

문제: 이미지에 오버레이를 추가하고 싶습니다.

해결책: ::after 가상 요소를 사용합니다.

부연 설명: ::after 가상 요소를 사용하면 이미지 위에 오버레이를 추가할 수 있습니다.

이 방법은 이미지 위에 색상 필터나 텍스트를 오버레이할 때 유용합니다.

.image-overlay {
  position: relative;
}
.image-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 검은색 50% 투명도 */
}

14. Image Hover Effects (이미지 호버 효과)

문제: 이미지에 호버 효과를 추가하고 싶습니다.

해결책: :hover를 사용합니다.

부연 설명: :hover 선택자를 사용하여 이미지에 마우스를 올렸을 때 스타일 변화를 줄 수 있습니다.

이 방법은 이미지 갤러리나 카드 컴포넌트에서 시각적 피드백을 제공할 때 유용합니다.

.image-hover img {
  transition: transform 0.3s;
}
.image-hover img:hover {
  transform: scale(1.1);
}

15. CSS Variables (CSS 변수)

문제: 테마 변경을 간소화하고 싶습니다.

해결책: CSS 변수를 사용합니다.

부연 설명: CSS 변수(--variable-name)를 사용하면 여러 곳에서 동일한 값을 사용할 수 있어 유지보수가 쉬워집니다.

테마 변경 시에도 간단히 변수 값만 변경하면 됩니다.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}
button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

16. Object Fit for Images (이미지의 비율을 유지하면서 컨테이너에 맞추기)

문제: 이미지를 왜곡 없이 컨테이너에 맞추고 싶습니다.

해결책: object-fit 속성을 사용합니다.

부연 설명: object-fit: cover;는 이미지가 컨테이너를 완전히 덮도록 하며, object-fit: contain;은 이미지의 비율을 유지하면서 컨테이너 안에 맞춥니다. 이 방법은 다양한 크기의 이미지를 일관되게 표시할 때 유용합니다.

.fit-image {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 또는 contain, fill 등 */
}

17. Prevent Line Breaks (줄 바꿈 방지)

문제: 텍스트가 여러 줄로 나누어지는 것을 방지하고 싶습니다.

해결책: white-space 속성을 사용합니다.

부연 설명: white-space: nowrap;를 사용하면 텍스트가 줄 바꿈 없이 한 줄로 표시됩니다.

이 방법은 버튼이나 탭과 같이 줄 바꿈이 필요 없는 UI 요소에서 유용합니다.

.no-break {
  white-space: nowrap;
}