개요
모던 웹 디자인 실습을 하는 도중 원래 알고 있던 max-width 의 개념에 반하는 현상이 나타난 듯 하여 궁금증이 생겼고 이를 정리하기 위해 글을 작성합니다.
개념
width : 속성을 100%로 설정할 경우 요소를 감싸고 있는 부모 요소의 크기에 맞춰 100%를 유지
max-width : 속성을 100%로 설정할 경우 요소의 기본 크기 이상으로는 조절되지 않음
예제
위 그림에서 이미지 리소스의 크기는 1500 * 375 크기이다. 여기에 max-width 또는 width를 100% 적용해보면 다음과 같다.
조금 의아했던게 max-width 로 속성을 100% 기본 요소 크기로 잡힌다고 알고 있었다.
`그러면 1500*375 크기로 잡혀야 되지 않나? 근데 오히려 화면에 맞춰서 더 작게 영역이 잡히네?`
부모 요소들 크기를 따져보니, 다음과 같이 정리할 수 있었다.
max-width는 요소의 기본 크기 이상으로 커지지 않지만, 그 기본 크기가 부모 요소들 보다 큰 경우 부모 요소의 크기로 재설정이 된다.
그래서 위 사진에서 max-width: 100%로 주었을 때 기본 요소의 크기인 1500px은 부모 요소의 크기인 862px를 넘으므로, 862px로 조정되어 화면에 나오게 되는 것이다.
출처
'FrontEnd > CSS 관련자료' 카테고리의 다른 글
CSS 관련 자료 (0) | 2024.07.04 |
---|---|
text-align을 이용해 블록요소 중앙에 위치시키기 (0) | 2020.01.29 |
모던 웹사이트 디자인의 정석 Question (0) | 2020.01.22 |
vertical-align 속성으로 이미지 공백 지우기 (0) | 2020.01.21 |
모던 웹 디자인의 정석(1장) (0) | 2019.11.10 |
댓글