CSS

CSS

폰트 최적화

1. 웹 폰트? - 로컬 폰트 설치 여부와 관계없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 해주는 기술이다. *타이포그래피 : Typography란 글자와 글자가 위치한 공간이나 레이아웃 등 글자로 디자인된 상태를 말한다. 2. 웹폰트 사용법 웹 폰트는 css의 @font-face를 사용해서 설정할 수 있다. - font-family : 사용할 웹 폰트의 이름을 지정한다. 이때 아무 이름으로 지정해도 상관없다. 예를 들면, humanFont1234 이런 이름도 가능하다. 하지만 최대한 본래의 폰트명과 비슷하게 하는 것이 유지보수에 도움을 주기 때문에 비슷하게 짓는 편이다. - src : 폰트 파일의 경로와 폰트 형식을 지정한다. url로 폰트 파일 경로를 설정하고, format에 폰트 파일의 ..

CSS

scroll-snap 속성(feat.full-page.js)

프론트엔드 개발을 하다보면 아래와 같은 페이지 형식을 자주 접할 수 있다. 일정부분까지 스크롤이 되었을 때 자연스럽게 다음 화면으로 스크롤되는 기능이다. 필자도 회사에서 맡은 프로젝트의 메인페이지가 위와 같은 형식으로 디자인되어 있었다. 디자인이 되어 있다는 건.. 내가 구현해야한다는 뜻이다 🤣( 귀찮은 기능이지만 월급 받으니까 해야지) 1. react-full-page 라이브러리 가장 먼저 시작한건 라이브러리 검색이었다. ( 코드 리팩토링, 기능 구현 등등 사내 프론트엔드 개발자가 혼자라.. 사소한 기능에 시간을 많이 쓰고 싶지 않았다 ) 구글링한 결과 react-full-page 라는 패키지를 손쉽게 찾을 수 있었다. 이 기능을 full-page 라고 부르는 것도 패키지를 검색하다가 알게 되었다. M..

human_jo
'CSS' 카테고리의 글 목록