안녕하세요. 구름 고객지원팀입니다! 😊
그동안 HTML/CSS/JavaScript 코드를 에디터에서 작성하실 때, 작성 즉시 확인해보지 못해 불편하셨죠?
작성은 에디터에서 하고, 웹을 따로 실행시켜 확인해야 하는 번거로움이 있었어요. 이러한 프로세스에 CSS 속성 하나를 고칠 때에도 페이지를 이동해가며 변경 사항을 확인해야 했었습니다. 구름IDE에서도 HTML/CSS/JS 코드를 작성한다면 포트 설정 후 새 페이지에서 주소를 실행하여 웹 페이지를 확인할 수 있었어요.
바로 보기(Preview) 기능을 이용한다면 브라우저 새로고침 없이도 1초 만에 코드를 미리 볼 수 있습니다. 일반적인 에디터들은 저장 후 매번 브라우저 새로고침을 통해서 변경 사항을 확인해야 하지만, 구름IDE는 코드 저장 즉시 바뀐 화면이 출력된답니다.
그럼 지금부터 프로젝트를 생성하고 확인하는 법까지 자세히 알려드릴게요.
- 먼저 로그인 후 대시보드에 들어가서 새 컨테이너 생성 버튼을 클릭합니다.
2. 소프트웨어 스택에서 HTML/CSS/JS를 선택하고, 이름과 설명을 입력합니다.
3. 컨테이너 생성이 완료되면 ‘컨테이너를 실행하시겠습니까?‘ 라는 알림이 뜹니다. 이 때 바로 실행해도 되지만, 모던 버전을 이용하기 위해 ‘대시보드로 이동’을 선택한 후 위와 같이 Modern(Beta)를 클릭 해 줍니다.
(HTML/CSS/JS 컨테이너는 Modern(Beta) / Classic 버전 모두 지원됩니다.)
4. 그럼 이렇게 빈 화면이 보이실 거에요!
여기서 왼쪽에 생성된 index.html 파일을 클릭해 줍니다.
5. html의 기본 틀이 만들어져 있는 것 확인하셨나요? 벌써 마지막 단계입니다!
우측 상단의 Open Preview 를 클릭해 주세요.
짠! 바로 화면이 출력되었어요. 그럼 조금 바꿔볼까요?
이런 식으로 얼마든지 쉽고 빠르게 코드를 확인하고, 웹 페이지를 생성할 수 있답니다. 나만의 페이지 만들기, 구름IDE와 함께라면 어렵지 않아요.💙
컨테이너 생성까지 단 30초!
HOW TO 구름IDE
STEP.1 [구름IDE 사용법] 시작하기1: 프로젝트 생성
STEP.2 [구름IDE 사용법] 시작하기2: 빌드 및 실행
STEP.3 [구름IDE 사용법] 시작하기3: 디버그, 도메인 등록, 명령어
