IT_Developers/Online IDE26 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 - 코드펜 프로필 변경 profile 수정 안녕하세요. 고코더 입니다. ● 1. 코드펜을 가입했다면 자신을 나타내는 프로필을 수정할 수 있습니다. 이름, 정보, 사진까지 가능한 모든걸 변경 할 수 있습니다.로그인 후에 해당 URL로 이동합니다. 프로필을 편집팔 수 있는 메뉴입니다. https://codepen.io/settings/profile ● 2. 첫번째로는 프로필 이미지를 변경합니다. "Choose File"을 클릭합니다. ● 3. 그리고 자신이 사용할 프로필 사진을 업로드하면 마무리 됩니다. ● 4. 그 다음 디스플레이상에 보여줄 이름, 위치, 이력을 남길 수 있습니다. 이는 나를 표현할 수 있는 기본이 됩니다. ● 5. 위에서 입력한대로 이렇게 프로필에 표시가 됩니다. ● 6. 그 다음은 자신의 포트폴리오를 나타낼 .. 2021. 1. 4. CodePen - 코드펜 공식 로고 다운로드 CodePen Logo 다운로드 안녕하세요. 고코더 입니다. ● 1. 개인적으로 깃허브 다음으로 마음에 드는 사이트 로고가 있다면 코드펜인거 같습니다. 물런 구글이나 애플처럼 더할 나위 없이 멋진 로고도 있지만 사이트 기준으로 말씀드리면 코드펜은 복잡한 도구 패턴이 마음에 듭니다. 그래서 로고를 다운로드 받아서 글 이미지 상단에 쓸려고 찾아보니 이런 사이트가 있어 공유 드립니다. ● 2. 해당 URL를 접속하면 코드펜의 공식 로고를 다운로드 받을 수 있는 페이지가 있습니다. PDF와 PNG 파일을 동시에 제공하고 있습니다. https://blog.codepen.io/documentation/logos/ ● 3. 다운로드 방식은 클릭하면 해당 이미지 URL로 접속 되므로 마우스 오른쪽 버튼을 눌러 "다른 .. 2021. 1. 4. CodePen - 코드펜 깃허브로 연동하여 가입하기 / github로 코드펜 가입하기 안녕하세요. 고코더 입니다. ● 1. 이메일로 쉽게 코드펜에 가입이 가능하지만 기존의 깃허브가 있다면 이를 연동하여 가입하는 방법을 추천합니다. 어차피 두개의 사이트의 속성이 비슷하므로 하나만 가입하면 더 편리합니다. 해당 코드펜 가입 URL로 이동하여 "Sign Up with GitHub"를 클릭합니다. 사실 다른 소셜보다는 깃허브가 제일 나은 거 같습니다. https://codepen.io/accounts/signup/user/free ● 2. 연동된 깃허브 사이트에서 로그인을 합니다. 두 개의 사이트의 느낌이 굉장히 비슷합니다. ● 3. 그리고 Authorize codepen이라는 버튼을 클릭합니다. 그럼 자동으로 연결되어 로그인이 완료됩니다. ● 4. 그리고 등장하는.. 2021. 1. 4. CodePen - 코드펜 이메일로 가입하기 코드펜 네이버, 다음, 지메일로 가입하기 안녕하세요. 고코더 입니다. ● 1. 오늘은 세계 최고의 프런트엔드 커뮤니티인 코드펜을 알아보겠습니다. 깃허브처럼 코드펜도 누구나 가입할 수 있는 무료 서비스 입니다. 그래서 개발자라면 우선 가입하는걸 추천합니다. 오늘은 초보 개발자를 위해 가입부터 차근 차근 하나씩 알아보는 시간을 갖겠습니다. ● 2. 우선 코드펜을 접속합니다. 도메인이. io인 게 인상적입니다. 해당 사이트의 오른쪽 위에 있는 sign up를 클릭합니다. https://codepen.io/ ● 3. 해당 사이트에 접속하면 두 가지 방식의 가입이 가능합니다. 첫 번째는 소셜 네트워크의 아이디를 연동하는 방식과 이메일로 가입하는 방식입니다. 이번 시간에는 네이버와 다음을 지메일을 쓰는 개발자를 위.. 2021. 1. 4. 이전 1 2 3 다음
