도쿄사는 외노자

좌측 복수 열을 고정시킨 테이블을 작성. 열 고정에는 sticky를 사용. TD에 사용한 CSS는 다음과 같다. border는 class로 부여, position을 sticky로 하고, 고정하고 싶은 left를 설정. 위와 같은 방법으로 1~3열을 고정으로 지정하였다. 2번째 열부터는 앞의 열의 width를 left로 설정해야 한다 (width설정 및 const화 필수) 위와 같이 설정한 경우 sticky를 설정한 셀의 border가 투명해져버려, 스크롤 이동 시 다른 셀의 내용 및 border가 비쳐 보이게 된다. 대략 이런 식으로... 분명 흰색으로 border를 설정해 놓았건만 위와 같은 식이다. 이를 해결한 방법은 다음과 같다. Table에 borderCollapse를 separate로 지정하고,..

1. 이미지를 Base64로 인코딩이미지를 Base64로 변환해 주는 사이트는 검색만 하면 다 나오긴 하는데...몇군데 찾아보니, 여기가 가장 깔끔한 것 같다.(1MB이상의 파일은 인코딩 불가) 2. 인코딩한 이미지를 CSS에 집어넣기그냥 아래와 같이 때려넣으면 된다.123.target { background-image: url('data:image/png;base64, 인코딩한 이미지 소스');}Colored by Color Scriptercs 실제 적용된 코드는 다음과 같다. 123456789.dropdown-content { position: static; height: auto; width: 280px; background-image: url('data:image/png;base64,iVBORA...

메가드롭다운 관련 부품을 작성 중,정해진 드롭다운 height 내에서 ↓↗↓↗방향으로 요소를 정렬해야만 했다.평소였으면 그냥 Bootstrap Grid를 사용했을 텐데이번엔 UL과 LI로 해결을 보려다 보니 좀 애매하게 되었다. float: left로는→↙→↙ 방향으로 움직이다 보니 width를 정의해야 했고,각 요소간 빈칸이 제대로 좁혀지질 않았다.일단 내가 생각한 메가드롭다운은내용이 넘칠 경우 횡스크롤을 달고 싶었기에 이건 각하. UL태그에 다음과 같은 CSS를 투입하여 해결하였다. 1234567ul { display: flex; align-content: flex-start; flex-direction: column; flex-wrap: wrap; overflow: auto;}cs

jQueryUI 버튼을 하나 따서 쓰는데로컬에서는 잘만 되던 것이, 릴리즈를 하고 나니 깨지더라.오류 내용은 Mixed Content: The page at 'https://--------------' was loaded over HTTPS, but requested an insecure stylesheet 'http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS. 이런 내용이었다. 그냥 jQueryUI의 링크를 다음과 같이 http://~~~에서 https://~~~로 수정하여 해결했다...

모달 크기를 키웠더니만, 자꾸 오른쪽으로만 뻗어나가더라. bootstrap modal horizontal align center뭐 대충 이런 식으로 구글느님 검색 돌렸더니아래와 같은 답이 나왔다. 출처 : http://stackoverflow.com/questions/18257200/centering-modal-in-twitter-bootstrap 12345678$("#Modal").modal('show').css({ 'margin-top': function () { //vertical centering return -($(this).height() / 2); }, 'margin-left': function () { //Horizontal centering return -($(this).width() /..

TAB키를 통해 포커스 이동을 할 경우,논리적으로 잘 짜여진 코드라면 tabindex를 넣지 않더라도 알아서 잘 이동하는게 정상이다.실제로 나 또한 지금껏 tabindex를 넣지 않고도 계속 화면을 만들어 왔고... 그런데 현재 하고 있는 프로젝트에서 짜증나는 문제가 생겼다.입력창 뿐만이 아니라, 테이블의 헤더 부분()이 포커스를 먹어버리는 것이다.일단 onclick="this.blur();"을 넣어 클릭은 막았는데...tab키가 무조건 얘를 거쳐가게 되더라. 보통 입력창의 경우는 다음과 같이 tabindex="-1"을 넣으면 해결이 되는데...1cs 얘는 그것도 되지 않아서...그냥 똑같이 onkeydown="this.blur();"를 넣어 해결했다. onkeydown이 들어가기 전에 첫 에는 포커스가..