반응형 웹 요소의 가로/세로 길이를 함께 변형하고자 할 때.

🔷요즘 초등학생들 사이에서 인기인 sanrio의 홈페이지를 카피 코딩하였다.

---

sanriokorea.co.kr/

---

🔸문제 발견

산리오코리아 홈페이지를 카피코딩 하던 중 위 사진 요소를 <ul>/<li> 요소로 작업하였고 <li> 태그 안에 따로 <img> 요소로 넣지 않고 <li> 태그에 background:url() 로 각 사진을 넣었다.

확인해보니 실제 홈페이지에서는 <img> 태그로 작업을 하였다.

<li> 태그에 background:url() 로 작업을 했다보니, 반응형을 만들 때 넓이는 줄어드나 높이는 줄어들지 않는 문제점이 발견되었다. <img> 태그로 했다면 img 는 부모태그의 넓이가 줄어듦에 따라서 img 의 넓이가 줄어들며 높이도 함께 줄어들었을텐데 <li>에 background:url()을 했기 때문에 높이는 줄어들지 않은 것이다.

---

🔸문제 해결

해당 문제를 해결하기 위해서는 창의 가로길이가 줄어들면 해당 요소가 창의 가로길이에 반응해서 함께 줄어들어야한다. 그렇기 때문에, 가로 길이의 비율에 반응하는 width: vw 로 가야하겠다고 생각했다.

그렇게 <li> 태그에 높이를 width:vw 로 부여함으로 문제를 해결했다.