인프런 커뮤니티 질문&답변

작성한 질문수

애플 웹사이트 인터랙션 클론!

좌우 흰색 영역 위치 및 크기 잡기

캔버스에 그려진 whiteRectWidth 와 실제로 같은 크기로 설정된 div의 크기가 다른 경우

작성

369

안녀

안녕하세요.

위와같이 콘솔창을 보시면 whiteRectWidth가 202.5로 찍혀서 똑같은 크기를 가진 div를 위에 생성했더니 캡쳐와 같이 너비가 틀린 것을 확인했습니다. 

실제로 캔버스에 그려질때 화면시작점부터가 아니라 좀 더 뒤에서 그려지는 건가요??

.test {
    background-color: black;
    width: 202.5px;
    height: 800px;
    align-self: flex-start;
}
 
테스트한 div의 크기 

클론코딩 웹 디자인 인터랙티브-웹 HTML/CSS javascript svg

퀴즈

HTML Canvas 요소를 화면 크기에 맞춰 반응형으로 동적 조절할 때, 가장 핵심적으로 사용되는 방법은 무엇일까요?

CSS media 쿼리를 사용하여 고정된 크기 값을 여러 개 정의한다.

자바스크립트로 현재 화면의 비율을 계산하여 캔버스 크기에 적용한다.

캔버스에 `width: 100%; height: 100%;` CSS 스타일을 적용한다.

캔버스에 Flexbox 속성을 직접 적용하여 크기를 유연하게 조절한다.

답변 1

1분코딩

지식공유자

캔버스 자체가 원래 사이즈인 1920*1080으로 표시되는게 아니라 디스플레이 크기에 딱 맞도록 우리가 의도적으로 변형해서 표시하기 때문입니다.
예를들어 폭이 200픽셀이라면 캔버스 안에서는 1920중의 200 크기이겠지만, 브라우저에 표시하는 캔버스 크기 자체가 달라졌기 때문에 그 달라진 비율만큼 차이가 난다고 생각하시면 될 것 같습니다^^

hw.kang

작성한 질문수

전체 Q&A

질문하기