1. 웹 폰트? - 로컬 폰트 설치 여부와 관계없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 해주는 기술이다. *타이포그래피 : Typography란 글자와 글자가 위치한 공간이나 레이아웃 등 글자로 디자인된 상태를 말한다. 2. 웹폰트 사용법 웹 폰트는 css의 @font-face를 사용해서 설정할 수 있다. - font-family : 사용할 웹 폰트의 이름을 지정한다. 이때 아무 이름으로 지정해도 상관없다. 예를 들면, humanFont1234 이런 이름도 가능하다. 하지만 최대한 본래의 폰트명과 비슷하게 하는 것이 유지보수에 도움을 주기 때문에 비슷하게 짓는 편이다. - src : 폰트 파일의 경로와 폰트 형식을 지정한다. url로 폰트 파일 경로를 설정하고, format에 폰트 파일의 ..
최근에는 순수 React를 사용하기보다 거의 모든 프로젝트에서 Next.js를 사용하고 있다. Next.js를 사용하지 않을 이유가 없기 때문인데.. Next.js의 장점에 대해서는 다른 글에서 자세히 써보도록 할 것이다. 보통 폰트는 프로젝트 세팅할 때 적용하고 따로 설정할 일이 많지 않기 때문에 방법을 잘 잊어버린다. 다시 찾아보는 수고를 덜기 위해서 Next.js에 폰트를 적용하는 방법을 자세히 작성해 볼 것이다. 1. 라이브러리, 프레임워크 버전 - Next.js 12.2.3 (13버전이 아님 주의!) - styled-components 5.3.5 폰트 관련 설정이므로 css관련 버전만 명시한다. 2. 사용할 폰트 - Prentendard Pretendard는 한글에 최적화되어 있고 9개의 다양한..
프론트엔드 개발을 하다보면 아래와 같은 페이지 형식을 자주 접할 수 있다. 일정부분까지 스크롤이 되었을 때 자연스럽게 다음 화면으로 스크롤되는 기능이다. 필자도 회사에서 맡은 프로젝트의 메인페이지가 위와 같은 형식으로 디자인되어 있었다. 디자인이 되어 있다는 건.. 내가 구현해야한다는 뜻이다 🤣( 귀찮은 기능이지만 월급 받으니까 해야지) 1. react-full-page 라이브러리 가장 먼저 시작한건 라이브러리 검색이었다. ( 코드 리팩토링, 기능 구현 등등 사내 프론트엔드 개발자가 혼자라.. 사소한 기능에 시간을 많이 쓰고 싶지 않았다 ) 구글링한 결과 react-full-page 라는 패키지를 손쉽게 찾을 수 있었다. 이 기능을 full-page 라고 부르는 것도 패키지를 검색하다가 알게 되었다. M..
