반응형 웹 반응형 웹은 PC, 태블릿, 모바일(가로, 세로) 등을 모두 지원할 수 있게끔 설정 해주는 템플릿을 의믜한다. 일반적으로는 CSS의 미디어쿼리를 이용하여 분기처리를 하지만 적응형 웹으로도 사용할 수가 있다. 기기 장치에 따라 CSS 템플릿을 다르게 적재해서 사용하는 것을 의미 몇 년 전만 해도 모바일의 가로 크기는 보통 480px 이하로 작성했는데 노트 플러스, 아이폰 플러스 등의 비교적 큰 화면의 스마트폰이 나오기 시작하면서 모바일의 가로크기가 점점 커지기 시작했다 그리고 PC의 화면은 아직까지는 1920px로 유효하다. 가끔 27인치 이상의 모니터에서는 가로크기를 2500px을 넘기는게 간혹 있긴 한데 아직까지는 크게 신경쓰지 않아도 될 부분이다. CSS 반응형 웹 작성시 필수적인 기본 미..

PC에서는 버튼을 클릭 시 크게 효과가 없지만 모바일에서는 터치로 클릭하였을 때 손가락이 터치했다는 걸 사용자에게 인지하기 위에서 버튼 클릭 시 살짝 버튼이 아래로 가게 하는 기법이 있어서 UX의 만족도를 조금 더 높여 줄 수 있는 방법이다 각 CSS 프레임워크 별 버튼 비교 Normal, Bootstrap, Material, Flat, Element UI 등등이 대표적입니다 가볍게 코딩을 해보았습니다 버튼 클릭 효과 위의 예제에서 마지막에 custom button을 보면 기존의 프레임워크와의 클릭이 조금 다르다는 것을 확인할 수 있습니다. 클릭(active)을 했을 때만 transform: translateY(4px); 를 추가하여 클릭한 효과를 줄 수 있습니다. .custom:active { back..

프레임워크를 선택하는게 어려워하는 부분이 아닐까 싶다 사실 목표를 정하고 개발하는 것 자체는 크게 어렵지 않지만 - 프레임워크를 도입해야하나? 한다면 side effect는 없을까? 레거시랑 잘 호환이 될까? 추후에도 유지가 될까..? - 변수명을 뭘로짓지..? - 함수명은 뭘로짓지...? 등등이 아닐까 싶다. 아 번외이지만 Native Script 도 테스트를 해보았는데 뭔가 새로운 언어의 느낌이라 패스하였음 물론 본인도 처음에 CSS 프레임워크를 찾아보던 중 고민이 생겼었다. 기존에 잘하는 걸로 할지 아니면 새로운걸 해볼지 - vuetify vs ionic vs onsen 결국에는 onsen ui 프레임워크를 선택했는데 그 이유는 가장 최근에 만들어져 위의 3개 중에 지원되는 것이 가장 적었기 때문이..