1원팁) div 선을 shadow로 처리하기 > 그누보드5 팁자료실

그누보드5 팁자료실

1원팁) div 선을 shadow로 처리하기 정보

1원팁) div 선을 shadow로 처리하기

본문

여러개의 div 가 나열되어 있을때 border를 적용하면 아래와 같이 됩니다.

 

예) border:1px solid #ddd;

 

31258235_1530076571.5393.gif

 

그림이 희미하게 나와서 잘 보이실지 모르겠지만  각 div가 연결되는 지점이 1+1 = 2px 이 되어서 두껍게 나옵니다.

 

그래서 보통 각 셀의 오른쪽 선을 border-right:0 으로 하고 last 에만 border-right:1px 로 처리하지요.

 

이렇게 해도 되는데 위와같이 한줄이 아니라 2줄일 경우 또 복잡해집니다.

어떻게든 처리가 가능하겠지만 반응형까지 고려하면 상당히 머리아파집니다.

 

이럴때 box-shadow로 처리하면 아래와 같이 간단하고 깔끔하게 출력됩니다.

 

31258235_1530076886.0281.gif

 

 

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;  /* 요건 오른쪽 끝에 라운딩이 생기는거 방지 */

추천
11

댓글 18개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT