Frontend Developer를 향해 !

프로젝트 진행중 갑자기 중간에 웹폰트를 바꾼다고해서 검색해본 폰트인데 애플에서 만든 차세대 폰트네요. 바로 SFPro폰트.. 다행히 검색을 좀 해보니 누군가가 벌써 정리해서 올려놔서 구글링 한 정보들을 간단히 남겨놓습니다.. 필요하신 분들은 읽어보고 바로 쉽게 적용하시면 됩니다. gist.github.com/mfd/614e2e80a22b878bde63cb471cbe677e San Francisco Web Font San Francisco Web Font. GitHub Gist: instantly share code, notes, and snippets. gist.github.com 링크1 CSS 기본 시스템 폰트 설정 (2019) 각 운영체제 별로 기본 시스템 폰트를 로드하는 CSS 코드. 영문 시스템 ..

관련 글 보러가기 → WAI-ARIA 바르게 사용하기 1부 - tab 컨트롤 활용하기 널리 알리는 기술 소식 다양한 접근성과 사용성, UI 개발에 대한 소식을 널리 알리고 참여하세요! Spread your knowledge! 구독 아티클 WAI-ARIA 바르게 사용하기 1부 - tab 컨트롤 활용하기 Webacc NV 2017-11-13 nuli.navercorp.com See the Pen horizontal Tab WAI-ARIA by jit0704 (@jit0704) on CodePen. See the Pen vertical Tab WAI-ARIA by jit0704 (@jit0704) on CodePen.

관련 글 보러가기 → 웹페이지에서의 커스텀 컨트롤 사용 시 키보드 접근성 적용하기 널리 알리는 기술 소식 다양한 접근성과 사용성, UI 개발에 대한 소식을 널리 알리고 참여하세요! Spread your knowledge! 구독 아티클 웹페이지에서의 커스텀 컨트롤 사용 시 키보드 접근성 적용하기 W nuli.navercorp.com See the Pen 커스텀 컨트롤 사용 시 키보드 접근성 적용 by jit0704 (@jit0704) on CodePen.

부트스트랩에서 사용하는 class명을 정리해 보았습니다. 부트스트랩을 안쓰더라도 개인적으로 프로젝트 할때 class명 네이밍시 너무 괴로워서 참고를 하기 위해서 정리하는것도 있습니다. 최대한 간단하게 정리하기 위해 젠코딩 방식으로 작성한 점 참고해주세요. 부트스트랩 네이밍은 시맨틱해서 네이밍만 봐도 이해는 가나 생소한것도 있어서 설명을 간단하게 적어놨습니다. 레이아웃 .container (고정된 너비) .container-fluid (너비가 100%인 컨테이너) 그리드 부모요소 : .row 자식요소 : .col-*-* ㄴ 첫번째 * : .xs, .sm, .md, .lg ㄴ 두번째 * : 컬럼 숫자(최대 12까지임) 타이포그래피 / 텍스트 h1 ~ h6 small mark abbr blockquote dl..

* 작업자가 자바스크립트 기본정도만 알고 있다는 가정하에 작성하였습니다. * 따라서 아래 순서중에 해당 지식이 있으시면 건너뛰시고 보시기 바랍니다. (웹팩 설치 이해를 위한 선행 학습) 1.1 Node.js Basics Node.js Basics | PoiemaWeb Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임으로 주로 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Node.js는 브라우저 외부 환경에서 자바스크립 poiemaweb.com 1.2 1.1을 완료하면 이걸 약간 응용하여 node.js로 index.html local서버 띄우는 방법 node.js 기초 - local서버 띄우기 https://poiemaweb.com/nodejs-basic..

https://poiemaweb.com/nodejs-basics Node.js Basics | PoiemaWeb Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임으로 주로 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Node.js는 브라우저 외부 환경에서 자바스크립 poiemaweb.com 위 사이트 그대로 따라하면 되긴하지만 index.html로 띄우는것이 아니라 단순 js안에서 서버를 실행시킵니다. 이 부분을 index.html로 바꾸어 보았습니다. 위 사이트 하단에 있는 app.js를 아래처럼 바꿔서 실행을 하게 되면 html로 서버가 띄워집니다. const http = require('http'); var fs = require('fs'); ht..

출처 : https://sangmoo.tistory.com/309

Atom One Dark Theme Color Highlight GitLens — Git supercharged hightlight-selections-vscode indent-rainbow Korean Language Pack for Visual Studio Code Live Sass Compiler Live Server Sass Sass Lint vscode-icons { "liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", "savePath": "~/../" // "savePath": "~/../css" } ], "liveSassCompile.settings.excludeList": [ "**/nod..

링크 참고