[CSS] width: max-width 반응형에서 사용하기

 

 

 

 

1. 문제

 

디자인측에서 버튼 크기를 꼭 320px로 해달라고 한다.

이런 픽스된 사이즈에서 반응형을 할 때 애매한 사이즈에서 오는 곤란함이 있다.

쉽게 생각해 일괄적으로 '320인 버튼'을 media size 320일 때 100%로 바꾸면 될 거 같지만 그렇지 않다.

왜나하면 이 버튼이 좌우 패딩 값이 주어진 박스 안에 있을 수 있고, 또는 그 패딩박스 안에 패딩박스 속에 있을 수 있다.

 

 

2. 해결

 

 

min-width와 max-width가 있다. 그 둘의 필요성을 작업하면서 별로 느끼지 못했지만 이런 문제를 해결하면서 이해하고 활용하게 됐다.

min-width나 max-width는 혼자 주어졌을 때보다 기본 width와 함께 사용할 때 활용도가 높은거 같다.