devbobos

어느정도 홈페이지 수정도 마무리 됐겠다 싶어 배포를 시작하였다. robots.txt도 박고 포털 사이트에도 등록을 하며 몇몇 지인들에게도 알려보았는데 ..

데스크톱에서만 작업한 나머지 모바일 화면을 체크안하고 배포를 해버렸다.

일단 문제가 됐던건 첫번째로 \<li\>, 귀찮아서 그리드로 나눠놓은 다음 리스트를 \<br\>만 가지고 라인만 맞췄더니 작은 화면에서는 줄이 밀려버려 뵈기 싫게 되었다. 어떻게 해결할까 고민을 하다가 그냥 <\table\> 태그 사용해서 래핑하고 래핑하면 화면이 작아지더라도 알아서 조정될듯 싶었다. 두번째는 좀 골치아픈데 개발능력의 표가 너무 넓어서 잘려보이는 현상이었다. 처음에는 \<table\> 속성에 width:100%가 없나 .. 했더니 있다. 그냥 단순하게 table안 컴포넌트들이 기본적으로 차지하는 영역이 넓다보니 저 프로퍼티로도 감당이 안되서 잘린거였다.

그리드로 시도해봤으나 실패, 역시나 잘린다. 이번엔 vm 값으로 폰트 크기와 차트 크기를 조정, vm 값은 꽤나 신선했는데 화면 너비 배율로 값이 지정되는 것이었다. Android로 치자면 LinearLayout의 Weight를 생각하면 쉽게 이해할 수 있겠다. 하지만 이마저도 브라우저가 전체화면이 되거나 하면 엄청나게 커져버려서 패스. vm에서는 너비가 엄청 클때 문제가 되므로 특정 너비에서 최대값을 갖도록 제한자가 있으면 해결될 수 있어 보였다. 그래서 마침내 찾은것이 @media 태그이다.

@media (max-width:360px){
  .about-table {
  font-size:10px;
  }
}

@media의 max-width:360px를 지정해놓으면 창의 너비가 360 이하일 경우 스타일이 적용된다. 응용하여 너비에 따라 달리 지정하게 되면 모바일 화면에서의 사이즈 조절도 유동적으로 조정 가능하다.

@media (max-width:360px){
  .about-table {
  font-size:10px;
  }
}
@media (min-width:360px) and (max-width:480px){
  .about-table {
  font-size:12px;
  }
}
@media (min-width:480px) and (max-width:640px){
  .about-table {
  font-size:18px;
  }
}

다른 단락들 폰트도 조정할 수 있겠지만 그렇게 되면 가독성이 안좋아지므로 화면이 작아졌을때 너비가 너무 커서 잘리는 차트 쪽만 적용을 시켜놨다. 이로써 홈페이지 수정만 4일째, 역시 쉽지가 않다.