mizzu-creations.hashnode.devcore web vitals : 웹 성능과 사용자 경험의 핵심 지표 이해하기1. 글의 목적 웹사이트의 성능과 사용자 경험(UX)은 현대 웹 개발에서 가장 중요한 요소 중 하나다. Google은 이를 정량적으로 측정하기 위해 Core Web Vitals라는 핵심 지표를 도입했으며, 웹사이트의 로딩 속도, 상호작용성, 시각적 안정성을 평가하여 실제 검색 순위에도 반영하고 있다. Google Search Console을 이용해보면 '코어 웹 바이탈'을 언급한다. 대충 준수하거나 개선하면 좋은 지표라고만 생각해왔는데, 그 ...Feb 13, 2025·4 min read
mizzu-creations.hashnode.devhtml 요소들의 분류법과 사용규칙The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명 강의 中 “Part 1.HTML“ 내용을 기반으로 작성한 포스팅입니다. 1. 글의 목적 이미지 출처 : https://data-flair.training/blogs/html-block-and-inline-elements/ 이론적 기반을 탄탄히 다지고 싶은 마음에 오랜만에 강의를 하나 구입했다. 그러던 와중에 도입부부터 아주 강렬했던 내용이 하나 있었는...Dec 6, 2024·4 min read
mizzu-creations.hashnode.devOpenWeather API로 현재 날씨와 미세먼지 다루기1. 글의 목적 인천광역시청 웹사이트를 클론하면서 작성해두었던 헤더 영역의 날씨부분을 실제 데이터 기반으로 동작할 수 있도록 업데이트 해야했다. OpenWeather API를 사용해 현재 날씨, 기온, 미세먼지 농도를 가져오는 과정을 다음 작업 시에도 참고할 수 있도록 작업 기록을 정리 해보려고 한다. 2. API Key 발급받기 OpenWeather API를 사용하기 위해서는 우선 API Key가 필요하다. 회원가입 후 My API Key...Nov 7, 2024·6 min read
mizzu-creations.hashnode.dev큰 이미지가 왜 필요할까? 해상도와 ppi의 이해1. 글의 목적 웹 개발을 하다 보면, 실제로 표시될 크기보다 훨씬 큰 이미지 파일을 준비해야 하는 상황이 자주 발생한다. 예를 들어, 800px 너비의 배너 이미지를 표시할 때 1600px 이상의 이미지를 사용하는 경우가 있다. 이런 상황에서 ‘왜 딱 맞는 이미지를 사용하지 않을까? 용량만 커지지 않을까?’라는 의문을 가져본 적이 있을 것이라고 생각한다. 이 글에서는 이미지 크기, 해상도, PPI에 대한 개념을 이해하고, 웹에서 일관된 품질...Aug 17, 2024·5 min read
mizzu-creations.hashnode.devcss와 js로 구현하는 커스텀 마우스 포인터1. 글의 목적 롯데백화점 메인 페이지를 클론하며 커스텀 마우스 포인터를 구현하게 되었다. 처음에는 단순히 포인터를 커스터마이징하는 작업이라고 생각했지만, 특정 UI에 따라 반응하는 커스텀 포인터를 구현하면서 고려해야 할 세부 사항이 많다는 것을 깨달았다. 이러한 경험을 바탕으로 커스텀 마우스 포인터 구현 과정을 정리하여 공유하고자 한다. 2. CSS에서 해야할 작업들 마우스 포인터를 커스텀하기 위해서는 먼저, 문서 전체의 cursor를 ...Aug 10, 2024·2 min read
