-
flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책!Html & CSS 2023. 3. 25. 03:56
📌flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책!
처음엔 border-collapse : collapse 로 해결하려고 했는데 이건 표속성이란다.....
그래서 ChatGpt에게 물어보았다.
border-collapse 속성은 표(table) 요소에서만 사용되며,
collapse 값은 경계선이 붙어서 보이지 않도록 하는 속성 값입니다. flex 속성과는 관련이 없습니다.
flex 레이아웃에서 경계선이 겹치는 문제를 해결하려면,
border-collapse 대신 box-shadow 속성을 사용할 수 있습니다.
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 속성은 black 색상의 1px 두께의 그림자를 생성합니다.
이렇게 하면 요소의 경계선이 겹치지 않고 보이게 됩니다.
만약에 box-shadow 속성으로 해결하지 않고 border-collapse 속성을 사용하고 싶다면,
flex 레이아웃을 사용하는 요소들을 table 요소로 변경해야 합니다.
하지만 이 방법은 의미 없는 HTML 요소들을 추가하게 되어 가독성과 유지보수성이 떨어집니다.
따라서, box-shadow 속성을 사용하는 것이 좋습니다.
그냥 챗GPT 니가 코딩하는게 어때?....
'Html & CSS' 카테고리의 다른 글
div 안에 text 요소가 넘치면 줄바꿈이 되는데 안되게 할 수는 없어? (0) 2023.03.25 div height 100% 처리하기CSS 100vh로 하자 (0) 2023.02.25