[CSS] 간단한 responsive web 구현

웹사이트의 responsive web 처리를 해주기 위한 간단한 CSS property를 소개한다.

내가 알고있는 지식으로는 media-query를 사용해서 좀 더 전문적으로 처리를 할 수 있지만
max-width로 CSS로 간단하게 화면비율만 맞춰줄 수 있다.

코드

.mypost {
  /*최대 500px 까지 mypost가 커지고 그 이하는 95%만 차지*/
  max-width: 500px;
  width: 95%;
 }

.mypost라는 class이름을 가진 div가 있다고 치면 화면의 크기가 500px을 넘지 않을때 width가 화면의 95%만 차지하게 만들고 500px 이상이라면 더 이상 커지지 않도록 처리 할수 있다.

 

적용 예시

이 화면은 가로로 402px로 설정 되어있고 .mypost는 width:500px; 만 적용되어있다.

위의 property를 적용해보면

화면 크기의 95%의 width가 잡혀 .mypost를 정상적으로 볼 수 있다.

 

EOF