<div> 테두리(border) 겹침 제거(collapse)
<div>태그에 border를 사용해 틀을 잡으려다 선이 겹쳐서 두 배의 두께로 나온 적이 있을 것이다.
display: table 을 설정하면 해결할 수 있지만, display: float와 같이 다른 값이나 속성을 사용하고 있을 땐 난감해진다. 반응형 웹페이지에서 테이블셀을 사용하면 대응이 힘들 때가 있기도 하고.
아래처럼 1px의 solid black 테두리선이 특정 영역에서 2개씩 겹쳐서 2px로 보이는 경우의 해결법이다.
html
1 2 3 4 5 6 7 | <div class="sucks"> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </div> | cs |
css
1 2 3 | .sucks div{ border:1px solid black; } | cs |
output
원래 위와 같은 현상을 극복하기 위해서는,
첫번째 <div>에 border가 모두 설정되어 있다면 그 아래 <div>는 첫번째 <div>와 겹치는 위쪽 부분 border를 제외한 왼쪽, 오른쪽, 아래에만 border를 설정하는 등 각각 겹치는 부분을 제외하여 일일이 테두리를 설정해줘야 한다.
그러나 이런 번거로운 과정을 제끼고, 아래와 같이 box-shadow, 즉 그림자로 눈속임 할 수 있다.
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> | cs |
css
1 2 3 4 5 6 7 8 9 10 11 12 | .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%; } | cs |
output
2px의 회색 테두리선이 균일하게 나온다.
px 굵기와 컬러는 자유롭게 설정해도 된다.
주의
box-shadow 속성은 IE 9버전부터 지원한다.