분류 전체보기
-
svelte 시작하기 (npm을 이용하여 svelte app 생성)DEV/svelte 2023. 11. 28. 11:48
우선 svelte app을 생성하기 이전에 node와 npm이 필요하다. 시작 전 Node와 npm을 설치하자. (본인은 오랜만에 npm을 사용하니 버전에 대한 이슈가 있었다. 버전에 대한 에러가 발생하면 최신 버전으로 업데이트 해주도록 하자.) https://seokbong.tistory.com/38 Node js 설치하기 오늘은 node js를 설치하려고 한다. 원래 사용하던 M1 맥에는 이미 설치되어 있고 오랜만에 꺼내 든 2011년식 구형 인텔맥에 설치를 다시 해보려고 한다. (노인학대...) https://nodejs.org/ko/download/ 다운 seokbong.tistory.com Svelte App 생성하기 App을 생성하고 싶은 폴더에 진입하여 다음과 같이 입력. (새로운 프로젝트 ..
-
CSS 심플한 Table CSS 예시DEV/css 2023. 11. 16. 09:52
CSS 다음과 같이 적용 /* TABLE */ .custom-table { border-collapse: collapse; /* margin: 25px 0; */ /* font-size: 0.9em; */ font-family: sans-serif; min-width: 100%; width: 100%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } .custom-table thead tr { background-color: #009879; color: #ffffff; text-align: left; } .custom-table th, .custom-table td { font-size: 12px; padding: 2px 8px; text-align: center; } .c..
-
Javascript Html Table 헤더, 바디 스크롤 따로 컨트롤하기DEV/javascript 2023. 11. 16. 09:48
1. Header(헤더)는 그대로 두고 Body(바디)만 따로 스크롤 이동이 필요한 경우 // CSS .search-result-table-body { min-height: 580px;// 원하는 사이즈 고정 max-height: 580px; overflow-y: auto; // 스크롤 생성 } 2. Body(바디)의 가로 스크롤에 따라 헤더가 같이 움직이게 할 필요가 있는 경우 (하단 이벤트를 추가) /** * [가로 스크롤 이벤트] * - table body의 스크롤을 위해 header와 body가 다른 container로 구성됨. * - table body와 table header가 다른 container이기 때문에 body에서 가로 스크롤을 이동하면 header의 가로 스크롤을 움직이지 않음. *..
-
CSS 웹 페이지 스크롤 디자인 수정DEV/css 2023. 11. 16. 09:35
/* 스크롤바 메인 */.class::-webkit-scrollbar { width: 8px; /* 세로축 스크롤바 폭 너비 */ height: 10px; /* 가로축 스크롤바 폭 너비 */ border-radius: 36px; background-color: white; /* 스크롤바 배경색 */}/* 외부 스크롤바 */.class::-webkit-scrollbar-track { opacity: 0; border-radius: 36px;}/* 내부 스크롤바 */.class::-webkit-scrollbar-thumb { background-color: #ffffff; /* 스크롤바 색상 */ border-radius: 36px; opacity: 0.8;}/* 세..