Front-end/CSS4 [CSS] overflow-y:scroll 디자인하기 스크롤 디자인 변경하는 CSS overflow-y:scroll로 스크롤 사용 가능하다. 기본 스크롤도 충분히지만 쫌더 통일성 있는 디자인을위해 스크롤 색상과 모양 디자인을 변경하는 CSS를 추가했다 이미지 표의 오른쪽 스크롤 이다. .accodient-box{ overflow-y: scroll; } .accodient-box::-webkit-scrollbar { width: 10px; /* 스크롤바의 너비 */ } .accodient-box::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #848484; /* 스크롤바의 색상 */ border-radius: 10px; } .accodient-box::-webkit-scrollbar-track { background.. 2022. 9. 23. CSS 로 텍스트 줄바꿈 하는 간단한 방법 const text = "동해물과 백두산이\n 마르고 닳도록" JSX에서는 개행 문자(‘\n’)가 동작하지 않아 줄바꿈이 되지않고 출력된다. \n 개행문자를 치환하는 방법도있지만 CSS로 간단하게 설정 가능하다 white-space: pre-wrap; 2022. 6. 16. [글꼴 세팅] 구글 폰트 사용하기 jeju폰트 추천 안녕하세요 꼬바리입니다. 구글 폰트 사용법입니다. jeju폰트 무난하게 사용 하기 좋습니다. fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 사이트 방문후 crtl + F -> jeju검색 (원하시는거 검색) @import url(https//fonts.googleapis.com/earlyaccess/jejugothic.css); 혹은 @import url('https://fonts.googleapis.com/css2?family=Jua'); 등의 형식 복사 붙여넣기 앞에 https 붙여 주시고! 사용 하시면 됩니다! .. 2021. 5. 7. CSS 로 드래그 방지 / 금지 body { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /*글자 드래그 금지*/ } CSS로 간단하게 드래그 방지/금지 할수 있는 코드입니다. 2021. 4. 12. 이전 1 다음 728x90 반응형
