lesson1Title

lesson2Title

webIntroOtChapter1Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

# 코드프렌즈 사용법

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

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

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

<br />

## 1. 학습 자료

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

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

<br />

## 2. 코드 작성

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

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

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

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

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

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

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

<br />

```html title="HTML 탭에 붙여넣기"
<body>
  <h1>Name</h1>
  <button id="showButton">이름 입력하기</button>
  <p id="greeting"></p>
</body>
```

```css title="CSS 탭에 붙여넣기"
button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
```

```javascript title="JavaScript 탭에 붙여넣기"
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 = '이름을 입력해주세요.';
  }
});
```

<br />

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

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

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

<br />

## 3. 실시간 결과 확인

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

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

<br />

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

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

코드프렌즈 웹 실습 환경에서 각 섹션의 높이와 너비를 마우스 드래그로 조절하여 학습 자료를 보거나, 코드를 작성하고 결과를 확인하는 데 편리하게 사용할 수 있습니다.

### 코드프렌즈 웹 실습 환경에서는 각 섹션의 높이와 너비를 마우스 드래그로 조절할 수 있다.