#css

툴팁 같은 래퍼 컴포넌트가 부모의 flex 계산에 개입해 레이아웃을 깨뜨리는 문제를 해결하기 위해 래퍼의 flex 속성을 옵션으로 분리하고 레이아웃 설계 시 호출부의 영향력을 고려하는 방법을 제안합니다

background-clip을 content-box로 설정하면 padding 두께만큼 border-radius가 깎여 의도치 않게 각진 모양이 되는데, 이를 해결하려면 슬래시 문법을 사용해 가로와 세로 반경을 개별적으로 보정해야 합니다

disabled 버튼은 포인터 이벤트를 차단해 툴팁 표시를 방해하므로 CSS의 pointer-events: none을 활용해 이벤트를 부모 요소로 전달하는 해결법과 함께 키보드 사용자를 위한 접근성 보완책을 제시합니다

모바일 웹에서 키보드에 가려지는 모달 문제를 visualViewport API와 paddingBottom을 활용해 해결하는 방법을 소개합니다. 레이아웃 정렬 전략을 바꾸지 않고도 키보드 높이만큼 오버레이 영역을 조정하여 모달이 항상 키보드 위로 올라오게 만드는 실무적인 최적화 노하우를 확인해 보세요