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

안녕하세요 찐망고입니다. 웹에서 자주 사용 되는 말풍선(툴팁, 채팅 말풍선 등)을 피그마로 만들어 볼 건데요.Auto Layout과 Constraints를 이용해서 만들 수 있습니다.  일단 말풍선 모양을 만들 건데요.사각형 도형과 삼각형 도형을 합치고컴포넌트로 등록해야 합니다.   텍스트를 쓰고 섹션 프레임을 씌워서 Auto Layout을 먼저 해줍니다.말풍선과 Auto Layout을 해줄 건데요말풍선 컴포넌트를 잘라서 Frame1안에 붙여 넣어줄 거예요 둘이 겹쳐야 하는데 겹쳐지지 않고 저렇게 따로 놀아요그래서 저 Union컴포넌트를 앱솔처리해줄 거예요. 위 아이콘을 누르면 Union컴포넌트 아이콘 모양이 달라지면서 텍스트와 겹쳐집니다.참고로 오토레이아웃방향은 세로나 가로나 상관없고요중요한 건 레이어..

안녕하세요 찐망고 입니다.이포스팅은 Apple의 기본 영문 글꼴인 SF-Pro폰트를 Windows환경에서 사용할 수 있도록 돕기위해 작성하였습니다.디자인을 하다보면 Windows에서 Apple폰트가 필요할때가 있잖아요. https://developer.apple.com/fonts/ Fonts - Apple DeveloperGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps.developer.apple.com 물론 이사이트에서 폰트를 다운 받을 수 있지만,dmg파일은 또 따로 zip프로그램을 받아 압축을 풀어야 하는 점.. ttf파일을 공유합니다      otf파일은 용량이 큰 ..

안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게 도와줍니다.  min() 함수 역할: 주어진 값들 중에서 가장 작은 값을 반환합니다. 주로 너비나 높이 혹은 폰트사이즈에서 최솟값을 지정할 때 사용합니다.사용예시:.tit { font-size: min(3vw, 20px)} min(3vw, 20px)은 3vw와 20px 중 더 작은 값을 폰트 크기로 사용한다는 뜻으로, (vw는 뷰포트 너비의 1%를 의미합니다.) 화면이 너무 넓어서 3vw가 20px보다 크게 된다면, 폰트 크기는 20px로 고정될 거고, 반대로 화면이 좁아서 3vw가 20px보다..

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

안녕하세요 찐망고입니다.  오늘은 Gmarket Sans 폰트에 대해 이야기해보려고 합니다. 현대적이면서도 친근한 느낌을 주는 산세리프 폰트로, 특히 글자 간격이 넓어 가독성이 뛰어난 것이 특징입니다.  Gmarket Sans는 누구나 제약 없이 자유롭게 수정하고 재배포할 수 있는 오픈 라이선스 폰트인데요.이러한 라이선스의 자유로움 덕분에 다양한 프로젝트에서 부담 없이 사용할 수 있습니다.폰트 자체가 갖고 있는 장점으로 인해 브로슈어, 포스터 같은 다목적 디자인 작업에 적합하며, 텍스트의 가독성을 높이기 위해 고려할 만한 좋은 폰트 입니다. 그러나, 웹 관련 작업에서는 상황이 조금 다른데요.다양한 대체 폰트들이 등장하면서 Gmarket Sans의 사용이 상대적으로 줄어드는 경향이 있습니다. 웹 환경에서는..

안녕하세요 찐망고입니다.웹에서 쓰는 폰트 관련 글들이 조회수가 높더라고요..제가 또 친절하게 설치파일과 웹폰트를 공유하기도 해서 그렇겠죠? TTF 파일이나 OTF 파일은 로컬에 설치하는 글꼴 파일입니다.반면에, 웹에서 사용하는 폰트는 WOFF(웹 오픈 폰트 형식)과 WOFF2 같은 파일 형식을 사용해요.@font-face { font-family: 'SUITE'; font-weight: 300; src: url('./SUITE-Light.woff2') format('woff2');}@font-face { font-family: "Pretendard"; font-weight: 100; src: url(Pretendard-Thin.woff) format(woff);} 위 코드..

안녕하세요 찐망고입니다. 오늘은 참고할 만한 우리나라 기업의 기술블로그들을 공유해 볼 건데요.이 블로그들은 다양한 기술적인 인사이트와 디자인 시스템에 대한 내용을 담고 있어,여러 분야의 최신 트렌드와 실무에 대해 배우는데 도움이 될 것 같아 포스팅해봅니다.  1. 네이버 D2네이버 D2(Developer`s Delight)는 네이버에서 운영하는 기술 블로그로, 개발자와 엔지니어들을 대상으로 다양한 기술적 인사이트와 정보를 제공하는 플랫폼인데요. 이 블로그는 네이버 개발자들이 직접 작성한 글을 통해 웹, 모바일, 인공지능, 빅데이터 등 다양한 분야의 최신 기술 트렌드와 개발 경험을 다루는 글들이 올라옵니다. 디자인시스템을 개발에 적용하는 방법피그마와 git을 활용하여 자동화된 디자인 시스템을 구축하는 방법..

안녕하세요 찐망고입니다.오랜만에 reset문서를 수정해 봅니다.  1. 기본 HTML 요소의 초기화목적: 모든 기본 HTML 요소의 여백과 패딩을 제거하고, 기본 글꼴 스타일을 초기화.코드:html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strong, sub, sup, var,b, u, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,arti..

안녕하세요 찐망고입니다 SUIT폰트가 있고SUITE폰트가 있더라구요. 전체적인 텍스트에서 손글씨 느낌이 난다 생각했는데손글씨를 기반으로해서 만들었다고 하네요. 아무래도 다른 Noto Sans Kr, Pretendard폰트들 보단 가독성이 떨어질 수 있지만,디자인적인 요소에서는 최고 일 것 같아요.귀엽고 아기자기한 사이트에 잘 어울릴 것 같죠? 아래는 SUITE 폰트로 만든 메인 섹션 중 일부인데, 참고하시면 좋을 것 같아요.     otf, ttf, woff2 파일 다운 가능합니다.https://sun.fo/suite/ Sun sun.fo  CSS 코드@font-face { font-family: 'SUITE'; font-weight: 300; src: url('./SUITE-Light.woff2') f..

안녕하세요 찐망고 입니다.  settings.json 파일은 VSCode의 사용자 설정을 저장하는 JSON 형식의 파일인데요.이 파일을 통해 VSCode의 다양한 설정을 커스터마이즈할 수 있습니다.  VSCode에서 settings.json 파일을 여는 방법: VSCode 실행: VSCode를 실행명령 팔레트 열기: Ctrl + Shift + P (Windows/Linux) 또는 Cmd + Shift + P (Mac)를 눌러 명령 팔레트를 열기명령 입력: "Preferences: Open Settings (JSON)"을 입력하고 선택 { "open-in-browser.default": "firefox", "diffEditor.wordWrap": "on", "editor.wordWrap":..