2021-05-13 (31일차)이미지리스트, 이미지간격, 음수margin

137강~140강

 

 

- 좌우 끝의 이미지를 제외한 나머지 이미지간의 사이 간격을 띄우는 방법

  (ex, 한 줄에 4개의 이미지를 놓는 상황이라고 가정)

 

- 방법1

  work-list-box > ul > li {margin-right:20px; width:calc(25%-20px); margin-right:20px;

  ㄴ 단점 : 맨 우측의 여백에 필요없는 여백이 생김

  ㄴ 해결책 : .work-list-box > ul > li:nth-child(4n) {margin-right:0;}

 

- 방법2

  .work-list-box > ul > li {width:calc((100% - 20px * (4 - 1)) / 4); margin-top:20px;}

  .work-list-box > ul > li:not(:nth-child(4n)) {margin-right:20px;}

 

- 최고의 방법(방법3)(padding과 음수margin 이용)

  .img-box > img 를 div안에 감싸기(관례)

  (→.con > .work-list-box > ul > li > div > div.img-box > img)

  .work-list-box > ul > li {width:calc(100% / 4); padding:0 10px; margin-top:20px;}

  ㄴ 단점 : 맨 우축의 여백에 필요없는 여백이 생김

  ㄴ 해결책 : .work-list-box > ul {margin-left:-10px; margin-right:-10px;}