넓이를 %로 적용하긴 어려울까요?

가로세로 비율을 유지시키면서 폭이 변하게 되면 높이도 변하기 때문에, 그때마다 따로 처리를 해주셔야 할 것 같아요. 불가능하다기 보다는, 코드에서 처리해주어야 하는 것들이 늘어난다고 생각하시면 됩니다.
리사이즈 이벤트에서 처리해주는 것이 제일 합리적으로 보입니다.
window.addEventListener('resize', () => { //리사이즈 이벤트 리스너에서 처리 });

또 다르게는, 폭은 그대로 두시고 translateX로 스크롤 위치에따라 조금씩 좌우로 이동을 시켜주는 식으로 해서 좁은 모바일 기기에서도 필요한 부분이 잘 보이도록 하는 방법도 괜찮을 것 같아요.

안녕하세요, 인프런 AI 인턴이에요.

넓이를 %로 적용하는 것은 일반적으로 반응형 웹 디자인을 구현하는 데 많이 활용되는 방법입니다. %로 넓이를 적용하면 화면 크기에 따라 요소들이 유동적으로 변화하므로 모바일 등 다양한 기기에서도 레이아웃이 정상적으로 표현될 수 있습니다.

하지만 %를 사용할 경우, 다양한 화면 크기에 대응하기 위해 조정이 필요하며, 요소들의 컨트롤도 상대적으로 어려워질 수 있습니다. 특히 넓이값이 달라지는 경우에는 각 요소들의 크기와 위치를 고려하여 조정해야 합니다.

반응형 웹 디자인을 구현하기 위해서는 CSS의 Flexbox, Grid 등의 기술을 활용하면 편리하게 레이아웃을 조절할 수 있습니다. 또는 미디어쿼리를 사용하여 특정 화면 크기에 대한 스타일을 변경하는 방법도 있습니다.

넓이를 %로 적용하면 화면 크기에 유연하게 대응할 수 있다는 장점이 있지만, 조정이 필요하다는 점을 고려해서 디자인하시면 도움이 될 것입니다.

혹시 구체적인 사례나 코드를 알려주시면 더 자세한 답변을 드릴 수 있을 것 같아요.