display: flex를 주어도 계속해서 div 박스들이 깨져서 나왔다.
display: flex 속성을 사용할 때, 자식 요소의 크기가 flex container의 크기를 초과하면, 기본적으로 flex item의 크기를 조정하여 container의 크기에 맞게 조절하려고 시도합니다. 이 때, flex item의 크기가 축소되는 현상이 발생할 수 있습니다.
이를 해결하는 방법으로는 flex-shrink: 0 속성을 이용하여 flex item의 크기를 줄이지 않도록 설정해주는 것입니다. 이렇게 하면, flex item의 크기가 container의 크기를 초과하는 경우, flex item이 줄어들지 않고 container의 크기를 벗어나는 것이기 때문에, 스크롤이 생길 수 있습니다.
부모 요소가 자식요소에 의해서 늘어나게 하려면 flex => flex-shrink
고정된 크기에서 가로로 배열하려면 width: ooovw => float:left or right
display inline-block
블록요소
<div> , <p>, <ul>, <dl>, <p>, <h1>, <h2>, <h3>, ...
<a>, <span>, <img>, <strong>, <em>, <input>, <button>, <textarea>, <select>
clientX, offsetX, pageX, screenX의 차이
- screenX, screenY
- pageX, pageY
- clientX, clientY
- screenX, screenY
사용자 모니터 화면을 기준으로 한 좌표를 표시합니다.
사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 됩니다.
- pageX, pageY
전체 문서를 기준으로 한 좌표를 표시합니다.
위 그림과 같이, 만약 문서를 표현할 때 스크롤이 생긴다면,
특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것입니다.
- clientX, clientY
브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시합니다.
따라서, 스크롤바가 움직이더라도, 특정 지점의 clientX, clientY의 값은 동일합니다.
tranform(x, y)
transform: translate(20px, 25%)
x축방향으로 x만큼 y축방향으로 y만큼 이동한다.
trnasform: scale(0.7, 1.1)
x축으로 x만큼 , y축으로 y만큼 요소를 축소 혹은 확대한다.
scaleX, scaleY
transform: skew(15deg, 15deg)
x축으로 x도만큼, y축으로 y도 만큼 요소를 기울인다.
transform: rotate(45deg)
요소를 n만큼 회전시킨다. 시계방향으로
리액트에서 addeventListener를 쓰는 이유
React에서 addEventListener를 사용하는 이유는, DOM 요소에 대한 이벤트 핸들러를 등록하기 위해서입니다.
React는 Virtual DOM을 사용하여 UI를 렌더링하고, 이벤트 처리를 위한 핸들러를 컴포넌트의 props로 전달합니다. 그러나, 이벤트가 실제 DOM 요소에서 발생하므로, 이벤트 핸들러를 등록하려면 DOM 요소에 대한 참조를 가져와야 합니다. 이를 위해 React에서는 ref를 사용하여 DOM 요소에 대한 참조를 만들고, 해당 DOM 요소에 대해 addEventListener를 사용하여 이벤트 핸들러를 등록합니다.
따라서, 위 코드에서는 onMouseDown 이벤트 핸들러를 사용하여 mouseMoveHandler 함수와 mouseUpHandler 함수를 등록하고, mouseMoveHandler 함수에서는 setPosition 함수를 호출하여 상태를 업데이트합니다. 마지막으로, mouseUpHandler 함수에서는 등록된 mouseMoveHandler 이벤트 핸들러를 제거합니다.
React에서 addEventListener를 사용하는 것은 DOM 조작을 직접적으로 수행하는 것보다 더 안전하며, React의 상태와 일치하는 UI를 유지하는 데 도움이 됩니다.
https://velog.io/@bepyan/Drag-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%BD%80%EA%B0%9C%EA%B8%B0
