이미지와 콘텐츠로 반응형 페이지 디자인

Question

저는 프런트 엔드를 처음 접했고 레이아웃과 반응성을 다루는 데 몇 가지 문제가 있습니다.

지금까지 내 코드는 다음과 같습니다.

으아악 으아악

내가 달성하고 싶은 지금까지의 시도를 볼 수 있습니다: https://www.figma.com/file/lqy0NTOiakaxeG5HoJk50f/Untitled?node-id=0%3A1.

이것이 기본이라는 것은 알지만, 무엇을 하려고 해도 항상 다른 것이 떠오릅니다.

Answer 1

CSS 그리드를 사용하여 텍스트 옆에 이미지와 버튼을 배치합니다.

또한 버튼과 이미지를 div로 함께 묶습니다(클래스 이름 right-col을 지정했습니다):

으아악

최대 너비의 래퍼로 모든 코드를 래핑하고 제목과 내용을 모두 100%로 만들 수도 있습니다.