codepen5 CodePen - 코드펜 작업을 자동 저장하기 코드펜 오토 세이브 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용할 때는 저장이 중요합니다. 언제 갑자기 브라우저가 종료돼버리면 작업한 것들이 모두 날아가버리기 때문입니다. 펜을 수정 창에서 "Settings"를 클릭합니다. ● 2. Behavior에서 "Save Automatically"를 활성화 하시기 바랍니다. 그래서 자동으로 시간마다 저장이 실행되는 이 부분을 On으로 설정하면 30초마다 자동으로 결과 물이 저장되므로 브라우저 종료로 인한 작업 날림이 적어질 것입니다. 마무리 기본 옵션은 자동 저장입니다. 괜히 off 해놓고 하다가 날렸네요. 2021. 1. 20. 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 - 코드펜 이메일로 가입하기 코드펜 네이버, 다음, 지메일로 가입하기 안녕하세요. 고코더 입니다. ● 1. 오늘은 세계 최고의 프런트엔드 커뮤니티인 코드펜을 알아보겠습니다. 깃허브처럼 코드펜도 누구나 가입할 수 있는 무료 서비스 입니다. 그래서 개발자라면 우선 가입하는걸 추천합니다. 오늘은 초보 개발자를 위해 가입부터 차근 차근 하나씩 알아보는 시간을 갖겠습니다. ● 2. 우선 코드펜을 접속합니다. 도메인이. io인 게 인상적입니다. 해당 사이트의 오른쪽 위에 있는 sign up를 클릭합니다. https://codepen.io/ ● 3. 해당 사이트에 접속하면 두 가지 방식의 가입이 가능합니다. 첫 번째는 소셜 네트워크의 아이디를 연동하는 방식과 이메일로 가입하는 방식입니다. 이번 시간에는 네이버와 다음을 지메일을 쓰는 개발자를 위.. 2021. 1. 4. Front- 프론트엔드 디자인 무료 공개소스 / codepen.io 코드펜 사이트 사용법 코드펜은 흥미로운 사이트입니다. 프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다. 업무의 있어서도 상당히 도움이 되는 좋은 곳입니다. 누구나 와서 가입 후에 HTML , CSS , JS 를 코딩해서 결과물을 놓고 자랑하는 사이트입니다. 프론트 개발자라면 학습으로도 좋습니다. ▼우선 사이트 주소는 이렇습니다. 사이트 디자인도 CI도 이쁘고 정갈하네요 https://codepen.io/ ▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 크리스마스 볼이라는 작품인데요 아래 URL로 접근해보세요 https://codepen.io/Mamboleoo/pen/VrdYxN ▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다. 이것들을 복사해가서 실행하면 그대로.. 2018. 1. 11. 이전 1 다음
