MIZZUmizzu-creations.hashnode.dev·Dec 6, 2024html 요소들의 분류법과 사용규칙The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명 강의 中 “Part 1.HTML“ 내용을 기반으로 작성한 포스팅입니다. 1. 글의 목적 이미지 출처 : https://data-flair.training/blogs/html-block-and-inline-elements/ 이론적 기반을 탄탄히 다지고 싶은 마음에 오랜만에 강의를 하나 구입했다. 그러던 와중에 도입부부터 아주 강렬했던 내용이 하나 있었는...HTML5
MIZZUmizzu-creations.hashnode.dev·Nov 7, 2024OpenWeather API로 현재 날씨와 미세먼지 다루기1. 글의 목적 인천광역시청 웹사이트를 클론하면서 작성해두었던 헤더 영역의 날씨부분을 실제 데이터 기반으로 동작할 수 있도록 업데이트 해야했다. OpenWeather API를 사용해 현재 날씨, 기온, 미세먼지 농도를 가져오는 과정을 다음 작업 시에도 참고할 수 있도록 작업 기록을 정리 해보려고 한다. 2. API Key 발급받기 OpenWeather API를 사용하기 위해서는 우선 API Key가 필요하다. 회원가입 후 My API Key...OpenWeather
MIZZUmizzu-creations.hashnode.dev·Aug 17, 2024큰 이미지가 왜 필요할까? 해상도와 ppi의 이해1. 글의 목적 웹 개발을 하다 보면, 실제로 표시될 크기보다 훨씬 큰 이미지 파일을 준비해야 하는 상황이 자주 발생한다. 예를 들어, 800px 너비의 배너 이미지를 표시할 때 1600px 이상의 이미지를 사용하는 경우가 있다. 이런 상황에서 ‘왜 딱 맞는 이미지를 사용하지 않을까? 용량만 커지지 않을까?’라는 의문을 가져본 적이 있을 것이라고 생각한다. 이 글에서는 이미지 크기, 해상도, PPI에 대한 개념을 이해하고, 웹에서 일관된 품질...UX
MIZZUmizzu-creations.hashnode.dev·Aug 10, 2024css와 js로 구현하는 커스텀 마우스 포인터1. 글의 목적 롯데백화점 메인 페이지를 클론하며 커스텀 마우스 포인터를 구현하게 되었다. 처음에는 단순히 포인터를 커스터마이징하는 작업이라고 생각했지만, 특정 UI에 따라 반응하는 커스텀 포인터를 구현하면서 고려해야 할 세부 사항이 많다는 것을 깨달았다. 이러한 경험을 바탕으로 커스텀 마우스 포인터 구현 과정을 정리하여 공유하고자 한다. 2. CSS에서 해야할 작업들 마우스 포인터를 커스텀하기 위해서는 먼저, 문서 전체의 cursor를 ...CSS
MIZZUmizzu-creations.hashnode.dev·Jun 17, 2024css에서 요소를 가운데 정렬하는 다양한 방법들1. 글의 목적 요소를 중앙 정렬할 때, display: flex; justify-content: center; align-items: center; 조합을 자주 사용하고 있는 습관을 발견했다. 이 방법이 잘못된 것은 아니지만, 반드시 필요하지 않은 부분에도 사용하고 있는 것 같은 느낌을 받았다. 이 글의 목적은 요소를 중앙 정렬하는 다양한 방법을 탐구하고, 상황에 맞는 적절한 속성을 사용할 수 있도록 하는 것이다. 2. 수평 중앙 정렬 ...CSS
MIZZUmizzu-creations.hashnode.dev·Apr 12, 2024타이어픽 메인페이지 제작기해당 작업은 타이어픽 공식사이트의 페이지 구조를 참고해 만들었습니다. 모바일, 태블릿, 웹 반응형 100% 대응 🛞 Tire Pick 사이트명: 타이어픽 제작기간: 2024.03 ~ 2024.04 주요 기술 스택: HTML, SCSS, JavaScript 주요 라이브러리: Swiper.js, Lottie.js 대상 플랫폼: PC 및 모바일 반응형 🔗 LINK site | https://tire-pick.vercel...HTML5
