Codepen
Codepen 은 HTML, CSS, JAVASCRIPT 를 웹 페이지에서 코딩하고 결과를 볼 수 있는 기능을 제공합니다.
일단 사이트는,
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
여기로 접속하시면 일단 회원가입(SignUp)을 해야겠죠
상단 우측에 Sign Up 을 누르면 아래와 같이 회원가입 선택 창이 나옵니다. Free!
가입은 하실수 있겠...
가입하고 나면 첫 화면은 아래와 같이 Tutorial dialog 가 보입니다.
Next Step 을 누르면서 하나하나 진행 해보시길 권장합니다.
HTML , CSS , Javascript 에 뭔가 코딩을 하면 하단 영역에 결과가 나타납니다.
(Layout을 변경할 수 있습니다. 현재는 상단에 코딩, 하단에 결과)
JavaScript 영역입니다.
아래는 화살표가 잘못되어있네요. Settings 를 누르면 Pen Settings 라는 Dialog 가 나타납니다.
현재 Pen 의 이름등을 설정 할 수 있습니다.
CSS 의 PreProcessor 를 선택할 수 있습니다.
SCSS로 변경되었고 CSS를 변경 가능하다고 나와있습니다.
현재 작업중이던 프로젝트를 저장할 수 있습니다.
새로운 프로젝트를 생성할 수 있습니다.
이제 CodePen을 사용할 준비가 다 되었습니다.
Codepen 에서 React 테스트하기
2019/12/27 - [HTML,Javascript] - Codepen 에서 react 개발 설정하기
Codepen 에서 react 개발 설정하기
일단 codepen 에 가입되어있어야 합니다. 기본적인 설명은 여기서. 2019/09/07 - [HTML,Javascript] - Codepen 사용법 (html,css,javascript 실행 웹 툴) Pen 으로 갑니다. Settings 로 들어갑니다. JavaScript..
hello-bryan.tistory.com
'React,Node,JQuery,js' 카테고리의 다른 글
| Node js, NPM 설치하기 (윈도우10) (4) | 2019.12.27 |
|---|---|
| yarn 이란? yarn 설치 방법 (Mac) (0) | 2019.12.24 |
| Mac 에 Node.js 설치하기. 터미널 사용 (2) | 2019.12.23 |
| HTML5 요약 (0) | 2019.08.14 |
| Web Storage ( localStorage) 사용하기 (0) | 2019.01.27 |
댓글