Flex를 사용할 때 div의 가장자리가 서로 겹치고 가장자리가 두껍게 보이면 해결 방법!

by

Flex 사용시 div의 테두리가 겹쳐서 테두리가 두꺼워 보이면 해결!

먼저 border-collapse:collapse로 해결하려고 했는데 이게 테이블 속성이라…

그래서 ChatGpt에게 물어봤습니다.

border-collapse 속성은 테이블 요소에만 사용됩니다.

'추천 관련글,

축소 값은 경계선을 보이지 않게 만드는 속성 값입니다. 이것은 flex 속성과 관련이 없습니다.

Flex 레이아웃에서 겹치는 여백을 수정하려면

border-collapse 대신 box-shadow 속성을 사용할 수 있습니다.

box-shadow 속성은 요소의 테두리 대신 그림자를 표시합니다.

예를 들어 다음과 같은 코드로 상자 그림자 속성을 적용할 수 있습니다.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 1px black;
}

위의 코드에서 Box Shadow 속성은 1픽셀 두께의 검은 그림자를 만듭니다.

이렇게 하면 요소의 경계가 겹치지 않고 표시됩니다.

box-shadow 속성 대신 border-collapse 속성을 사용하고 싶다면,

플렉스 레이아웃을 사용하는 요소를 테이블 요소로 변경해야 합니다.

그러나 이 방법은 무의미한 HTML 요소를 추가하므로 가독성과 유지 관리성이 떨어집니다.

따라서 box shadow 속성을 사용하는 것이 좋습니다.

Just ChatGPT 코딩은 어때?…