728x90
반응형
하단에 설명 있음.
.wrapper {
min-width: 1440px;
}
처음 전체 창 크기 설정만 함.
창을 줄일 수록 오른쪽이 잘림.
.wrapper {
min-width: 1440px;
}
이렇게 고쳐봤는데 이거보단,
.wrapper {
width: 100%;
}
이렇게 수정해주고,
css하단에
@media screen and (max-width: 1200px) {
.wrapper {
min-width: 100%;
}
.navbar a {
font-size: 16px;
}
}
@media screen and (max-width: 570px) {
.wrapper {
min-width: 100%;
}
.navbar a {
font-size: 10px;
}
}
이거 추가 해줌.
그리고 추 후에,
@media screen and (max-width: 1200px) {
.wrapper {
width: 100%;
}
.navbar a {
font-size: 16px;
}
}
@media screen and (max-width: 570px) {
.wrapper {
width: 100%;
}
.navbar a {
font-size: 10px;
}
}
이렇게 수정해줌.
나중에 다시 수정 필요
@media screen and (max-width: 1200px) {
.wrapper {
max-width: 1200px;
}
.navbar a {
font-size: 16px;
}
}
@media screen and (max-width: 570px) {
.wrapper {
min-width: 200px;
}
}
min - width 하고
max -width 사용하는 경우:
max-width:
max-width 속성은 요소의 최대 너비를 설정
이 값보다 요소의 너비가 커질 수 없다
.container {
max-width: 1200px;
margin: 0 auto;
}
위 CSS는
.container 클래스를 가진 요소의 최대 너비를 1200px로 제한한다.
화면이 1200px보다 넓어지더라도,
.container 의 너비는 1200px을 넘지 않음.
이는 큰 화면에서 콘텐츠가 너무 퍼지지 않게 하여 가독성을 높이는 데 유용
min-width
요소의 최소 너비를 설정
이 값보다 요소의 너비가 작아질 수 없다
브라우저 창이나 부모 요소의 너비가
min-width 보다 작아지더라도, 해당 요소는 min-width
에서 설정된 너비 이하로 축소되지 않습니다.
.sidebar {
min-width: 200px;
}
.sidebar
클래스를 가진 요소의 최소 너비를 200px로 설정합니다. 화면이 200px보다 좁아져도,
.sidebar 의 너비는 200px보다 작아지지 않는다.
너무 좁은 화면에서 콘텐츠가 제대로 표시되지 않는 것을 방지.
728x90
반응형
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[HTML / CSS] 햄버거 언더 메뉴바 만들기 (1) (0) | 2024.03.26 |
---|---|
[CSS] li 태그 - 가로 정렬, 밑줄 제거 (0) | 2024.03.24 |
[CSS] 화면 늘리면 이미지 커질 때, 이미지 사이즈 설정 (0) | 2024.03.24 |
border-radius 화면 축소 시 변형이 올 때 (0) | 2024.03.19 |
반응형 웹페이지 축소 - 모바일 사이즈 display: none (0) | 2024.03.19 |