인프런 커뮤니티 질문&답변
작성한 질문수
캔버스 width height 사이즈
작성
·
630
0
애플의 예>
<canvas width="900" height="650" style="width: 900px; height:650px;">
애플 웹사이트나 캔버스를 사용하는 다른 사이트들을 "검사" 로 통해 보면 canvas element 자체에서 width height px 값이 변경되는것으로 보입니다.
질문 :
강사님이 강좌에서 보여준것처럼 canvas 에 parent element 를 만들어서 그 height 값을 조정하는것과 canvas element 자체에서 사이즈 조정하는것,
사용 용도에 따라 다르다고 하셨는데 굳이 차이점을 찾는다면 어떤것이 있나요?
이미지 로드 속도? 아니면 resize 시 오류 대응?..
답변 1
3
저희가 샘플로 잡았던
https://www.apple.com/kr/airpods-pro/
를 보시면, width와 height 자체를 바꾸지 않고 우리가 한 것 처럼 transform으로 조정하는걸 볼 수 있어요~
(transform matrix 저 부분이 위치와 스케일을 조정하는 부분입니다)
창 사이즈를 바꿔보아도 width와 height는 1458, 820으로 고정되어 있고요.
이 강의는 애플 클론이기때문에 애플이랑 같은 방식을 사용했습니다~
애플이나 우리 예제처럼 CSS transform을 이용할 경우는 canvas에 직접 하는 것과 부모요소에 하는 것은 별 차이가 없고요,
CSS transform을 이용하느냐 아니면 width height를 직접 바꾸느냐, 이 두가지가 차이점이 있다고 생각하시면 됩니다.
CSS transform을 이용하는 이유는 width와 height를 직접 바꾸는 것보다 성능상 더 유리하고, 계산할 것도 적기 때문이에요.
width height 자체를 바꾸면 캔버스 내부의 요소들 위치를 모두 다시 계산해주면서 다시 그려야 하거든요.
뭐가 더 좋다기보다, 상황별로 더 나은 방식이 있다고 생각하시면 됩니다.
이런 비주얼 이미지의 경우는 좌우가 잘려보여도 내부의 이미지와 텍스트만 중앙에 잘 보이면 되는거라 CSS를 이용한 것이고요,
게임처럼 모든 화면 자체가 전부다 보이는게 좋은 경우는 width와 height를 직접 조정하는 방식이 낫고요.
https://studiomeal-717af.firebaseapp.com/
이건 https://studiomeal.com 사이트의 예전 버전인데요,
요소요소의 위치가 동적이면서 게임처럼 동작하기때문에 CSS transform 조정 보다는
width height를 직접 바꾸는게 낫다고 판단해서 그렇게 작업했었답니다.
결론은, 두 방식 모두 각자 장점이 있는데
CSS transform을 쓰는 편이 성능상으로는 좀 더 낫다- 입니다.