css 고수 선배님들.. 반응형 관련 질문있습니다.

Question

헤더에 로고와 버튼이 있습니다. 이 둘의 간격은 800px인데화면이 줄어들 때 이 간격이 유지되면서 양옆의 padding값이 줄어들도록 padding: 0 calc((100vw - 800px)/2); 코드를 넣어줬습니다.여기서 궁금한게 화면이 줄어들면서 가로 padding값이 일정 숫자(예를들어 30px)가 되면 더이상 패딩값이 줄어들지 않고 대신 로고와 버튼의 사이가 줄어들게 하고 싶은데방법이 있을까요? sass 문법을 써도 되니, 방법이 있으면 조언 부탁드립니다 ㅠㅠ

열일하는 네오 · Accepted Answer

header 부모에 padding 주면 되겠네요

yooni · Answer

header { display: flex; gap: 800px; justify-content: center; &#64;media screen and (max-width: 1200px) { gap: unset; justify-content: space-between; padding: 0 30px; } }이런 식으로 해주면 될 거 같아요. 미디어 쿼리 기준 max-width 1200px은 제가 임의로 넣은 것이라 직접 맞는 값으로 계산하여 기입하시구요.

css 고수 선배님들.. 반응형 관련 질문있습니다.

2개의 답변

기술 목록