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

안녕하세요 찐망고입니다. 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":..

안녕하세요 찐망고입니다. 이전에 그라디언트를 이용하여 마우스 hover할때 밑줄 애니메이션 효과를 적용하는 포스팅을 한적이 있는데요. 마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션안녕하세요 찐망고입니다. 오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr https://www.yesan.go.kr/chusa.duiweb.tistory.com 오늘은 텍스트에 배경색이 아래서 위로 채워지는 효과를 포스팅 할 예정입니다. 예시 사이트를 보면 스크롤 이동시 텍스트에 배경색이 채워집니다.     CSS코드h2 { color..

안녕하세요 찐망고 입니다.오늘은 데이터베이스 도메인 관련 포스팅을 해볼까 하는데요. 인터넷 주소의 도메인이 아니라, 데이터베이스에서 사용되는 도메인에 대해 설명드릴게요.  데이터베이스 도메인은 주로 다양한 데이터베이스 시스템에서 사용됩니다.회사 내부 시스템: 직원 정보, 급여, 재고 관리 시스템 등에서 사용돼요. 예를 들어, 직원의 나이, 이름, 급여, 입사 날짜 등을 저장할 때 각 속성마다 올바른 형식과 범위를 정해두죠.웹 애플리케이션: 웹사이트나 앱에서 사용자 정보를 관리할 때 사용돼요. 예를 들어, 회원 가입 시 이름, 나이, 이메일 주소 등을 입력받을 때 올바른 형식으로 입력되도록 도와줘요.정부 및 공공기관 데이터베이스: 주민등록 시스템, 세금 신고 시스템 등에서 정확하고 일관된 데이터를 저장하기..