웹 페이지 전체를 캔버스(canvas)로 채우려면 캔버스 요소가 페이지의 너비와 높이를 100% 차지하도록 설정해야 합니다. 단순히 캔버스에 width와 height를 지정하는 것만으로는 부족하고, 브라우저의 기본 여백을 제거하고 상위 요소들의 높이를 함께 조정해야 화면 가장자리까지 빈틈없이 채울 수 있습니다.
CSS 코드 예시
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#canvas {
position: absolute;
height: 100%;
width: 100%;
}코드 설명
- * { margin: 0; padding: 0; } — 모든 요소의 기본 마진과 패딩을 제거합니다. 브라우저는 기본적으로 body에 여백을 두기 때문에, 이를 없애야 캔버스가 화면 가장자리에 딱 붙습니다.
- body, html { height: 100%; } — html과 body의 높이를 뷰포트 전체 높이로 설정합니다. 부모 요소의 높이가 정해져 있지 않으면 자식 요소의 100% 높이가 제대로 적용되지 않습니다.
- #canvas { position: absolute; height: 100%; width: 100%; } — 캔버스를 절대 위치로 지정해 문서 흐름에서 벗어나게 한 뒤, 화면 전체 크기만큼 확장합니다.
추가 팁
position: absolute 대신 position: fixed를 사용하면 스크롤 여부와 관계없이 항상 화면에 고정되는 캔버스를 만들 수 있어, 배경 애니메이션이나 인터랙티브 효과에 유용합니다.
또한 CSS로 캔버스 크기를 늘리면 내부 픽셀 해상도는 그대로 유지되어 그림이 흐려질 수 있습니다. 창 크기가 바뀔 때마다 선명한 화질을 유지하려면 JavaScript에서 window.resize 이벤트를 감지해 canvas.width와 canvas.height를 실제 픽셀 크기에 맞게 다시 설정해 주는 것이 좋습니다.