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

작성한 질문수

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

블렌딩 캔버스 크기 계산

image-blend-canvas를 html에 추가하면

작성

·

218

0

image-blend-canvas를 html에 추가하고 개발자 도구에서 모바일 화면으로 볼 때,

scroll-section0, 2, 3의 height가 16880px이 되면서 추가된 캔버스들이 제대로 구현 되지 않는데.... 뒤에 강의에서 조정이 되나요?? 아니면 저의 오류인가요...?

첫 번째 쭉 따라 했을 때도 이 오류가 있어서.. 혼자 찾아보다가 복습 하는 차원에서 그냥 다 지우고 다시 처음부터 따라 했었는데... 두 번째에도 똑같은 오류가 생겨서요ㅠㅠ

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

퀴즈

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

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

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

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

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

답변 1

1

지식공유자

섹션의 높이는 브라우저 높이에 따라 차이가 있을 수는 있는데, 값이 좀 과하게 큰 느낌이 드네요^^;
아무래도 setLayout 함수에서 높이를 설정하는 부분에 차이가 있을 것 같은데요~ setLayout 함수의 코드를 수업에서 진행하는 코드랑 잘 비교해 보시겠어요?

질문자

추후 강의에서 .container { overflow-y : hidden } 추가하는데, 여기서 해결 됐습니다~
감사합니다!

작성한 질문수