![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/rf7Fh/btsjPEDrWm5/qjvQLRyHltWTY0V9oMxyB1/img.png)
Noto Sans KR폰트는 현재 웹사이트에서 가장 많이 사용하는 폰트 중 하나이다. 구글웹폰트에서 지원하고 있고, 폰트 두께가 다양하고, 한글을 지원하므로 앞으로도 꾸준히 쓰여질 전망이다. Noto Sans KR - 구글 웹폰트 Download family누르면 otf 설치파일 다운 가능 Noto Sans KR - woff파일 // CSS (절대경로) @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); // CSS (상대경로) @charset utf-8; @font-face { font-family: 'Noto Sans KR'; font-style: nor..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bdJxJV/btsjKR41vKo/rrRcx2sbUQvHcZ1lCd6Qsk/img.png)
클론코딩을 하다보면 기본폰트 외 다양한 폰트를 만나게 되는데 가끔 무료폰트를 만나면 기분이가 좋습니다. 형광펜으로 칠한 텍스트는 Noto Sans Kr인데 확실히 단점을 보완한 서체같다 써보면 확실히 text-align과, letter-spacing을 잘 보완한 느낌이 있다. SUIT 폰트 - OTF, TTF, WOFF2 다운 가능 S U N N sunn.us // 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'; font-weigh..
안녕하세요 찐망고입니다. 제가 벌써 나흘째 포스팅을 꾸준히 하고 있어요.. 예약포스팅이긴 하지만.. 오늘이 마지막이긴 하지만.. 오늘은 자바스크립트를 이용하여 페이지가 로드 되었을 때 타이핑 하며 나오는 텍스트를 만들어 볼거에요.. 일단 일반 타이핑 예제랑은 다르게 텍스트가 위쪽은 테두리만... 아래쪽은 면색이 포함되어서 요소가 두개로 분리되어야 하는 상황 학생 포트폴리오 - 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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cHwyER/btsiBM4Z8xT/TGBmrDZMq9ZD2ad9u4RbKK/img.png)
안녕하세요 찐망고 입니다. 제목짓는거 왜이리 어렵죠? 헤메고있는 누군가에게 조금이라도 도움이 되길 바라며 오늘도 시작해볼게요. 네비게이션에 보면 각 메인메뉴에 마우스를 올리면 아래 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 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bpR9FJ/btsiM9RDUdA/K3Aq1RFf9NrRQOx3VQmavk/img.png)
안녕하세요 찐망고입니다. 아.. 정말 매일매일 포스팅하시는 분 리스펙 바쁘니까 바로 본론에 들어가서 적응형 사이트를 만들다보면 pc와 mobile사이트를 따로 작업하게 되는데, pc의 해상도 기준을 최소 1366정도 잡거든요.. 그 이하 해상도에선 가로스크롤이 생기게요~ 문제는 header가 position: fixed인 경우 width길이만큼 고정이 되어버린다는 거죠~ 가로 스크롤을 이동해도 헤더는 움직이지 않습니다 저걸 무시하고 마크업 하는 분들도 있고, 움직이게는 했는데 전체 메뉴가 보이지 않게 셋팅한 사이트들도 많더라구요 이렇게 가로스크롤을 해도 nav가 제대로 보이는 게 좋겠죠? // HTML 제목 // CSS header { position: fixed; width: 100%; z-index:..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/A6vvg/btrDwPMXeXl/1qt1t9Wlo9ronqSrx3hie0/img.png)
안녕하세요 찐망고입니다. 오늘은 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..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/drZ1ww/btrDuw1mVR4/Wt38BrXo0KFl8GdOomaYP0/img.png)
안녕하세요 찐망고입니다. 오늘은 HTML에디터 관련 포스팅을 해보려고 하는데요~ 일단 에디터를 사용하게 되면 코드를 좀더 깔끔하고 직관적으로 볼 수 있고, 자동완성기능이 있어 코딩하는데 있어 작업이 수월한 장점이 있습니다. 텍스트 에디터, 웹 에디터, 통합개발환경(IDE), 웹기반코드 에디터 로 나눌 수 있겠네요 워낙 많은 에디터들이 있고, 각자 장단점이 있는데 그걸 포스팅하기엔 좀 무리가 있고.. 그나마 제가 사용해봤던 에디터 위주로 포스팅을 해볼게요 1. 서브라임텍스트 서브 라임 텍스트는 파이썬 API 용으로 작성된 사유 크로스 플랫폼 소스 코드 편집기입니다. 수많은 프로그래밍 언어와 마크업 언어를 네이티브로 지원하며, 플러그인을 사용하여 사용자에 의해 기능을 확장할 수 있습니다. 서브라임 텍스트는 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Mb5ht/btrtnCX7WIg/KZIuHOnn1v5V79okQbYqJK/img.png)
안녕하세요 찐망고입니다. 오늘은 자바스크립트의 연산자에 대해서 포스팅하도록 하겠습니다. 산술 연산자 자바스크립트의 산술 연산자에는 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다. 수학에서 배웠던 것처럼 숫자형 값을 계산할 수 있습니다. 20 + 10; // 30 20 - 10; // 10 20 * 10; // 200 20 / 10; // 2 let subject = 'javascript'; let score = 100; console.log(subject + '과목 성적은 ' + score + '점 입니다.'); // javascript 과목 성적은 100점 입니다. let cal = 3 - 5 * 6 / 2 + 3; console.log(cal) // -9 덧셈(+) 연산자인 경우에만 문자..
안녕하세요 찐망고입니다. 수업을 하다 보니 바닐라 JS를 언급하는 친구들이 늘었더라구요 jQuery와 바닐라 JS에 관련하여 포스팅을 해보려 합니다. 자바스크립트는 프론트 사이드에서 꽤나 많이 언급되어 사용되는 언어이자 서버사이드 개발이 가능한 언어랍니다. 물론 프론트 영역에서의 사용이 절대적이기 때문에 자바스크립트를 기반으로 한 프레임워크들이 현재 대세로 자리 잡고 있어요. 페이스북 엔지니어가 제작한 React, 구글 엔지니어가 제작한 Vue, 대규모 애플리케이션에 적합한 Angular 등이 이에 해당합니다. 또 프레임워크라고 하기에는 아주 조금 애매한 감이 있지만 현업 웹 개발에서 많이 사용하는 jQuery도 결국 자바스크립트의 라이브러리 중 하나입니다. jQuery란? 제이쿼리(jQuery)는 오픈..
- Total
- Today
- Yesterday
- 웹디자인
- 자바스크립트숫자카운트
- 피그마플러그인
- 웹접근성
- boxmodel
- JavaScript
- CSS3
- slickAPI
- css4
- 슬라이드플러그인
- 웹표준
- uxdesign
- css
- uiux
- 디자인팁
- JavaScriptTips
- 시멘틱마크업
- 스마트폰해상도
- 크로스브라우징
- 코딩교육
- 프로그래밍기초
- css그리드
- Slick
- Border
- uidesign
- margin
- 포토샵합성
- 반응형웹
- padding
- UI디자인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |