많은 라이브 코드 놀이터와 마찬가지로 Codepen은 오픈 소스 환경에서 배우고 코드 변경의 실시간 미리보기를 표시하고 아래 웹 페이지에 코드 데모를 포함시킬 수 있습니다.
<full> Codepen의 하나의 div (@onediv)의 펜 전체 CSS NES를 참조하십시오.
<i>이 기사에서는 Codepen을 경쟁 위에 올려 놓는 것들을 설명하기 위해 방금 언급 한 기능을 넘어서서 아직 그렇게하지 않은 경우 확인 해야하는 이유를 설명합니다.
<these>이 기능을 설명하는 동안 각 섹션에 임의의 펜션을 포함시킬 것입니다.
<ul> 1. CSS 옵션
Codepen에는 CSS를 더 빨리 쓸 수있는 멋진 기능이 포함되어 있습니다. 라디오 버튼을 클릭하면 CSS에 CLEMENTIZE.CSS 또는 RESET.CSS를 포함하도록 선택할 수 있습니다. -prefix -free 또는 autoprefixer를 사용하도록 선택할 수도 있습니다. 이렇게하면 외부 파일에 링크하는 데 시간을 할애 할 필요가 없습니다 (원하는 경우 가능합니다).
<li>
<aren> CSS 기술 중 일부가 확실하지 않다면 어떻게해야합니까? 괜찮아요; Codepen은 CSS 코드를 검색하기 위해 CSSLINT 통합을 가지고 있으며 오류, 경고, 브라우저 지원이 좋지 않은 경우 경고합니다.<h2> 2. HTML, CSS 및 JavaScript의 풍미
<support> Codepen은 HTML, CSS 및 JavaScript를 지원합니다. HTML의 경우 Haml, Markdown, Slim 또는 Jade를 사용할 수 있습니다. CSS의 경우 SASS 및 SCSS (선택적 나침반 또는 버번 애드온 포함)와 적은 수준과 스타일러스를 지원합니다.
<p>
<av> JavaScript 메뉴에서 Coffeescript 또는 Livescript를 선택할 수 있습니다. jQuery 및 AngularJS와 같은 최신 버전의 물건을 가질 수있는 드롭 다운 메뉴도 있습니다.
<em> 3. EMMET 및 VIM 바인딩 </em>
<is> Codepen은 더 빠르고 부드러운 개발에 관한 것입니다. 그렇기 때문에 Emmet과 같은 툴킷을 사용하여 프로젝트가 계속 움직일 수 있도록 도와줍니다. CodePen 편집기를 사용하면 명령 줄 키보드 바로 가기 인 VIM 키 바인딩을 사용할 수 있습니다. 이 두 도구는 모두 더 빠른 워크 플로를 만드는 데 도움이 될 수 있습니다. </is></av></p>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174010057596558.jpg" class="lazy" alt="9 가지 이유 Codepen을 사용해야합니다" >
<about> Emmet에 대해 자세히 알아 보려면 더 빠른 워크 플로 : 마스터 링 Emmet.
<p> 4. 컬렉션 및 태그 <tag tag>
<tag> 펜에 태그를 추가 한 다음 검색 할 수 있습니다. "로더"및 "형태"와 같은 태그를 검색하면 많은 도움이되는 영감이 있습니다.
</tag></tag></p>
원한다면 특정 주제와 관련된 펜 컬렉션을 만들 수도 있습니다. Codepen의 공동 창립자 중 하나 인 Chris Coyier는“Path Drawing”및“Retureding Patterns”와 같은 컬렉션을 만들었습니다.
<h2> 5. 다른 펜 뷰
Codepen은 펜에 대해 총 8 개의 다른 뷰를 가지고 있습니다. 각보기에는 고유 한 장점이 있습니다. </h2>
<this> 편집기보기 - 펜 편집의 기본보기입니다. 코드 미리보기의 크기를 조정하고 표시 할 언어를 선택할 수 있습니다.
<this> 세부 사항보기 -이보기는 펜의 태그, 하트, 댓글, 포크 펜 등을 볼 수 있습니다. 여기에는 Codepen의 소셜 기능이 대부분 포함됩니다.
전체 페이지보기-이것은 매우 자명합니다. 그것은 당신의 펜을 iframe 내에 전체 화면으로 만들어 코드 펜 바닥 글만 남겨 둡니다. .
디버그보기-디버그보기는 추가 기능이 있지만 전체 화면보기입니다. 더 쉬운 JavaScript 콘솔 액세스를 위해 iframe 및 CodePen 바닥 글을 제거합니다. 이것은 Codepen이 간섭 할 수 있다고 생각하는 코드를 테스트하는 데 좋습니다.
<p> 6. Codepen Pro 뷰 Codepen Pro 사용자 인 경우 더 많은보기에 액세스 할 수 있습니다.
프리젠 테이션 모드 -이 모드는 특히 오버 헤드 프로젝터 용으로 만들어집니다. 더 많은 공간을 제공하기 위해 헤더를 제거하고 코드 편집기의 글꼴 크기와 색상을 빠르게 변경할 수 있습니다. 코드를 변경하지 않고 미리보기 크기를 변경할 수도 있습니다. </p>
<with> 라이브 뷰-Codepen Live View를 사용하면 펜의 전체 화면 디스플레이가 있습니다. 해당 펜을 편집하면 입력 할 때 자동으로 업데이트됩니다. 이것은 종종 여러 장치에서 테스트 할 때 사용됩니다<this> 교수 모드-이 모드를 사용하면 사람들이 실시간으로 코드를 볼 수 있습니다. 교수와 학생들이 채팅 할 수있는 채팅 창도 있습니다. <p>
Collab Mode - Collab Mode를 사용하면 하나 이상의 프로그래머가 동시에 펜을 편집 할 수 있습니다. 교수 모드와 마찬가지로 채팅 창도 있습니다. </p>
<p> 7. 블로깅 <..>
<a> 블로깅은 CodePen의 새로운 기능으로 일반 블로그에서와 같이 코드에 대해 쉽게 쓸 수 있습니다.
</a></..></p>
Markdown으로 작성하고 특별한 임베딩 도구를 사용하여 필요할 때 펜을 포함시킬 수 있습니다. 게시물에 사용자 정의 CSS를 추가 할 수 있으며 게시물을 테스트 할 수있는 매우 간단한 미리보기가 있습니다.
<h2> 8. 커뮤니티
<set> 이것은 Codepen을 경쟁에서 앞서 긴 샷으로 설정하는 것입니다. 커뮤니티는 처음부터 Codepen의 큰 부분이었습니다. 의견과 공유를 통해 사람들은 건설적인 비판을주고 받고 함께 배울 수 있습니다. 4ae9b8 및 Bullgit과 같은 그룹은 Codepen을 통해 대화에서 시작했습니다. 창립자들은 Codepen 팟 캐스트에서 Codepen 커뮤니티에 대해 어떻게 생각하는지 이야기했습니다.
</set>
</h2> 9. 영감 <.>
<ens> 인상적인 펜은 항상 홈페이지와 훌륭한 기사와 컬렉션에 표시됩니다. 펜은 영감과 배우는 재미있는 방법으로 포즈를 취합니다. 멋진 펜을 검색하면 자신의 작업을 개선하고 HTML, CSS 및 JavaScript에 대한 지식을 향상시키는 데 도움이됩니다.
<out out> 아래는 확인하기위한 뛰어난 데모입니다
<p>
Jack Rugile의 Sparkle Light Trial <spark> <spark>
<opening> Star Wars는 1977 년 Tim Pietrusky의 크롤링 오프닝 크롤링
Justin Windle의 Makisu CSS 3D 드롭 다운 컨셉
Julian Garnier의 3D X-WING 마리우스 Balaj 소셜 버튼
<o> anand의 webgl 데모
<by> Suffick의 눈물 가능한 천
</by></o></opening></spark></spark></p>
<h2> 결론
궁극적으로 CodePen을 사용하면 더 빨리 배우고 대규모 커뮤니티의 일부가 될 수 있습니다. SitePoint의 기사는 종종 CodePen을 사용하여 자습서 코드를 포함합니다. Codepen의 더 훌륭한 기능에 관심이 있으시면 다음을 확인하십시오.<ul>
<ets> 책갈피
<in> WordPress 플러그인
oembed
<button button> 나이 버튼을 고용
<li>
<questions> CodePen 사용에 대한 자주 묻는 질문 (FAQ)
<key> 개발자에게 선호하는 선택이되는 Codepen의 주요 기능은 무엇입니까? <li> Codepen은 개발자에게 선호하는 선택을 제공하는 다양한 기능을 제공하는 소셜 개발 환경입니다. 코드 변경에 대한 라이브 뷰를 제공하므로 개발자가 변경 사항을 실시간으로 볼 수 있습니다. 이 기능은 개발 프로세스의 속도를 크게 높입니다. Codepen은 또한 SCSS, Less 및 Stylus와 같은 사전 프로세서를 지원하여 개발자가보다 효율적인 코드를 작성하는 데 도움이 될 수 있습니다. 또한 협업 모드를 제공하므로 여러 개발자가 동시에 동일한 프로젝트를 동시에 작업 할 수 있습니다. 이 기능은 팀 프로젝트 및 페어 프로그래밍에 특히 유용합니다. </li> 테스트 및 디버깅에 CodePen을 사용하려면 어떻게해야합니까? <li> Codepen은 코드 테스트 및 디버깅을위한 훌륭한 도구입니다. 주요 프로젝트에 영향을 미치지 않고 코드를 작성, 테스트 및 디버깅 할 수있는 고립 된 환경을 제공합니다. '펜'을 다른 사람들과 쉽게 공유 할 수있어 피드백을 얻고 디버깅에 도움이되는 훌륭한 도구입니다. Codepen은 또한 JavaScript를 디버깅하는 데 매우 도움이 될 수있는 Console.log를 지원합니다. </li> 코딩을 가르치거나 학습하는 데 CodePen을 사용할 수 있습니까? Codepen은 교육 및 학습 코딩 모두에 훌륭한 도구입니다. 교사는 코딩 개념을 보여주기 위해 '펜'을 만들 수 있으며, 학생들은이 '펜'을 실험하고 배울 수 있습니다. Codepen은 또한 교사가 라이브 코딩 데모를 제공 할 수있는 '교수 모드'를 가지고 있습니다. <li> Codepen은 어떻게 반응 형 디자인을 지원 하는가? </li> </key></questions>
</li></button></in></ets>
</ul> Codepen은 개발자가 디자인을보고 테스트 할 수 있도록하여 반응 형 디자인을 지원합니다. 편집기 내에서 직접 다른 장치 크기. 이 기능을 사용하면 모든 장치 크기에서 잘 작동하는 디자인을보다 쉽게 만들 수 있습니다. <h2> Offline Offline을 사용할 수 있습니까? </h2> CodePen은 주로 온라인 도구이지만 일부 오프라인 기능을 제공합니다. Codepen Offline을 사용하여 '펜'에서 작업 할 수 있지만 변경 사항을 저장하려면 온라인으로 가야합니다. <h3> 코드 펜에 대한 내 작업을 어떻게 공유 할 수 있습니까? </h3> </h2>
<p> 작업 공유 Codepen은 쉽습니다. ‘펜’의 URL을 공유하거나 다른 웹 사이트에‘펜’을 포함시킬 수 있습니다. Codepen은 또한 라이브 데모 또는 프레젠테이션에 적합한 '프리젠 테이션 모드'를 제공합니다. </p> 코드 펜 커뮤니티는 무엇입니까? <h3> 코드 펜 커뮤니티는 개발자에게 활기차고지지적인 장소입니다. 작업을 공유하고, 피드백을 받고, 다른 사람들로부터 배우고, 프로젝트에 대해 협력 할 수도 있습니다. 커뮤니티는 개발자로서 배우고 성장하기에 좋은 곳입니다. </h3>
<cod> 상업 프로젝트에 Codepen을 사용할 수 있습니까? 예, 상업 프로젝트에 Codepen을 사용할 수 있습니다. 그러나 Codepen에서 작성한 '펜'이 기본적으로 공개되므로 '펜'에 민감하거나 독점적 인 정보를 포함시키지 않도록주의해야합니다. <p> Codepen은 CSS를 어떻게 처리합니까? 그리고 JavaScript 프리 프로세서? </p> Codepen은 SCSS, Less, SCS를 포함한 다양한 CSS 및 JavaScript 프리 프로세서를 지원합니다. 스타일러스, 바벨 및 타입 스크립트. 즉, 코드를 사전 프로세서 언어로 작성할 수 있고 Codepen은 CSS 또는 JavaScript로 컴파일됩니다. <h3> CodePen에 대한 몇 가지 대안은 무엇입니까? </h3> <p> Codepen은 훌륭한 도구입니다. , 당신이 고려할 수있는 몇 가지 대안이 있습니다. 여기에는 jsfiddle, plunker 및 Glitch가 포함됩니다. 이러한 각 도구는 고유 한 강점과 약점이 있으므로 최선의 선택은 특정 요구와 선호도에 따라 다릅니다.</p></cod></out></ens></.></this></with></this></this></about></support>
</h2></aren>
</li>
</ul></these></i></full>위 내용은 9 가지 이유 Codepen을 사용해야합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
