분류 전체보기 (52) 썸네일형 리스트형 [html/css] ie에서 select box 화살표 스타일 바꾸기 chrome, firefox, edge, ie에서 동일하게 select box 화살표 스타일 바꾸기 html select 태그 상위로 클래스 2개 더 만들기 선택 옵션1 옵션2 옵션3 옵션4 옵션5 css 1. select 디폴트 css 초기화시키기 select { width:100%; height:100%; padding:0 28px 0 10px; font-size: 15px; border:0; -webkit-appearance:none; /* for chrome */ -moz-appearance:none; /*for firefox*/ appearance:none; box-sizing: border-box; background:transparent!important; } select::-ms-expan.. [html/css] 브라우저별 스크롤 바 스타일 바꾸기, 넓이 고정하기 ::-webkit-scrollbar{width:17px} ::-webkit-scrollbar-track{background:#e2e6ec;} ::-webkit-scrollbar-thumb{background:#FFFFFF;} ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url(`./images/bg.png`) #efefef} * { scrollbar-width: 17px; scrollbar-arrow-color:#e2e6ec; scrollbar-3dlight-color:#D4D0C8; scrollbar-darkshadow-.. [html/css] table 칸 넓이 고정, 넘치면 말줄임표 .body_table tr td{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-orient: vertical; } table 칸보다 내용이 길어 넘칠 경우, 말줄임표로 뒷부분 안보이게 하기 table tr td{ overflow: hidden; white-space: initial; text-overflow: ellipsis; -webkit-box-orient: vertical; word-break: break-all; } 테이블 td 칸 넓이가 변하지 않고 안에 내용이 밑으로 내려가게 [html/css] textarea 크기 고정 html 에서 textarea 크기 고정하기 css에서 textarea 크기 고정하기 textarea { resize: none; /* 사용자 임의 변경 불가 */ resize: both; /* 사용자 변경이 모두 가능 */ resize: horizontal; /* 좌우만 가능 */ resize: vertical; /* 상하만 가능 */ } [html/css] 스크롤바 ie, firefox, chrome 에서 기능은 살리고 안보이게 하기 좌측 헤더의 스크롤을 기능은 되지만, 안보이게 숨기기 (css 적용 후 자바스크립트로 body table 스크롤과 동시에 움직이게 할 때 유용) .box::-webkit-scrollbar {display: none;} .box{scrollbar-width: none; -ms-overflow-style:none;} .box::-webkit-scrollbar {display: none;} .box{scrollbar-width: none; -ms-overflow-style:none;} [html/css] input checkbox 디폴트 없애고 css로 꾸미기 체크박스 input[type="checkbox"] { display: none; } input[type="checkbox"] + label span { display: inline-block; width: 22px; height: 22px; margin: -2px 10px 0 0; vertical-align: middle; border-radius: 5px; cursor: pointer; border: 1px solid red; } input[type="checkbox"]:checked + label span { background: red; } [html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 TITLE MENU 1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 MENU 2 소메뉴2-1 소메뉴2-2 MYPAGE .side-menu { top: 50px; width: 45px; z-index: 10; background: #ff5858; border-right: 1px solid rgba(0, 0, 0, 0.07); bottom: 50px; height: 100%; margin-bottom: -70px; margin-top: 0px; padding-bottom: 70px; position: fixed; box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%); } .sidebar-inner { height: 100%; pad.. [포토샵] 그라데이션 툴로 추상화 포스터 만들기/wave tool, gradient tool/angle gradient 이전 1 2 3 4 ··· 7 다음
