2021-05-12 (30일차) 이미지리스트, 반응형 이미지, 이미지의 부모에 .img-box

136강

 

- 이미지는 원래 반응형이 아님

 

- 이미지를 반응형으로 만드는 방법 (화면에 따라 유연하게 움직임)

  이미지의 부모에게 img-box을 주기

  img-box > img { width : 100%; display:block;}

  ※ img에  직접 width를 줘도 되지만 위의 방식이 자주 쓰이는 방식

 

- img를 배치하는 방법

  ul>li>div.img-box>img (이미지를 div에 감싸기)

  ul>li.img-box>img 이렇게 배치해도 되긴 하지만, a와 같은 형식이라서 그냥 div에 감싸기