Programming3 웹 폰트 사용 방법 & 추천 여기저기 작업하면서 모아둔 웹폰트 모음 겸 정리글 우선 웹폰트 사용방법부터! [웹폰트 사용방법] 1. link 방식 사용할 웹폰트의 링크태그를 태그 내부에 붙여 넣기 2. import 방식 @import url(' 폰트url '); 사용할 웹폰트의 import 코드를 태그, 또는 css파일 최상단에 붙여 넣기 3. font-face 방식 @font-face { font-family: '폰트'; src: url('eot'); src: url('eot?#iefix') format('embedded-opentype'), url('woff2') format('woff2'), url('woff') format('woff'), url('ttf') format("truetype"); font-display: swap.. 2023. 3. 21. 헷갈리는 CSS/HTML 정리 개인기록용 미디어쿼리 @media(max-width:768px){ /* 모바일 */ } @media(min-width:768px){ /* 모바일아닐 때 */ } @media(min-width:768px) and (max-width:1024px){ /* 태블릿 */ } @media(min-width:768px) and (max-width:1024px) and (orientation:landscape){ /* 태블릿 가로모드 */ } 웹폰트 적용하기 @font-face{ font-family: A; src:url('B'); } body{ font-family: A; } 나눔스퀘어 @import url(https://cdn.jsdeliver.net/gh/moonspam/NanumSquare@1.0/nanums.. 2023. 3. 12. Owl Carousel을 이용한 롤링배너 만들기 워드프레스 홈페이지 작업 도중 가로로 롤링되는 이미지 배너를 만들어야 할 필요가 생겨 검색하던 중 'Owl Carousel'이라는 좋은 플러그인을 알게 되었다! 처음에는 단순 이미지 배너 작업이어서 Elementor에 내장된 Image Carousel이라는 기능을 이용하여 만들었는데, 후에 갑자기 각 이미지에 링크를 달아야 할 필요가 생겼다. Image Carousel은 깔끔하게 롤링 및 prev / next 버튼을 제공하는 반면, 이미지 각각에 링크를 달 수 없어 곤란하던 중 Owl Carousel을 찾게 된 것!!! 사이트에 들어가면 위처럼 다운로드 및 깃허브, 데모, 기본 내용 설명 등을 볼 수 있다. 가이드가 자세한 듯 자세하지 않아 적용하는데에 꽤 애를 먹었어서 정리 겸 글을 남겨본다. Owl .. 2020. 1. 10. 이전 1 다음
