<div> 테두리(border) 겹침 제거(collapse)

<div> 테두리(border) 겹침 제거(collapse)

<div>태그에 border를 사용해 틀을 잡으려다 선이 겹쳐서 두 배의 두께로 나온 적이 있을 것이다.

display: table 을 설정하면 해결할 수 있지만, display: float와 같이 다른 값이나 속성을 사용하고 있을 땐 난감해진다. 반응형 웹페이지에서 테이블셀을 사용하면 대응이 힘들 때가 있기도 하고.

아래처럼 1px의 solid black 테두리선이 특정 영역에서 2개씩 겹쳐서 2px로 보이는 경우의 해결법이다.

html

  <div class="sucks">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

css

.sucks div{
  border:1px solid black;
}

output

원래 위와 같은 현상을 극복하기 위해서는,

첫번째 <div>에 border가 모두 설정되어 있다면 그 아래 <div>는 첫번째 <div>와 겹치는 위쪽 부분 border를 제외한 왼쪽, 오른쪽, 아래에만 border를 설정하는 등 각각 겹치는 부분을 제외하여 일일이 테두리를 설정해줘야 한다.

그러나 이런 번거로운 과정을 제끼고, 아래와 같이 box-shadow, 즉 그림자로 눈속임 할 수 있다.

html

  <div class="basic">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>
  
  <p></p>
  
  <div class="float">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

css

.basic div, .float div{
  box-shadow: 
    2px 0 0 0 #888, 
    0 2px 0 0 #888, 
    2px 2px 0 0 #888,
    2px 0 0 0 #888 inset, 
    0 2px 0 0 #888 inset;
}
.float div{
  float:left;
  width:20%;
}

output

2px의 회색 테두리선이 균일하게 나온다. 

px 굵기와 컬러는 자유롭게 설정해도 된다.

주의

box-shadow 속성은 IE 9버전부터 지원한다.