익숙한 크롬 브라우저에선 글꼴 적용이 잘 되는데...항상 사파리 브라우저가 문제 ㅜㅜ 크로스 브라우징 생활화해야하는데 아직 쉽지 않다.. 그러므로 사파리 브라우저에서 글꼴 적용하는 방법을 기록해보려한다. 보통은 html, body {font-family: "Pretendard";} 이런식으로 많이 적용하는데,사파리 브라우저의 경우 적용이 안될 수도 있다. 그래서 항상 지정 폰트 뒤에 sans-serif를 붙여줘야한다. html, body {font-family: "Pretendard", sans-serif;} 또한 웹폰트 방식 중 @import 방식을 사용한다면 import링크를 css파일 최상단에 적어야한다.

내가 보려고 정리하는 것이므로,, 자주 쓰일 것같은 단축키만 모아서 표로 정리해보겠슴다...vscode를 쓰면 좋겠지만,,, 기존 작업을 editplus해서 많이 했기 때문에유지보수 하려면 단축키를 어느정도 알아놔야한다 😂 Edit Plus  단축키Ctrl + N새 문서 작성Ctrl + Shift + SFTP 업로드Ctrl + Z실행 취소Ctrl + Y다시 실행Alt + Shift + Del줄 지우기Ctrl + J줄 복사Ctrl + R줄 선택Ctrl + I들여쓰기 (vscode의 tab기능)Ctrl + Shift + I들여쓰기 줄이기 (vscode의 shift + tab 기능)Shift + F3찾기Ctrl + J여러 줄을 한 줄로 만들어줌 (한 줄 코딩으로 변환할 때 개꿀) 그리고 에디트 플러스의 제일..

오늘은 반응형에서 발생하는 에러인 중복되는 이벤트를 제거해보겠다! 오늘의 에러는 어쩌다 마주하게됐냐하믄.. 열심히 반응형 작업 중, 퀵 메뉴에 대한 부분이 있었는데 모바일과 패드(세로) 기기에선 퀵 메뉴 중 하나를 눌렀을 때 모달창이 띄워지고 PC기준에서는 그냥 다른 링크로 보내버리는 로직을 짰다. 메뉴 1인데 모바일에선 모달로 나타날거임 메뉴 2임 일단 저 첫 번째 메뉴를 누르면 새 페이지가 열리면서 원하는 링크로 이동한다. 하지만 modal이라는 아이디를 보면 알 수 있듯이, 사이트 정보 중 모바일 기기로 전환되면 레이아웃 처리가 곤란해지는 경우가 많다. 그렇기 때문에 퀵메뉴로 모달을 열 수 있도록 만드는 것임~~ 그래서 모달창을 열고 닫는 제이쿼리를 추가해줌.. $("#modal").on("clic..

아래의 효과를 background에 넣어보려한다. 점들이 파도처럼 꿀렁이는? 효과이다. See the Pen three.js canvas - particles - waves by deathfang (@deathfang) on CodePen. Three.js 배경 적용 위에 언급한 효과는 스크립트가 굉장해엄청나 복잡하므로 ,,,(용량 장난없음;) 아래의 코드펜 예제를 참고하였다 https://codepen.io/mweslander/pen/JreNPj ThreeJS Canvas Particle Waves ... codepen.io 똑같은 효과인데 커스텀에 따라 느낌이 확 달라지므로 이쁘게 커스텀해보자~ HTML 구조 Three.js section one section two section three sect..

패럴랙스 이펙트하면 가장 기본적인 것은 아마 스크롤의 감도? 아닐까 생각이 든다. 스크롤 움직이는 느낌에 따라 사이트의 퀄을 좌우할 수 있달까!? 난 그렇게 생각한다. 아무튼 가장 많이 쓰는 플러그인은 lenis 아닐까 싶다. Lenis (smooth scroll) lenis 공식 사이트 https://lenis.darkroom.engineering/ Lenis – Get smooth or die trying A smooth scroll library fresh out of the Studio Freight Darkroom lenis.darkroom.engineering 깃허브 https://github.com/darkroomengineering/lenis GitHub - darkroomengineeri..

개인 프로젝트를 할 때엔 보통 Gitmoji 사용해서 커밋을 남기는데, 보통 협업을 할 때엔 Gitmoji보단 그냥 커밋 컨벤션 규칙을 세워서 하기 때문에 나중에 참고할 수 있도록 정리할 예정이다. 그리고 Gitmoji를 쓰면서 커밋을 남기고있는데 좀 헷갈려서 다시 정리해볼 것이다. 커밋 컨벤션 🤔 커밋 컨벤션은 왜 필요할까? 개인 프로젝트 경우에는 나만 알아보면 그만이지만.. 협업을 할 경우에는 누가, 어떤 코드를 작성하고 수정했는지 알아보기 위한 수단이라고 볼 수 있다. 규칙을 세워놓고 거기에 따라 작성하면 나중에 커밋내역을 찾기도 수월해지고 이해하기 편하기 때문! 커밋 메시지 구조 type : subject body footer 아직 구조만 보면 뭔지 모르겠으므로 하나씩 살펴보자! type rule..