본문으로 건너뛰기
실습하기

코드프렌즈 사용법

코드프렌즈 웹 코딩 강의실은 하나의 화면에서 학습 자료를 확인하고, 코드를 작성하며, 실시간으로 코딩 결과를 확인할 수 있도록 설계되었습니다.

강의실 화면 구성은 수업 유형에 따라 달라질 수 있지만, PC 환경을 기준으로 대부분의 수업에서는 화면의 왼쪽에서 학습 자료를 확인하고, 중앙에서 코드를 작성하며, 오른쪽에서 실시간 코딩 결과를 확인할 수 있도록 구성되어 있습니다.

참고: 면의 각 섹션은 마우스를 드래그하여 높이와 너비를 자유롭게 조절할 수 있습니다.


1. 학습 자료​

화면 왼쪽에서 각 수업(Lesson)별 코딩 기초 지식을 학습하고, 나만의 웹사이트를 만들기 위한 단계별 학습 자료를 확인할 수 있습니다.

지금 읽고 계신 내용은 오리엔테이션 강의의 Chapter 1, 코드프렌즈 사용법 - 1 수업의 학습 자료입니다.


2. 코드 작성​

화면 중앙에 위치한 코드 작성 영역은 웹의 필수 3요소인 HTML, CSS, JavaScript를 탭(Tab)으로 구분하여 각각의 코드를 작성할 수 있도록 설계되었습니다.

참고로, HTML, CSS, JavaScript는 웹에서 다음과 같은 역할을 합니다.

  • HTML : 웹 페이지의 구조와 콘텐츠를 정의합니다.

  • CSS : 웹 페이지를 보기 좋게 꾸미는 역할을 담당합니다.

  • JavaScript(JS) : 웹 페이지의 동작을 제어하는 두뇌와 같같습니다.

코드 작성란에서는 학습 자료 내 코드를 복사/붙여넣기하거나, 직접 코드를 타이핑하여 작성할 수 있습니다.

아래 HTML, CSS, JS 코드를 각각의 탭에 복사/붙여넣어 실행해 보세요. 🧑🏻‍💻


HTML 탭에 붙여넣기
<body>
  <h1>Name</h1>
  <button id="showButton">이름 입력하기</button>
  <p id="greeting"></p>
</body>
CSS 탭에 붙여넣기
button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
JS 탭에 붙여넣기
const showButton = document.getElementById('showButton');
const greeting = document.getElementById('greeting');

showButton.addEventListener('click', function () {
  const name = prompt('이름을 입력하세요.');
  if (name && name.trim() !== '') {
    greeting.textContent = '안녕하세요, ' + name.trim() + '님!';
  } else {
    greeting.textContent = '이름을 입력해주세요.';
  }
});

각각의 탭에 코드를 붙여넣으면, 사용자의 입력을 받아 화면에 결과를 출력하는 간단한 웹사이트가 완성됩니다.

코딩 결과 화면의 이름 입력하기 버튼을 클릭하면 이름을 입력하는 팝업창이 나타납니다.

이름을 입력하고 확인 버튼을 누르면, 화면에 안녕하세요, {name}님!이 출력됩니다.


3. 실시간 결과 확인​

화면 오른쪽에서는 작성한 HTML, CSS, JS 코드를 결합한 웹사이트의 결과를 실시간으로 확인할 수 있습니다.

예를 들어, HTML 탭에 붙여넣은 <h1>Name</h1>에서 Name을 Hello로 수정해 보세요. 👩🏻‍💻


이처럼 실시간으로 코딩 결과를 확인하며 웹 코딩 기초를 학습하고, 실생활에서 활용 가능한 웹사이트를 직접 만들어볼 수 있습니다.

아래에 학습 자료의 내용을 점검하는 미션을 완료하고, 완료 버튼을 눌러 다음 수업으로 이동해 보세요! 🚀