웹 개발에 대한 많은 실망스러운 점 중 하나는 프로젝트를 다른 사람들과 쉽게 공유 할 수있는 방법이 없습니다. 대부분의 경우 웹 서버에서 프로젝트를 호스팅하거나 해당 파일을 모두 자신이 만든 것을보고 싶은 사람에게 보내야합니다. 그러나 CodePen이라는 깔끔한 온라인 도구 덕분에 더 이상 걱정할 필요가 없습니다.
CodePen.io
CodePen은 한푼도 지불하지 않고도 온라인으로 프로젝트를 호스팅 할 수있는 무료 도구입니다. 시작하려면 CodePen.io로 이동하여 무료 계정을 만드십시오.
이 작업을 마치면 화면 오른쪽 상단의 "새 펜"버튼을 클릭하여 "펜"을 만들 수 있습니다.
그런 다음 HTML, CSS 및 JavaScript를 해당 상자에 추가 할 수 있습니다. 코드를 추가하기 시작하면 만들고있는 내용을 실시간으로 미리 볼 수 있습니다. 왼쪽 상단에서 첫 번째 펜의 제목을 지정할 수 있습니다. 첫 번째 "저장"을 클릭하면 친구, 가족 및 동료와 페이지의 URL을 공유하여 작업중인 내용을 볼 수 있습니다.
다음은 펜에 코드가 표시되는 방식입니다 (무료 코드 캠프 프로젝트 인 Tribute Page 제공).
자신 만의 펜을 만들 때는 시작하기 전에 설정을 진행해야합니다. "새 펜"버튼을 클릭하면 코드 입력을 시작할 수있는 펜 템플릿이 나타납니다. 오른쪽 상단에는 "설정"버튼이 있습니다. 그것을 클릭하십시오 (아래 화면이 나타납니다).
여기에서 특정 정보를 추가하기 위해 HTML, CSS 및 JavaScript 탭을 살펴볼 수 있습니다. HTML 탭에서 메타 정보를 추가 할 수 있습니다.
탭 등. CSS에서 LESS 및 Sass와 같은 CSS 프리 프로세서를 추가 할 수 있습니다. 뿐만 아니라 Bootstrap 및 Foundation과 같은 외부 CSS를 추가 할 수 있습니다. JavaScript 탭에서 Babel 또는 CoffeeScript와 같은 JavaScript 프리 프로세서를 추가 할 수 있습니다. 또한 Angular, React, Lodash, D3 등과 같은 외부 JavaScript 프레임 워크를 추가 할 수 있습니다.
마지막으로 CodePen을 사용하면보고있는 "보기"를 변경할 수 있습니다. 기본보기는 편집기보기이며 코드를 입력하고 아래 콘솔에서 작은 미리보기를 얻을 수 있습니다. 그러나 다른 옵션도 있습니다. 특히 "전체 페이지"보기로 프로젝트가 마치 웹 사이트에있는 것처럼 보일 수 있습니다. 전환 할 수있는 몇 가지 다른보기가 있습니다.
CodePen은 정말 깔끔한 도구이며 유용성에 관한 내용 만 다뤘습니다. CodePen.io로 가서 몇 가지 프로젝트를 수행하는 데 가치가 있으며, 기분이 좋으면 친구 또는 동료와 공유하십시오.
CodePen에 대해 어떻게 생각하십니까? 비슷한 도구를 사용 했습니까? 아래의 의견 섹션에 알려주십시오!
