코드펜21 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을 추가하고, 삭제하였습니다. 이번에는 이 펜을 복원하거나 3일의 유예기간 없이 완벽히 삭제하는 방법을 배워 보겠습니다. ● 2. 삭제된 펜은 아래 URL에서 확인이 가능합니다. 삭제한 펜이 보입니다. https://codepen.io/your-work?item_type=deleted_item ● 3. 그대로 유지하면 3일 후에 자동으로 삭제되어 있어서 복원할 수 없다고 명시되어 있습니다. ● 4. 그리고 삭제된 펜은 복원한다고 해도 조회수나 좋아요 수는 모두 초기화 됩니다. 오직 소스 코드만 되돌려진다고 명시되어 있습니다. ● 5. Restore를 누르면 삭제된 펜은 다시 복원됩니다. ● 6. Pens.. 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. CodePen - 코드펜 초보를 위한 튜토리얼 따라 해보기 코드펜이 뭔지 체험할 수 있는 tutorial 안녕하세요. 고코더 입니다. ● 1. 코드펜을 가입하였다고 사용할 준비가 되었다면 이제 코드펜이 제시하는 회원가입시 나타나는 튜토리얼을 한번 따라해보시기 바랍니다. 만약 가입 이후에도 튜토리얼이 궁금하다면 아래 URL을 접속하여서 언제든지 복습하실 수 있습니다. ● 2. 접속하면 아래처럼 2분정도 시간이 걸린다고 하면서 튜토리얼을 권장합니다. 코드펜이 무엇인지 백문이 불여일견입니다. 한번 저와 함께 해보시길 바랍니다. https://codepen.io/pen/tour/welcome/start ● 3. 처음 나타나는 화면은 HTML입니다. 초딩학교 시절부터 배우던 그것이 맞습니다. 웹의 가장 기초가 되는 부분입니다. 자동으로 튜토리얼이 Hello World!를.. 2021. 1. 8. CodePen - 코드펜 공식 로고 다운로드 CodePen Logo 다운로드 안녕하세요. 고코더 입니다. ● 1. 개인적으로 깃허브 다음으로 마음에 드는 사이트 로고가 있다면 코드펜인거 같습니다. 물런 구글이나 애플처럼 더할 나위 없이 멋진 로고도 있지만 사이트 기준으로 말씀드리면 코드펜은 복잡한 도구 패턴이 마음에 듭니다. 그래서 로고를 다운로드 받아서 글 이미지 상단에 쓸려고 찾아보니 이런 사이트가 있어 공유 드립니다. ● 2. 해당 URL를 접속하면 코드펜의 공식 로고를 다운로드 받을 수 있는 페이지가 있습니다. PDF와 PNG 파일을 동시에 제공하고 있습니다. https://blog.codepen.io/documentation/logos/ ● 3. 다운로드 방식은 클릭하면 해당 이미지 URL로 접속 되므로 마우스 오른쪽 버튼을 눌러 "다른 .. 2021. 1. 4. 이전 1 2 3 다음
