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

댓글 전체

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

회원로그인

진행중 포인트경매

  1. 컬쳐랜드 모바일문화상품권 1만원

    참여2 회 시작18.07.20 23:59 종료18.07.23 23:59
  2. 500여 동영상강좌 평생 무료 이용 쿠폰 (365OK 무료이용)

    참여32 회 시작18.07.16 11:13 종료18.07.21 11:13

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT