위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 3번째 중 2번째 글이다.10. Custom Scrollbars (커스텀 스크롤바)문제: 스크롤바를 스타일링하고 싶습니다.해결책: ::-webkit-scrollbar을 사용합니다.부연 설명: 웹킷 기반 브라우저에서 커스텀 스크롤바를 만들 수 있습니다.::-webkit-scrollbar는 스크롤바의 전체 영역을, ::-webkit-scrollbar-track은 스크롤바의 트랙을,::-webkit-scrollbar-thumb는 스크롤바의 이동 가능한 부분을 스타일링합니다./* 스크롤바 전체 스타일링 */::-webkit-scrollbar { width: 10px;}/* 스크롤바 ..
TypeScript를 사용하고있지만, 숙련도가 부족하다고 느끼는 가장 큰 포인트가 제너릭을 잘 몰라서인 것 같다.그런 김에, 제너릭의 다양한 용례를 통해 제너릭을 정리해보려한다.제너릭(Generic)제너릭(Generic)은 TypeScript에서 매우 강력한 기능으로, 코드의 재사용성을 높이고 타입을 더욱 유연하게 다룰 수 있다.제너릭을 사용하면 함수, 클래스, 인터페이스 등을 타입에 의존하지 않으면서도 타입 안전하게 작성할 수 있다.1. 기본적인 제너릭 함수제너릭 함수는 함수의 입력 타입과 반환 타입을 유연하게 지정할 수 있다.function identity(arg: T): T { return arg;}// 사용 예시const num = identity(42); // T는 number로 추론됨cons..
저는 public 폴더 내에 UserGuide.pdf라는 파일을 넣었고 참고바랍니다.아래와 같이 작성하면, /guide로 진입시 웹뷰어로 pdf를 볼 수 있습니다.App.tsxconst App: React.FC = () => { return ( ... } /> ... )}Guide.tsxconst Guide: React.FC = () => { return ( )}Intro.tsxconst Intro: React:FC = () => { return ( ... User Guide ... )}
위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,팁이 25가지나 되는 만큼 한 글에 담기보단 8-9개씩 3번으로 나눠서 포스팅할 예정이다.이 글은 3번째 중 1번째 글이다.1. Centering Elements Vertically and Horizontally (요소를 수직 및 수평으로 중앙 정렬하기)문제: 요소를 컨테이너 내에서 수직 및 수평으로 중앙 정렬하고 싶습니다.해결책: Flexbox를 사용합니다.부연 설명: Flexbox는 CSS 레이아웃의 유연성과 효율성을 극대화하는 강력한 도구입니다. justify-content와 align-items 속성은 요소를 수평 및 수직으로 정렬하는 데 사용됩니다. 이 패턴은 로그인 페이지나 ..
