본문 바로가기

코드펜21

CodePen - 코드펜에서 소스 정렬하기 codepen.io 에서 소스 보기 좋게 만들기 안녕하세요. 고코더 입니다. ● 1. 코드펜은 프론트엔드를 연습하기 좋은 온라인 사이트입니다. 다양한 편의 기능은 언제나 봐도 일품입니다. 코드펜에서 제공하는 기능중에 하나가 바로 소스 정렬 기능입니다. ● 2. 코드펜에서 아래 화살표로 되어 있는 버튼을 클릭합니다. ● 3. "Format JavaScript"을 클릭합니다. ● 4. 보기 좋게 소스가 정렬됩니다. 기능도 매우 훌륭하여 정렬도 눈이 편하게 잘해주는거 같네요. 마무리 정렬 기능 중 가장 좋은거 같네요. 2021. 2. 13.
CodePen - 코드펜에서 미리보기(Preview)가 안보일때 코드펜 라이브 뷰 안 보일 때 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용하다 무엇을 잘못 만졌는지 화면처럼 미리 보기 화면이 깜쪽같이 사라져 버렸습니다. 당황스럽지만 차분하게 모든 버튼을 클릭하고 눌러봤지만 도저히 나타나지가 않네요. 그러다가 우연히 알아낸 건 매우 황당한 사실.. 바로 맨 밑에 두꺼운 바를 클릭해보았습니다. ● 2. 네 바로 미리보기가 제일 작가 되어서 바닥 맨 밑에까지 붙어버려서 보이지 않았고 이를 클릭하여 위로 올려보니 프리뷰가 다시 나타납니다. 와 이걸로 30분은 헤맨 거 같습니다. 결국 단순하게 프리뷰를 최소화시켜놓았던 것입니다... ● 3. 혹시 코드펜에서 코딩하시다가 프리뷰가 안 보이는 분들은 만 아래에 바를 클릭하여 올려 보세요.. 마무리 겨우 이런 이유 때문에 3.. 2021. 1. 23.
React.js - JSX에서 자바스크립트를 사용하는 방법 / 중괄호{} JSX에서 JavaScript 를 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에 대해 알아보았습니다. 자바스크립트와 XML 합성어로 만들어진 단어인 만큼 당연히 JSX에서는 스크립트를 사용할 수 있습니다. 하지만 규칙이 있고 방법은 어려운 부분은 아닙니다. 간단한 예제를 통해서 쉽게 학습할 수 있습니다. ● 2. JSX 태그안에서 중괄호 "{}"는 자바스립트를 사용할 수 있도록 합니다. 일종의 약속입니다. 이 부분만 안다면 자바스크립트를 원하는 곳에 자연스럽게 입력할 수 있습니다. 예제를 한번 살펴보겠습니다. ● 3. 스크립트 영역에서 name 이라는 변수에 "GoCoder"라는 텍스트를 입력하고 이를 element안에 변수를 함께 넣어서 문자열을 만들었습니다. 자바스크립트를 JSX 태그 안에 .. 2021. 1. 20.
CodePen - 코드펜 작업을 자동 저장하기 코드펜 오토 세이브 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용할 때는 저장이 중요합니다. 언제 갑자기 브라우저가 종료돼버리면 작업한 것들이 모두 날아가버리기 때문입니다. 펜을 수정 창에서 "Settings"를 클릭합니다. ● 2. Behavior에서 "Save Automatically"를 활성화 하시기 바랍니다. 그래서 자동으로 시간마다 저장이 실행되는 이 부분을 On으로 설정하면 30초마다 자동으로 결과 물이 저장되므로 브라우저 종료로 인한 작업 날림이 적어질 것입니다. 마무리 기본 옵션은 자동 저장입니다. 괜히 off 해놓고 하다가 날렸네요. 2021. 1. 20.
티스토리 - 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.
CodePen - 코드펜 소스 비공개는 유료 서비스 입니다. 코드펜 소스를 나만 보는 방법 안녕하세요. 고코더 입니다. ● 1. 코드펜은 누구나 무료로 프런트엔드 소스를 저장하고 실습하고 공유할 수 있는 좋은 사이트입니다. 그런데 기본 정책은 공개입니다. 즉 내가 만든 모든 소스들은 누군가 참고하고 수정할 수 있는 것입니다. 그런데 가끔은 비공개로 소스를 나만 가지고 싶을 때가 있습니다. 그럴 경우에는 로컬에서 개발하는 게 맞지만 코드펜에서도 소스를 비공개할 수 있는 방법이 있습니다. ● 2. 유료 서비스를 사용하면 코드펜에서는 "Private Pens, Collections, and Projects." 라는 서비스를 Annual Starter 부터 제공을 합니다. ● 3. 일명 코드펜 Pro가 되면 만들어놓은 소스를 공개하지 않고 혼자만 볼 수 있습니다. 1년에.. 2021. 1. 18.
CodePen - 코든펜 공식 영문 메뉴얼 사이트 코드펜 블로그에 나온 매뉴얼 안녕하세요. 고코더 입니다. ● 1. 요즘 나오는 서비스가 그러하듯이 코드펜 역시 자신들의 공식 매뉴얼을 제공합니다. 사이트 형태로 제공합니다. 모든 기능에 대한 설명이 나타나 있습니다. 단점은 역시 영문으로 되어 있는데요. https://blog.codepen.io/documentation/ ● 2. 크롬을 사용하셔서 한국어로 번역해보시길 바랍니다. ● 3. 그럼 한글로 자연스럽게 번역된 코드펜 매뉴얼을 확인할 수 있습니다. 조금 어색한 부분도 있지만 충분히 이해 가능한 수준입니다. 마무리 이상하게 공식 매뉴얼은 눈에 안 들어긴 하네요 2021. 1. 10.
CodePen - 코드펜을 웹에서 삽입할 수 있게 하기 / Embed 코드펜 에디터 다른 곳에서 보여주기 안녕하세요. 고코더 입니다. ● 1. 코드펜에서 작성한 코드를 에디터 창 그대로 웹으로 공유하는 방법을 알아보려고 합니다. 코드펜은 누구나 함께 소스를 오픈하고 개발하면서 서로의 작품을 공유하는 공간입니다. 가끔 좋은 펜(Pen)이 있다면 이를 웹페이지에 삽입할 수 있습니다. ● 2. 방법은 우선 Pen에 접속해서 embed를 클릭합니다. 해당 기능은 다른 웹페이지에 소스를 심을 수 있게 만들어 줍니다. ● 3. 그럼 이렇게 Embed 모드가 활성화됩니다. 여기에 있는 옵션을 사용하여 퍼갈 수 있게 됩니다. ● 4. iframe 이랑 HTML 모드가 존재합니다. 이는 방식의 차이입니다. ● 5. 소스를 확인해보면 HTML 모드는 P태그로 페이지에서 작동되도록 되어 있고.. 2021. 1. 10.

티스토리툴바