TechScribe Notes

🐜 프로젝트 개요1. 프로젝트 기간 : 2025.05~2025.06(약 2 개월간)2. 기술스택 -퍼블리싱 : html, scss, jquery-프론트 / 백엔드 : JSP3. 협업 툴 :Figma / vs code / cursor4.웹 유형 / 해상도 기준/ 디자인 너비 : 반응형 / 1920xp/ 375px 📝 프로젝트 설명: 자사제품을 고객들이 텍스트나 이미지 검색 등으로 검색할 수 있는 서비스. 😎 잘한점 1. 반응형 scss 컴포넌트 가이드 작업: 이전 프로젝트에서 scss 컴포넌트 작업한 경험을 기반으로 반응형으로도 작업해봄. 문제는 디자인 단계에서 따로 컴포넌트를 정리해준 것이 없어서 전체 디자인을 보고 공통적으로 사용할 것 같은 요소들을추출하여 컴포넌트 가이드에 작성함. 반응형 작..

🐜 프로젝트 개요1. 프로젝트 기간 : 2025.01~2025.04 (3개월간)2. 기술스택 -퍼블리싱 : html, scss, jquery-프론트엔드 : vue.js, typescript, nuxt.js-백엔드 : java/ springboot / mysql / mybatis / JPA3. 협업 툴 : GitLab, Figma, JIRA, Confulence, Slack, Discord4.웹 유형 / 해상도 기준/ 디자인 너비 : 모바일 앱 / 500xp/ 360px 📝 프로젝트 설명: 육류 담보 대출 서비스 개발판매자가 육류를 담보로 대출할 수 있는 서비스 프로세스 개발- 기존 css를 사용하던 방식에서 scss를 도입함. 😎 잘한점 1. scss 컴포넌트 가이드 작업: 사실 가이드 작업이 ..

웹 개발 중 모바일에서 직접 확인하고 싶을 때가 있음localhost는 모바일에서 접근 불가능하기 때문에 로컬 IP 사용해야 함Live Server 확장 기능에서 설정 가능함🔧 준비물같은 와이파이에 연결된 PC와 모바일Visual Studio CodeLive Server 확장 설치되어 있어야 함1️⃣ 현재 PC의 IP 주소 확인Mac 기준:터미널에서 ifconfig 입력 → en0 또는 en1 섹션에서 inet 항목 확인 예: 192.168.20.165 Windows 기준:cmd → ipconfig → IPv4 주소 확인 2️⃣ VS Code 설정에서 IP 설정VSCode 좌측 하단 톱니바퀴 → 설정 열기 (또는 Cmd/Ctrl + ,)우측 상단 "@ext:ritwickdey.liveserver hos..

env()는 CSS에서 **운영체제가 제공하는 환경 값(environment variable)**을 읽어오는 함수임주로 Safe Area 대응용으로 사용함 📌 사용 예시padding-bottom: env(safe-area-inset-bottom);→ iOS에서 홈 인디케이터(하단 바) 위의 안전 여백 값을 자동으로 가져옴 🎯 사용 목적iOS의 홈 바, 노치, 상태 표시줄 등에 UI 요소가 겹치지 않게 하기 위해특히 position: fixed, padding, margin 등에 많이 사용됨 🧩 주요 변수 목록env(safe-area-inset-top)상단 상태바 아래 여백env(safe-area-inset-bottom)하단 홈 인디케이터 위 여백env(safe-area-inset-left)좌측 노치..

모바일 웹 퍼블리싱 시 하단 고정 버튼이 안 보이는 현상 자주 발생함특히 iOS에서 스크롤 끝까지 내려야 보이는 경우가 있거나 Android도 소프트 키 때문에 가려지는 일 있음🧩 원인iOS는 홈 인디케이터(하단 제스처 바)가 버튼을 가림Android는 소프트 키 영역에 겹쳐서 버튼 눌리지 않음공통적으로 시스템 UI에 가려짐 → Safe Area 고려 안 됐을 때 발생함🔒 Safe Area란?시스템 UI에 가려지지 않는 안전한 영역을 의미함iOS는 safe-area-inset-* 값으로 정확히 제공함Android는 명확한 값은 없지만 유사하게 대응 필요함🛠 해결 방법1️⃣ meta 태그 설정 iOS Safe Area 인식 위해 필수없으면 env(...) 작동 안 함 2️⃣ 하단 버튼 CSS (iOS..

웹에서 모바일과 데스크탑 화면 크기에 따라 이미지를 자동으로 바꿔주고 싶을 때가 있다.이럴 때 사용하는 HTML 속성이 바로 srcset과 다.이번 글에서는 내가 직접 구현하면서 겪은 시행착오도 함께 정리해보았다. ✅ srcset이란?srcset은 태그에서 사용하는 속성으로,여러 해상도나 크기의 이미지를 미리 정의해두면 브라우저가 적절한 이미지를 선택해서 보여주는 기능이다.브라우저는 srcset과 함께 쓰는 sizes 속성을 참고하여,어떤 이미지가 화면에 가장 잘 맞을지 계산해서 자동으로 골라준다.예를 들어, 아래처럼 작성하면 모바일 환경에선 작은 이미지, 데스크탑에선 큰 이미지를 로딩한다. 여기서 768w, 1024w는 각각의 이미지가 몇 픽셀 너비인지를 의미하고,sizes는 브라우저가 판단할 이미지..