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

안녕하세요 찐망고입니다.오늘도 클론 프로젝트를 하던 중 귀찮지만 막상 구현하면 보기 좋은 헤더 애니메이션작업과정을 공유해 드릴 건데요. 디테일은 귀찮아서 못하는 거지 막상 하면 만족도가 높..조만간 이런 공유들을 영상으로 보여드리고 싶은데.. (말만 몇 년째) 해당사이트 학생이 클론작업한 링크입니다 (3개월 유지예정) KRDS대한민국 정부 디자인 시스템 KRDS는 누구나 쉽게 정부 서비스를 경험할 수 있도록 가이드라인과 디자인 리소스 및 디자인 시스템 구축을 위한 모든 자료와 최신 정보를 제공한다.www.krds.go.kr  KRDS 클론 코딩  이 애니메이션의 핵심은 헤더를 줄이거나 헤더를 이동하는 게 아니고전체적인 콘텐츠를 위로 당긴다고 생각하면 되는데요처음 스크롤할 때 배너가 사라지고 헤더가 fix..

안녕하세요 찐망고입니다.CSS에서 min(), max(), clamp() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요. 이 함수들을 활용하면 보다 유연하고 직관적인 스타일링이 가능합니다. 특히 vw 단위를 많이 사용하는 요즘, CSS 속성 값을 동적으로 계산할 수 있다는 점에서 큰 장점이 있습니다.CSS비교함수관련 포스팅을 작년에 했었는데 해당사이트를 번역하고자 추가 포스팅을 해봅니다. 일단 이전글 링크 CSS min(), max(), clamp() 함수로 반응형 웹 디자인 완성하기안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게u..

안녕하세요 찐망고입니다.이번에 인크루트웍스 클론 프로젝트를 진행하는 학생이 만든 사이트를 보다가 발견한 버튼인데요.민산스 폰트를 포스팅하게 만든 그 사이트가 맞구요!마우스오버효과를 주면 버튼 색상이 부드럽게 바뀌는게 너무 예쁘더라구요!그래서 직접 HTML, CSS, JavaScript로 구현해 보았습니다  학생이 클론한 사이트 입니다. (3개월 후 삭제예정) AI로 검증하는 채용솔루션, 인크루트웍스인크루트웍스 채용솔루션으로 더 똑똑하고 빠르게 채용하세요! 기업채용에 최적화된 지원자관리,평가관리,면접관리,인재검증 등 다양한 솔루션을 제공합니다.phj00006.mycafe24.com 버튼 그라데이션 애니메이션은 영상으로 확인해주세요 (클론한 작업물) 마우스를 올리면 위에 그라데이션이 왼쪽에서 오른쪽으로 지나..

