개요 * 원인파악-첫 화면(대시보드) 진입 시 느림 📝시작은 이렇다. '우리 사이트가 너무 느려요.. 어떻게 개선안될까요?' 라는 말을 듣고 사이트를 들어가봤다. 세상에.. 사용자 경험이 미처 쌓이기도 전에 나조차도 이탈하고 싶은 속도였다. DevTools 로 네트워크 조회해보니 사이트 진입 시, Font에 대한 CSS 파일을 불러오는데 꽤나 큰 몫을 하고 있었다. 원인 원인은 Font! 구글에서 fonts 를 불러오는 곳에서 큰 Delay 가 있었는데, 불필요한 리소스 요청과 함께 엄청 많은 font 를 불러오고 있었다. 서버의 경량화를 위해서인지(추측) Google fonts 를 직접 호출하고 있었는데 심지어 사용하지 않는 font 들도 선언하여 호출중이었다.. (이런.. cdn 서버가 가까운지도 모..

서론 로그인 창을 정돈되게 꾸미고 싶어 배경에 VIDEO를 넣기로 했다. 어두운 채색의 VIDEO 를 사용할 경우, 전체적으로 안정된 모습을 보여준다. HTML & CSS *HTML* 대체 텍스트 ~~ 블라블라 Welcome to OOO System OOO시스템에 오신 것을 환영합니다. 아이디 비밀번호 로그인 *CSS* /*video*/ video { -o-object-fit: cover; object-fit: cover; position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 0; } /*video*/ 완성된모습 마무리(관련 글) -------------내용입력-----------

서론 로그인 창 개발을 하다보면 브라우저에서 지원하는 자동완성 기능 때문에 애 먹는 경우가 상당히 많다. 특히 input에 있는 background 가 전체적인 화면의 밸런스를 해치기 때문에 꼭 수정해주는 것이 좋다. CSS 필자의 경우 webkit 에서 가져오는 색상을 지연시킴으로 인해 약간의 꼼수를 부려 해결했다. input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 9999s; transition-delay: 9999s; }

서론 하나의 프로젝트에서 관리자용 화면과 사용자용 화면을 동시에 같이 쓰는 경우가 간혹 있다. 관리자 화면의 경우, 사용하는 메뉴가 많아 (심지어 드롭다운 메뉴가 허다하다.) 사이드메뉴(버거메뉴 Burger Menu) 로 구현하였다. 이와는 다르게 사용자 화면의 경우 페이지가 몇 개 없어 아래와 같이 Navigation bar로 구현하였다. #Lib jquery.min.js bootstrap.min.css fontawesome.all.css html 내정보 QRcode 거래내역 ... 로그아웃 //page init 시 초기 세팅을 강제화 하기 위해 선언 javascript 이해하기 쉬운 코드이다. this의 position 값을 읽은 후에, 값을 계산하여 css 값을 수정시킨다. $(function ()..

서론 자주 쓰이는 데이터와 같은 경우, 일일히 입력함에 번거로움이 있다. 이에 편의성을 높이고자 브라우저에서 '자동완성' 기능으로서 지원하고 있는데, 개발자들은 최초 데이터가 입력되는 form 에서 이 기능 덕분에 불편함을 겪는다 즉, 이 기능을 무효화 시키는 코드를 짜야한다는 것이다. 무효화시키기 현재 브라우저에서는 type에 password가 존재하면, 브라우저에 저장된 계정 데이터에서 첫 번째 input에는 아이디를 넣고 type="password" 부분에는 비밀번호를 넣는다. 무효화시키는 방법은 간단하다. type="password" 를 없애고 type="password" 에서만 존재하는 암호 가리기 처리는 별도 css를 추가하여 적용한다. style="-webkit-text-security:di..

웹앱 커스터마이징 화면에 대한 관심도가 갈수록 높아지고 있다. 오로지 View 만을 위한 Program Language가 계속해서 출시되고 있는 것만 보아도 느껴진다. 스타트업이나, 떠오르는 기업의 프론트앤드 개발자들은 덕분에 바빠지고(?)있다. 보통 중소기업 및 중견기업은 옛날 소스를 대부분 유지보수 중이다. 이는 좋게 말하면 '안정화', 나쁘게 말하면 '필요성을 못느낌' 또는 '귀찮음' 이다. 특히 백엔드 분야에서는 추가개발 요청이 오면 옛날 소스를 분석하고, JDK 또는 SDK 등 언어의 버전을 맞추고, 해당 버전에 맞는 옛날 방식의 소스로 코딩을 진행해야하고... 이러한 불필요한 과정들이 참 많다. 그런데, 프론트엔드 분야에서는 이 과정이 조금 쉽다. 대다수가 HTML5로 개발되어 있기 때문에 태..