본문 바로가기
728x90

개발일지/HTML l CSS2

[CSS] 배포 사이트에 다운로드 폰트 적용하기 기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼 수 있다. 1. 폰트 다운로드 우선 마음에 드는 폰트를 다운받는다. https://fonts.cafe24.com/ 카페24 상업용 무료 폰트 다운로드 - 카페24 라이선스 걱정 없이 어디서나 사용할 수 있는 상업용 무료 폰트 fonts.cafe24.com 무료 폰트 사이트는 찾아보면 많이 있으니 참고하면 좋다. 2. 프로젝트에 파일 복사 위와 같이 다운로드한 폰트를 작업중인 프로젝트에 넣어준다. 필자는 styles/fonts/**.ttf 와 같이 저장해줬다. 3. CSS 설정 @font-face{} 를 이용해 불러올 폰트를 설정해준다. /* global.css */ @.. 2023. 3. 31.
CSS position을 알아보자 어떤 태그의 위치를 지정할 때 사용하는 position 요소는 타입을 선언하고 top bottum left right 속성으로 배치한다. relative 일반적인 문서의 흐름에 따라 배치한다. 요소 자기 자신의 원래 위치를 기준으로 배치한다. 원래 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...) 위치를 이동하면서 다른 요소에 영향을 주지 않는다 문서 상 원래 위치가 그대로 유지된다.(개인적으로 header 나 무한스크롤 위치 지정 등에 이용 용이했다.) absolute 요소를 일반적인 문서 흐름에서 제거한다. 가장 가까운 위치에 있는 부모 요소를 기준으로 배치한다. 부모 요소 위치를 기준으로 얼마만큼 떨어질지 결정한다.(top bottom...) 부모 중 Position을 가진 요.. 2022. 10. 3.
728x90