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

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

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

안녕하세요 찐망고입니다. 피그마에서 줄자를 찾고 싶나요? 피그마 줄자 (Ruler) 위치단축키: Shift + R줄자를 활성화하면 캔버스 상단과 좌측에 눈금자가 나타납니다.   안내선 (Guides) 사용법안내선 추가: 줄자에서 드래그하여 가이드 생성안내선 이동: 선택 후 드래그안내선 삭제: 선택 후 Delete 또는 마우스 오른쪽 버튼 클릭 → Remove guide

안녕하세요 찐망고입니다.2025년도 벌써 두달이 지나갑니다.이번에는 반응형 웹을 위한 해상도 트렌드를 분석하면서,디자인 & 개발할 때 반응형 작업을 어떻게 하면 좋을지 정리해볼게요. 해당링크는 Statcounter입니다. Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage ShareTracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.gs.statcounter.com PC해상도부터 비교해볼까요? (2024 vs 2025) 1920 × 1080의 ..

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

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

안녕하세요 찐망고입니다.간만에 swiper관련 포스팅을.. 이번반 학생이 클론 하는 사이트인데요.이 사이트에서 세로형태로 슬라이딩되는 섹션을 swiper를 이용해 구현했습니다.이를 통해 배경이 부드럽게 전환되며, 동시에 탭 버튼이 해당 배경과 연동되도록 만들었죠사용자는 텍스트 버튼을 클릭해 직접 원하는 슬라이드로 이동할 수 있습니다.   지금은 충전중 │ 현대자동차모두의 삶이 한층 더 편해지는 현대자동차 ACR을 통해 여행의 행복을 선물합니다. 현대자동차와 자유로운 제주로 지금 바로 떠나보세요.acrtrip.com 아래 캡처된 이미지는 Swiper를 활용해 세로방향으로 슬라이드 되는 섹션을 구현한 모습이구요텍스트버튼(탭)은 Swiper와 연동되어 해당 슬라이드에 맞는 텍스트가 강조됩니다.선택된 버튼은 배..

안녕하세요. 찐망고 입니다. 오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요. 보그 코리아 (Vogue Korea)컬렉션부터 스타일, 쇼핑, 뷰티, 라이프스타일, 셀러브리티까지 지금 가장 핫한 트렌드 소개www.vogue.co.kr 하단섹션은 왼쪽과 오른쪽으로 나뉘어서왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.   오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로그 부분을 염려해서 CSS작업을 해볼 예정이에요 왼쪽과 오른쪽을 저렇게 fix클래스 요소로 ..

안녕하세요 찐망고 입니다. 히어로 섹션에 동영상을 삽입하는 건 이젠 기업 웹사이트의 트렌드가 되었잖아요?그만큼 동영상은 웹사이트의 첫인상을 좌우하는 중요한 요소가 되었습니다. 그래서 제가 관련 포스팅도 몇 개 했었죠? iOS 에서 동영상 재생이 안되나요?안녕하세요 찐망고입니다.아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.요즘 기업사이트 추세가  히어로섹션에 영상을 많이 넣더라구요.거의 국룰이랄까..영상을uiweb.tistory.com  youtube iframe 연결하여 자동 재생하기안녕하세요 찐망고입니다. 전에 ios에서 동영상 재생 관련 포스팅을 했었는데요. 읽어보시는 걸 추천합니다. iOS 에서 동영상 재생이 안되나요? 안녕하세요 찐망고입니다. 아주 간단하지만 제법uiweb..

이전 글 2021.06.20 - [디자인] - UI & UX Micro-Tips: The Ultimate Collection - 5 UI & UX Micro-Tips: The Ultimate Collection - 5 이전 글 2021.06.18 - [디자인] - UI & UX Micro-Tips: The Ultimate Collection - 4 UI & UX Micro-Tips: The Ultimate Collection - 4 이전 글 2021.06.17 - [디자인] - UI & UX Micro-Tips: The Ultimate Colle.. uiweb.tistory.com 51. If you (have to) use multiple typefaces, try to stick to the 2 ma..