찐망고'S 퍼블리싱그리고디자인

스포카 폰트도 웹상에서 자주 보는 서체 중 하나인데 아무래도 폰트를 만들어서 배포하고 있는 스포카가 직접 실무에서 활용하기 위해 만들었기 때문에 지속적으로 유지보수가 된다는 점과 한글에 최적화되어 있다는 점이 큰 장점입니다. https://spoqa.github.io/spoqa-han-sans/ Spoqa Han Sans Neo Spoqa unveil the new Spoqa Han Sans Neo, which has evolved in many ways. | 여러모로 개선을 거쳐 진화한 스포카 한 산스 네오를 공개합니다. | これまでいろいろ改善して進化した新しいスポカーハンサンスネオ spoqa.github.io Spoqa Han Sans Neo 폰트를 사용하는 웹사이트 @font-face { font-fa..

안녕하세요 찐망고입니다. 애플 산돌고딕 NEO 폰트는 애플 기본 폰트 입니다.라이선스는 모두 애플이 가지고 있고, 애플 제품 사용자는 비상업, 상업용도 모두 사용 가능 합니다. 참고로 산돌고딕에서 제작한 산돌네오고딕NEO시리즈와는 다른 폰트입니다.  ttf 파일 다운로드 woff2 파일 다운로드     // CSS@font-face { font-family: AppleSDGothicNeo; font-weight: 100; src: url(AppleSDGothicNeoT.woff2) format("woff2");}@font-face { font-family: AppleSDGothicNeo; font-weight: 200; src: url(AppleSDGothicNeoUL.w..

안녕하세요 찐망고입니다 한글폰트를 지원 하는 폰트 중에 font-weight가 다양한 폰트 중 하나가 Pretendard글꼴인데,디자이너 길형진님이 inter와 noto를 결합해 서로의 단점을 보완해서 만든 폰트입니다window, ios 둘 다 지원하고 한국어에 최적화된 기호까지 지원하는 장점이 있고font-weight를 모두 지원해서 좋아요.Pretendard를 사용하는 웹사이트들도 늘어가는 추세입니다.  전체적인 설명은 제작자의 티스토리에 자세히 적혀있어서 링크 걸어봅니다.https://cactus.tistory.com/306 PretendardPretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 App..

스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~ 스크롤 이벤트라고 하죠? 스크롤을 내릴 때마다 svg애니메이션이 돌아가게 하는 결과물이구요 svg애니메이션은 나중에 또 따로 포스팅을 하기로 해요 실은 순서대로 하는게 맞는데 그러다보니 자꾸 밀려서;;; 일단 html구조 자체를 한섹션씩 짜버리게 했습니다. 이미지 + 텍스트박스 + cass svg 를 한 박스로 묶어서 네개를 만들고 svg는 absolute처리를 했구요 // SVG HTML h a n m a c // SVG CSS /*svg*/ @keyframes stroke { 0% { stroke:#fff; stroke-width: 1px; stroke-dashoffset: 326px; } 70% { fill: transparent; } 98..

안녕하세요 찐망고입니다. 키치하다 라는 단어 들어보셨나요?그럼 Y2K디자인은요?2023년 올해 웹디자인 트렌드 중 하나가 Y2K디자인이거든요..일단 키치하다라는 단어부터 알아볼까요? "키치하다" 일반적으로 어떤 대상이 과한 화려함이나 유행에 따른 특징을 가지고 있다는 의미를 뜻하는데요"과하네" 이게 펙트인거 같아요과장되고 유행을 따르는 화려함을 강조하며, 밝고 채도 높은 색상을 사용합니다.아무래도 그러다보니 누군가에겐 키치가 화려하고 재밌을 수 있겠지만,또 어떤 사람들에겐 키치가 너무 과장된 느낌이 들 수도 있겠죠? 안읽어도 되는 키치라는 용어의 유래더보기1. 독일어 "kitschen"과의 연결: 19세게 뮌헨에서 키치는 저급한 예술품이나 모조품을 가리키는 용어로 사용되었던..

