목록Tech/HTML・CSS (6)

도쿄사는 외노자

테이블에서 sticky로 컬럼 고정시의 border투명화 현상 해결

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

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...
Tech/HTML・CSS 2016. 12. 5. 14:15
<ul>태그 내 <li>요소의 세로정렬+줄바꿈

메가드롭다운 관련 부품을 작성 중,정해진 드롭다운 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
Tech/HTML・CSS 2016. 11. 30. 10:28
Mixed Content : Page requested an insecure stylesheet

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://~~~로 수정하여 해결했다...
Tech/HTML・CSS 2016. 5. 23. 14:46
Bootstrap Modal을 화면 가운데에 띄우기

모달 크기를 키웠더니만, 자꾸 오른쪽으로만 뻗어나가더라. 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() /..
Tech/HTML・CSS 2016. 4. 6. 17:12
Tab키 이동에 따른 포커스 방지

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