코드펜 사용법14 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. CodePen - 코드펜 에디터 레이아웃을 변경하기 코드펜 에디터 가로로 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜의 기본 레이아웃은 보시는 거처럼 상단에 코드를 작성할 수 있는 코드들이 있고 결과는 아래에 표시되는 형태를 취합니다. 개인적으로는 와이드 화면에서 위와 아래로 나누는 화면은 효율적이지 못한 거 같습니다. 그리고 코드가 한눈에 보이는 건 위아래로 나열할 때 저는 좀 더 편한 걸 느낍니다. ● 2. 화면 상단에 Change View를 클릭합니다. 그럼 "Editor Layout"에 3가지 형태의 레이아웃 존재합니다. 이중에 하나를 선택하면 다르게 코드 작성이 가능합니다. 나머지 레이아웃들은 모두 와이드 화면에 왼쪽과 오른쪽에 코드 작성 창이 위치한 방식입니다. ● 3. 왼쪽에 코드 창이 위치한 레이아웃입니다. 요즘처럼 16대 9 비율.. 2021. 1. 9. CodePen - 코드펜 에디터(editor) 테마 변경하기 Pen 개발 창 밝게 바꿔 보기 안녕하세요. 고코더 입니다. ● 1. 코드펜은 기본적으로 다크 테마가 기본입니다. 익숙하기도 합니다. 하지만 간혹 어두운 테마를 싫어하는 개발자도 있고, 우리의 눈은 흰 바탕에 검은 글자가 가장 이상적이라는 글을 본 기억도 있습니다. 사람마다 성향이 다르므로 코드 펜에서는 여러 가지 테마를 준비해놓았습니다. 이번 시간에는 좀 밝은 버전으로 에디터 창을 변경해보겠습니다. ● 2. 로그인 후에 프로필을 클릭해 Settings를 클릭합니다. ● 3. 그리고 왼쪽 탭에서 "Editor Preferences"을 클릭합니다. 에디터의 설정을 바꿀 수 있는 공간입니다. 그러면 테마를 바꿀 수 있는 기능이 맨 위에 보이게 됩니다. ● 4. 여기서 "Light Themes"에서 "Clas.. 2021. 1. 9. CodePen - 코드펜 Pen 생성하기, 삭제하기 펜을 만들고, 지우는 기초적인 작업 배워보기 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용하는 가장 기초적인 사용법인 Pen을 생성하고 삭제하는 방법을 알아보겠습니다. Pen이라는 단위는 코드펜에서 사용하는 하나의 아이템입니다. 웹으로 치면 하나의 페이지라고 생각하면 쉽습니다. ● 2. 로그인한 후에 코드펜에 접속하면 아래처럼 Work 창이 나타납니다. 여기서 왼쪽 위에 Create에서 Pen을 클릭합니다. ● 3. 그럼 아래처럼 여러 Pen의 종류가 나타납니다. 가장 기본적인 단위인 Pen을 생성해보겠습니다. 그 밖에 다른 Pen들은 차차 알아가 보도록 하겠습니다. ● 4. 펜을 클릭하면 우리가 자주 보게 될 펜 코드 창이 나타납니다. 여기서 프런트엔드의 전반적인 개발을 연습해볼 수 있습니다. h.. 2021. 1. 9. CodePen - 코드펜 "Add to Collection" 핀 기능 사용하기 코드펜 Pin으로 고정하기 안녕하세요. 고코더 입니다. ● 1. 코드펜에서는 Pin(핀)이라는 기능을 사용할 수 있습니다. 흔히 사무실에서 중요한 문서를 핀으로 꽃을때 사용하는 그 핀을 말합니다. 그래서 회사에 가면 이런 펜들이 회의실에 많이 볼 수 있습니다. 코드펜에서는 이런 핀과 같은 기능을 제공합니다. 살짝 중요한 핀을 잘보이는 곳에 꽃아두고 사용할 수 있습니다. ● 2. 코드펜에서 이전 시간에 만든 Pen을 확인 가능합니다. Your Work라는 탭에서 확인이 가능합니다. 여기서 만든 Pen에 점 세 개를 클릭합니다. https://codepen.io/your-work ● 3. 그러면 세 개의 메뉴가 나타납니다. 여기서 "Add to Pins"를 클릭합니다. 위에서 말한 해당 작품을 핀에 꼽아둘 .. 2021. 1. 9. CodePen - 코드펜 "Email Needs Verification" 이메일을 인증하기 코드펜 이메일 유효성 체크 안녕하세요. 고코더 입니다. ● 1. 코드펜에서는 이메일 인증을 하지 않고 우선 회원가입이 가능합니다. 하지만 결국은 인증을 받아야 합니다. 우선 사용을 할 수 있도록 유효성 체크를 미루어놓았을 뿐입니다. 하루 정도 코드펜을 사용하다 보면 아래와 같은 경고 팝업이 나타납니다. Email Needs Verification Your email address must be verified before you can create your first project. Check your inbox for the verification link, or visit your account settings to resend the email. View Account Settings ● 2. 해당.. 2021. 1. 8. CodePen - 코드펜 저작권은? 무료? 코드펀 가져다 써도 되나? Licensing 은? 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용하다보면 좋은 소스들이 가득합니다. 그런데 가끔 이런 생각이 듭니다. 이걸 그대로 내 홈페이지에 사용해도 될까? 라는 의문입니다. 우선 라이센스 부분에서는 코드펜에서도 따로 페이지를 구축하여 설명을 하고 있습니다. 그래도 더 간단하고 핵심만 요약해드리겠습니다. 1. 모두 무료이다 2. 정확히 말하면 MIT 라이센스다. 3. 공개하기 싫으면 PRO를 구매해야 한다. 4. 코드펜의 코드는 공유하기 위해 사용한다. ● 2. 다시 말씀 드리면 이용은 할 수 있지만 라이센스를 꼭 명시해야 합니다. 라이센스는 펜에서 자동으로 MIT 형식으로 기록되어 있습니다. 이를 카피하여서 사용하고 싶은 홈페이지에 명시하시면 됩니.. 2021. 1. 8. 이전 1 2 다음
