![]()
Nuxt3.js에서 scss로 font를 적용하기 (IBM Plex Sans 폰트 적용) 서론 최근 노마드 커뮤니티 서비스를 사이드프로젝트를 하면서, 디자이너 분이 선택한 폰트인 IBM Plex Sans 를 웹폰트가 아닌 일반적인 woff 파일을 받아서 처리하는 방식에 대해서 선택하였고, 그걸 작업한 내용을 공유드릴려고 합니다. 실제 nuxt.js에서 웹폰트를 쓰는 방법은 Nuxt.js config를 통해 웹폰트를 쉽게 적용해보자. 폰트 다운로드 해당 폰트는 https://github.com/IBM/plex/tree/v5.0.0/IBM-Plex-Sans-KR/fonts/complete 해당 주소에서 다운로드 받을수 있습니다. hinted vs unhinted 두가지의 차이를 알기. 위해서 Hinting이..
Nuxt3에서 variables 전역으로 설정하자. 서론 기본적으로 스타일링을 할때, variables를 설정하고 전역으로 설정할수 있게 한다. Nuxt 3.6.5 버전 기준으로 해당 글은 작성되었다. 여기서 기본적으로 알아둬야 하는것은 Nuxt3는 기본적으로 vite를 사용한다. Scss 파일 생성하기. 해당 경로가 정답은 아니다. 경로는 편한대로 작성한다. // 브레이크 포인트 변수를 한곳에 모아두기 위해 따로 파일을 만든다. // /assets/styles/variables/_breakpoints.scss $xs-down: 'max-width: 375px'; $md-down: 'max-width: 768px'; $mobile: $xs-down; $tablet: $md-down; // 모든 변수 파일..
Nuxt.js config를 통해 웹폰트를 쉽게 적용해보자. 서론 Nuxt의 애플리케이션의 모든 페이지에 같은 폰트를 다운로드 받아서 적용하는 작업을 해볼 예정입니다. 손쉽게 Configuration을 통해 가능합니다. 테스트해볼 폰트는 google IBM Plex Sans font를 이용해볼 예정입니다. 참고로 해당 예제는 nuxt3로 진행하였습니다. nuxt3 옵션 nuxt3는 nuxt.config.ts 파일을 이용해 옵션을 설정할수 있습니다. app 공식문서 : https://nuxt.com/docs/api/configuration/nuxt-config#app app 전반의 옵션들을 설정하는 키값입니다. head 공식문서 : https://nuxt.com/docs/api/configuration/n..
