요소 수평 / 수직 정렬 방법1. 수평 정렬a) Flexbox 사용: Centered Element.flex-center { display: flex; justify-content: center;}b) Grid 사용: Centered Element.grid-center { display: grid; justify-content: center;}c) Position 사용: Centered Element.position-center { position: relative;}.position-center .element { position: absolute; left: 50%; transform: translateX(-50%);}d) Table 레이아웃 사용: Centered Element..
위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 3번째 중 3번째(마지막) 글이다.18. Full-Width Elements (전체 너비 요소)문제: 요소가 부모의 전체 너비를 차지하도록 만들고 싶습니다.해결책: width: 100vw를 사용합니다.부연 설명: width: 100vw는 뷰포트의 전체 너비를 차지하게 합니다. margin-left와 margin-right를 사용하여 부모 요소의 중앙에 배치할 수 있습니다..full-width { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}19. SVG Icon Color Cont..
위 글은 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;}/* 스크롤바 ..
저는 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 ... )}
