無제
CodePen(코드펜) 온라인 에디터 매뉴얼 본문
웹 개발자들의 놀이터이자 포트폴리오 창고인 CodePen(코드펜) 에 오신 것을 환영합니다!
코드펜은 별도의 설치 없이 브라우저에서 바로 HTML, CSS, JavaScript 코드를 작성하고
결과를 실시간으로 확인할 수 있는 아주 유용한 도구예요.
사용법을 핵심만 콕콕 집어 정리해 드릴게요.
1. 회원가입 및 로그인
가장 먼저 계정을 만들어야 내가 만든 코드(Pen)를 저장하고 나중에 다시 볼 수 있습니다.
- 방법: CodePen 메인 페이지 우측 상단의 [Sign Up] 클릭
- 추천: GitHub 계정이 있다면 **[Sign Up with GitHub]**를 추천해요. 개발자로서 협업하거나 나중에 포트폴리오를 관리하기 훨씬 편해집니다. (물론 이메일 가입도 가능합니다.)
2. 기본 환경설정 (Settings)
코딩 스타일이나 라이브러리 설정을 미리 해두면 작업 효율이 확 올라갑니다. 우측 상단 프로필 이미지를 누르고 **[Settings]**로 들어가 보세요.
⚙️ 주요 설정 항목
- Editor Preferences: 코드 에디터의 테마(다크 모드/라이트 모드), 폰트 크기, 들여쓰기(Tab vs Space) 등을 설정할 수 있어요.
- Autocomplete: 코드를 칠 때 자동으로 완성해 주는 기능을 켤 수 있습니다. (초보자라면 켜두는 게 편해요!)
3. 기본적인 사용법 (Pen 만들기)
로그인 후 좌측 상단의 **[Create] > [Pen]**을 누르면 새로운 작업 공간이 열립니다.
① 세 개의 코드 창
- HTML: 웹사이트의 뼈대를 만듭니다. (<body> 태그 안의 내용만 적으면 돼요.)
- CSS: 디자인을 입힙니다.
- JS: 움직임이나 기능을 넣습니다.
② 실시간 미리보기
코드를 수정하면 아래쪽 화면에 결과가 실시간으로 반영됩니다. 따로 새로고침을 누를 필요가 없어서 아주 직관적이죠.
③ 외부 라이브러리 불러오기 (중요!)
React, jQuery, Tailwind CSS 같은 도구를 쓰고 싶다면 각 코드 창의 상단 **[Settings (톱니바퀴 아이콘)]**을 누르세요.
- CSS Settings: 외부 CSS 프레임워크나 폰트 링크 추가
- JS Settings: 외부 스크립트(CDN) 추가
4. 유용한 팁
- Save: 작업 중에는 수시로 우측 하단의 **[Save]**를 눌러주세요. (유료 버전은 자동 저장이 되지만, 무료는 수동입니다!)
- Export: 내가 만든 코드를 파일(.zip)로 내려받거나 GitHub Gist로 보낼 수 있습니다.
- Change View: 상단의 [Change View] 버튼을 통해 코드 창의 위치(왼쪽, 오른쪽, 위쪽)를 바꿀 수 있어요.
💡 한 가지 팁: 다른 사람들이 만든 멋진 작품을 보고 싶다면 메인 화면의 **[Trending]**이나 [Challenges] 코너를 구경해 보세요. 마음에 드는 코드를 내 계정으로 가져와서 수정해 볼 수 있는 'Fork' 기능도 아주 유용하답니다.
'< ! - - none - - >' 카테고리의 다른 글
| 🧾 UI / UX 디자인 십계명 🧾 (0) | 2026.03.27 |
|---|---|
| 웹폰트가 훌륭한 레퍼런스 소개 (0) | 2026.03.25 |
| VS Code_기초상식과 단축키 (0) | 2026.03.10 |
| VS Code_Settings 확장팩 (0) | 2026.03.10 |
| VS Code(Visual Studio Code)_Download (0) | 2026.03.10 |
