본문 바로가기

전체_컨텐츠2215

CodePen - 코드펜 작업을 자동 저장하기 코드펜 오토 세이브 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용할 때는 저장이 중요합니다. 언제 갑자기 브라우저가 종료돼버리면 작업한 것들이 모두 날아가버리기 때문입니다. 펜을 수정 창에서 "Settings"를 클릭합니다. ● 2. Behavior에서 "Save Automatically"를 활성화 하시기 바랍니다. 그래서 자동으로 시간마다 저장이 실행되는 이 부분을 On으로 설정하면 30초마다 자동으로 결과 물이 저장되므로 브라우저 종료로 인한 작업 날림이 적어질 것입니다. 마무리 기본 옵션은 자동 저장입니다. 괜히 off 해놓고 하다가 날렸네요. 2021. 1. 20.
테이어(Theia) - 크롬에서 VSCode를 사용하는 방법 / theia-ide.org 온라인 IDE 테이어 안녕하세요. 고코더 입니다. ● 1. 재밌는 클라우드 온라인 개발 프로그램을 하나 소개해드리려고 합니다. 현재 무료 IDE 중에 최고라고 하면 저는 단연 비주얼 스튜디오 코드를 뽑습니다. 이클립스라는 절대 강자가 있지만 자바에 한정된 무료 도구이지만, VSCode는 만능입니다. 이 대단한 도구를 온라인에서 사용이 가능합니다. 일렉트론으로 개발했으니 온라인으로 실행도 가능하겠네요. ● 2. 테이어를 사용하기 위해 해당 사이트에 접속합니다. 그리고 "Try in Gitpod"를 클릭합니다. https://theia-ide.org/ ● 3. 그럼 이렇게 현재 로그인된 깃허브와 연동할 수 있는 화면이 나타납니다. "Authorize gitpod-io"를 클릭합니다. ● 4. 그럼 자동으로 .. 2021. 1. 19.
자바스크립트, CSS 브라우저별 호환성 체크 사이트 - caniuse.com JAVASCRIPT, CSS 크로스 브라우징 호환 테스트 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 정말 유익한 사이트를 하나 소개해드리겠습니다. 크로스 브라우징 환경에서 동작하는 웹사이트를 만들기 위해서는 기본적으로 호환성이 뛰어난 문법을 사용해야 합니다. 특히 익스플로러가 문제를 일으킵니다. 매번 브라우저별로 테스트를 할 필요 없이 이 사이트에서 간단하게 호환성을 체크할 수 있습니다. ● 2. 캔아이유즈 닷컴입니다. 해당 사이트를 접속하면 빨간 검색창이 눈에 먼저 보입니다. 이 검색창에 궁금한 문법을 입력하면 됩니다. 가령 예를 들면 https://caniuse.com/ ● 3. 자바스크립트에서 배열을 찾아주는 "findindex"를 검색해보았습니다. 브라우저별 호환성을 보니 ie11에서도 .. 2021. 1. 19.
무료 폰트 - 빙그레 서체 다운로드 / 첨부파일 / 싸만코체, 메로나체, 따옴체 빙그레체 무료 다운로드 안녕하세요. 고코더 입니다. ● 1. 요즘 각 기업에서 무료로 폰트를 만들어 제공하는 경우가 많습니다. 그리고 해당 폰트들은 기업의 이미지를 담아 그런지 쓸만하고 이쁩니다. 이번 시간에는 그중에서도 귀여운 느낌이 가득한 빙그레 서체를 알아보는 시간을 가져보겠습니다. ● 2. 해당 빙그레 서체를 배포하는 사이트를 방문하면 현재 5개의 폰트를 배포 중입니다. 당연히 기업까지 모두 무료입니다. http://bingfont.co.kr/index.html ● 3. 해당 URL로 접속하면 빙그레 폰트를 미리 사용해보시고 다운로드가 가능합니다. http://bingfont.co.kr/bingfont.html ● 4. 첨부파일을 다운로드해서 설치하셔도 됩니다. 설치 버전 폰트 파일 버전 마무리 .. 2021. 1. 19.
노션 - 제목 블록 사용하기 / Notion 노션에서 제목1, 제목2, 제목3 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 노션에서 제목 블록에 대해 알아보려고 합니다. 제목은 HTML에서 "제목 태그"로 사용하는 그 개념과 같습니다. 해당 콘텐츠에 대한 대제목, 중제목, 소제목을 표현할 수 있습니다. HTML에서는 1부터 6까지의 제목을 지원하지만 현재 노션에서는 h1, h2, h3 이 3가지의 제목만을 사용 중입니다. ● 2. 블록을 생성 레이어를 열면 이렇게 1부터 3까지의 제목 태그가 있습니다. 대, 중, 소로 나뉘어 있습니다. ● 3. 해당 제목 태그를 차례대로 사용하였습니다. 맨 위에는 페이지의 제목이고 밑에부터 블록을 사용한 제목입니다. ● 4. 제목은 대, 중, 소 차례대로 사용하는 걸 권장합니다. 아래 그림은 정상적.. 2021. 1. 19.
HTML - <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 제목요소 제목 태그 사용법 안녕하세요. 고코더 입니다. ● 1. 책을 읽다 보면 언제나 제목이 중요합니다. 표지에 적혀 책의 이름을 나타내는 제목 그리고 각 챕터마다의 제목까지 나타냅니다. HTML에서도 이런 제목을 나타내는 태그가 있습니다. 바로 ,,,,, 가 그 주인공입니다. 예제 사용법 ● 2. 사용법은 아주 단순합니다. 제목 태그 안에 텍스트를 넣으면 완성입니다. 1부터 6까지 크기가 비례합니다. 1이 가장 크고 6이 가장 작습니다. 제목 레벨 1 제목 레벨 2 제목 레벨 3 제목 레벨 4 제목 레벨 5 제목 레벨 6 ● 3. 결과 화면은 아래와 같습니다. ● 4. 문서 구조의 대한 정합성을 위해서 해당 태그는 순서에 맞게 사용하는 게 좋습니다. 제목 레벨 1 제목 레벨 6 제목 레벨 1 제목 레벨 2 마.. 2021. 1. 19.
티스토리 - Tistory 코드펜 소스 첨부하기 Tistory Codepen 글쓰기에 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜의 에디터를 티스토리에 붙여 넣어서 보여주는 방법을 알아보겠습니다. 특히 코딩을 강의하는 블로거들에게는 아주 좋은 방법이 될 거라 생각합니다. ● 2. 코드펜에서 퍼오고 싶은 소스에 들어가서 "Embed"를 클릭합니다. ● 3. "Copy & Paste Code"에서 iframe를 선택하고 소스를 복사합니다. ● 4. 그다음 티스토리 새로운 글쓰기 에디터에서 HTML 모드를 선택합니다. ● 5. 그리고 코드펜에서 복사해온 소스를 그대로 붙여 넣습니다. 그럼 이런 형태로 iframe으로 시작하고 끝나는 코드가 입력됩니다. ● 6. 다음 다시 기본 모드를 클릭하게 되면 ● 7. 이렇게 아주 깔끔하고 보기 좋은 코드펜 소.. 2021. 1. 19.
React.js - 코드펜(CodePen)으로 리액트 실행하기 CodePen으로 리액트 실행 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 코드펜을 사용하여 리액트를 실행하는 방법을 알아보겠습니다. 코드펜은 제 블로그에서 다루었던 프런트엔드 개발을 연습할 수 있는 온라인 IDE 사이트입니다. 해당 사이트의 사용법은 해당 "코드펜 사용법" 태그를 통해서 학습해주시기 바랍니다. 하지만 보통의 개발자라면 바로 사용법을 익힐 수 있기 때문에 그대로 따라오 오셔도 될 거 같습니다. ● 2. 코드펜을 로그인하고 Pen을 생성합니다. 무료 사용자도 사용이 가능합니다. ● 3. 펜이 생성되었다면 Settings를 클릭합니다. ● 4. 왼쪽 탭에 JS를 클릭합니다. 자바스크립트 설정을 할 수 있는 화면이 오른쪽에 나타납니다. 그리고 "Add External Scripts/Pe.. 2021. 1. 18.
CDN - JSDelivr js,css 버전 변경하기 / 구버전 사용하기 JSDelivr 구버전 소스 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSDelivr에서 구버전 소스를 참조하는 방법을 알아보겠습니다. JSDelivr는 강력한 js, css CDN 서버입니다. 게다가 무료입니다. 각종 필요한 라이브러리를 타 서버를 이용해 빠르게 사용할 수 있다는 건 분명 큰 장점입니다. 그리고 무엇보다 최신 버전의 라이브러리를 제공받아서 사용이 가능하다는 장점이 있습니다. 그런데 가끔 구버전의 라이브러리가 필요합니다. ● 2. 우선은 URL에 버전이 생성된 경우가 있습니다. 아래와 같은 경우는 URI 중간에 4.7.0이 있습니다. 이 부분은 버전입니다. 중간에 숫자를 변경하는 것만으로 버전을 변경 가능합니다. 이렇게 접속하면 4.7.0 버전의 CDN 소스를 사용 가.. 2021. 1. 18.