초보자 모바일 responsive 기본 css 해보기

요즘 웹 개발 하면서 하이브리드 많이 쓰고있는것 같다.

그중에도 안드로이드 스튜디오를 이용한 웹뷰 이용하기!

네이티브 코드 몇개 쓰고 실상 화면은 웹페이지 그대로 얹어서 쓰는건데..

그럴려면 웹 표준 코딩도하고 모바일 responsive 도 아주 중요하다

폰도 사이즈가 각각 다르니까 최소 pad, desktop, phone 사이즈에 맞춰서 화면이 깨지지 않게 잘나오게 해야하니..

예를들면 이런 형식 대게 ul li 태그 쓰지 않앗나 싶은데 float:left 주면 되니깐..

하지만 모바일로 보면 이렇게 나타난다 모바일이 아니더라도 브라우저 사이즈를 저만큼 줄이면 저렇게 나타날거다

반응형 웹으로 모바일에선 모바일 사이즈에 맞게 나오는 것이다. 하이브리드 앱과도 연관이 크다

css를 줄때 @media 를 써 width 사이즈 별로 스타일을 다르게 할수 있다.

모바일 사이즈 480px 아래로 내려간다면 float:left를 없애고 각 li 태그 width 사이즈를 100% 주고

height 은 auto주는게 좋은것 같다 img 태그의 경우는 width나 height 둘중 하나만 지정하고 나머진

auto 주면 스케일도 자동 조정되니 참고하시길..

기본 css @media 예제이다. 간단하게 최소 사이즈가 480보다 크면 동작하니 반응형으로 할땐 반대로 max-width 를 주면 될것이다.

위에 반응형을 한번 간단하게 만들어 보았다.

대략 이렇게 하고 안에 배치는 li 안에서 잘 배분해서 하면 되지 않을까 싶다.

좀더 자세하게 코드정리를 하면 좋겠지만 그럴 실력이 못되니.. 휴

UI 맞추고 프론트단 작업하는것보단 역시 jquery 랑 php 컨트롤러 만지는게 더 재밋는것 같다.

다음엔 php 코드이그나이터를 이용한 기초 예제를 한번 해볼 참이다

코드이그나이터에서 제공해주는 예제가 있지만 초보자기 이해하기도 어렵고..

초반에 해매고 고생한 기억이나서 완전 쉽게 라우팅부터 컨트롤러 뷰 페이지 인클루드 등등

기초적인걸 설명할 참이다 wamp 사용법까지도 그럼 이만~~

작업하다보니 몇개 빼먹은게 있는데 !important 는 다른 사이즈에 동일한 스타일을 줬엇더라면

꼭 줘야한다 어떻게보면 상위 이고 !important 를 주지 않는다면 기존 스타일을 따를테니

!important 는 강제로 지금 정의한 style을 주는거다

※ 혼자 글쓰며 공부하는거라 존칭을 쓰지 않는점 양해바랍니다 ^-^