모범 사례 | DivMagic

DivMagic을 최대한 활용하기 위한 팁과 요령

1. 모바일 우선 업무

테일윈드 과 유사함, 먼저 모바일 장치를 대상으로 한 다음 더 큰 화면에 맞게 스타일을 추가하세요. 이렇게 하면 스타일을 훨씬 빠르고 쉽게 복사하고 변환할 수 있습니다.

DivMagic은 브라우저에 보이는 대로 요소를 변환합니다. 대형 화면이 있는 경우 복사된 스타일은 대형 화면용이며 해당 화면 크기에 대한 여백, 안쪽 여백 및 기타 스타일을 포함합니다.

큰 화면에 맞게 스타일을 복사하는 대신 브라우저 크기를 더 작은 크기로 조정하고 해당 화면 크기에 맞게 스타일을 복사하세요. 그런 다음 더 큰 화면에 맞게 스타일을 추가하세요.

2. 배경에 주목하세요

요소를 복사하면 DivMagic이 배경색을 복사합니다. 그러나 요소의 배경색이 상위 요소에서 나올 수도 있습니다.

요소를 복사했는데 배경색이 복사되지 않은 경우 상위 요소에서 배경색을 확인하세요.

3. grid 요소에 주목하세요

DivMagic은 브라우저에 보이는 대로 요소를 복사합니다. grid 요소에는 뷰 크기에 따라 달라지는 스타일이 많이 있습니다.

grid 요소를 복사했는데 복사된 코드가 제대로 표시되지 않으면 grid 스타일을 flex로 변경해 보세요.

대부분의 경우 grid 스타일을 flex로 변경하고 몇 가지 스타일(예: flex-row, flex-col)을 추가하면 동일한 결과를 얻을 수 있습니다.