📖 TIL - CSS로 해결하는 미스터리한 흰 선 문제 🔍

이미지와 콘텐츠 사이 흰 선 해결하기: CSS 트러블슈팅 🎨

📌 문제 설명

이미지 영역과 콘텐츠 영역 사이에 의도하지 않은 흰 선이 발생하는 브라우저 렌더링 이슈

발생 원인

• 브라우저의 렌더링 과정에서 발생하는 픽셀 계산 차이
• 인라인 요소 사이의 공백 문제
• 이미지 하단 기본 여백

💡 해결 방법

1. 기본적인 해결책

.modal-content {
  gap: 0;              /* flex gap 제거 */
  font-size: 0;        /* 인라인 요소 사이 공백 제거 */
}

.modal-detail {
  font-size: 1rem;     /* 자식 요소 폰트 사이즈 복구 */
}

2. 포괄적인 해결책

.modal-content {
  background: #1a1a1a;  /* 배경색을 부모와 동일하게 */
}

.modal-img {
  margin: 0;           /* 마진 제거 */
  font-size: 0;        /* 이미지 하단 간격 제거 */
}

.modal-img img {
  vertical-align: top; /* 이미지 하단 간격 제거 */
  margin-bottom: -1px; /* 필요한 경우 추가 보정 */
}

3. 하드웨어 가속을 활용한 해결책

.modal-wrapper {
  transform: translate(-50%, -50%) translateZ(0);  /* 하드웨어 가속 활성화 */
  backface-visibility: hidden;                     /* 렌더링 최적화 */
  -webkit-font-smoothing: antialiased;            /* 폰트 렌더링 개선 */
}

🔍 코드 설명

1. 기본적인 해결책의 원리

• gap 속성 제거로 flex 컨테이너의 간격 제어
• font-size: 0으로 인라인 요소 사이 공백 제거
• 필요한 요소에만 font-size 복구하여 텍스트 표시

2. 포괄적인 해결책의 특징

• 배경색 통일로 시각적 일관성 확보
• margin과 font-size 조절로 간격 완벽 제거
• vertical-align 속성으로 이미지 정렬 보정

3. 하드웨어 가속 해결책의 장점

• GPU 가속으로 렌더링 성능 향상
• 픽셀 계산의 정확도 개선
• 부드러운 폰트 렌더링

✨ 새롭게 배운 점

• 브라우저 렌더링 과정에서의 픽셀 계산 방식
• CSS 속성의 세밀한 제어 방법
• 하드웨어 가속을 활용한 최적화 기법

🚀 이런 점이 효율적이에요

• 여러 해결책을 상황에 맞게 조합 가능
• 성능과 시각적 품질 모두 개선
• 크로스 브라우저 호환성 확보
• 하드웨어 가속으로 성능 최적화

⭐️ 참고 자료

• CSS Box Model 명세
• 브라우저 렌더링 프로세스
• GPU 가속과 CSS 성능 최적화 가이드