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