안녕하세요 찐망고입니다. CJ프레시웨이사이트를 클론 코딩하다가 CJ그룹에서 사용하는 전용서체 OnlyOne 서체를 만났는데요.가독성이 떨어질 줄 알았는데 적당한 굴림서체가 오히려 제목요소와 탭메뉴같은 타이틀로 궁합이 좋았습니다. 상업적 용도로는 절대 사용을 못합니다 라이센스는 CJ그룹에 있는것 같아요 CJ프레시웨이CJ프레시웨이는 좋은 식자재를 유통하며, 건강하고 맛있는 식문화를 창출하는 대한민국 최고의 글로벌 식자재 유통 및 푸드 서비스 전문 기업입니다.www.cjfreshway.com:443     " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스  CJOnlyOne Woff 다운로드  CJOnlyOne TTF 다운로드  @charset "utf-8";@font-face { ..

Tenor Sans 구글 웹폰트 Tenor Sans - Google Fonts Tenor Sans is a humanist sans-serif typeface designed by Denis Masharov. Intended for the setting of body text, it can also be applied to headlines. Optimized f fonts.google.com 확실히 영문 폰트들이 이쁜 서체들이 많은 것 같다. 기본적으로 굵기를 하나만 제공해서 자주 사용하는 서체는 아니지만.. 지금 같은 느낌의 사이트에는 공유해서 사용하기 좋을 듯 하다. 삐침이 있는 서체들은 확실히 고딕체에 비해 고급스럽고 우아하고 부드럽다. 위아래 이미지를 비교해보면 한글폰트는 기본 Noto Sans..

Noto Sans KR폰트는현재 웹사이트에서 가장 많이 사용하는 폰트 중 하나이다.구글웹폰트에서 지원하고 있고, 폰트 두께가 다양하고, 한글을 지원하므로 앞으로도 꾸준히 쓰여질 전망이다.  Noto Sans KR - 구글 웹폰트 Download family누르면 ttf 설치파일 다운 가능  Noto Sans KR - woff파일 다운로드   // CSS (상대경로)@charset "utf-8";@font-face { font-family: "NotoSansKR"; font-weight: 100; src: url(NotoSansKR-Thin.woff) format(woff);}@font-face { font-family: "NotoSansKR"; font-weight: 100; ..

오늘은 swiper플러그인에 Centered를 사용해 볼건데요. 아래 쪽 결과물 처럼 보이게 하는거죠 swiper플러그인은 보면 슬라이드갯수를 정하면 그 갯수에 따라 화면에 보여지고 기본적으로 가장 왼쪽에 있는 슬라이드 클래스에 swiper-slide-active가 들어가는데요 그게 기준이 됩니다. center mode는 가운데 있는 slide에 swiper-slide-active가 들어갑니다. 그러다보니 가운데서 부터 시작을 해요~ 저렇게 왼쪽이 비어서 시작을 하죠.. loop없이 왼쪽으로 땡기려면 커스텀을 좀 해야하고 loop를 사용하면 자연스럽게 왼쪽이 채워질 거에요 끝으로 보여지는 slide들이 왼쪽에 채워지는 거죠. 하지만 실행시켜 보면 문제점이 발생하는데.. 슬라이드가 넘어가는 중에 저렇게 빈..

안녕하세요 찐망고입니다. 클론코딩을 하다보면 기본폰트 외 다양한 폰트를 만나게 되는데가끔 무료폰트를 만나면 기분이가 좋습니다. 형광펜으로 칠한 텍스트는 Noto Sans Kr인데 확실히 단점을 보완한 서체같다써보면 확실히 text-align과, letter-spacing을 잘 보완한 느낌이 있다.   SUIT 폰트  - OTF, TTF, WOFF2 다운 가능 Sun sun.fo  //  HTML  // Font-CSS@font-face { font-family: 'SUIT'; font-weight: 100; src: local('SUIT Thin'), url('./font/suit/SUIT-Thin.woff2') format('woff2');}@font-face { font-family: 'SUIT'; ..