1원팁) div 선을 shadow로 처리하기
여러개의 div 가 나열되어 있을때 border를 적용하면 아래와 같이 됩니다.
예) border:1px solid #ddd;
그림이 희미하게 나와서 잘 보이실지 모르겠지만 각 div가 연결되는 지점이 1+1 = 2px 이 되어서 두껍게 나옵니다.
그래서 보통 각 셀의 오른쪽 선을 border-right:0 으로 하고 last 에만 border-right:1px 로 처리하지요.
이렇게 해도 되는데 위와같이 한줄이 아니라 2줄일 경우 또 복잡해집니다.
어떻게든 처리가 가능하겠지만 반응형까지 고려하면 상당히 머리아파집니다.
이럴때 box-shadow로 처리하면 아래와 같이 간단하고 깔끔하게 출력됩니다.
box-shadow:
1px 0 0 0 #ddd, /* 오른쪽 선 */
0 1px 0 0 #ddd, /* 아래 선 */
1px 0 0 0 #ddd inset, /* 왼쪽 선(안쪽으로) */
0 1px 0 0 #ddd inset, /* 위쪽 선(안쪽으로) */
1px 1px 0 0 #ddd; /* 요건 오른쪽 끝에 라운딩이 생기는거 방지 */
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 18개