기록의 힘

헤더 반응형으로 만들기   접속하는 유저들 절반 이상은 모바일 환경에서 접속할 것이다.아시겠지만 모바일 버전에서는 마우스 hover 이펙트가 적용될 수 없다.그리고 화면 픽셀도 다르기 때문에 PC 버전으로 만든 웹을 모바일 환경에서 볼 때 UI가 굉장히 깨져 보일게 된다.그렇기 때문에 모바일 버전, 웹을 반응형으로 만드는 것은 필수라고 생각한다. 반응형으로 헤더를 변경하는 방법은 아래 포스팅으로 정리를 했었다.2024.09.28 - [LAB/LAB 홈페이지 제작] - 헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용 헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용TailwindCss로 반응형 헤더 만들기 내 목표는 교수님 명함에TailwindCss로 반응형 헤더 ..

TailwindCss로 반응형 헤더 만들기 내 목표는 교수님 명함에TailwindCss로 반응형 헤더 만들기  내 목표는 교수님 명함에 우리 홈페이지 URL이 들어간 QR 코드를 만들어드리는 것이 목표이다.그러기 위해서는 접근성이 좋은 모바일 버전의 웹 UI가 필수이다.반응형으로 만드는것은 꼭 필요한 일이지만 동시에 매우 귀찮은 일이긴 하다.그 중에서 헤더는 반응형이라기 보다는 적응형 웹 개발에 어울리다는 말이 맞는것 같다. PC 버전에서의 헤더는 메뉴들이 일자로 나열되어 있는 경우들이 많다. 화면이 그만큼 여유롭게 크기 때문이다.하지만 모바일 버전은 대부분 햄버거 모양의 이모티콘을 사용한다. 만드는 과정을 포스팅 해보고자 한다.   React 화면 크기 감지 - resize 이벤트 resize 이벤트는..