max-width,min-width

손정민·2023년 5월 4일
0

search + enter

목록 보기
3/5
post-thumbnail

사용법

주로 반응형웹에서 너비의 최소값 최대값을 줄때 사용한다.
반응형웹에서 창의 너비가 깨지는경우를 방지하기 위해 최대,최소너비값을 정한다.

width의 기본값

width : auto;로 되어있으며 웹브라우저가 각html의 요소에 맞게 자동으로 설정해준다.

max-width의 기본값

max-width : none; 이 기본값이다. 요소에 제한을 두지 않는다는 뜻.
해당 HTML 요소가 가질 수 있는 최대 너비(width)를 설정함.
max-width를 먹은 오브젝트 안에 들어있는 내용들의 크기가 max-width값을 넘지 못하게 한다.

min-width의 기본값

min-width : 0; 이 기본값이며, 요소에 제한을 두지 않는다는 뜻. max-width와 같다.
해당 HTML 요소가 가질 수 있는 최소 너비(width)를 설정함.
브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면 html의 요소의 넓이는 줄어들지 않고, 스크롤이 생성된다.

결론

min-width는 작은사이즈를 기본레이아웃으로 잡고 점점 확장해가는 형태
max-width는 큰사이즈에서 점점 작아지는 형태

profile
공부 열심히 할거다 (제발)

0개의 댓글