html, css, jquery

내비게이션 메뉴에 대한 접근성을 높이기 위해스크롤에 상관없이 header를 항상 화면 상단에 고정시키는 sticky header를 많이들 사용한다.페이지 어디서든 header 메뉴에 접근할 수 있지만 항상 header 높이 만큼 컨텐츠를 가리게 된다.스크롤에 반응하는

모바일(터치 디바이스)에서는 마우스 커서가 없기 때문에 hover 효과를 줄 수 없다.PC에서처럼 css에 hover 효과를 넣게 되면 해당 요소를 두번 터치해야 원하는 동작을 얻을 수 있다. (한번 터치하면 hover 효과만 적용되고 동작하지 않음)특히 반응형 작업을

모달 창 띄웠을 때 바닥 페이지 스크롤 안되게 해주세요.프로젝트를 하다 보면 위와 같은 요청을 받게 된다.레이어로 모달 창을 띄운 상태에서 스크롤을 하면 바닥 페이지가 위 아래로 움직이게 되는데이걸 막아 달라는거다.CSS 프레임워크나 모달 플러그인 등을 사용하면자체적인

img 태그 사용 시 이미지 로드에 실패했을 경우 엑스박스가 보여지는데alt를 사용하여 대체 텍스트를 보여주는 방법을 많이 사용한다.대체 텍스트 대신 대체 이미지를 보여준다면 로드 실패 시 더 깔끔한 웹페이지를 보여줄 수 있다.위와 같이 img 태그에 onerror 항

swiper를 생각없이 쓰고 있었는데 최근에 IE에서 동작하지 않는 것을 발견했다.내가 사용하는 버전은 6.4.5 였는데 검색해보니 버전 5 부터 IE를 지원하지 않는다고 한다.버전 5 미만의 swiper를 사용하면 IE 오류 문제를 해결할 수 있다.https&#x3A

스크롤에 따라 컨텐츠에 여러가지 애니메이션 효과를 쉽게 구현해주는 AOS 라이브러리가 있다.간단히 적용할 수 있어 자주 쓰고 있는데 IE에서는 동작하지 않는다.IE로 보게되면 AOS가 적용된 컨텐츠에 opacity가 0에서 1로 변환되지 않아서해당 컨텐츠들이 아예 보이

모바일 마크업을 할 때 디바이스 크기에 상관없이 한 화면을 꽉 채우기 위해 height:100vh 를 사용하곤 한다. 그런데 100vh를 사용하고 실제 모바일 브라우저에서 확인해보면 아래 부분이 잘려보인다. 위 이미지는 div.wrap에 height:100vh를 주고