서론 로그인 창을 정돈되게 꾸미고 싶어 배경에 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 ()..

서론 회원가입 페이지를 만들다보면, 아이디에 한글을 지원하지 않는 경우가 대부분이다. 이를 위해 많은 방법이 있는데, javascript의 정규식을 이용해서 단순하게 제어가 가능하다. const regType = /^[a-zA-Z0-9]*$/; let data = params.param if (!regType.test(data)) { $("#idRequired").html("아이디가 조건에 맞지 않습니다"); //별도로 만든 유효성 HTML 구문 alert("아이디가 조건에 맞지 않습니다"); }else{ ... };

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