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

작성한 질문수

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

블렌딩 캔버스 크기 계산

align-items : center

작성

231

안녕하세요 !

이미지 백그라운드를 blue로 했을 경우

align-items : center를 주면

왜 해당 영역이 확대되면서 커지는지 이해가 조금 부족하여

조금만 설명 덧붙여주시면 감사하겠습니다 ㅠㅠㅠ

align-items를 적용적에는 화면안에서 크기가 다 보였는데

align-items를 적용했다고 갑자기 확대되면서 크기가 넘치는게

이해가안돼요 ㅠㅠ

퀴즈

69%나 틀려요. 한번 도전해보세요!

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

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

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

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

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

답변 1

지식공유자

가로/세로 비율을 보면, 스크린의 비율보다 캔버스의 비율이 가로로 더 길기 때문에, 캔버스의 높이를 화면 높이에 딱 맞출 경우 가로는 캔버스가 더 길어지므로 양쪽으로 넘치게 된다는 이야기입니다~
사용하고 계신 스크린이 가로로 길쭉한 형태라면 다를 수 있습니다.

작성한 질문수