STUDY/HTML&CSS (5) 썸네일형 리스트형 CSS | 텍스트 말줄임 ... 처리 text-overflow: ellipsis로 처리할 수 있으나 몇 가지 조건이 있음 1. overflow: hidden과 white-space: nowrap이 함께 적용되어야 함 2. width에는 픽셀 단위로 값을 설정하거나, %단위를 사용하고 싶다면 max-width를 함께 설정해야 함 예시 .name-cell { width: 6%; max-width: 85px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } CSS | sidebar 밑에 공간이 남을 때... 이렇게 사이드바의 길이가 짧을 경우에 해결방법 하나의 div를 추가하고, css를 이렇게 설정해주면 스크롤이 길어져도 sidebar가 잘리지 않는다... .sidebar-skeleton{ position: fixed; left: 0; height: 100vh; bottom: 0; width: 272px; z-index: -10000; } CSS | 스크롤바 커스텀 하기! (custom scrollbar) webkit-scrollbar를 이용하여 커스텀 할 수 있음 .클래스명::-webkit-scrollbar { /* 스크롤바 전체 */ } .클래스명::-webkit-scrollbar-track { /* 스크롤바 트랙(바탕?) */ } .클래스명::-webkit-scrollbar-thumb { /* 스크롤바 부분 */ } +) 적용 모습 CSS | 말풍선 만들기 사이트 ( + 활용) 아래 사이트에 방문해서 기본 말풍선을 만들 수 있는 코드를 생성한 후, 커스텀 해주면 편리합니다. cssarrowplease Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like. Fork me on Github www.cssarrowplease.com +) 예시 버튼을 눌러 채팅을 시작해 보세요! .room-list-empty-room{ position: absolute; background: #5677f4; color: #fff; padding: 13px; border-radius: 20rem; top: 135px; right:.. CSS | 파일 업로드 css적용하기 (input file custom) input file의 기본 모습을 없애고 css를 적용하는 방법은 기본 css를 제거하고, label태그를 커스텀 해 버튼처럼 사용하는 방법입니다. HTML코드 파일 선택 CSS코드 // input file의 기본 모습을 제거 #profile_img_upload{ width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } #profile_img_upload + label { border: 1px solid #d9e1e8; background-color: #fff; color: #2b90d9; border-radius: 2rem; padding: 8px 17px 8px 17px; font-weigh.. 이전 1 다음
