HTML5 Canvas를 화면 전체 크기로 설정하기
HTML5의 <canvas> 요소가 브라우저 페이지 전체를 꽉 차게 표시되도록 하려면, 캔버스의 너비와 높이를 각각 페이지(뷰포트)의 100%로 지정해야 합니다. 이때 브라우저의 기본 여백(margin)과 패딩(padding)이 남아 있으면 원치 않는 스크롤바가 생길 수 있으므로, 이를 함께 제거해 주는 것이 중요합니다.
아래 CSS 코드는 캔버스를 페이지 전체에 꽉 차게 만드는 가장 기본적이고 확실한 방법입니다.
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#canvas {
position: absolute;
height: 100%;
width: 100%;
}코드 설명
- 전체 선택자(*): 모든 요소의 기본 margin과 padding을 0으로 초기화하여, 브라우저 기본 스타일로 인한 빈 공간을 없앱니다.
- body, html: 부모 요소인 html과 body에
height: 100%를 지정해야 자식 요소가 화면 전체 높이를 상속받을 수 있습니다. - #canvas:
position: absolute;와 함께 너비·높이를 100%로 설정하여 문서 흐름과 관계없이 뷰포트 전체를 덮도록 배치합니다.
이렇게 설정하면 캔버스가 어떤 해상도의 화면에서도 브라우저 창 전체를 채우게 되어, 그래픽 애니메이션이나 인터랙티브한 시각화 작업에 적합한 기본 환경을 만들 수 있습니다.