728x90 HTML CSS5 아이폰 position:sticky가 안 된다구요? 아이폰을 사용할 때, 웹사이트에서 position: sticky 속성이 제대로 동작하지 않아 고민인 사람들 많죠? 아마 웹사이트의 헤더나 메뉴가 스크롤을 따라 움직이는 기능을 기대했을 텐데, 아이폰에서만 그게 잘 안 되는 문제에 부딪히게 되죠. 이번 글에서는 아이폰에서 position: sticky가 제대로 작동하지 않는 이유와 그 해결 방법을 알려드릴게요! 😊아이폰에서 이 문제가 발생하는 주된 이유는 Safari 브라우저의 렌더링 엔진(WebKit) 때문인데요. WebKit은 다른 브라우저들과 조금 다른 방식으로 레이아웃을 처리하기 때문에, position: sticky가 예상대로 작동하지 않는 경우가 많습니다. 이 문제는 특히 iOS 12 이하 버전에서 자주 발생하곤 합니다. 아이폰에서 이 문제가 .. 2025. 4. 15. 이미지 업로드 후 썸네일까지?! HTML로 실시간 미리보기 (+코드예제) 웹페이지를 만들다 보면 사용자에게 이미지 업로드 기능을 제공할 일이 종종 생깁니다. 그런데 단순히 업로드만 되는 것보다, 사용자가 업로드한 이미지를 즉시 미리보기로 보여준다면 훨씬 더 친절하고 직관적인 사용자 경험을 제공할 수 있습니다.오늘은 HTML과 JavaScript를 활용해 이미지만 선택할 수 있게 하고, 업로드된 이미지를 썸네일로 미리 보여주는 방법을 소개합니다. 😊 HTML input file로 이미지 파일만 선택하게 하기 🎯우선, 파일 업로드 input 태그에서 이미지만 선택할 수 있도록 만들어야 합니다.accept 속성을 이용하면 아주 간단하게 구현할 수 있습니다. JavaScript로 썸네일 미리보기 만들기 ✨ 이미지 선택 후, 바로 아래에 썸네일을 띄워주는 방식은 사용자에.. 2025. 4. 14. HTML CSS 만으로 로딩중 화면 꾸미기! (+코드예제) 웹사이트에 로딩 중 이미지를 만드는 이유웹사이트나 애플리케이션을 사용할 때, 페이지가 로딩되는 동안 사용자가 아무것도 하지 않고 기다리게 되는 순간이 있습니다. 이때 사용자가 기다리고 있다는 사실을 시각적으로 알려주는 로딩 중 애니메이션을 사용하는 것은 매우 중요한 요소입니다. 특히 HTML과 CSS로 로딩 중 이미지를 만들면 사용자 경험을 크게 향상시킬 수 있습니다. 이제 그 이유를 하나씩 살펴보겠습니다.인터넷 속도가 느린 경우, 웹사이트의 콘텐츠가 로드되는 데 시간이 걸릴 수 있습니다. 이때, 로딩 이미지를 제공하면 사용자는 페이지가 멈춘 것이 아니라 로드가 진행 중이라는 것을 알 수 있습니다. 로딩 애니메이션을 보여주는 것만으로도 사용자는 기다리며 불안감을 줄일 수 있습니다. 샘플화면 .. 2025. 4. 8. input type tel 연락처만 입력받고, 패턴과 유효성을 확인 반응형웹, 모바일웹 등 input 입력란에 연락처 입력 시 활용하는 방법입니다. 1. input type="tel" 연락처 입력 시 가장 유용한 type 입니다. 모바일 기기에서 input focus 시 숫자패드가 열리게 되죠. 기본적으로 pattern을 검증하지 않으므로 패턴검증이 필요하다면 pattern을 추가합니다. 패턴에 맞춰 입력을 권장한다면 placeholder 예시로 넣어두면 좋습니다. 연락처가 필수 입력이라면 required 속성을 추가하여 form 전송 시 필수입력값을 확인하며, 패턴까지 확인하니 js, jquery에서 체크하여 확인할 일이 없을 것 같네요. 2025. 3. 7. 아이폰 사파리에서 폰트가 제대로 안먹힌다면! 🚩 사파리 브라우저 HTML , CSS 가 가끔 안먹힐 때가 있죠.. 적용한 폰트의 size, weight가 이상하게 굵거나 얕고... 난감할 때가 있습니다. 웹(크롬,엣지,웨일 등..), 안드로이드(크롬)에서는 아래의 이미지처럼 나와야 정상입니다. 문제의 아이폰 사파리브라우저 글씨크기나 굵기를 지정 했음에도 불구하고 대학교명과, 프로필 자세히보기 버튼의 폰트가 안맞는 현상이 생깁니다. 제가 해본 총 3가지 방법을 알려드립니다. 후훗 😘 1. font-synthesis font-synthesis는 CSS 속성으로, 브라우저가 없는 글꼴 스타일(굵은체나 이탤릭체)을 어떻게 처리할지 제어합니다. 이 속성값은 아이폰 사파리의 특정 버전에서 font-weight : 600, 700에.. 2025. 3. 7. 이전 1 다음 728x90