안녕하세요 찐망고입니다.더보기진짜 제가 CSS도 그렇구 HTML도 그렇구 피그마도 그렇고꽤 포스팅을 하는데왜 폰트만 검색되는거죠? 😭😭😭😭하지만 수업 내용을 공유하는게 목적인 블로그니까..  sticky 포스팅을 작년에 했는데요또해요.. 또맞아요 먼가 적용방법을 쉽게 설명하지 않은 것 같아 또..이건 이전에 쓴 포스팅입니다. CSS position: sticky 완벽 사용법 & 적용 가능한 사이트예시안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요..position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다.잘 쓰면 너무 좋은 데 absoluuiweb.tistory.com  sticky는 본인 요소를 고정할때나 (..

안녕하세요 찐망고입니다. 이전 포스팅에서 MinSans와 Pretendard 서체 비교를 다룬 이후, 가변 폰트(Variable Font)에 대한 질문이 많아서이번에는 가변 폰트의 개념과 Pretendard 가변 폰트 다운로드 및 적용 방법을 정리해보겠습니다.  1. 가변 폰트(Variable Font)란?◈ 기존 폰트와 가변 폰트의 차이점가변 폰트는 한개의 폰트 파일로 여러가지 스타일(굵기, 너비, 기울기 등)을 조절할 수 있는 폰트 포맷입니다.기존의 정적인 폰트와 달리, 가변폰트는 CSS속성만으로 다양한 스타일을 자유롭게 적용할 수 있죠→ 여러개의 폰트파일대신, 하나의 가변폰트파일로 다양한 스타일을 구현할 수 있는 기술!비교 항목기존 폰트(Static Font)가변 폰트(Variable Font)파일..

안녕하세요 찐망고입니다.이번에도 새로운 폰트를 사용한 웹사이트를 발견했어요.바로 인크루트웍스 웹사이트인데요. AI로 검증하는 채용솔루션, 인크루트웍스인크루트웍스 채용솔루션으로 더 똑똑하고 빠르게 채용하세요! 기업채용에 최적화된 지원자관리,평가관리,면접관리,인재검증 등 다양한 솔루션을 제공합니다.works.incruit.com 보자마자 프리텐다드 폰트가 생각났어요,실제로 비교해 보니 조금 차이가 나지만요 어때요 구별이 되나요? ㅎㅎ영상으로 보여드릴게요프리텐다드와 민산스폰트변화 확인 민산스폰트는 좀 더 부드럽고 둥근 느낌이고프리텐다드는 좀 더 각지고 정돈된 스타일이다.민산스폰트가 글자 폭이 상대적으로 넓고프리텐다드폰트가 살짝 좁음 민산스는 노토산스폰트를 기본으로 커스텀한 폰트인데실제로 보면 프리텐다드와 더 ..

안녕하세요 찐망고입니다. 웹사이트에서 많이 사용하는 폰트들이 있죠?예전에는 Noto Sans KR폰트가 압도적으로 많이 사용 되었지만최근에는 Pretendard폰트로 넘어가는 추세더라구요 그리고 요즘 검색량이 급상승하는 폰트가 하나 더 있는데요!바로 SUIT폰트입니다. 저는 최근 대시보드 디자인 및 퍼블리싱 외주 작업을 진행하면서SUIT폰트를 적용해봤는데, 가독성이 너무 좋았어요.아직 작업중이라 공개할 순 없으니 실제로 SUIT폰트를 사용한 최근 웹사이트 디자인을 찾아볼까요?GDWEB에서 최근 디자인사례를 검색해 봤어요  💡 검색한 사이트 업로드 게시날짜: 2024년 11월 ~ 현재 💡 총 검색한 사이트 수: 120개 💡 그 중 SUIT 폰트를 사용한 사이트: 4개 (3.33%)  일년전만해도 12..

안녕하세요 찐망고입니다. 결국 제가 구글머터리얼 심볼(Material Symbols)에 대해서  또 포스팅을 하게 되었네요.솔직히 Customize 기능이 넘 사라 좀 쓸만하죠? 이전 발행글이 하나 있는데 css로 적용했던 방법을 포스팅 하였습니다. 새로운 구글 머티리얼 심볼 활용법: 웹아이콘의 모든 것안녕하세요 찐망고입니다. 이전에 xeicon관련 포스팅을 했었는데요.드디어 다음 포스팅을.. 2021.07.23 - [WEB/CSS] - 웹에서 사용가능한 웹아이콘 적용방법 - XEIcon 웹에서 사용가능한 웹아이콘 적용uiweb.tistory.com  이번 포스팅은 수업 중 클론 코딩을 하다가 저 펭귄그림 있는 부분에 아이콘들을구글 아이콘을 html요소로 적용해보자로 시작해서포스팅으로 마무리를 해봅니다 ..

안녕하세요 찐망고입니다.스레드를 시작하다 보니 포스팅을 안 하게 되는 것도 있고..ai로 지정된 댓글들도 보기 싫고ai로만 이루어진 글이 판을 치면서 내용도 없는 글들의 애포가 날로 성장하는 게 배가 아프고(아 이건 아닌가)거두절미하고 오늘은 CSS의 filter속성에 대해서 포스팅해 봅니다 filter속성은 이미지, 텍스트, 요소 전체에 다양한 그래픽 효과를 적용하는 CSS속성인데요. 기본적으로는 이렇게 씁니다..element { filter: 효과이름(값);} 여러 개의 필터를 사용할 땐 공백으로 구분하여 연속 적용이 가능합니다..element { filter: blur(5px) brightness(0.8) contrast(1.2);}  주요 fiter효과에 대해서 알아볼까요1) blur(..

안녕하세요 찐망고입니다 2025년을 대비해 프론트엔드 개발에서 새롭게 등장한 HTML과 CSS의 기능들을 소개하고, 이런 기능들이 얼마나 개발을 쉽게 만들어주는지 알려주려는 글이 있어 포스팅(번역) 해봅니다. New Front-End Features For Designers In 2025 — Smashing MagazineSearching for the most flexible front-end workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become these days. This post is a journey through new front-end features and..