배경 투명도 및 요소 변환

요소의 배경을 투명하게 설정하거나, 크기를 조정하고 회전시킬 때 사용하는 기본적이지만 필수적인 속성들입니다.

.card-wrapper {
  /* 배경을 투명하게 설정 */
  background-color: transparent;
}

.icon-shape {
  /* 요소를 1.2배 확대하고 45도 회전 */
  transform: scale(1.2) rotate(45deg);
}

입력 필드(Input) 세부 스타일링

사용자 입력 필드의 텍스트 색상, 포커스 테두리, 그리고 커서(캐럿) 색상까지 세밀하게 제어할 수 있습니다.

.custom-text-field {
  /* 입력 텍스트 색상 변경 */
  color: #2c3e50;
  
  /* 포커스 시 외곽선 색상 및 두께 지정 */
  outline: 2px solid #3498db;
  
  /* 텍스트 입력 커서 색상 변경 */
  caret-color: #e74c3c;
}

모바일 환경의 300ms 터치 지연 해결

모바일 브라우저에서는 더블탭을 통한 화면 확대 기능을 지원하기 위해 첫 번째 터치 후 약 300ms의 지연 시간이 발생할 수 있습니다. 최근 브라우저에서는 많이 개선되었지만, 여전히 지연이 느껴지는 경우 다음 속성을 사용하여 제스처를 제한하고 즉각적인 반응을 이끌어낼 수 있습니다.

.fast-response-btn {
  /* 더블탭 확대 기능을 비활성화하여 터치 지연 제거 */
  touch-action: manipulation;
}

CSS 필터(Filter) 효과

이미지나 요소에 시각적인 효과를 적용할 때 유용한 필터 속성입니다.

.profile-avatar {
  /* 4px 반경의 흐림 효과와 80% 흑백 효과 적용 */
  filter: blur(4px) grayscale(0.8);
}

버튼 및 입력 필드의 기본 테두리 제거

버튼 클릭 시 나타나는 기본 포커스 테두리를 제거하고, 접근성을 고려한 대체 스타일을 적용하는 방법입니다.

.submit-btn:focus {
  /* 기본 검은색/파란색 포커스 테두리 제거 */
  outline: none;
  /* 접근성 유지를 위한 대체 그림자 효과 */
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.4);
}

숫자 입력 필드(Number Input) 화살표 숨기기

type="number" 입력 필드 오른쪽에 기본적으로 표시되는 스핀 버튼(위아래 화살표)을 제거하여 일반적인 텍스트 필드처럼 보이게 합니다.

/* Webkit 기반 브라우저 (Chrome, Safari, Edge) */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox 브라우저 */
.qty-input {
  -moz-appearance: textfield;
}

웹킷(WebKit) 스크롤바 커스터마이징

기본 스크롤바를 디자인에 맞게 커스터마이징할 수 있는 의사 요소(Pseudo-elements) 활용법입니다.

.scrollable-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollable-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.scrollable-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

텍스트 정렬 및 장식

문단의 가독성을 높이거나 특정 텍스트에 시각적 강조를 추가할 때 사용하는 속성들입니다.

.article-content {
  /* 첫 줄 들여쓰기 (2글자 크기) */
  text-indent: 2em;
  
  /* 마지막 줄을 포함한 양쪽 정렬 */
  text-align-last: justify;
}

.discount-price {
  /* 물결 모양의 빨간색 취소선 적용 */
  text-decoration: line-through wavy #e74c3c;
}

.overline-text {
  /* 텍스트 상단에 선 추가 */
  text-decoration: overline;
}

부드러운 스크롤 이동

앵커 링크를 클릭했을 때 페이지가 즉시 이동하는 대신 부드럽게 스크롤되도록 설정합니다.

html {
  /* 페이지 내 앵커 이동 시 부드러운 스크롤 효과 적용 */
  scroll-behavior: smooth;
}

CSS를 통한 이미지 소스 교체

content 속성을 활용하여 이미지 요소의 소스를 동적으로 변경하거나 의사 요소에 이미지를 주입할 수 있습니다. (단, img 태그의 content 속성 변경은 일부 브라우저에서만 지원되므로 호환성을 확인해야 합니다.)

/* 의사 요소를 활용한 이미지 삽입 */
.icon-wrapper::after {
  content: url('/assets/icons/arrow-right.svg');
}

/* img 태그의 소스 교체 (제한적 브라우저 지원) */
.hover-replace-img:hover {
  content: url('/assets/images/alternate-view.png');
}

수직 정렬(Vertical Align) 제어

인라인 요소나 테이블 셀 내부의 콘텐츠를 수직으로 정렬할 때 사용합니다. 블록 레벨 요소에는 적용되지 않는다는 점에 유의해야 합니다.

.inline-badge {
  /* 부모 요소의 중앙에 맞추어 정렬 */
  vertical-align: middle;
}

.table-data-cell {
  /* 부모 요소의 베이스라인에 맞추어 정렬 */
  vertical-align: baseline;
}