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

스크롤의 위치에 따라 실행되는 애니메이션을 만들어볼건데요~ 스크롤 이벤트라고 하죠? 스크롤을 내릴 때마다 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..

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

안녕하세요 찐망고입니다. 클론코딩을 하다보면 기본폰트 외 다양한 폰트를 만나게 되는데가끔 무료폰트를 만나면 기분이가 좋습니다. 형광펜으로 칠한 텍스트는 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'; ..

안녕하세요 찐망고입니다. 제가 벌써 나흘째 포스팅을 꾸준히 하고 있어요.. 예약포스팅이긴 하지만.. 오늘이 마지막이긴 하지만.. 오늘은 자바스크립트를 이용하여 페이지가 로드 되었을 때 타이핑 하며 나오는 텍스트를 만들어 볼거에요.. 일단 일반 타이핑 예제랑은 다르게 텍스트가 위쪽은 테두리만... 아래쪽은 면색이 포함되어서 요소가 두개로 분리되어야 하는 상황 학생 포트폴리오 - OB리뉴얼 사이트 // HTML // CSS .text-box { display: flex; justify-content: center; align-items: flex-start; height: 200px; } .text-box > span { display: block; -webkit-text-fill-color: transpa..

안녕하세요 찐망고 입니다. 제목짓는거 왜이리 어렵죠? 헤메고있는 누군가에게 조금이라도 도움이 되길 바라며 오늘도 시작해볼게요. 네비게이션에 보면 각 메인메뉴에 마우스를 올리면 아래 depth들이 한번에 나오고 각 메뉴이름에 맞춰 depth가 나오는 배경아래 하단에 text가 나오는 작업을 해보려고 합니다. 저는 개인적으로 html과 css로 셋팅을 끝내놓은 후 JS작업을 하였습니다. 이런 류의 메뉴 디자인은 웹접근성을 생각하며 작업을 하기가 참.. // HTML COMPANY BRAND ESG NEWS&MEDIA CAREER 제목 히든제목 COMPANY ... BRAND ... ESG ... NEWS&MEDIA ... CAREER ... // CSS .nav-bg { position: absolute; ..

웹페이지 접속 할 때 숫자 카운팅 되면서 움직이는.. 그런것들을 만들고 싶었다면? // HTML 0 // JS // 숫자 카운트 const counter = ($counter, max) => { let now = max; const handle = setInterval(() => { $counter.innerHTML = Math.ceil(max - now); // 목표수치에 도달하면 정지 if (now { // 카운트를 적용시킬 요소 const ..

안녕하세요 찐망고입니다. 아.. 정말 매일매일 포스팅하시는 분 리스펙 바쁘니까 바로 본론에 들어가서 적응형 사이트를 만들다보면 pc와 mobile사이트를 따로 작업하게 되는데, pc의 해상도 기준을 최소 1366정도 잡거든요.. 그 이하 해상도에선 가로스크롤이 생기게요~ 문제는 header가 position: fixed인 경우 width길이만큼 고정이 되어버린다는 거죠~ 가로 스크롤을 이동해도 헤더는 움직이지 않습니다 저걸 무시하고 마크업 하는 분들도 있고, 움직이게는 했는데 전체 메뉴가 보이지 않게 셋팅한 사이트들도 많더라구요 이렇게 가로스크롤을 해도 nav가 제대로 보이는 게 좋겠죠? // HTML 제목 // CSS header { position: fixed; width: 100%; z-index:..

안녕하세요 찐망고입니다. 오늘은 Visual Studio Code에서 ftp를 설치하여 연결하는 방법에 대해서 포스팅을 시작합니다. 다운로드 주소 링크입니다. https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud..