나아가는 길에 발자국을 찍어보자

미대생 졸전이 무사히 시작됐다. 사실 12월 2일이었나... 에 정식 오픈했다. 개발은 모두 완성됐고, 잘 돌아간다. 미대생이 보여주는 주변친구들의 반응을 보면 신기하다고 한다. 디자인적 요소는 모두 미대생이 했다. (이게 진짜 정말 힘든부분인데..) 나는 그냥 큰 틀만 만들어준것이지만 밥 사준대서 얼른 알았다고 했다 ㅋㅋㅋ 아마 1년정도 돌릴것같다. 개인 프로젝트라고해야하나..... 토이프로젝트 느낌으로 진행한 재밌는 프로젝트였다. 한달에 700원 정도 서버비용이 발생하는데 이건 미대생이 카페에서 음료사준다고 한다 :) 아직 깃헙을 공개하지는 않았고, 리드미까지 정리되서 정리하면 깃헙까지 공개 오픈할 생각이다. 그러면 페이지에 사용된 소스 코드들을 볼 수 있을 테고, 누군가에게 도움이 되지 않을까.....

모바일에서 제이쿼리 ui가 제공해주는 슬라이드 바가 제대로 작동을하지도 않고, 미대생은 슬라이드바의 모양과 색도 바꾸고 싶어하였기에, 기존의 슬라이드바를 를 사용하기로 했다. 알아보니 제이쿼리 모바일 버전은 모바일과 웹에서 모두 작동이 잘된다고 해서 적용해 봤는데, 다른 태그들 모양에게도 영향을 주어 페이지 전체의 모양이 바뀌어서 버렸다... 알아보니 태그의 디자인 바꾸는 방법도 정보가 더 많아서 제이쿼리 ui를 사용하는 것보다 을 사용해 슬라이드 바를 생성하고 제이쿼리로 실시간 값을 받아와 폰트 속성을 값을 설정하는 방향으로 바꾸기로 하였다. 슬라이드 바 생성 type = range : 슬라이드 바 생성 step : 간격 1씩 증가 value : 초기값 min /max : 슬라이드 최소 / 최대 값 슬..

반응형 웹페이지를 만들기 위해 미디어 쿼리를 사용하여 화면 배치와 구성(css )을 수정하고 화면 크기를 감지하여 페이지에서 제공되는 기능의 종류(js)를 구별하였다. 모바일 화면 크기의 기준을 여러번 바꾸다가 화면을 돌리거나 탭으로 들어올수도 있다는 생각이들어 800px로 했다. 좀더 알아보니 페이지에 들어오는 브라우저의 종류를 따져 만들 수도 있다고 했지만 그렇기엔 복잡해질수도 있을것같아 화면 크기를 기준으로 잡았다. 1.미디어 쿼리 적용 (@media) @media(min-width:800px){ /*여기가 웹일때 폰트 크기 지정하는 곳이야 800px보다 화면이 크면 웹이라고 인식한다.*/ } min-width: 화면의 최소 넓이를 지정하는 것. 즉 화면의 넓이가 800px이상일때 적용. 시작 폰트..

부제 : 결국 모바일 버전도 만들어야하는상황 2차 미팅의 요구사항까지 반영하고 나서 코딩 친구의 불다를 부랴부랴 막고 나니 코딩친구는 부지런하게도 또다른 훼방을 가져왔다. 핸드폰으로 들어가서 보거나 브라우저 창크기를 줄여보며 이거 비율이 이상해라고 말했다. 원래는 오프라인 전시를 생각하여 미대생 전시회장 실에 노트북을 틀어서 전시실에서 직접처보는 즉 전체화면만 고려하면 되었지만, 코로나 덕분에 온라인 전시로 변경되었다. 그러다 보니 전시회 구경하는 사람들이 핸드폰이나 컴퓨터등 다양한 기기를 통해 페이지에 유입이 되었고, 모바일 비율은 신경쓰지 않던 우리 페이지는 비율이 다 깨지는 채로 보여졌고 마우스 움직임을 감지하는 기능은 터치의 기능을 잘 인식하지못했다. 또한 내가 사용한 제이쿼리 ui는 모바일 환경..