본문 바로가기

웹퍼블리싱3

wv-2503~2505-01 (인터랙션 작업 중 기록) WV 인터랙션 작업 중 (카드 펼쳐짐) 크롬에서는 부드럽게 정상적으로 작동하는 반면, 사파리, edge 에서 버벅거림 현상 발견. 이유는 top, left 로 위치를 잡았기 때문. transform으로만 작업했더니 모든 브라우저에서 부드럽게 정상 작동! 반응형 사이트이기 때문에 mobile 분기에서는 아래처럼 vw 단위를 사용했다. 현재 인터랙션 작업하면서 가장 까다운것이 cubic-bezier 값 맞추기. 이게 지금 제일 어렵다. 2025. 4. 16.
.gitignore파일을 수정했을 때. 바로 적용되지 않는다면? (git 캐시를 삭제/.gitignore파일의 역할) 상황 :퍼블리싱 환경 세팅을 할 때. gitignore파일에 dist폴더를 추가했다. (커밋 할 때마다 생기는 파일 충돌을 피하기 위해!)그런데 개발자가 dist를 동의 없이 삭제....했다.퍼블리싱 파일을 수정할 때마다 dist 파일들도 커밋을 해야 하는 번거로운 상황이 되었다. 충돌 이슈..문제 :. gitignore파일에 다시 dist를 재적용했다. 그런데.. 작동을 하지 않는 것리다! 커밋 목록에 계속 dist파일들이 줄지어 있는 상황.해결 :언제나 그렇듯이 이런 상황은 분명.. 내가 처음이 아닐 것이라 확신했다. 역시나 답이 있다. html파일을 수정해도 브라우저에 바로 반영이 되지 않는 경우는 보통 적용 시간이 오래 걸리거나, 캐시 삭제를 하지 않아서다. 이 문제에서는 캐시 삭제와 같은 맥락으.. 2024. 7. 3.
skip-nav / 스킵 네비게이션 (메뉴 건너뛰고 바로 본문으로 이동/웹접근성에 필수 요소) 학원에서 배워 잘 써먹고 있는 skip 네비게이션의 마크업와 스타일.접근성에 필수이기 때문에 무조건 넣어줘야 한다! (보통 메뉴바로가기, 본문바로가기, 하단정보바로가기 이렇게 3개의 메뉴를 넣는 것 같다.) 마크업본문 바로가기 스타일#skip-nav{ position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; background-color: rgba(0, 0, 0, 0.8); color: #ffffff; font-size: 16px; transition: top 0.3s; z-index: 100000;} 2024. 2. 23.