Front-End19 [Tailwindcss] grid-row-숫자 분석 메인 페이지를 만들긴 했는데 생각해보니 레이아웃 구분이 안되어있었다.. 그래서 부랴부랴 검색해서 레이아웃 구분하려고 하는데 엄청 애를 먹었다.. 완벽히 완성한건 아니지만.. 대충 이렇다gird-col-12 는 완벽히 이해했다 하지만 grid-rows-3 는 대체 어떻게 써먹는지 모르겠다.. [grid-rows-숫자]에 관한 나의 생각 01 02 03 col이 1개의 열을 뜻한다면 row는 1개의 행을 뜻하는 것이겠지 당연히?그렇다면 grid-rows-3은 1개의 row의 크기가 3으로 정의한다는 뜻 같다. row-span-2 에 해당하는 03 부분이 옆의 01부분에 비해서 약간 작게 한 행을 먹은 것을 보고 그렇게 생각하게 됐다맞겠지..? (아니면.. 2024. 5. 4. 사용했던 유용한 JS 함수 정리 onresizewindow.onresize = function(event) { console.log("창의 너비: " + window.innerWidth); console.log("창의 높이: " + window.innerHeight);};윈도우 창의 크기가 바뀔 때 발생하는 이벤트를 처리하는 함수 2024. 5. 1. 윈도우 창의 크기가 변할 때 마다 출력하는 그림 수 바꾸기 쇼핑몰 클론 코딩 중 윈도우 사이즈가 md 사이즈가 되면 보이는 상품의 수가 바뀌는 것을 똑같이 구현하고 싶었다 여기서 slidesPerView 의 값을 수정해줘야한다slidesPerView={window.innerWidth 이렇게 하면 768px 이하일때 출력되는 사진 수가 2장으로 변경된다! ... 이렇게 바꿨지만 새로고침을 해줘야 출력되는 그림도 바뀐다그럼 사이즈가 바뀔때마다 인식하게해서 출력하는 값도 바꿔주고 거기에 다시 재렌더링도 해줘야 하나보다그래서 useEffect를 사용했다! useEffect(() => { const handleResize = () => { if (window.innerWidth { window.removeEventListene.. 2024. 5. 1. 폰트관련 정리 @font-face쇼핑몰 프로젝트 진행중 내가 원하는 폰트로 바꾸고 싶어졌다https://noonnu.cc/ 눈누상업용 무료한글폰트 사이트noonnu.cc여기서 프리텐다드 폰트가 맘에들어서 적용시키고 싶었다 폰트 코드@font-face { font-family: 'Pretendard-Regular'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}하지만 적용시키는 방법이 뭔지 애매해 정확히 알고 싶어 mdn에있는 문서를 찾아보.. 2024. 4. 24. 이전 1 2 3 4 5 다음
