반응형 웹페이지로 디자인하는 간단한 팁

   width: 100%;

   max-width:1000px;
   min-width:450px;

 

반응형 웹페이지라는게 브라우저의 크기에 따라 자동적으로 컨텐츠 크기가 변형하여 브라우저 밖으로 넘어가지 않는것을 말하는데.

별다른것 없이 이런식으로 사이즈를 지정하기만 하면 된다.

 

width: 100%; 이렇게 원하는 사이즈를 %로 지정을 해준뒤에

max-width: 를 px로 지정하여 컨텐츠의 최대크기를 지정

min-width:  로 최소사이즈를 지정하는것이다.

 

사실 그냥 width사이즈를 퍼센트로만 지정해줘도 되는것이긴 하지만

max 사이즈와 min 사이즈를 고정하여 내가 표현하고자하는 적절한 디자인크기를 벗어나지 않게하는것.

min 사이즈도 패스해도 되긴하나 이부분을 지정하지않으면 필요이상으로 브라우저를 축소할경우

가로로 늘어선 메뉴들이 겹치게되거나 하는 문제가 있으므로

확인후 정상적인 형태를 유지하는 최소의 길이를 지정해주면 된다.

 

지금 만들어진 웹페이지에서 사이즈 부분을 저렇게만 바꾸면 된다.

height는 크게 고려할 필요없을것같다.

 

반응형으로 사이즈를 지정하여 디자인했을경우

해상도가 천차만별인 모바일용 웹페이지를 따로 만들어서 연결하지않아도 되는 잇점이 있으나

max사이즈를 데스크탑에 보기좋게 지정하면 모바일보다 커지는게 보통이라 한계는 있다.

 

그부분도 해결하는 방법이 있는것같으나 난 전문적으로 공부한 인간이 아니라서 몰랑