캔버스 width height 사이즈

Question

애플의 예>  <canvas width="900" height="650" style="width: 900px; height:650px;"> 애플 웹사이트나 캔버스를 사용하는 다른 사이트들을 "검사" 로 통해 보면 canvas element 자체에서 width height px 값이 변경되는것으로 보입니다.  질문 : 강사님이 강좌에서 보여준것처럼  canvas 에 parent element 를 만들어서 그 height 값을 조정하는것과 canvas element 자체에서 사이즈 조정하는것,  사용 용도에 따라 다르다고 하셨는데 굳이 차이점을 찾는다면 어떤것이 있나요? 이미지 로드 속도? 아니면 resize 시 오류 대응?..

1분코딩 · Answer

저희가 샘플로 잡았던 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을 쓰는 편이 성능상으로는 좀 더 낫다- 입니다.