문제 상황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..

box-sizing이란?요소의 크기를 계산하는 방식을 결정하는 방식이다.즉, 요소의 width(너비)와 height(높이)를 어떤 기준으로 계산할지를 정하는 방식이다. 박스 사이징이라는 말처럼 요소의 콘텐츠 영역을 비롯해서 패딩(내부 여백)과 보더(테두리)를 기준으로 요소의 크기를 결정하게 된다.단 마진(외부 여백)은 계산에 포함되지 않는다.계산 포함 (O)콘텐츠 크기, 패딩, 테두리계산 제외 (X)마진box-sizing 속성content-box (기본값)요소의 width와 height 속성은 콘텐츠 영역의 크기를 나타낸다.padding과 border는 요소의 전체 크기에 추가된다.예를 들어, width: 100px; padding: 20px; border: 10px;인 요소의 실제 너비는 160px(1..

body{ display: flex; font-family: Arial, Helvetica, sans-serif; margin: 0; padding-top: 80px; padding-left: 96px; padding-right: 24px; background-color: black; color: white;}.body{ display: flex; font-family: Arial, Helvetica, sans-serif; margin: 0; padding-top: 80px; padding-left: 96px; padding-right: 24px; background-color: black; color: white;}선..

CSS 디자인을 하다보면 스타일 규칙이 충돌할 때가 있다. 그렇게 되면 웹 브라우저는 어떤 스타일이 요소에 적용되는지를 결정하는데 그 기준이 우선순위라고 할 수 있다. CSS 우선순위 결정 요소웹 브라우저는 다음 요소들을 종합적으로 고려하여 CSS 우선순위를 결정한다. 1. 중요도 (!important 규칙)!important 규칙은 가장 높은 우선순위를 가지며, 다른 모든 규칙보다 우선하여 적용된다.하지만 !important를 남용하면 스타일 관리가 어려워지므로, 가능한 한 사용을 자제하는 것이 좋다.2. 명시도 (Specificity)명시도는 스타일 규칙이 얼마나 구체적으로 요소를 선택하는지를 나타낸다.  명시도가 높은 규칙이 낮은 규칙보다 우선하는데 다음과 같은 순서로 계산된다.인라인 스타일 (HT..

미디어 쿼리(Media Queries)란?앞서 플렉스 박스나 그리드는 레이아웃을 설계하 속성이라고 설명했다. 그렇다면 그런 레이아웃을 꾸며줄 기능 또한 필요한데 그것이 바로 미디어 쿼리이다. 우리는 웹페이지를 볼때 반드시 스마트폰으로만 보는 것이 아니라 PC로도 보고 태블릿으로도 보고 심지어는 TV에 연결해서 대화면에서 보기도 한다.사람으로 치자면 키가 큰 사람, 마른 사람, 뚱뚱한 사람처럼 다양한 체형이 있는 것이다. 미디어 쿼리는 그런 다양한 체형에 적응할 수 있는 고무줄이 달린 옷이라고도 할 수 있을 것이다.미디어 쿼리의 주요 기능 반응형 웹 디자인 구현 : 다양한 화면 크기와 해상도를 가진 기기(데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지가 최적의 모습으로 보이도록 스타일을 조정한다.미디어 유..

z-index란?CSS 레이아웃을 만들다보면 동일한 위치에 여러 레이아웃이 겹치는 경우가 발생한다.이럴 때 사용하는 것이 바로 z-index 속성이다. z-index는 겹치는 요소가 있을 때 어떤 요소가 위에 표시되고 어떤 요소가 아래에 표시될지 제어할 수 있다. 음식으로 예를 들자 샌드위치의 재료를 어떤 순서로 쌓을 지 정하는 방법이라고 할 수 있다.샌드위치는 빵, 햄, 치즈, 야채 등을 순서대로 쌓는데 만약에 빵 대신 야채를 가장 밑에 둔다면 어떻게 되겠는가?이처럼 z-index는 각각의 레이아웃들을 적정한 위치에 배치해서 제작자가 의도한 대로 웹페이지가 동작하도록 만드는데 도움을 준다. 그림을 예로 들면 레이어를 쌓는 순서이다. 디지털 프로그램을 사용해서 그림을 그릴 때 여러개의 레이어를 쌓아 올려..

position위치, 자리CSS position이란?css에서 포지션이란 HTML 요소의 위치를 결정하는 데 사용되는 속성이다. 포지션은 요소가 문서 내에서 어떻게 배치될지 정의한다.position 속성의 주요 값static (기본값):요소가 일반적인 문서 흐름에 따라 배치됩니다.top, right, bottom, left 속성이 적용되지 않습니다.특별한 위치 조절이 필요 없는 경우에 사용됩니다.relative:요소가 원래 위치를 기준으로 상대적으로 이동합니다.top, right, bottom, left 속성을 사용하여 이동 거리를 지정할 수 있습니다.다른 요소와의 상대적인 위치 조절에 유용합니다.absolute:요소가 가장 가까운 위치가 지정된(positioned) 조상 요소를 기준으로 절대적으로 배치..

플렉스 박스에서 플렉스 컨테이너와 플렉스 아이템으로 나뉜 것처럼그리드 또한 컨테이너와 아이템이 있다. 그중 아이템의 위치와 크기를 정밀하게 제어하는 방법이 있는데 그것이 바로 grid-row-start, grid-row-end, grid-column-start, grid-column-end 속성이다. grid-row-start, grid-row-end, grid-column-start, grid-column-end 그리드 컨테이너에 위치할 아이템의 위치를 정하는 속성이다. 예를 들어 그리드 컨테이너가 체스 판이라고 한다면 그리드 아이템은 체스 말이다.해당 속성은 체스 말을 체스판의 어느 위치에, 어떤 크기로 놓을지 결정하는 역할을 한다. 때문에 해당 속성을 사용할 경우 좀 더 유연하게 레이아웃을 배치할 ..

1. gap그리드 셀 사이의 간격을 설정하는 데 사용된다.gap 속성은 row-gap과 column-gap의 단축 속성으로, 행과 열 사이의 간격을 한 번에 설정할 수 있다.더보기 1 2 3 4 5 6 7 8 9 .grid-container { display: grid; grid-template-columns: repeat(3, 100px); gap: 20px 10px; /* 행 간격: 20px, 열 간격: 10px */ } .grid-item { background-color: #eee; padding: 20px; text-align: ..

shrink(규모·양이[을]) 줄어들다[줄어들게 하다]플렉스 컨테이너에 담겨있는 아이템의 크기가 컨테이너를 초과할 경우 아이템이 컨테이너 밖으로 삐져나온다. flex-shrink는 플렉스 아이템들의 크기를 조정해서 이렇게 삐져나온 것들을 컨테이너 안으로 밀어 넣는 방법이다. 인테리어로 비유 하자면 가구를 여유롭게 배치했더니 방 밖으로까지 가구가 삐져나온 상황인데이렇게 이렇게 삐져나온 가구를 방 안으로 넣기 위해서 가구가 차지하는 공간을 줄이는 방법이라고 할 수 있다. flex-shrinkflex-grow가 남는 공간을 분배하는 것과 반대로, flex-shrink는 부족한 공간을 분배하는 속성이다.즉, flex-shrink는 플렉스 컨테이너의 공간이 부족할 때 플렉스 아이템의 크기가 얼마나 줄어들지를 결..