초보자를위한 10 코데 핀 팁
Codepen은 매우 쉽고 인기있는 사이트입니다. 펜 작동하는 프론트 엔드 코드 콤보 다운 곧. 이전에 Codepen에 대해 들어 보지 못했거나 모르는 경우에는 기본적으로 온라인 소스 코드 놀이터 (그것을 부르 자. OSCP 프론트 엔드 코딩의 3 명의 머스킷터를위한 HTML, CSS 과 자바 스크립트.
JSFiddle, JS Bin, CSSDeck & Dabblet 같은 비슷한 OSCP가 있습니다. Codepen은 프론트 엔드 개발자 중 가장 유명한 회사 중 하나입니다. 더 이상 고민하지 않고, 바로 뛰어 들어가 봅시다. 기본 및 유용한 팁 Codepen 사용.
1. 실행 버튼
Codepen의 코드 출력이 상쾌하게 유지되는 방식을 좋아하지 않는다면 동안 너는 타자하고있어, 너는 할 수있어. 탈퇴하다 “자동 업데이트 미리보기” 선택권, 대신 실행 버튼을 얻으십시오. 이 버튼을 클릭하면 코드의 출력을보고 업데이트 할 수 있습니다. 언제든지.
출력 코드가있는 경우이 옵션을 사용하는 것이 좋습니다. 많은 레이아웃 변경을 거친다., 업데이트 될 때마다 다시 그리기 때문에 속도가 느려집니다..
2. 번호 증가 / 감소
Codepen에서 코드의 숫자를 늘리거나 줄입니다. 새 번호를 입력하지 않고. Ctrl / Cmd 키 조합 만 사용하면됩니다. 과 위아래 화살표.
3. 다중 커서
커서를에 놓을 수 있습니다. 소스 코드의 여러 점, 그 시점에서 모두 입력하거나 수정하십시오. 동시에. 이것은 동일한 정보를 입력하는 경우에만 작동하며 복사 붙여 넣기의 필요성을 줄입니다. Ctrl / Cmd 키를 누른 채 여러 점을 클릭하면됩니다..
4. 색깔이 다른 콘솔 메시지
그만큼 콘솔 자바 스크립트 개체가 있습니다. 몇 가지 방법 게다가 로그() 너에게 웹 콘솔에서 항목 인쇄.
당신은 info (), 경고 () 과 오류() 방법 정보, 경고 과 오류. 일반적으로 웹 콘솔은 이러한 메시지를 유형별로 표시하거나 옆에 적절한 아이콘을 표시합니다 (예 : 경고 메시지의 경고 기호) 쉬운 인식을 위해.
Codepen에는 자체 콘솔이 있습니다. 왼쪽 하단에있는 Console (콘솔) 버튼을 클릭하여 열 수 있습니다. 콘솔 메시지를 빠르게 확인하는 데 이상적입니다. 브라우저의 콘솔을 열지 않고도. 이 콘솔은 다양한 유형의 콘솔 메시지를 구분합니다. 다른 배경색으로.
5. 내보내기
저장되면 펜 (단일 Codepen 엔티티)를 내보낼 수 있습니다 ZIP 파일로 HTML, CSS 및 JS 코드가 모두 파일에 포함되어 있습니다. 펜을 저장하는 옵션도 있습니다. Github 요지로 (Git 저장소). 내보내기 버튼은 각 펜의 오른쪽 하단 모서리에 있습니다..
6. 찾기 및 바꾸기
찾기 및 바꾸기 - 그때마다 변수 이름을 바꾸는 경향이있는 사람들을위한 필수 작업입니다. Ctrl / Cmd + Shift + F는 키 콤보입니다. 열어 라. “찾기 및 바꾸기” 대화.
7. 에멧 탭 트리거
Emmet 코딩을위한 탭 트리거에 대해 알고 있습니까? Emmet는 프런트 엔드 개발자가 사용할 수있는 생산성 도구입니다. 나중에 확장되는 스켈레톤 코드. Codepen에서이를 수행하려면 적절한 약어를 편집기에 빠르게 입력하고 Tab 키를 누르면 전체 코드가 한 번에 나타납니다. HTML에만 사용 가능 코데 푼에서.
8. 개별 코드 파일 얻기
앞에서 설명한 내보내기 옵션을 사용하면 펜의 세 가지 파일 (HTML, CSS 및 JS)을 모두 얻을 수 있습니다. 그러나 관심이 있다면 그 중 하나 또는 두 개의 파일 만, 개별적으로 다운로드하려면 Codepen에서도이 옵션을 사용할 수 있습니다..
Codepen에 로그인하면 펜으로 이동 한 다음 오른쪽 상단 모서리에있는보기 변경 단추를 클릭하십시오. 드롭 다운 목록의 맨 아래에 개별 파일에 대한 직접 다운로드 링크.
9. JavaScript 변수 검사
Codepen의 자바 스크립트 콘솔이 펜에 저장된 JavaScript에 연결되기 때문에이를 사용하여 자바 스크립트를 신속하게 테스트 할 수 있습니다. 이 기능은 특히 편리합니다. JS 변수 검사하기, 이렇게하면 추가 콘솔 또는 경고 메시지를 삽입 할 필요가 없음 테스트 목적으로 만 원래 코드로.
10. 펜을 템플릿으로 바꿉니다.
당신이 펜으로 대부분의 펜을 시작하는 경향이 있다면 동일한 코드 세트, 템플릿을 사용하여 반복 코드 저장. 펜을 템플릿으로 바꾸려면, 템플릿 옵션을 선택하십시오. 설정 메뉴에서 나중에 새 펜을 만들면 저장된 템플릿으로 시작하십시오. 새 펜 단추의 오른쪽에있는 아래쪽 화살표를 클릭하면됩니다. 선택할 수있는 저장된 템플릿이 모두있는 드롭 다운 목록이 열립니다..
