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

코드프렌즈 사용법

코드프렌즈 웹 실습 환경은 하나의 화면에서 단계별 가이드라인을 확인하고, 코드를 작성하고, 실시간으로 코딩 결과를 확인하도록 구성되어 있습니다.

screen.jpg

각 섹션은 마우스 드래그로 높이와 너비를 조절할 수 있습니다 🖱



1. 단계별 가이드라인​

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

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


2. 코드 작성​

화면 중간의 코드 작성 부분은 웹의 필수 3요소인 HTML, CSS, JavaScript를 탭(Tab)으로 구분하여, 각각 따로 작성할 수 있도록 구성되어 있습니다.

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

  • HTML : 웹 페이지의 골격으로, 웹의 구조를 담당

  • CSS : 웹 페이지의 옷으로, 웹의 디자인을 담당

  • JavaScript(JS) : 웹 페이지의 두뇌로, 웹의 동작을 담당

코드 작성란에 가이드라인의 코드를 그대로 복사/붙여넣기하거나, 직접 코드를 타이핑해 작성하실 수 있습니다.

아래 HTML, CSS, JS 코드를 각각의 탭 별로 복사/붙여넣기 해보세요 🧑🏻‍💻


HTML 탭에 붙여넣기
<body>
  <h1>My 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 = '이름을 입력해주세요.';
  }
});

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


3. 실시간 결과 확인​

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

방금 HTML 탭에 붙여 넣은 <h1>My Name</h1>에서 My Name을 코드프렌즈로 변경해보세요 👩🏻‍💻


이렇게 실시간으로 코딩 결과를 확인하면서 웹 코딩 기초 지식을 배우고, 실생활에 활용하는 웹사이트를 실제로 만들어볼 수 있습니다.

아래 완료 버튼을 누르고, 다음 수업으로 이동해 보세요 🚀