[CSS] div border , table 태그 border 테두리 겹침 제거

div를 겹쳐놓은 상태에서 border를 주면 border가 겹쳐져서 겹쳐진 부분만 더 두꺼워 보인다.
border부분만 합치고 싶다면 border-collapse속성을 이용하면 된다.
‘border-collapse’는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다.

MDN

‘border-collapse’는 table 요소를 꾸미므로 div에서 사용하고 싶을 때는
요소를 테이블로 만들어줘야 한다.

부모 div(section)에

Display :table;

자식 div에

  display : table-cell;

을 주어 table 속성으로 만들어준 뒤
부모 div에

border-collapse: collapse;

를 추가해주면 테두리가 겹쳐진 div를 만들 수 있다.

See the Pen 부스트코스 2주차 미션 by sally (@sally0) on CodePen.