[웹4]240415-(반응형 이미지)

https://codepen.io/limyena/pen/OJGwwGB

반응형 이미지

 

[반응형 이미지]

 

- 이미지는 처음 가져왔을 때 고유 사이즈를 가지고 있어서

  반응형 이미지를 만들고 싶으면 특정 코드(-> %값)를 작성 해줘야 한다.

   

 

[고정사이즈를 가진 반응형 이미지]

 

목적: 300px 을 가진 반응형 이미지

   ㄴ조건1: 이미지 태그는 %여야 한다.

   ㄴ해결1: .img-box에 width: 300px을 적용한다.

       - 문제점: 이미지 사이즈가 300px 로 고정되긴 하나 반응형이 작동되지 않는다.

       - 원인: 반응형 이미지는 모든 태그가 %로 작동해야되는데  .img-box에 고정px을 적용했기 때문에 반응형으로 작동하지 않는다.

 

   ㄴ조건2: .img-box가 300px을 가지면서 반응형으로 작동할 수 있어야 한다.

   ㄴ해결2: 300px을 가지면서 유연하게 작동할 수 있는 max-width를 .img-box에 적용한다.

       - 해결 O

 

 

[img태그에 max-width사용]

 

- img태그에 max-width를 사용하게 되면 반응형이 작동하지 않는다.

  이때 width: 100%;를 적용하면 다시 작동하게 되는데 이 원인은 max-width코드펜을(아래 링크) 참고해서 공부하면 된다.

 

https://codepen.io/limyena/pen/bGJjxeP

max-width

 

- max-width 는 width: auto = 0인 상태에 사용할 수 없기 때문에 width: 100%;로 만들어서 사용해야 한다.

- 위 코드펜 내용처럼 img태그는 block으로 작동해도 상위엘리먼트 너비를 상속받지 않기 때문에 max-width를 사용하려면

  width: 100%를 적용해서 사용해야 반응형이 제대로 작동된다.

 

 

 

https://codepen.io/limyena/pen/NWmBLvW

화면높이에 비례하는 반응형 배너이미지

 

 

 

https://codepen.io/limyena/pen/WNWKgKQ

화면높이비례 이벤트 배너

 

 

 

https://codepen.io/limyena/pen/vYMazzb

세로값이 고정된 반응형이미지