투명도(2)
-
드래그 앤 드롭 투명도 이슈 해결
문제 상황React-Sortablejs 사용 시 드래그하는 동안 요소가 반투명해지는 현상 발생기본적으로 HTML5 Drag & Drop API의 기본 동작으로 인해 발생하는 문제원인 분석기술적 원인HTML5 Drag & Drop API는 드래그 중인 요소에 자동으로 투명도를 적용브라우저의 기본 동작으로, 사용자에게 드래그 상태를 시각적으로 표시하기 위한 것React-Sortablejs가 기본적으로 HTML5 Drag & Drop API를 사용하기 때문에 발생때문에 결과적으로 2개의 스타일이 중첩 적용됨스타일 중첩 문제// forceFallback이 false일 때 (기본값)const StyledSortable = styled(ReactSortable)` display: flex; flex-direct..
2025.04.23 -
CSS 기초 공부(3) - 색상을 표현하는 방법(투명도)
앞서 말했듯이 CSS는 HTML을 디자인하는 방법이다. 디자인 하면 무엇이 떠오르는가? 모양, 크기 등 다양한 요소가 있지만 디자인에서 가장 기본이 되는 요소 중 하나는 색상이다.색이 조금만 바뀌어도 전체적인 분위기 자체가 달라지기 때문에 실제 인테리어에서도 조명색이나 가구의 색상을 어떻게 정할지 엄청나게 고민하게 된다.마찬가지로 웹페이지 상에서도 색상은 전체적인 분위기를 결정하고 글의 내용 중 일부를 강조하기 위해 쓰이기도 하는 등 디자인의 중요 요소라고 할 수 있다.그렇다면 CSS 상에서 실제로 색상은 어떻게 표현될까? 1. 색상의 종류CSS에서는 우리가 실생활에서 흔히들 사용하는 색상을 이름으로 정의해 두었다.black, white, red, purple, green, yellow, blue 등이 ..
2025.03.09