헤더 이미지, 텍스트, 버튼을 반응형으로 만드는 방법

Question

Bootstrap 5를 사용하여 웹사이트를 만들고 있습니다. 웹사이트 헤더에서는 Bootstrap의 Carousel을 헤더로 사용하고 있습니다. 캐러셀 이미지를 사용하면 텍스트와 버튼도 표시할 수 있습니다. 이미지, 텍스트, 버튼이 반응하기를 원합니다. 미디어 쿼리를 사용해 보았지만 어떻게 해야 할지 모르겠습니다.

test.html

으아아아

test.css

으아아아

으아아아 으아아아

Answer 1

미디어 쿼리는 다음과 같이 작성됩니다.

으아악

부트스트랩을 사용할 때 읽을 수 있도록 끝에 !important를 추가해야 한다는 것을 알았습니다.

으아악

미디어 쿼리에 대해 더 알고 싶다면 다음 기사를 확인하세요: https://www.w3schools.com/css/css3_mediaqueries.asp

(물론 글꼴 색상을 변경하고 싶지 않을 수도 있습니다. 이는 단지 예일 뿐입니다.)