답변 2개
Glitter Gim제공하신 코드에서 헤더 부분의 너비를 강제로 1180px로 고정하려면 CSS를 사용하여
.wrapper와 .header-wrap에 max-width: 1180px과 width: 1180px !important를 지정하고,
margin: 0 auto로 중앙 정렬을 적용하시면~
반응형 디자인을 유지하려면 화면 크기가 1180px보다 작을 경우를 대비해
미디어 쿼리로 width: 100%를 추가~
Bootstrap 클래스와의 충돌 가능성도 확인하셔야 합니다.
＊아래 CSS를 추가.
.wrapper {
max-width: 1180px;
margin: 0 auto; /* 가운데 정렬 */
}
.header-wrap {
width: 1180px !important; /* 헤더 너비 강제 고정 */
margin: 0 auto; /* 가운데 정렬 */
}
＊만약 화면 크기가 1180px보다 작아질 경우 디자인이 잘릴 위험이 있음.
이를 방지하려면 아래와 같이 미디어 쿼리를 추가.
@media (max-width: 1180px) {
.wrapper,
.header-wrap {
width: 100%; /* 화면 크기에 맞게 조정 */
max-width: 100%; /* 고정된 1180px 제한 해제 */
}
}
반응형 속성을 제한할 수 있지만,
화면 크기가 1180px보다 작은 경우 사용자 경험에 문제가 생길 수 있으니 주의해야 함.
※ AI 분석임
container 클래스를 가진 div에 max-width와 width를 지정하면 됩니다. CSS를 다음과 같이 추가해주세요:
.header-wrap .container {
max-width: 1180px;
width: 1180px;
}답변을 작성하려면 로그인이 필요합니다.