CSS로 예약 불가 슬롯에 X자 표시하기 x배너 꾸미기 [React]

CSS로 예약 불가 슬롯에 X자 표시하기

예약 불가능한 시간을 직관적으로 표시하기 위해 X자 표시를 적용하는 방법을 소개합니다.

---

1. 기능 설명

이 코드는 .time-slot.reserved 클래스를 가진 요소에 X자를 표시하여 예약이 불가능한 슬롯을 강조합니다.

주요 특징

• 회색 배경과 흰색 X자로 예약 불가 슬롯을 강조
• 반투명(Opacity 0.3) 적용하여 흐리게 표시
• CSS 가상 요소(::before, ::after) 사용하여 X자 구현
• X자 기울기(15도) 적용하여 더 자연스러운 디자인 제공

---

2. 최종 코드

CSS 코드

.time-slot.reserved {
  background-color: gray;
  color: white;
  position: relative;
  overflow: hidden; /* 요소 밖으로 넘치지 않도록 설정 */
  opacity: 0.3;
}

.time-slot.reserved::before,
.time-slot.reserved::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.7); /* X자 색상 */
  transform-origin: center;
}

.time-slot.reserved::before {
  transform: translate(-50%, -50%) rotate(15deg); /* 첫 번째 대각선 */
}

.time-slot.reserved::after {
  transform: translate(-50%, -50%) rotate(-15deg); /* 두 번째 대각선 */
}

---

3. 코드 설명

.time-slot.reserved (기본 스타일)

.time-slot.reserved {
  background-color: gray;
  color: white;
  position: relative;
  overflow: hidden;
  opacity: 0.3;
}

• background-color: gray; → 슬롯의 배경을 회색으로 설정
• color: white; → 글씨 색상을 흰색으로 설정
• position: relative; → 내부 가상 요소(::before, ::after)가 올바르게 배치되도록 설정
• overflow: hidden; → X자가 요소 바깥으로 넘치지 않도록 함
• opacity: 0.3; → 슬롯을 반투명하게 만들어 비활성화된 느낌 추가

---

.time-slot.reserved::before, .time-slot.reserved::after (X자 만들기)

.time-slot.reserved::before,
.time-slot.reserved::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: center;
}

• content: ""; → 가상 요소 추가
• position: absolute; → 부모 .time-slot.reserved 기준으로 위치 지정
• top: 50%; left: 50%; → 요소를 중앙에 정렬
• width: 80%; height: 3px; → 가로선 길이와 두께 설정
• background-color: rgba(255, 255, 255, 0.7); → X자 색상을 반투명한 흰색으로 설정
• transform-origin: center; → 변형(회전) 중심을 가운데로 설정

---

X자 회전 설정

.time-slot.reserved::before {
  transform: translate(-50%, -50%) rotate(15deg);
}

.time-slot.reserved::after {
  transform: translate(-50%, -50%) rotate(-15deg);
}

• rotate(15deg); → 첫 번째 대각선(/)을 15도 기울임
• rotate(-15deg); → 두 번째 대각선()을 반대 방향으로 15도 기울임
• translate(-50%, -50%); → 요소를 중앙 정렬

---

4. 적용 결과

예약 가능 예약 불가 (X자 표시)

선택 가능

예약 불가

• .time-slot.reserved 클래스가 적용된 요소에 X자 표시가 나타남
• 예약 불가능한 슬롯을 쉽게 구별 가능
• UI/UX 개선으로 사용자가 예약 상태를 직관적으로 확인 가능

---

5. 마무리

이 코드로 예약 불가능한 슬롯을 깔끔하고 직관적인 디자인으로 만들 수 있습니다.
예약 기능이 있는 React, JavaScript 프로젝트 등에 쉽게 적용할 수 있습니다.
더 나은 UX를 위해 색상과 기울기 값은 자유롭게 조정 가능합니다.